I am working on a standard header/navigation for my website.
I started with having a CSS "height" value of 100% for the html, body elements but this resulted in the wrong layout.
However, when I change the CSS height property from "100%" to "auto", the layout is correct, but I lose the anchors. The text is still there (e.g "Advice", "Do It", "Home", Help") but the anchors (organized as list items) no longer appear in the navigation. I can't click on them anymore.
Why is this?
Here's my CSS:
html,body {
height: auto; /* This is the only property that I'm toggling */
margin: 0;
}
body {
margin: 0;
min-width: 978px;
font: 12px/16px Arial, Helvetica, sans-serif;
color: #000;
background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0;
}
#nav {
position: relative;
float: left;
margin: 0;
padding: 0 2px 0 271px;
list-style: none;
background: url('../images/sep-nav.gif') no-repeat 100% 0;
}
#nav li {
float: left;
padding: 11px 0 0 2px;
height: 35px;
width: 128px;
line-height: 22px;
font-size: 18px;
text-align: center;
background: url('../images/sep-nav.gif') no-repeat 0 -1px;
display: inline;
}
#nav li a {color: #FFFEFE;}
.....
Here's the header HTML:
<body>
<div id="wrapper">
<!-- header -->
<div id="header">
<!-- logo -->
<h1 class="logo">Site Name</h1>
<!-- Feedback button -->
<div class="feed-w1">
<div class="feed-w2">
<div class="feed">
<span class="l">Feedback, please</span><span class="r"></span>
</div>
</div>
</div>
<!-- Small links -->
<div class="top-nav">
<ul>
<li>Home</li>
<li>Feedback</li>
<li>Settings</li>
<li>Help</li>
<li>Sign out</li>
</ul>
</div>
<!-- Main Navigation -->
<div class="frame">
<div class="holder">
<ul id="nav">
<li>Advice</li>
<li>Do it</li>
<li>Your Profile</li>
</ul>
<!-- Search box -->
<div class="search-form">
<form action="#">
<fieldset>
<legend class="hidden">Search Form</legend>
<input class="text" type="text" value="Search" title="Search" />
<input class="submit" type="submit" value="Search" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I compared the computed CSS in Firebug when the html, body height property was set to "auto" vs. "100%" and they were the same.
Can somebody please shed some light on how retain the anchors in the navigation while setting height to "auto"?
Thanks for your help.
JMan, I don't see any problems when running your code on a sample page
One suggestion - check your DOCTYPE declaration
I use strictly "strict" :) (pun intended)
either
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(i tried your example with the first one)
Cheers,
hope you find a solution to your problem
Related
When I hover over the li, theres a gap to the left and I can't find anything in developer console that explains it.
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li><li>Link</li><li>Link</li>
</ul>
</div>
</div>
</div>
You can also use HTML comments to occupy the white space instead:
<li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li>
Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment
line breaks like that:
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav"><!--
--><li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li><!--
--></ul>
</div>
</div>
</div>
Fiddle demo
I would suggest you to add these CSS options (and then go further with editing CSS):
.list-inline > li {
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
I am doing a practice because I recently started programming and I have come to areal block in my road, I am not kidding when I said I have been stuck in this part since morning, first with some troublesome images and now this.
Basically I need to move a div that has imgs and some text up so it stays just beneath the "Logo" but it won't budge! I tried to a lot of this but alas to no avail, I even checked it out on firebug and it appears as if the div containing the logo extends beyond what it should but I am positive I didn't mess it up like that.
Also I cannot use ,styles in html or % for this.
<div id="header">
<img src="imgs/logo.png" id="logo" />
<img id="donate" />
<div id="divMenu">
<ul id="menu">
<li>Home</li>
<li> About </li>
<li> Our Programs </li>
<li> Gallery </li>
<li> Contact </li>
<li> Blog </li>
</ul>
</div>
</div>
<div id="bodyLogo">
<img src="imgs/bg-featured.jpg"alt="" />
</div>
<div id="slogan">
<p>As The Saying Goes.. </p>
<p>You Don’t Know What You’ve Got </p>
<p> ‘Till It’s Gone.</p>
<h2>Plant A Tree.</h2>
<h2> Grow A Tree.</h2>
<h2><span id="tituloSpan">Save The Future.</span></h2>
</div>
Here is where it makes a invisible jump I cannot bridge!
<div id="divPictures" class="opacity">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT"</p>
<div id="flecha">
<img src="">
</div>
</div>
<div class="right" >
<img src="imgs/what-we-do.jpg" alt="">
<p>"TEXT."</p>
<div id="flecha">
<img src="">
</div>
</div>
</div>
And the CSS:
body{
width: 956px;
font-family: 'Rokkitt', serif;
background: url("../imgs/bg-header.jpg");
background-repeat:repeat-x;
text-decoration: none;
margin: 0 auto;
}
#bodyLogo{
height: 396px;
position: relative;
margin: 18px 0 0 0;
}
#divPictures{
position: absolute;
width: 956px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 700px 0 ;
vertical-align: top;
}
.left{
width: 478px;
float:left;
font-family: 'Quattrocento Sans', sans-serif;
}
.right{
width: 478px;
float:right;
font-family: 'Quattrocento Sans', sans-serif;
}
.left img, .right img{
margin: 0 0 0 10px;
}
#flecha{
background: url("../imgs/arrow-gray.png");
background-repeat: repeat-x;
width: 460px;
}
Thanks A LOT in advance.
Best Wishes.
You have a fixed height on your #bodyLogo which would make it extend past it's size. I don't know how large you have your images, but everything should snap right below it if you remove that height.
I have floated two elements right in the header of my website which are <div id="twitter"> and <div id ="navbar>, but there appearance becomes skewed when I view them in IE6 and IE7. I believe that I either need to clear the floated elements or apply a clearfix but I am unsure as to where.
here is an image of the issue in IE6 and IE7:
This is the desired result as it would appear in modern browsers.
Here is a link to the web page: http://www.bestcastleintown.co.uk/pg/
CSS:
#twitter {
background: red;
float: right;
height: 40px;
margin-bottom: 40px;
width: 200px;
}
#navbar {
font-size: 2.2em;
float:right;
}
HTML:
<div id="main_header">
<div id="inner_main_header">
<div>
<div id="main_logo">
<div class="home_page_logo left">
<img src="PG_awards_logo.gif">
</div>
</div>
<div>
<div id ="twitter" class="padall">
Follow us
</div>
<div id ="navbar" class="right">
<ul class="nav NG">
<li>home</li>
<li>enter</li>
<li>categories</li>
<li>judging</li>
<li>sponsorship</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Change #navbar style to this:
#navbar{
font-size: 2.2em;
float: right;
width: 60%;
overflow: auto;
}
Just give the #navbar some width and overflow other than visible.
I'm using this CSS script to create tooltip popup bubbles.
http://trentrichardson.com/examples/csstooltips/
I have it working ok but it is being hidden by an embedded iframe video in the div below.
When I hover over "number one" you can see it get hidden behind the video.
However, when I hover over "number eleven" it is displayed correctly in front of the image.
I have tried changing the z-index values, but no change.
thank for your help
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> ToolTip</title>
<style type="text/css">
* { padding: 0; margin: 0; }
#wrapper {
position: relative;
margin: 0 auto;
width: 980px;
height: 550px;
}
#main {
width:980px;
height:50px;
}
#main ul {
margin:0;
padding:0;
list-style:none;
}
#main ul li {
list-style:none;
display:inline;
}
#video {
width:620px;
height:500px;
float:left;
}
#img {
width:360px;
height:500px;
float:right;
}
/* TOOLTIP HOOVER */
a.tt {
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:normal;
text-decoration:none;
}
a.tt span {
display: none;
}
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover {
z-index:25;
color: #aaaaff;
background:;
}
a.tt:hover span.tooltip {
display:block;
position:absolute;
top:2px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #111;
text-align: center;
filter: alpha(opacity:80);
KHTMLOpacity: 0.80;
MozOpacity: 0.80;
opacity: 0.80;
}
a.tt:hover span.top {
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle { /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom {
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}
/* end TOOLTIP HOOVER */
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<ul>
<li>
<a href="#" class="tt">Number One
<span class="tooltip">
<span class="top">
</span>
<span class="middle">
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
</span>
<span class="bottom">
</span>
</span>
</a>
</li>
<li>Number Two</li>
<li>Number Three</li>
<li>Number Four</li>
<li>Number Five</li>
<li>Number Six</li>
<li>Number Seven</li>
<li>Number Eight</li>
<li>Number Nine</li>
<li>Number Ten</li>
<li>
<a href="#" class="tt">Number Eleven
<span class="tooltip">
<span class="top">
</span>
<span class="middle">
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. You can hover over meThis is my Bubble Tooltip with CSS to see how well these bubble tooltips work
</span>
<span class="bottom">
</span>
</span>
</a>
</li>
</ul>
</div>
<div id="video">
<iframe width="601" height="353" src="https://www.youtube.com/embed /oao0H5dfyEQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="img">
<img src="http://i.imgur.com/P0ken.jpg" />
</div>
</div>
</body>
</html>
I assume the iframe is going to pull up a flash player. You need to pass wmode=opaque to the player http://kb2.adobe.com/cps/127/tn_12701.html and as you don't control the iframe you are not going to be able to use it the way you need.
The older embed code for youtube with wmode setting was.
<object width='425' height='344'>
<param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'>
<param name='type' value='application/x-shockwave-flash'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name="wmode" value="opaque" />
<embed width='425' height='344'
src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
type='application/x-shockwave-flash'
allowfullscreen='true'
allowscriptaccess='always'
wmode="opaque"
></embed>
</object>
Hat tip http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/
As a side note wmode="transparent" also works.
I have the following code
<div id="header" class="row">
<ul id="topnav">
<li>
a
<span>aa ab</span>
</li>
<li>
b
<span>ba bb</span>
</li>
<li style="float: right;">Login</li>
</ul>
<div id="login_container">
<form method="post" id="login_form">
<table>login form</table>
</form>
<form method="post" id="create_account_form">
<table>create account form</table>
</form>
</div>
</div>
<div id="content">
content here
</div>
The header is about 60px tall and 960px wide, centered in the browser window and sticking to the top of the viewport. When the user clicks on "Login" the #login_container reveals itself. However, I want to position it aligned right with the header row, not aligned to the right of the viewport. I can do that by not using 'position: absolute' when styling #login_container, however, then the login form gets cut-off because the containing #header div is not tall enough. In other words, I want the #login_container aligned with the right edge of #header, but laid on top of #content, if any.
You could either set
#header {
position: relative;
height: 60px;
}
#login_container {
position: absolute;
right: 0;
top: 60px; /* equal to #header height, if it's not fixed, you should retrieve it dynamically via jQuery */
}
and then dynamically retrieve #content's size and apply it to #login_container.
Otherwise, and maybe even better, you could wrap the whole code in a #container div, set its width to whatever width you wish the site to have, set it centered, then move #login_container from inside #header to immediately after it and with absolute position. You will have a cleaner css code and less meddling to do with jQuery (just setting login_container's height).. so it should be like this (if I'm not missing anything):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#login_container {
position: absolute;
right: 0;
width: 100%;
z-index: 10;
}
#content {
position: relative;
z-index: 0;
}
</style>
<!--[if lte IE 6]><style type="text/css"></style><![endif]-->
</head>
<body>
<div id="container">
<div id="header" class="row">
<ul id="topnav">
<li>
a
<span>aa ab</span>
</li>
<li>
b
<span>ba bb</span>
</li>
<li style="float: right;">Login</li>
</ul>
</div>
<div id="login_container">
<form method="post" id="login_form">
<p>login form</p>
</form>
<form method="post" id="create_account_form">
<p>create account form</p>
</form>
</div>
<div id="content">
content here
</div>
</div>
</body>
</html>
Give it a try and let me know if you still got problems!