I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#nav {
float: left;
width: 10em;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0 20px;
}
#nav li {
margin-top: 9pt;
position: relative;
}
#nav a {
border: solid 1px black;
display: block;
width: 10em;
padding: 3px 0;
}
</style>
</head>
<body>
<div id="container1">
<div id="container2">
<div id="nav">
<ul>
<li>Welcome</li>
<li>News</li>
<li>About
<ul>
<li>FAQ</li>
<li>Charity</li>
<li>Committee</li>
</ul>
</li>
</ul>
</div>
<div id="section">If this p is here, the block links no longer work.<br><br><br></div>
</div>
</div>
</div>
</body>
</html>
In IE8 the text in #section prevents the whitespace in a block link from being a link. While there is text to the right, the whitespace in the links breaks. When the #section div ends, the links work fine and the whole thing is a link rather than just the text.
How would I make the whole a element a link all the time, rather than just the text when the #section div interfers? I've tried z-order to no avail.
Either remove the width: 10em; in your #nav style, or change it to width: 210px;.
After trying out your code, I've found that the links work just fine for me with your code as it's posted above; I only ran your problem when the #section div was relatively positioned. In that case, #section gets placed higher than the links and actually covers them. That's why it looks as if the link simply doesn't work. Put a background color on #section and you'll see what I mean.
You actually can fix it using the z-index property. Set it to a value of about 10 for #nav li and use any number higher than that for #section, and as long as both of those elements are relatively positioned, you should see the links on top of the #section div. It should look something like this:
#nav li { margin-top: 9pt;
position: relative;
z-index: 10;
}
#section {
position: relative;
z-index: 20;
}
For more on positioning, there's a really good article at CSS-Tricks that you might want to read: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The solution was to add a background color to #nav
Related
When I use my navbar, is it possible to have it not get pushed off of the screen?
I have tried wrapping them in separate divs with overflow hidden etc.
Ideally it will be on a static page with overflow:hidden; but this was just a quick mock up of what I have.
It may help to note that this is a 2 layer navigation, so this one is already inside another section.
I have a JS fiddle here for it.
HTML;
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
}
section{
height:100vh;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<section id="home">
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
</section>
<section id="news">
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
</section>
<section id="contact">
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
<section>
</body>
</html>
You can use position:fixed and your navbar stay always on the top.
Link:https://jsfiddle.net/bz68252t/2/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position:fixed
}
section:first-of-type{
padding-top:2em;
}
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
I have written this code,all the divs are working properly also the nav is. But the black color of the "header" does not seem to work. I have posted the whole code below.Please have a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
background-color: black;
margin: 0px;
}
#logo
{
background-color: green;
}
#headTable
{
float:right;
}
#logo
{
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
color: black;
float: left;
margin: 10px 50px;
}
#nav
{
clear: both;
width:100%;
height: 100px;
background-color: purple;
}
#nav ul
{
margin-left: 100px;
padding: 0;
}
#nav ul li
{
display: block;
margin: 10px;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
Add overflow:auto to #header:
#header {
background-color: black;
margin: 0px;
overflow:auto;
}
jsFiddle example
Floating the content makes the parent act as if there's no content and it collapses. Adding the overflow rules restores the behavior you seek.
Because #header in this context has no defined size because the only elements it contains have floats.
Three easy ways around this:
Explicitly define dimensions for #header.
Add display:inline-block to #header.
Use a clearfix after the two floated elements in #header. This is done most commonly by using <div style="clear:both;"><!-- --></div>
you must put some "Height" to you #header tag in CSS. Good Luck !
I created a jsfiddle : http://jsfiddle.net/JsA7y/.
So , of course I might have the same "problem" as you ;
the img src point nowhere (in the jsfiddle).
? Where does your img point to ?
? Is the img in the same directory as your html ?
=> Other wise , you will need to use the correct uri ;
such as , if the img is in a directory at the same level as the html :
<img src="directory/plane.jpg" width="150" height="100">
...
Hope this helps.
I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.
Can someone help me to get it to the right side of the page?
CSS code:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML code:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
There are multiple approaches to this, and you might have to experiment what works for you.
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.
The other way, which may or may not work, again, is to use the float property
#navigation
{
float: right;
}
Do like this (use float & dont forget the clear in content div) :
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}
#content {
clear:both;
height: auto;
}
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}
adjust padding right and top px if u want....
You need to use float in navigation div and some width.
#navigation {
display: inline-block;
vertical-align: middle;
float:right;
}
Update this class and check it should work
Youri,
There are a few ways to accomplish this effect, here is one.
Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/
THE HTML
<body>
<div id="header">
<div id="logo">
<!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
<img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
<ul>
<li><!--add your image code back here-->Home
</li>
<li><!--add your image code back here-->Overons
</li>
<li><!--add your image code back here-->Product
</li>
<li><!--add your image code back here-->Media
</li>
<li><!--add your image code back here-->Contact
</li>
</ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>
</html>
THE CSS
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
#header {
position:relative;
border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
nav {
position:absolute;
top:0px;
right:0px;
border:1px dashed blue;
}
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it.
Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/
/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
nav ul li {
list-style-type:none;
display:inline-block;
margin:0 10px;
}
nav ul li a {
text-decoration:none;
}
.example-logo {
height:50px;
width:50px;
background:blue;
}
What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.
Also take a look in my comments in that code for some other ideas that I think might be helpful to you.
I used margin-left property like this:
#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}
The margin-left will create space out side of element. You can get the left side of element with enough space, then your element will be the right side of the page.
Reference:
https://www.w3schools.com/css/css_margin.asp
The problem is that the border of div#content also appears in div#navigation?
<html>
<head>
<title>WUI</title>
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
border: 5px groove;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<br />
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>
</html>
EDIT: I want the left side (navigation) to appear as a sidebar to the left and the content after that (to the right). I'm applying the border to the content but that border also appears in div of navigation. I hope it is clear now.
You need an overflow: auto; for your div#content. It's magical, hence no explanation will be given:
div#content {
border: 5px groove;
overflow: auto;
}
Well, after your edit, I can see your border isn't the problem. I usually do this:
html
{
background-color: white;
}
body
{
padding-left: 200px;
background-color: green;
}
#navigation
{
position: fixed;
width: 200px;
left: 0px;
top: 0px;
}
It makes you navigation static, and the content just magically works. The downside is that you have to use pixel-based layouts, which I don't really like doing. It's your choice.
Here's a semi-relevant thing I made a while back. See if it works for you: http://jsfiddle.net/dDZvR/12/
navigation is floating, which means it's taken out of the document flow, and the next element (content) moves up to take it's place.
However, navigation still has to float somewhere, so it's taking up space inside content.
To avoid this, either float content as well, or put a left margin on it equivalent to the width of navigation.
edit: after seeing your edit, I'd say the left margin idea would definitely be the better one.
you need to give float to the content because you give float to the navigation.
use this example:
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
float: left;
border: 5px groove;
}
</style>
It's because of how floats work. You're going to have to put a margin on #content or something like that.
It can be corrected by adding a left margin to the div#content. The corrected code is here - http://jsfiddle.net/sparky/vctcN/
you can add a
float: left;
in content and set the width yourself
This one may works:
WUI
<style type="text/css">
div#header {
display:block;
}
div#navigation {
width:150px;
float:left;
}
div#content {
border: 5px groove;
margin-left:160px;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>