I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 5 years ago.
I'm a newbie to css and have been struggling with the following problem of my code for the whole morning. I would really appreciate it if someone can help me find out the reason.
Why does the navigation bar totally disappear from the page if I don't set the "overflow" of "ul.navBar" to "hidden"?
<html>
<head>
<style>
ul.navBar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
</style>
</head>
<body>
<ul class="navBar">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
</body>
</html>
Here's the code page for this navigation bar.
Why does the navigation bar totally disappear from the page if I don't set the overflow of ul.navBar to hidden?
This is happening because the child elements of .navBar are being floated. Floated elements are taken out of the normal document flow and do not take up space. Because the children take up no space .navBar has no height .
Adding overflow: hidden; triggers a new block formatting context that prevents .navBar from "collapsing" when it has floated children.
Some people will suggest using display: inline-block;. Use with caution as each element will have white space around it that will make them larger than you think. Especially when using percentage widths.
Example:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 33.3333%;
}
.inline li {
display: inline-block;
background-color: gold;
}
.float li {
float: left;
background-color: indianred;
}
.flex {
clear: left;
display: flex;
background-color: skyblue;
}
<ul class="inline">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="float">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="flex">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Here's some options on how to handle the white space if you chose the inline-block route.
Floated elements (your li in this case) have a height of 0. So, essentially, your ul element is 0 pixels tall.
Adding display: inline-block to your li elements allow for this to be corrected. Therefore, the overflow style for your ul is not required.
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
background-color: #4277f4;
cursor: pointer;
}
li {
display:inline-block;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
<body>
<ul class="navBar">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
</ul>
</body>
</html>
The issue is that you are floating your li elements which causes the ul to not have a height. Try using display:inline-block; instead.
ul.navBar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #4277f4;
cursor: pointer;
}
li {
display:inline-block;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
<ul class="navBar">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
I added an Iframe to a page and it pushed my sidebar down. I tried different ways to float it, but I'm still stuck. Any help would be appreciated. Here's the HTML and CSS for the page:
http://lkwalker.com/writing.html
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>LK Walker</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><a href="index.html">Lauren K. Walker
<p><span class="logo_colour"> | Teacher | </span> <span class="logo_colour">Writer | </span></span> <span class="logo_colour">Yogi | </span></a></h1></p>
</div>
</div>
<nav>
<ul class="sf-menu" id="nav">
<li>About</li>
<li>Schedule
<ul>
<li>Retreats</li>
<li>Privates</li>
</ul>
<li>Energy Medicine Yoga</li>
<li>Military</li>
<li>Writing
<ul>
<li>Social Media</li>
<li>Theatre</li>
</ul>
<li>Contact</li>
</nav>
</header>
<div id="site_content">
<div id="top_border"></div>
<ul id="images">
<li><img src="images/lkwalker.jpg" width="600" height="300" alt="LK Walker" /></li>
<li><img src="images/navasana.jpg" width="600" height="300" alt="Navasana" /></li>
<li><img src="images/donna.jpg" width="600" height="300" alt="Donna Eden" /></li>
<li><img src="images/tree.jpg" width="600" height="300" alt="Tree" /></li>
<li><img src="images/raven.jpg" width="600" height="300" alt="Birding" /></li>
<li><img src="images/yogacow.jpg" width="600" height="300" alt="Cow Pose" /></li>
</ul>
<div class="content">
<h1>Articles</h1>
<iframe width="500" height="400" align="left" src ="http://lkwalkerwriting.blogspot.com/" width="500" height="500">
<p>Your browser does not support iframes.</p>
</iframe><br />
<ul>
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
<div id="sidebar_container">
<img class="paperclip" src="images/paperclip.png" alt="paperclip" />
<div class="sidebar">
<h4><p>Check out our newest clothing partner, MahaDevi, use code EMYoga to get a 15% discount.</p>
<p><em>Like us on FaceBook - Follow us on Twitter</em><!-- START SOCIAL MEDIA WIDGET --><ul id="socialbar"><li id="facebook"><a target="_blank" href="htp://www.facebook.com/EnergyMedicineYoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png"></a></li><li id="twitter"><a target="_blank" href="http://twitter.com/energymedyoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png"></a></li></ul><style>#socialbar img {border:0px;}#socialbar li img {width:48px; height:48px;}#socialbar li a:hover {position:relative;top:2px;}#socialbar{padding:0px;list-style: none outside none; margin:0px; position: static;}#socialbar li {display:inline;padding-right:2px;}#socialbar{width:180px;text-align:center;}</style><!-- END SOCIAL MEDIA WIDGET --></p>
</div>
</div>
</div>
<footer>
<p>Copyright © Energy Medicine Yoga| Whitefish, MT | Contact Us |</p>
</footer>
</div>
<p> </p>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: Jacques Francois, times, serif;
src: url('../fonts/Jacques Francois.otf');
src: local("Jacques Francois"), url('../fonts/Jacques Francois.otf');
}
#font-face {
font-family: lilly, arial, sans-serif;
src: url('../fonts/lilly.ttf');
src: local("lilly"), url('../fonts/lilly.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .80em 'lilly', sans-serif;
background: #cab0cb;
color: #444;
height: 100%;
width: 1000px;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Jacques Francois', serif;
letter-spacing: 0em;
padding: 0 0 5px 0;
text-align: center;
}
h1, h2, h3 {
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #04662e;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #615044;
padding: 0 0 5px 0;
font-family: normal 160% 'Jacques Francois', serif;
font: bold 145% times, serif;
}
h5, h6 {
color: #615044;
font: italic 95% times, serif;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #B30303;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
clear: both;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, nav, #container, #logo, #site_content, footer
{
margin-left: auto;
margin-right: auto;
}
#main {
margin: 5px auto;
width: 940px;
background: transparent;
padding-bottom: 30px;
}
header {
background: transparent;
height: 130px;
}
#logo {
width: 940px;
height: 140px;
background: transparent;
color: #888;
padding: 0;
float: left;
border-bottom: 1px solid #AFABAB;}
#logo h1, #logo h2 {
font-family: normal 320% 'Jacques Francois', times, serif;
border-bottom: 0;
text-transform: none;
margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 0;
color: #331d59;
text-decoration: none;
font-size: 48px;
}
#logo_text h1 a .logo_colour {
color: #2c89b3;
}
#logo_text a:hover .logo_colour {
color: #2c89b3;
}
#logo_text h2 {
font-size: 140%;
padding: 0 0 0 0;
color: #04662e;
}
nav {
height: 44px;
float: right;
text-align: center;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 10px 10px;
color: #222;
border-top: 2px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
width: 100%;
}
iframe
{
width: 60%;
clear: both;
}
#site_content {
width: 940px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #AFABAB;
}
#top_border {
border-top: 1px solid #fff;
padding-top: 20px;}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 30%;
margin: 0 0 0 0;
}
.sidebar {
float: right;
vertical-align: top;
width: 180px;
margin: 0 0 17px 0;
background: #EFF8FB;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
padding: 0 15px 5px 13px;
}
.sidebar h3, .content h1 {
padding: 0 15px 20px 0;
font: 230% 'Days', arial, sans-serif;
font-style: bold;
text-shadow: #FFF 1px 1px;
margin: 0 1px;
color: #444;
}
.sidebar h3 {
color: #444;
font: 250% 'Lilly', arial, sans-serif;
padding: 0 15px 5px 0;
}
.sidebar ul {
margin: 0 0 15px 0;
}
.sidebar li a, .sidebar li a:hover {
color: #555;
text-decoration: none;
}
.sidebar li a:hover {
text-decoration: underline;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
.paperclip {
position: relative;
z-index: 0;
vertical-align: middle;
margin: -15px 0 -60px -40px;
}
.content {
text-align: left;
width: 670px;
margin: 25px 0 0 0;
float: left;
font-size: 120%;
}
.content ul {
margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li {
list-style-type: none;
background: url(../images/bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 28px;
line-height: 1.5em;
}
footer {
width: 940px;
clear: both;
font: 170% 'Lilly', arial, sans-serif;
height: 30px;
padding: 20px 0 20px 0;
float: left;
text-align: center;
border-top: 10px solid #eeeeee;
}
footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
color: #000;
}
footer a {
color: #000;
text-decoration: 1px 1px #FFF;
}
footer a:hover {
color: #000;
text-shadow: none;
text-decoration: underline;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #D5D5D5;
background: #FFF;
color: #47433F;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings .submit {
font: 140% 'Days', arial, sans-serif;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #ddd;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
color: #222;
text-shadow: 1px 1px #FFF;
}
.form_settings textarea, .form_settings select {
font: 100% arial;
width: 299px;
}
.form_settings select {
width: 310px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #BBB;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #DDD;
color: #444;
border-top: 1px solid #FFF;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
list-style: none;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
}
/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/
/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 200px;
}
html body ul.sf-menu ul ul {
margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;
}
ul.sf-menu {
display: block;
position: relative;
}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;
}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu ul {
position: absolute;
width:70%;
top: auto;
}
ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;
}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
background: url(../images/arrows-black.png) no-repeat 0 0;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
background: #ddd;
margin-top: 5px;
padding-bottom: 15px;
}
ul#nav li a {
padding: 7px 18px 6px 18px;
font: 150% 'Lilly', arial, sans-serif;
text-decoration: none;
color: #000;
margin-right: 2px;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
color: #000;
text-shadow: 1px 1px #fff;
}
ul#nav ul li a {
color: #000;
}
ul#nav ul li a:hover {
color: #B30303;
margin-right: 2px;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
list-style: none;
}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 200px;
margin: 0 0 0 0;
position: relative;
bottom: 536px;
left: 269px;
}
Add these lines to your sidebar_container id and try!!
Also you had added an iframe and this side_bar class in a single main div, and haven't specified their positions.
The issue is because of </div> closing.
Cut and paste the entire sidebar container after closing of </div>
Now
<div id="content">
bla bla bla
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
</div> <!-- closing content -->
Change it to
<div id="content">
bla bla bla
</div> <!-- closing content -->
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
Your issue not with iframe it is causing because of UL
Its taking its space you left content in div like
<div class="left_container">
<!-left content-->
<iframe width="65%" height="400" align="left" src="http://lkwalkerwriting.blogspot.com/">
&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
</iframe><br>
<ul style="
/* width: 108px; */
/* float: left; */
clear: both;
">
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
</div>
<div class="sidebar_container">
<!--sidebar content-->
</div>
CSS:
.left_container
{
width: 69%;
float: left;
}
remain css is same as yours thanks.
This is a messy fix but should resolve the issue for the moment. If you make these changes in your css it should all line up. I used Firebug on firefox to test it and it worked just fine.
.content {
float: left;
font-size: 120%;
margin: 25px 0 0;
text-align: left;
width: 940px;
}
.content ul {
float: left;
margin: 2px 0 22px;
}
sidebar {
background: none repeat scroll 0 0 #EFF8FB;
border-radius: 7px;
display: inline;
float: right;
margin: -450px 0 17px;
padding: 0 15px 5px 13px;
vertical-align: top;
width: 180px;
}
I would not suggest this is a permanent solution but it should help in the meantime
I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.
I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: http://i.stack.imgur.com/8xXfV.png
I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.
Here is the CSS:
*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: inherit;
}
.nav{
width: auto;
padding: 2em 0 0 0.5em;
background-color:rgba(0,0,0,1);
}
.nav ul{
width: 24.5em;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav li{
font-weight: 100;
font-size: 3em;
color: #fff;
}
.nav b{
font-weight: 900;
}
.nav li:hover{
text-decoration: #000;
}
#nav_right{
font-size: 0.8em;
font-weight: 600;
text-align: right;
}
.triangle{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img{
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper{
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
<li>company<b>name</b></li>
</ul>
</div>
</nav>
</body>
</html>
You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.
This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.
CSS:
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
nav {
background: #000;
}
.nav {
width: 24.5em;
padding: 2em 0 0 0.5em;
background-color: rgba(0,0,0,1);
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav ul {
text-align: right;
list-style-type: none;
}
.nav a {
text-decoration: none;
color: inherit;
padding: 0;
}
.nav li {
color: #fff;
display: inline;
padding: 0 6px;
border-right: 1px solid #fff;
font-size: 0.8em;
font-weight: 600;
float: right;
}
.nav li:first-child {
padding-right: 0;
border: none;
}
.nav li:last-child {
padding-left: 0;
}
.nav #companyName {
font-size: 3em;
color: #fff;
}
.nav #companyName b {
font-weight: 900;
}
.nav li:hover {
text-decoration: underline;
}
.triangle {
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img {
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper {
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
<div id="companyName">
company<b>name</b>
</div>
</div>
</nav>
</body>
</html>
Does adding
nav li {
text-align: right;
}
Do what you are looking for?
Example
Edit
To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.
Your other menu will then align to the right of the element as you wish.
So basically:
nav ul {
display: inline-block;
}
nav li {
text-align: right;
}
Example
P.S.
By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.
put the a tag with company name on the outside of the div called nav.
HTML
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<a href="#" class="companyname"><li>company<b>name</b>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
nav {
margin: 0;
padding: 0;
overflow: hidden
}
.companyname {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.nav ul{
display: inline-block;
float: right
margin: 0;
padding: 0;
}