leonjohnsononline
asked on
How do I make my DIV position nicely?
Please see the attached file and code snippet below, one is a CSS file the other is a HTML file.
Please can you tell me how I can edit the CSS file so that the div 'Navigation' sits 1em below the header and 1 em above the Column1 and Column2 divs.
I also need to know how to edit the CSS file so that when the navigation list items (which are links) are clicked upon and the user is taken to the new page the navigation list item they just clicked on now displays as a different color to the other navigation list item links and different to the hover state.
Many thanks.
css.doc
Please can you tell me how I can edit the CSS file so that the div 'Navigation' sits 1em below the header and 1 em above the Column1 and Column2 divs.
I also need to know how to edit the CSS file so that when the navigation list items (which are links) are clicked upon and the user is taken to the new page the navigation list item they just clicked on now displays as a different color to the other navigation list item links and different to the hover state.
Many thanks.
css.doc
Also the HTML is not shared.
#body-container #navigation {
width: 100%; height: 3em; background-color: #F00; display: block;
margin: 1em 0 1em 0;
}
For the second query
#navigation-items a.visited {
color: #ff0000;
}
width: 100%; height: 3em; background-color: #F00; display: block;
margin: 1em 0 1em 0;
}
For the second query
#navigation-items a.visited {
color: #ff0000;
}
Oops.. this is the right one.
For the second query
#navigation-items a:visited {
color: #ff0000;
}
For the second query
#navigation-items a:visited {
color: #ff0000;
}
Smart qwerty. But I hope there is nothing else affecting the html. ems can be tricky sometimes.
MD
MD
ASKER
Hi,
With regad to the first query nne of the above has helped position my div in between the dheader andand the two columns? Any further suggestion?
The HTML is pasted in the code snippet below.
Leon.
With regad to the first query nne of the above has helped position my div in between the dheader andand the two columns? Any further suggestion?
The HTML is pasted in the code snippet below.
Leon.
<!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=UTF-8" />
<title>Untitled Document</title>
<link href="global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--THE MAIN BODY CONTAINER GOES HERE-->
<div id="body-container">
<div id="Header">header goes here</div>
<div id="columns">
<!--COLUMN ONE CONTENT GOES HERE-->
<div id="Column1">
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
The main body
clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;clear: left;</div>
<!--COLUMN TWO CONTENT GOES HERE-->
<div id="Column2">column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content column2 content</div>
</div>
<!--THE FOOTER GOES HERE-->
<div id="Footer">
<ul>
<li>Terms and Conditions</li>
<li>Copyright and Creative Commons</li>
<li>Help</li>
</ul>
</div>
<!--THE NAVIGATION BAR GOES HERE-->
<div id="navigation">
<ul id="navigation-items">
<li><a href="#">Home</a></li>
<li><a href="http://www.facebook.com">Blog</a></li>
<li><a href="http://www.bebo.com">Clients and Case Studies</a></li>
<li><a href="#">About Me</a></li>
</ul>
</div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
MD