• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 132
  • Last Modified:

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
0
leonjohnsononline
Asked:
leonjohnsononline
1 Solution
 
myderrickCommented:
Use margin-top: 1em and margin-bottom: 1em for the navigation div

MD
0
 
qwerty021600Commented:
Also the HTML is not shared.
0
 
qwerty021600Commented:
#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;
}
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
qwerty021600Commented:
Oops.. this is the right one.
For the second query
#navigation-items a:visited {
      color: #ff0000;
}
0
 
myderrickCommented:
Smart qwerty. But I hope there is nothing else affecting the html. ems can be tricky sometimes.

MD
0
 
leonjohnsononlineAuthor Commented:
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.
<!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>

Open in new window

0
 
myderrickCommented:
Try this code. I changed the position of the navigation.

MD
<!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>
    
 
 <!--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 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>
    
</div>
 
 
 
</body>
</html>

Open in new window

0
 
GaryCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now