I wouuld like to make the logo appear larger and centered above the navbar. Any help will be greatly appreciated.
Here's the code: https://jsfiddle.net/ou51rksb/1/
<body class="home">
<!-- wrapper -->
<div id="wrapper" class="win-min-height">
<header id="block01g" class="header block background01" zp-module="Header">
<div class="container header_block">
<a class="navbar-brand" href="#">
<img class="blacklogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
<img class="whitelogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
</a>
</div>
</header>
</div>
</body>
Use position:absolute; for navbar-brand. Add this to your css:
.header_block{
position:relative;
padding:0;
padding-top:45px;
}
.navbar-brand{
position:absolute;
top:0;
left:50%;
height:70px;
transform:translate(-50%,0);
}
.navbar-brand img{
height:100%;
margin:0 auto;
display:block;
margin-bottom:100px;
}
Here's a fiddle. You have set some padding at the top of your body. which you can remove. that will get your logo aligned to the top.
Please replace this css
#block01g .navbar-brand {
display: block;
float: inherit;
margin: 0 auto;
padding-bottom: 0;
padding-right: 0;
text-align: center;
width: auto;//you add width for logo
}
try with this i have centered your logo simply , is this what you need ?
.navbar-brand {
display: block;
float: none;
font-size: 18px;
height: auto;
margin: 0 auto;
}
http://jsfiddle.net/ou51rksb/12/
Related
I know this is a common problem, but I can't get my header the same size like my screen.
I already tried to wrap the header into another div and make width: 100%. This didn't help.
Thanks for your help!
body {
font-family: 'avenirregular';
padding: 0;
margin: 0;
background-color: #f4f4f4;
width: 100%
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
/* Header **/
header {
background: #16205E;
color: #ffffff;
padding-top: 30px;
min-height: 7.5vh;
border-bottom: #2B8AFF 3px solid;
display: table-cell;
vertical-align: middle;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
vertical-align: top;
padding: 0 20px 0 20px;
}
header #branding {
width: 20%;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
header #home img {
width: 100%;
height: 100%;
}
header nav {
float: right;
margin-top: 20px;
}
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
Just remove the display:table-cell from the header
body{
font-family: 'avenirregular';
padding:0;
margin:0;
background-color:#f4f4f4;
width:100%
}
/* Global */
.container{
width:85%;
margin:auto;
overflow:hidden;
}
/* Header **/
header{
background:#16205E;
color:#ffffff;
padding-top:30px;
min-height:7.5vh;
border-bottom:#2B8AFF 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
vertical-align:top;
padding: 0 20px 0 20px;
}
header #branding{
width:20%;
float:left;
padding-top:0px;
padding-bottom:20px;
}
header #home img{
width:100%;
height:100%;
}
header nav{
float:right;
margin-top:20px;
}
<body>
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
</body>
I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.
Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.
Every page must have a wrapper div to wrap all of your html.
Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.
The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)
To get all your elements inline, investigate these functionalities based on what works best for you.
https://www.w3schools.com/css/css_inline-block.asp ->inline-block
and
https://www.w3schools.com/css/css_float.asp ->float
Then apply the appropriate style to your div elements inside the surrounding div.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
#media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
#media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
header{
display:inline-block;
width:100%;
}
You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.
I am trying to make a navigation bar in the top of my website and my logo appears but the "home" doesn't when i try to float left. What am I doing wrong?
When I make the site as small as it will go, it appears left of the logo, but I want it to be to the right.
<html>
<head>
</head>
<style>
body{
margin: 0px;
padding: 0px;
}
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
#logo-item{
float: left;
margin-left: 90px;
padding-top: 10px;
}
.menu-item{
float: left;
margin-top: -28px;
font-size: 110%
margin-right: 20px;
font-color: white;
}
.topBarItems{
}
</style>
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
</html>
Here is your code with a few edits:
<body>
<div id="topBar">
<img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
<div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
</div>
</body>
Also edited your CSS a bit:
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{
}
But, instead of doing everything from scratch, you may just want to use a framework such as Bootstrap : http://getbootstrap.com
Here is a fiddle for it: https://jsfiddle.net/windrunn3r1990/fck4zsue/
There are several problems with this HTML
First you have the style tag between the head and body tag, it should go inside the head tag - which may cause strange behavior or simply not work depending on the browser
You are using a margin of -28px, which effectively moves the inner div above the outer div which in turn renders it invisible (as it is above the visible page).
font-color should be color
You can solve your issue by using display:inline-block; rather than floating components. https://jsfiddle.net/oxycm856/
HTML
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
CSS
#topBar{
width:100%;
background-color:#242424;
height: 63px;
}
#logo-item, .menu-item{
display:inline-block;
color:#fff;
}
What's the best way to align my arrow graphic in the middle and also touching the bottom of the bar above?
Right now it's aligned to the left and there is space between the top bar and the arrow.
See my jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/26/
Here's my HTML
<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
</div>
<!-- End Form -->
Here's my CSS:
/* 2 Column */
.wrapper-twocol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
.twocol_row {
height:100%;
white-space:nowrap;
}
.twocol_cell1, .twocol_cell2 {
height:100%;
width:47%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 6%;
}
.twocol_cell1{
margin-left: 0;
}
.form-header {
background:#939598;
margin:0;
padding: 10px 0 10px 0;
color: #fff;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 21px;
text-align: center;
}
.form-arrow {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Change you styling slightly. Your div is the entire width of it's parent so you just need to center align that divs contents.
DEMO http://jsfiddle.net/Z7dZR/27/
.form-arrow {
margin: 0 auto;
text-align: center;
margin-top: -2px;
}
I'd suggest the following solution.
First, wrap arrows within a wrapper-div:
<div class="wrapper arrowWrapper">
<div class="form-arrow">
<img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
</div>
</div>
Second, apply following CSS:
.arrowWrapper {
width:209px; /*It's the width of the buttons calculated by the developer tools*/
}
.form-arrow {
margin:-3px auto 0 auto;
width:11px; /*width of the arrow*/
}
You can do it with css only (removing the arrow image and its wrappers from the markup)
using the ::after selector. That's how you will prevent repeating of the tag and the wrappers.
.form-header::after{
content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
position: absolute;
left: 50%;
bottom:-18px;
}
Here is the Demo: http://jsfiddle.net/7H5ea/1/
I have the following Html Markup in my website:
<div id="header">
<div class="flyoutMenuButtons visible-phone">
<i class="icon-reorder icon-3x"></i>
<i class="icon-reorder icon-3x"></i>
</div>
<div id="logo_and_search">
<a id="logo" href="/" title="abc">
<img src="abc.png" height="40" width="136">
</a>
</div>
</div>
I would like the logo to be diaplayed in center for all device widths.
What style shall I apply to the "#logo" element in order make it display in center for all devices other than desktops and tablets?
use like this:
a#logo{
display: block;
text-align: center;
}
a#logo img{
display: inline-block;
}
something like this but if you give fiddle example it be fine
#logo_and_search {
width:100%;
}
#logo {
display: block;
margin: 0 auto;
}
#logo {
display: block;
width:136px; /* the same as the logo*/
margin: 0 auto;
}
Basically there are two images that are supposed to be on the center of the page and when the page is made smaller those images need to stack vertically. Currently I can get them to scale vertically, but I don't know how to center them. If I use margins or padding they stay in their position when the page is shrunk and don't look very good. I need them to move towards the edge as the page is being shrunk and then stack once the width of the page is too small. I'm doing this so they display properly on mobile and smaller resolutions. Does anyone know the best way to do this?
Here is the html:
<body>
<div class="wrapper">
<div class="wordmark">
<a href="#">
<img src="........." />
</a>
</div>
</div>
<div class="logowrap">
<div class="row">
<ul class="thumbnails">
<div class="logo1">
<li class="span6 home-left">
<a href="#">
<img src="SDI-logo.png" alt="SDI-logo" />
</a>
</li>
</div>
<div class="logo2">
<li class="span6 home-right">
<a href="#">
<img src="Debate-Logo.png" alt="SDI-logo" />
</a>
</li>
</div>
</ul>
</div>
</div>
</body>
Here is the CSS:
.navbar {
background-color:#000;
}
.container{
background-color:transparent;
}
.wrapper {
background-color:#000;
}
.wordmark{
max-width:100%;
max-height:100%;
padding-left:15px;
}
.logo1{
float:left;
.logo2 {
float:inherit;
}
.logowrap{
}
I have changed your code a bit. Take a look here and see if that helps you (http://jsbin.com/UdODawI/1/)
.thumbnails {
width: 100%;
margin: 0 auto;
list-style-type: none;
}
.wrapper {
background-color:#000;
}
.logowrap {
margin: 0 auto;
text-align: center;
}
.logo1{
display: inline-block;
}
.logo2 {
display: inline-block;
}
try adding this css to your image
.thumbnails img {
max-width:100%;
height: auto;
}
this allows your images to resize according to its parent