I have six links inside a 100% width DIV.
How can I stop my links from stacking on top of each other, moving, down, and disappearing as I shrink the size of my browser? I would like to have them remain inside the horizontal div.
Here is my code:
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
}
.logo {
width: 317px;
height: 84px;
float: left;
background: url('img/lifesign.png');
}
.navlink {
height: 84px;
font-family: 'open_sansbold';
color: #FFF;
text-align: center;
line-height: 84px;
padding-left: 22px;
padding-right: 22px;
float: right;
font-size: 80%
}
<div class="nav">
CONTACT
GET INVOLVED
Q+A
HOW IT WORKS
WHO WE ARE
<a class="logo" href="home.htm"></a>
</div>
Set a min-width on your .nav class.
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
min-width: 960px; /* or whatever width you need */
}
I think the ideal here would be to create a div of fixed width (id of 'page' below) to contain your nav and other page elements. I also took the liberty of cleaning up some of the structure of the nav itself, as well as some of the more unnecessary rules. I think a list is ideal here. You may want to reverse the order of it since you are floating right but otherwise it works great.
<html>
<head>
<style>
body { text-align: center; }
#container { width: 960px; margin: 0 auto; }
#nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; }
#nav li { float: right; }
#nav li.logo { float: left; }
#nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; }
#nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li class="logo"></li>
<li>CONTACT</li>
<li>GET INVOLVED</li>
<li>Q+A</li>
<li>HOW IT WORKS</li>
<li>WHO WE ARE</li>
</ul>
<div id="main">
<!-- page content here -->
</div>
</div>
</body>
</html>
Related
Please help, I need the white space on the right bar gone and the position of the main content placed at the middle of the page.
What should I do? Any suggestion?
This is my site : http://www.plebonline.co.uk
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
.leftbar {
float: left;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.rightbar {
float: right;
background-color: #333;
width: 10%;
margin: 0;
padding: 1em;
margin-bottom: -5000px;
padding-bottom: 5000px;
overflow: hidden;
}
.maincontent {
padding: 0;
float:left;
margin-left: 10%;
margin-right: 10%;
background-color: #ff00ff;
width: 80%;
}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
There is a div tag close without opening that may be causing the problem.
Change:
<div class="leftbar"></div>
<div class="maincontent"></div>
</div>
<div class="rightbar"></div>
To:
<div class="leftbar"></div>
<div class="maincontent"></div>
<div class="rightbar"></div>
I notice that you didn't put your rightbar and leftbar in any div. In my code here, I remove the right and left bar. You can adjust the code if you want them back.
It's better to add some container to hold all of your element. As you notice the header and the maincontent is inside the div class .container.
Hope this help.
html,body {
margin:0;
padding:0;
height: 100%;
/*
* The container which hold the header and the main content
*/
.container {
width:100%;
position: absolute;
height:1200px;
background:#333;
}
/*
* Header which contain your menu and date
*/
.header {
width:100%;
}
/*
* The main content of your site
*/
.maincontent {
width:80%;
max-width:1000px;
background-color: #fff;
float:left;
left:50%;
height:100%;
margin-left:-500px;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #ea730b;
}
.clock {
color: white;
text-align: center;
padding: 16px 18px;
display: block;
}
</style>
<body>
<div class="container">
<div class="header">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li>Projects</li>
<li>Notes</li>
<li>About</li>
<li>Contact</li>
<li style="float:right" class="clock" id="clock"></li>
<script>
var today = new Date();
document.getElementById('clock').innerHTML=today;
</script>
</ul>
</div>
<div class="container">
<div class="maincontent">
<h1>This is the content</h1>
</div>
</div>
</body>
I'm trying to add code to my site's body but the header just keeps going down whenever I put anything with margin-top, even having ended it.
Already tried to move the header to after the div logo and after the menu. It seems to work better when its after menu. When I had margin-top in #barra, it moves the whole header alongside with it. Already tried everything I remember. Plus, before I close the header, it seems to be alright, but after I close it, it gets all messed up. I suspect it has to do with the menu. Hope you can help me. Thanks.
Header structure
Fiddle
Code:
HTML
<header id="header" class="fluid ">
<div id="mail"></div>
<div id="logo"> </div>
<!-- Menu -->
<div id="menu">
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
#header {
margin-top: 0px;
background-image: url(Imagens/Headercontact.jpg);
height: 21px;
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 0px;
background-image: url(Imagens/logo2.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li {
display: block;
float: left;
margin-left: 57px;
}
#menu a li {
text-decoration: none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display: block;
text-align: center;
}
#barra {
background-image: url(Imagens/semi.jpg);
height: 3px;
margin-top: 15px;
}
Apologies in advance if I misunderstand the issue you're trying to solve, but have you tried:
header {
position: absolute;
top: 0;
left: 0;
}
Delete the float: left in your .fluid rule and set your "#menu" margin-top: 0px; and it jumps back up ... an update of your fiddle
Further more, your menu's ul element look like this
<ul>
<li>Home</li>
which is really wrong, as it should look like this
<ul>
<li>Home</li>
So I recommend to do some clean up work and get elements correct coded, as these issues can cause very unpredictable results.
The divs are not stacking correctly in your page because some floated elements are not being properly clearfixed, causing the divs to float in into each other (in this case, your header and some inner elements). To fix this, I removed the float: left property from your .fluid class and wrapped your floated header elements inside a .clearfix class so they remain in a row.
CSS
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
display: block;
}
#header {
margin-top: 0px;
background-image: url(https://i.imgur.com/1ijUhkZ.jpg);
height: 21px;
}
#mailtext {
margin-left: 450px;
float: left;
font-family: "Adobe Devanagari";
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#teltext {
margin-left: 40px;
font-family: "Adobe Devanagari";
font-weight: bold;
font-size: 18px;
float:left;
color: #FFFFFF;
position:absolute
}
#logo {
width: 220px;
height: 210px;
margin-left: 162px;
margin-top: 2px;
background-image: url(https://i.imgur.com/6u97lQ7.png);
position: fixed;
}
#menu {
margin-left: 320px;
margin-top: 190px;
}
#menu li{
display:block;
float:left;
margin-left:57px;
}
#menu a li{
text-decoration:none;
color: black;
font-size: 18px;
font-family: Georgia;
width: 65px;
height: 29px;
display:block;
text-align:center;
}
#menu a li:hover{
background-image: url(https://i.imgur.com/IH2Zg9N.png);
width: 65px;
height: 29px;
display:block;
color: white;
}
#barra {
background-image: url(http://i.imgur.com/S7Qt9Mn.jpg);
margin-top: 190px;
height:30px;
}
HTML
<!-- Cabeçalho e logo -->
<header id="header" class="fluid">
<div class="clearfix">
<div id="mail"></div>
<span id="mailtext"> Email: hotelsolemar#grupofbarata.com</span>
<div id="tel"></div>
<span id="teltext">Tel: (+351) 289 580 080</span>
<div id="logo"> </div>
</div>
<!-- Menu -->
<div id="menu">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Serviços</li>
</a>
<a href="#">
<li>Galeria</li>
</a>
<a href="#">
<li>Notícias</li>
</a>
<a href="#">
<li>Sobre</li>
</a>
<a href="#">
<li>Contato</li>
</a>
</ul>
</div>
</header>
<!-- Corpo parte 1 -->
<div id="barra"></div>
Demo: https://jsfiddle.net/8bbfyds3/4/
I am recently new to CSS and HTML and I have a problem while allocating my block under the header:
I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
<meta name="description" content="Description of your site goes here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
<div class="topmenu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
And my CSS CODE:
body {
font-family: sans-serif,Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
float: left;
padding: 42px 0px 0px 0px;
position: center;
}
.header {
position:absolute;
top:42px;
margin-left:-500px;
left:50%;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1{
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
position:absolute;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Thanks
I have made several changes to your html/css:
body {
font-family: sans-serif, Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
margin: 0 auto;
}
.header {
position: relative;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px;
/* Here is the trick... line-height = image height */
}
.topmenu {
position:relative;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
padding-right: 8px;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
<body>
<div class="page">
<div class="topmenu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>What's New
</li>
<li>Services
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Links
</li>
</ul>
</div>
<div class="header">
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
</body>
You need to understand three things to improve your html & css skills:
Always follow natural stacking order (first element in html will
display before second element...),
Don't use position: absolute
except if you know what you are doing as #Billy said,
Use html5 tags if you don't need to support IE8 and below. If you do, then use HTML5
Shiv to make them compatible.
Now here is a valid code that is also responsive (it will resize to your browser's viewport size). I have added a lot of comments in the code so that you can easily understand.
Good luck with your project!
.page {
width: 100%; /* Makes the page responsive */
max-width: 1000px; /* all the content inside this div will be 1000 px width */
margin: 0 auto; /* To center your page div in the page */
}
.topmenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.topmenu ul li a {
display: block;
float: left;
width: 14.2857142%; /* 100 / 7 (number of menu items) */
background-color: #000;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
padding: 10px 0;
text-align: center;
}
.topmenu ul li a:hover {
/* As a general rule, never use images for hovers */
background-color: #fff;
color: #000;
}
.topmenu:after { /* This is a clearfix to clear your floated elements */
content: "";
display: table;
clear: both;
}
header img {
display: inline-block;
width: 250px;
height: 190px;
}
header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 25px;
color: black;
vertical-align: top; /* if you want the text to start at the top of the picture. Otherwise try middle or bottom */
}
<div class="page">
<!-- always start with the first element on your page: here it's your navigation -->
<nav class="topmenu"> <!-- use html5 tags. If you need to support IE8 or below you can use HTML5 Shiv -->
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</nav>
<header> <!-- same, use html5 tags -->
<!-- As a general rule, css is for styling not html so don't put any width, height or style in img tag -->
<img src="http://placehold.it/250x190" alt="your picture description"/> <!-- always use alt text in images for accessibility purposes -->
<h1>SOME TEXT HERE</h1>
</header>
</div> <!-- don't forget this div that closes your .page -->
Remove all of your absolute positioning (and add in the missing </div> tag to finish the .page div - I'm assuming this is wrapping all of your content inside).
To center your content, replace your .page CSS rule with this:
.page{
width: 1000px; // I would reccommend using 960px instead as it is more standard
margin: 0 auto;
//add your padding in if you need it
}
Don't use absolute positioning until you understand it and why/how/when you should use it
I think you should rearrange your HTML markup.It doesn't seem like you are using the proper nested rule.I suggest you try to remove the img tag outside the h1 tag.Your div with class = "page" doesn't have a ending tag.
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.
This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
here's my css code:
body{
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;
height: 29em;}
#header{
height: 60px;
overflow: hidden;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#personalised p {
float: left;
width: 20%;
margin-top:5%;}
#navigation{
margin: 1%;}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}
div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}
I know this is long, but I'd really appreciate your help. Thanks in advance
Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/
<head>
<style>
div {
border: 1px dashed #FF0000;
}
body {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#header {
min-height: 60px;
overflow: hidden;
margin: 1%;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#navigation{
margin: 1%;
float: right;
}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
list-style: none;
}
#navigation ul li {
margin: 0px;
padding: 0px;
display: block;
position: relative;
float: left;
}
#navigation li ul {
display: none;
}
.body {
clear: both;
}
#personalised {
margin: 1%;
float: left;
width: 20%;
}
#content {
margin: 1%;
float; right;
min-height: 29em;
}
#personalised p {
margin: 0px;
padding: 0px;
}
#header, #footer, #navigation, #personalised {
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
<div class="clear"></div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
<div class="clear"></div>
</div>
<div class="body">
<div id="personalised">
<p>Hey there</p>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.
I think the culprit is this:
#content {
overflow: auto;
height: 29em;}
You are explicitly setting the height of the content div. Try setting it to inherit.
Here is a fiddle where the container grows according to the number of elements in it:
http://jsfiddle.net/pUb6q/2/
Uses your layout. The changes are
#content {
border:1px solid black;
float: right;
overflow: auto;
height: inherit;
}