I am designing a header and have a few questions about the issues I have.
The demo is here and the code is below, any help would be much appreciated.
.menu {
position: relative;
width: 100%;
height: 66px;
max-height: 90px;
background: green;
}
.menu img {
max-height: 30px;
}
.menu ul {
left: 0;
margin: 0 auto;
width: 80%;
margin: -30px auto 0 auto;
font-size: 16px;
font-weight: bold;
max-width: 1200px;
}
.menu ul li:first-child {
border-left: 1px solid gray;
}
.menu ul li {
//
width: 140px;
width: 14%;
display: block;
float: left;
text-align: center;
border-right: 1px solid gray;
color: white;
height: 50px;
line-height: 70px;
vertical-align: bottom;
}
.menu ul li a {
color: white;
}
.menubtn {
width: 30px;
height: 30px; //
opacity: 0.5;
cursor: pointer;
}
.menubtn .fa {
font-size: 26px;
color: rgb(75, 0, 130)
}
#menubtn {
position: absolute;
top: 2px;
left: 4px;
}
#media only screen and (min-width: 501px) {
.topbar {
display: none;
}
.menu ul li a {
font-size: 14px;
}
#mybody {
margin-top: 8%;
}
}
#media only screen and (max-width: 1200px) {
.menu ul li a {
font-size: 12px;
}
}
#media only screen and (max-width: 888px) {
.menu ul li a {
font-size: 12px;
}
}
#media only screen and (max-width: 685px) {
.menu {
height: 40px;
}
.menu ul {
margin: 0;
}
.menu img {
display: none
}
.menu ul {
width: 100%;
}
.menu ul li {
line-height: 40px;
height: 40px;
font-size: 13px;
}
}
#media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
.menu {
display: none;
}
}
#media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {
.menu {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
</head>
<body>
<header>
<div class="container-fluid">
<div class="row" style="background-color: lightblue;">
<div class="col-md-8 col-sm-8 col-xs-1">
<div id="banner" style="margin-left: 59%;">
<img height="25px" width="25px" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRROdI3yg-dOO1Wl56Ci6AHheWnzUA6j01oJDvxaUNViODWLpLX" />
<img height="40px;" width="253px;" src="http://staticx.ibncollege.com/wcsstore/ExtendedSitesCatalogAssetStore/907_90722_1_21939/images/FULLIMAGE_88753.jpg" />
</div>
</div>
<div class="col-md-2">
<div id="images" style="float: right;">
<a class="btn btn-social-icon btn-sm btn-facebook" style="text-align: center;" href="#"> <i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-sm btn-twitter" href="#"> <i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-sm btn-google-plus" href="#">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 search-container">
<form id="searchbox" role="form" action="#" method="GET">
<div class="col-md-4 col-sm-12 col-xs-12 searchbox">
<div class="ui-widget">
<input id="Name" name="name" class="form-control searchinput" type="text" placeholder="name" value="">
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<input id="family" name="family" class="form-control searchinput" type="text" placeholder="family" value="">
</div>
<div class="col-md-2 col-sm-2 col-xs-1">
<button style="background-color: blue; border-radius: 14px; border-style: solid;" class="btn-search" type="submit" title="Search">
<div style="background-color: blue;">
<span class="glyphicon glyphicon-search"></span>
</div>
</button>
</div>
</form>
<div style="float: right; text-align: right;" class="col-md">
Click1 Click2
</div>
</div>
</div>
</div>
<div class="hidden-xs">
<div class="menu">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTnYmtXUnZ6g5TwfPndnVQMcVdJO8qkSJqm-dPkNRJ_13IaeTP6Pw" style="width: 100%; max-height: 40px;">
<ul id="idmenu">
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
<li>Item5
</li>
<li>Item6
</li>
<li>Item7
</li>
<li>Item8
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
The way I want it to be is as following:
As you can see I have a logo at the right side of the search box, that is from top of the page to the bottom of the search box.
A banner in middle, three social media links and two links that are positioned in slightly right bottom side of the social media links.
I also have a white image on top of the menu that will be replaced with a proper image.
(I am not creating the menu using nav because of that image that should be on top of the menu;therefore, I have problem with mobile size screen as well, need to do that manually therefore, help to design that with nav would also be appreciated)
I was asked to narrow down the requirement,
I need to put the logo in the location that is shown in the screen shot, not where it is, (it is now at the left side of the banner - please click on 'demo is here' link to see).
Also need to create a hamburger style menu for mobile screens, as I am not using nav it is difficult to achieve. If you know how to solve the issue with nav I would appreciate it, as you can see the current menu is not based on nav.
I need it to be responsive, so if you make any changes I would be grateful if you could consider that.
To start with, for a hamburger style menu on mobile devices I highly recommend FlexNav.
Now, most of what you are trying to do can be accomplished by adding some extra divs, I will explain:
The whole idea of a responsive design is that items are stacked on top of each other, and when you get to a certain point (breakpoint) they float up to sit beside other elements.
The above example shows what would happen if all containers were made float: left; at the widescreen breakpoint.
All of the elements that you want to float next to other elements need be inside the same container. In your case that means one container should have your logo in it, the next container should have your banner, input fields and search box, and the last container should have your social links. Or if you want the social links near the top on mobile you could use float: right; instead of float: left; and put them in an earlier container.
To have your form elements next to each other, they will need width of 50% or less. Percentages work very well for responsive theming.
Finally, if you're planning to do a lot of responsive theming there are tools out there than can be a bit challenging to set up and learn, but make the whole process MUCH smoother such as:
SASS (requires Ruby or an application)
Singularity Grids
Susy (similar to Singularity)
Well, as I always said it’s faster, easier and, specially cleaner, to NOT use boostrap when you want to translate your design to web. Bootstrap is a tool to make fast responsive webs under Twitter own design. It’s good but NOT miraculous. IF you want your own designs on webs you NEED to know css, whatever to modified bootstrap or do it from scratch (and if you know css then you woudn’t use bootstrap too much).
I will start from scratch.
It’s easier when you start with your html layout without, yet, adding the main elements:
<header>
<div class="container-menu-top">
<div class="menu-top">
<div class="menu-top-center">
<div class="icons-left">
</div>
<div class="container-login">
<div class="logo">
</div>
<div class="login">
</div>
</div>
</div>
<div class="menu-top-right">
<div class="social">
</div>
<div class="links">
</div>
</div>
</div>
</div>
<div class="container-menu-bot">
<div class="menu-bot">
</div>
</div>
</header>
And then you add css’s to position the layout correctly (and better if you use colors to make it easier to check everything is ok):
body {margin:0; padding:0;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container-menu-top {
width:100%;
background-color: aqua;
height:160px;
}
.container-menu-bot {
width:100%;
background-color: aqua;
height:60px;
margin-top:40px;
}
.menu-top, .menu-bot {
max-width:970px;
width:100%;
height:100%;
background-color: green;
margin:0 auto;
text-align:center;
position:relative;
}
.menu-top-center {
display:inline-block;
background-color: red;
width:50%;
height:100%;
}
.menu-top-right {
display:inline-block;
float:right;
height:100%;
background-color: violet;
width:150px;
}
.icons-left {
width:10%;
float:left;
background-color: blue;
height:100%;
}
.container-login {
width:90%;
float:left;
background-color: brown;
height:100%;
text-align:left;
}
.logo {
height:20%;
background-color: orange;
}
.login {
height:80%;
background-color: yellow;
}
#media only screen and (max-width: 600px) {
.menu-top-center {width: calc(100% - 150px);}
}
As you can see in this FIDDLE in progress, everything makes sense, and is responsive just adding a single line of media queries .The social panel won’t change it’s width so at 600px (you may set your desire break width) width, I have changed the menú-top-center to get all the parent width but the social container. Notice, please I also made de main container to be of a máximum width of 970px (as in your example)
Also, I have set some heights just to be able to check the layout, later on I will delete many properties as the content will set the right height.
Now it’s time to put the elements inside their html containers.
Icons to the left of your login adding the images at the html and as css. Right atm they are on a container responsive so the images inside will change their width as you resize window. If you want a fixed size then give to the container a width on px and to the container-logina width with, again width:calc(100% - yourwidthpx); :
.icons-left img {
width:100%;
display:block;
padding:5px;
}
Your “logo” image in the html with your desired size (removing now the height of his parent):
.logo img {
height:40px;
width:253px;
max-width:90%;
display:inline-block;
}
Your login inputsinside login div (removing now the height of his parent) and the mediaquery to make it resposnive:
.login input, .login button {
display:inline-block;
}
.login input {width:35%;}
#media only screen and (max-width: 600px) {
.login input {width:100%;}
}
Your social icons (I recomend you to insert them as a list in the html):
.social {}
.social ul {list-style:none;margin:0;}
.social li {
height:30px;
width:30px;
float:right;
background-color: blue;
margin-left:4px;
margin-top:4px;
background-repeat:no-repeat;
background-size:cover;
}
.social1 {background-image: url(http://the-route-to-your-image.com);}
.social2 {background-image: url(http://the-route-to-your-image.com);}
.social3 {background-image: url(http://the-route-to-your-image.com);}
Your Links:
.links {
clear:both;
text-align:left;
margin-top:4px;
}
.links a {
display:inline-block;
}
Then remove heights and background-colors and that’s it: FIDDLE
Of course there are still stuff to do to style your project, after all this is the layout, I will leave some work for You :)
If I have time later tonight I may complete your menu trying to explain how to make it resposive with a “burger” icon.
Trust me, All this is MUCH easier and faster tan overriding and modifying your bootstrap to make it look as you want.
Edited (“burger” menú):
Now let’s make the main menú (base on your image). The html is easy:
<div class="container-menu-bot">
<div class="menu-bot">
<ul id="">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
<div class="burger"></div>
</div>
</div>
Where burger is the icon. We give position:absolute to this container and we hide it using display:none. Then with mediaqueries we show the icon while hidden our list. We also need to change the li’s from display:inline-block to display:block and finally set a min-height to the main container so while the list is hidden you still have the “green” menú nav:
.menu-bot {position:relative;}
.menu-bot a {color:#fff;}
.menu-bot ul {list-style:none; margin:0;}
.menu-bot li {
display:inline-block;
padding:10px 20px;
border-left:1px solid #fff;
}
.menu-bot li:last-child {
border-right:1px solid #fff;
}
.burger {
width:25px;
height:25px;
background-color: red;
position:absolute;
top:7px;
right:7px;
display:none;
}
#media only screen and (max-width: 720px) {
.burger {display:block;}
.menu-bot ul {display:none;}
.menu-bot li {display:block; border:0;}
}
We also add our last class:
.menu-bot .visible {display:block;}
visiblewill just change the display of your list once you click on the burger icon. For that you just need a very simple jquery code:
$(document).ready(function () {
$('.burger').click(function () {
$('.menu-bot ul').toggleClass("visible");
});
});
This could be made with just css and using hover insteed of click, but I find it much better the click event and you future users probably will have a better experience
And that’s it. Quite simple, easy to understand and just a few lines of css.
Final FIDDLE. Good luck with your project
Related
I'm trying to build a template using Twitter Bootstrap. Here is the live example. The problem I'm having is I can get positioned dashboard div next to sidebar menu and I don't know where my mistake is? Can I get any help from experts? This is the HTML:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
Menu
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
dashboard
</div>
</div>
</div>
And this are the styles:
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
.nav-sidebar {
margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
Basically you were offsetting your columns to go beyond the actual grid that Bootstrap offers (the normal grid only has 12 columns but you were extending to, at most, 15 with the offsets). Basically, just beware of going beyond the normal column boundaries and don't use an all around padding, it was shifting one column but not the other.
Take the following out of your code to make it re-align:
CSS:
.main {
/* padding: 20px; */
}
Then rearrange your HTML to the following:
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
Menu
</div>
<div class="col-sm-9 col-md-10 main">
dashboard
</div>
</div>
</div>
DEMO JSFiddle
References:
I'm sure you have seen this before but it never hurts to overlook it again. Bootstrap offers an awesome example of how to use their grid system here.
I am creating one website in which I have created single page. The page displaying perfect in 1366 X 768 screen resolution.
But when I am opening the same page in 1024 X 768 resolution the Buttons and some text goes down.
I want to write a CSS in a way so it adjust or work properly in both the resolution. Below screen shot shows my problem.
In 1366 X 768 Resolution Page Looks Perfct! -> http://i50.tinypic.com/ac6blc.jpg
In 1024 X 768 Resolution Some elements goes down!!! -> http://i50.tinypic.com/2vxnjva.png
Can some one look my code and suggest me changes to make page display properly on both resolution.
Thanks a lot.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/*=======Global Styles==========*/
body {
font-family:Geordia, serif;
margin:0;
padding:0;
}
a {
color:#3E97FB;
}
/*==============Container=========*/
div#container {
position:relative;
width:100%;
}
#header {
position:absolute;
top:5px;
width:100%;
background:#FFFFFF;
}
/*========Header 1=========*/
#header1 {
position:absolute;
background:url(images/images/headerbg.png) repeat-x;
width:100%;
height:111px;
left: 0px;
top: 96px;
}
#header1 #form {
float:left;
margin-left:8%;
margin-top:8px;
height:70px;
width:665px;
}
#form .email {
float:left;
margin-right:190px;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#FFF;
}
#form .password {
float:left;
margin-right:2%;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#FFF;
}
.clear {
clear:both;
}
#form .input {
float:left;
width:200px;
padding:7px 7px;
margin-right:5px;
width:200px;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
#header1 .seprator {
float:left;
margin-left:30px;
background:url(images/images/line.png);
width:2px;
height:72px;
margin-top:15px;
}
#header1 .register {
float:left;
margin-left:6%;
margin-top:8px;
width:280px;
height:70px;
}
.register .noac {
color:#FFF;
font-family:"Trebuchet MS";
font-weight:bold;
text-align:center;
}
.loginbtn {
float:left;
display: inline-block;
width:186px;
height:40px;
}
.advertiserbtn {
display: inline-block;
margin:10px;
}
.publisherbtn {
display: inline-block;
margin:10px;
}
</style>
</head>
<body>
<div id="content">
<div id="header-line"></div>
<div id="header"></div>
<!--End header-->
<div id="header1">
<div id="form">
<div class="email">Email:</div>
<div class="password">Password:</div>
<div class="clear"></div>
<input type="text" class="input" />
<input type="text" class="input" />
<input type="button" class="loginbtn" value="Login" />
<div class="clear"></div>
</div>
<!--From Div End -->
<div class="seprator"></div>
<div class="register">
<div class="noac">Don't have an account yet!</div>
<input type="button" class="advertiserbtn"
value="Free Register" />
<input type="button" class="publisherbtn" value="Premium Registration"
/>
</div>
</div>
<!--End header1-->
<div id="footer"></div>
</div>
<!--End footer-->
</div>
<!--End Content Div-->
</body>
</html>
Use CSS media queries to alter the size of elements as the screen resolution increases. This can be done multiple times to even allow your elements to re size and reorder for mobile/tablet/laptop/desktop screen resolutions. Here is an example:
#media screen and (min-width:1024px) {
.loginbtn {
float: left;
display: inline;
width: 156px;
height: 40px;
}
}
#media screen and (min-width:1366px) {
.loginbtn {
width: 186px;
}
}
Go for a mobile first approach an declare your styles for the smallest width first. Change your widths at your breakpoints.
I think what you want is that the page doesn't get smaller than a specific value.
The easiest way to achieve this is to give you entire page a min-width. A horizontal scroll bar will appear if the window gets to small then.
You should try specifying the dimensions as percentage, instead of all px.
Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?
NOTE - The height of each panel is unknown; wrapper divs may be added to the markup
<body>
<div id="content"></div>
<div id="nav"></div>
<div id="search-results"></div>
</body>
This technique is taken from the question
Make a div display under another using CSS in a totally fluid layout.
It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.
As said in the above question:
This works in all modern browsers, and IE8 if you're careful. It does
not work in IE6/7.
HTML
<div id="wrapper">
<div id="content-wrapper">
<div id="content">content</div>
</div>
<div id="nav-search-block">
<div id="nav-wrapper">
<div id="nav">nav</div>
</div>
<div id="search-results-wrapper">
<div id="search-results">search-results</div>
</div>
</div>
</div>
CSS
#wrapper {
display: table;
width: 100%;
}
#nav-wrapper,
#search-results-wrapper {
float: left;
width: 50%;
}
#nav,
#search-results {
color: #ffffff;
background: #6699ff;
padding: 10px;
margin: 10px;
}
#nav-search-block {
display: table-row-group;
}
#content-wrapper {
display: table-footer-group;
}
#content {
color: #ffffff;
background: #cc0000;
padding: 10px;
margin: 10px;
}
Demo
Now you can do this in javascript
as like this
Javascript
document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;
CSS
#content{
display:none;
}
#one{
background:red;
padding:10px;
clear:both;
}
#nav{
background:green;
float:left;
width:35%;
}
#search-results{
float:right;
width:65%;
background:yellow;
}
HTML
<body>
<div id="content">Content I m first in html </div>
<div id="nav">navi</div>
<div id="search-results">Search-Results</div>
<div id="one"></div>
</body>
Live Demo
I want to center the three divs that appear in the mockup below (all have "float:left").
Is this possible?
I don't mind having wrapper-divs.
Text-align:center and display:inline-block won't work with the code I have.
If you want to center them, you can't float them. A better alternative would be to make them all display: inline-block so you can still stylize them as a block element, and they'll still pay attention to your text-align: center on the parent wrapper. This would appear to be a good solution for the limited example you've provided.
In order to account for browser compatibility, you'd need to change them to <span> rather than <div> before adding the display: inline-block on to them. This would be supported in everything IE7 and up, and all other modern browsers. IE6 would not be supported, but it's only widely used in China anymore.
div#wrapper {
width:960px;
margin: 0 auto;
}
http://jsfiddle.net/WyxHQ/1/
edit:
Moved complete code from fiddle to answer as per suggestion
<div id="outer-wrapper">
<div id="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
HTML
div#outer-wrapper{
border:2px solid black;
padding:10px;
width:100%;
}
CSS
div#wrapper{
width:99px;
margin:0 auto;
}
div {
width:33px;
height:20px;
}
div.one{
background:red;
float:left;
}
div.two{
background:blue;
float:left;
}
div.three{
background:green;
float:left;
}
You can also use a list and get the same results:
CSS:
.wrap
{
border:2px solid black;
width:100%;
}
ul
{
width:99px;
margin:0 auto;
height: 20px;
}
ul li
{
width:33px;
height:20px;
float: left;
margin: 0px;
padding: 0px;
}
ul li.red
{
background-color: red;
}
ul li.blue
{
background-color: blue;
}
ul li.green
{
background-color: green;
}
HTML:
<div class="wrap">
<ul>
<li class="red"> </li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
Try this: http://jsfiddle.net/nvpXx/3/
You can wrap your floated divs with an inline-block element and center it within its parent.
HTML
<div id="main">
<div class="wrap">
<div class="item">thing 1</div>
<div class="item">thing 2</div>
<div class="item">thing 3</div>
<div class="clear"></div>
</div>
</div>
CSS
#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}
Potential Pitfall
This doesn't work well if you have so many floated items that they wrap to a second line. At that point, the div.wrap expands to 100% of its container and as a result everything is off-center.
Try this one, keep it simple:
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>
This will make it responsive although it breaks on some point, it helps to create a media query for the max-width:
<style>
#media screen and (max-width:520px){ ul li{float:none} }
</style>
Fiddle here
Floats, as the name suggests, are completely independent of their containers. So, you cannot center them according to a container, because they will know no container.
Hope this helps:
<body>
<div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">
<div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
<div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
</div>
</body>
What I would do is add a container div for them.
Then add overflow:auto so that the container div wraps around the 3 divs and then set the container div in the center with margin:0 auto.
My markup looks like this:
<div class="header-section">
<img src="logo.png" />
<div class="navigation">
<ul>
<li>Home</li>
<li><a href=#>Bakery</a></li>
<li><a href=#>Fishery</a></li>
<li><a href=#>Casino</a></li>
<li><a href=#>Disney Land</a></li>
</ul>
</div>
<div style="clear:both" />
</div>
and the css that matters is:
.header-section {
margin: 30px 0;
}
.header-section .logo {
float: left;
}
.header-section .logo img{
border: 0;
}
.header-section .navigation {
float: right;
margin-top: 23px;
}
.header-section .navigation ul {
list-style: none;
}
.header-section .navigation ul li{
font-size: 18px;
font-family: Tahoma, Arial, Verdana;
float: left;
margin: 0 20px;
}
So the links are formatted in a horizontal line to the right of the logo.
Initially I had the idea to have them just wrap when the screen real estate did not allow them to be in one line but then what actually happened was that before wrapping, they fell below the logo. I was happy with this until I saw that - ironically - IE rendered it the way I had in mind.
So my question is - how do I get the links to wrap before just snapping below the logo image?
make tag as a block element:
and add width & height..
.header-section a {
display:block;
width:100px;
height:100px;
}
Try putting <img src="logo.png" /> after navigation div end and fix width of both section... It should work