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>
Related
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 am trying to float my four links so that it is lineal and one next to the other. I am fairly new to CSS, so please bear with me. I have endlessly tried different positions properties and yet can not achieve what I want. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 1px;
background:green;
}
. topbar
{
background:url(topbar.gif);
position:absolute;
top: 5px;
right: 15px;
margin: 2px;
width: 1200px;
height: 100px;
}
.navbar
{
position:absolute;
float:right;
width:1200px;
height:100px;
border-style:groove;
}
a:link {text-decoration:none;color:yellow;}
a:hover{color:red;}
#titlename
{
position:relative;top:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="topbar">
</div>
<div id="titlename">
</div>
<img src="title.gif" alt="title">
</div>
<div class="navbar">
<div class="button">HOME
<div class="button">ABOUT
<div class="button">LINKS
<div class="button">CONTACT
</div>
</body>
</html>
I don't know if you've noticed since posting your question, but each of your button DIVs is missing it's closing DIV tag. This means that any CSS applied will not have the expected effect. Once you've fixed the HTML, you can use the following CSS to have each navigation item on the same line, spaced out equally, with the menu occupying the full width:
.button {
float: left;
width: 25%;
}
If you don't want the menu to occupy the full width, use padding or margin instead of specifying 25% for the width attribute, e.g:
.button {
float: left;
padding: 0 20px;
}
There are various methods to inline the elements.
1. using Flex Method
2. using table method
3. using float method
4. using display method.
Here you can check the Demo link. includes all possibility.
You can use either use float: left; or display: inline to achieve what you want.
DEMO
Just add following style to your anchor tags:
.navbar a {
float:left;
margin-right: 15px;
}
Working Fiddle
.button{
display:inline-block;
}
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
I have the code as follows:
<html>
<head>
<style type="text/css">
#container {
}
#content {
}
a {
color:#0083cc;
}
body {
margin:0px; padding:0px;
}
#header {
height:20px;
background-color:#fb0000;
}
#section1 {
margin: 0 auto;
width: 50%;
border-style: none none solid solid;
border-width: 5px;
border-color: red;
margin-top: 100px;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div style="float: left;">
Test
</div>
<div id="section1">
<div style="text-align:center;">
<h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1>
</div>
</div>
</div>
</div>
</body>
</html>
I am wondering if it is possible to have the border that #section1 has continue all the way to the bottom of the #header? As well, would it be possible to have the div containing "test" floated so it appears immediately to the left of #content1's border?
I am fine with completely restructuring the page, so fire away.
Thanks in advance!
Edit: Actually, what I am looking to accomplish is much like facebook's current layout.. Just simpler. So that could be used as a reference to see the end goal
Why don't you set padding-top: 100px; instead of margin-top: 100px; in your #section1 style? If you want to have the Test content appear lower as well, you can achieve this with another rule like e.g. #content div:first-child { margin-top: 100px; }.
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