If I run the markup as it is now the <li> element is not within the <ul> element.
But if I add this style display:block; to #nav a so the complete #nav a declaration looks like this then the <li> element is within <ul>.
#nav a {
display:block;
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
Can anybody explain why the <li> element is within the <ul> when I add display:block to #nav a?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0;
padding:0;
}
#nav {
float:left;
width:100%;
margin:0;
padding:10px 0 0 46px;
list-style:none;
background:#FFCB2D;
}
#nav li {
float:left;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a {
/* display:block;*/
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
#nav a:hover {
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
</style>
<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
</body>
</html>
I update your code...
see following http://jsfiddle.net/LUzbR/
HTML
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
CSS
body
{
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0px;
padding:0px;
}
#nav
{
float:left;
width:100%;
margin: 0px;
padding:10px 0px 0px 46px;
display: block;
list-style:none;
background:#FFCB2D;
}
#nav li
{
float:left;
display: block;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a
{
/* display:block;*/
margin:0px;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
display: block;
}
#nav a:hover
{
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
You're floating the #nav element on the left, so all <li> elements will appear outside of that container. Try adding overflow: hidden; to your #nav for starters, although there's probably more that could be done to clean up your CSS.
Without adding display: block, a elements are treated as display: inline. As such, when calculating the size of their parents (height is default to auto), the padding of the a element is omitted, while it is included in cases of display: block.
Related
Whenever I resize my screen, everything on screen stays where it is and a scroll bar appears... except for the my horizontal list. It keeps moving along with the screen and then becoming multiple layers and messing up. Is there a way for me to keep the list from moving? Previously I tried adding {white-space: nowrap} to the #primary_nav_wrap ul item. However, this then causes the drop down under "committee" to become a horizontal drop down rather than a vertical drop down menu. Is there a way to simply make the entire list not move and an the same time not cause the drop down to change? Could I just affect the parent and not the child?
Here's the CSS
#topbar{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin: auto;
top:0;
}
#topbar2{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin:auto;
top:10em;
z-index:-1;
}
#title{
font-family:basic title font;
color:#ffffff;
position: absolute;
top:-0.6em;
font-size:1.6em;
left:17.4em;
z-index:1;
white-space: nowrap;}
#logo {
position:absolute;
top:2.6em;
left:36.5em;
z-index:1;
width:9em;
}
#text
{font-family:basic title font;
color:#636363;
position: absolute;
left:8em;
top:0.2em;
font-size:4em;
min-width:100%
z-index:1;}
#text2
{font-family:basic title font;
color:#636363;
position: absolute;
left:11.6em;
top:0.2em;
font-size:4em;
z-index:1;}
body {
color: #fff;
font-family: 'open sans';
font-size: 1.1em;
text-align: center;
text-decoration:none;
font-weight:100;
display:inline;
overflow-x:none;
overflow-y: scroll;
}
#primary_nav_wrap
{
margin-top:15px
z-index:100;
}
#primary_nav_wrap ul
{
list-style:none;
position:absolute;
float:left;
margin:0;
top:10em;
left:7em;
padding:0;
text-align:center;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: 'open sans';
font-weight:100;
font-size: 0.9em;
color: #ffffff;
text-align:center;
padding-top:0.3em;
padding-bottom:0.3em;
padding-right:4em;
padding-left:4em;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0%;
text-align:left;
background-color:#636363;
z-index:100;
}
#primary_nav_wrap ul ul li
{
float:none;
width:187px;
padding-left:1em;
padding-right:1em;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
.hvr-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
box-shadow: inset 0 2px 10px -5px #000000;
background-color: #2098d1;
color: white;
z-index:1
}
#bottomtext {
position:absolute;
bottom:-83%;
left:43%;
font-family:"myriad pro";
font-weight:300;
color:black;
font-size:0.8em;
z-index:10000;}
#bottomtext2 {
position:absolute;
bottom:-89%;
left:44%;
font-family:"myriad pro";
font-weight:200;
color:black;
font-size:0.6em;
z-index:1000000}
#bottom {
width:100%;
height:15%;
background-color: white;
position:absolute;
bottom:-88%;
z-index:1000;
}
And HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="execs2.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="all,index,follow" />
<title>KAS</title>
<meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />
</head>
<body bgcolor="#F0F0F0">>
<p id="title">SOUTHERN TAIWAN MODEL UNITED NATIONS</p>
<p id="intro"></p>
<p id="text">20 </p>
<p id="text2">15 </p>
<p id="bottomtext">Kaohsiung American School <br>
www.kas.tw </p>
<p id="bottomtext2">(c) 2015 by STMUN PRESS TEAM</p>
<div id="bottom"></div>
<img id="logo" src="images/logo2.png">
<div id="topbar"></div>
<div id="topbar2"></div>
<div id="midbar2"></div>
<div id="midbar3"></div>
<div id="bar"></div>
<div id="bar2"></div>
<div id="box"></div>
<div id="textbox"></div>
<nav id="primary_nav_wrap">
<ul>
<li class="hvr-fade" class="current-menu-item">HOME</li>
<li class="hvr-fade" >INTRODUCTION</li>
<li class="hvr-fade">COMMITTEES
<ul>
<li class="hvr-fade">Security Council</li>
<li class="hvr-fade">CDIS</li>
<li class="hvr-fade">ECOSOC</li>
<li class="hvr-fade">HRC</li>
<li class="hvr-fade">General Assembly 1</li>
<li class="hvr-fade">General Assembly 2</li>
<li class="hvr-fade">General Assembly 3</li>
</ul>
<li class="hvr-fade">CONTACT</li>
<li class="hvr-fade">NEWS</li>
<li class="hvr-fade">MORE</li>
</ul>
</nav>
</body>
</html>
THANKS!!
You were almost there.
Add as you did
#primary_nav_wrap
{
white-space: nowrap;
....
}
And add also
#primary_nav_wrap ul ul li
{
float:left;
....
}
Instead of
#primary_nav_wrap ul ul li
{
float: none;
....
}
Regards.
If you dont want the LI to resize, just put it in a div tag and set the style of the div something like width= 200px etc. if you want it to resize to a base point then stop then in the style use something like min-width= 150px
I'm currently experiencing an issue where my ul is being pushed out of my div. I have played with the margin, border, and padding on all the objects that might be affecting it with no success as of yet, here is the current code:
HTML:
<div id="nav">
<ul id=mainNav>
<li class=mainNav><a>Home</a></li>
<li class=mainNav><a>Products</a></li>
<li class=mainNav><a>Stores</a></li>
<li class=mainNav><a>About Us</a></li>
<li class=mainNav><a>Contact Us</a></li>
<li class=mainNav><a>Pet Pics</a></li>
</ul>
</div>
</div>
<div id="subBar">
<div id="subNav">
<ul id=subNavl>
<li class=subNav><a>Home</a></li>
<li class=subNav><a>Products</a></li>
<li class=subNav><a>Stores</a></li>
<li class=subNav><a>About Us</a></li>
<li class=subNav><a>Contact Us</a></li>
<li class=subNav><a>Pet Pics</a></li>
</ul>
</div>
</div>
CSS:
#header{
width:1000px;
background-color:#B443B7;
border-radius:200px;
height:50px;
margin:auto;
margin-top:0px;
margin-bottom:opx;
}
h1{
display:inline;
color:white;
margin-left:20px;
font-family: 'Indie Flower', cursive;
}
h1, a{
text-decoration:none;
color:#B443B7;
margin-top:auto;
margin-bottom:60px;
}
#subBar {
height:20px;
padding-top:10px;
width:875px;
margin-right:auto;
margin-left:auto;
background-color:#F4F459;
color:black;
border-radius: 0px 0px 200px 200px;
}
#nav {
margin:auto;
}
#subNav {
margin:auto;
}
#mainNav {
list-style-type:none;
}
.mainNav {
display:inline
}
.mainNav a {
display:inline-block;
height:35px;
padding-top:15px;
color:white;
width:100px;
text-align:center;
font-family:arial, sans-serif;
font-size:16px;
}
.mainNav a:hover{
background-color:#F4F459;
color:black;
}
#subNavl {
list-style-type:none;
}
.subNav {
display:inline
}
.subNav a {
display:inline-block;
height:30px;
margin-top:0px;
padding-top:0px;
color:black;
width:80px;
text-align:center;
font-family:arial, sans-serif;
font-size:16px;
}
And here's a screen shot of the results:
It would be much appreciated if someone could help me in resolving this problem.
http://jsbin.com/gorabonoqe/1/
I dropped your code in a JSBin and didn't look exactly like your screenshot but I think I was able to address the area you were trying to fix (the text dropping out of the yellow bar).
There's a lot of potential issues going on here. For one, all <a> elements have a bottom margin of 60px. I think that's what was throwing you off the most. I also changed the padding on #subBar and added a margin:0 on #subNavl.
Take a look at the jsbin link above and see if that's helpful.
Just to let you know .. when you work with ul > li > a
ul{
list-style: none;
list-style-type: none;
margin : 0;
padding: 0;
}
ul > li{
display : inline-block;
}
ul > li > a{
display: block;
height: 100%;
}
this way will make everything comes easy in your ul code
You set the height of that div, #subBar, to 20px and the browser is obeying that.
I am trying to duplicate http://csswizardry.com/demos/centred-nav/ but make the menu at the top of the screen. I have reviewed some of the tutorials on w3schools and a few others but still cant figure out why it is not going to the top to begin with. Below is the my style.css
body {
width:960px;
top:0px;
padding:10px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:102px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
Below is index.html
<!DOCTYPE html>
<html>
<head>
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="topnav">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Anyone see what I am doing wrong?
Change
#nav a {
display:inline-block;
padding: 102px;
}
to
#nav a {
display:inline-block;
padding: 0 102px 0 0;
}
and probably add in this too to remove the right side padding from the final child element
#nav a:last-child {
padding:0;
}
You're applying 102px padding all around the a tags, needs to just be on the right side :)
body {
width:960px;
top:0px;
/*############ change padding from 10px to 0px ##########*/
padding:0px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
There was more padding for #nav a{}
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}