Need help with CSS here.

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

The following is what I have for the CSS...

Code: [ Select ]
body {
 padding: 0 0 0 0;
 background-color: #FFFFFF;
}
html {
 padding: 0 0 0 0;
 width: 100%;
 height: 100%;
}
a:link {
 color: #0000FF;
 text-decoration: none;
}
a:visited {
 color: #880088;
 text-decoration: none;
}
a:active {
 color: #FF0000;
 text-decoration: none;
}
a:hover {
 color: #0099FF;
 text-decoration: none;
}
ul,li {
width: 100%;
}
div#wrap {
 width: 600px;
 height: 100%;
 margin-left: auto;
 margin-right: auto;
 background-color: #FFCC00;
}
div#header {
 width: 100%;
 background-color: #CECECE;
 color: #000000;
 text-align: center;
 font-size: 20px;
}
div#navigation {
 margin-left: 5px;
 width: 195px;
 border: 1px solid;
 border-color: #000000;
 padding-left: 2px;
 background-color: #FFFFFF;
}
div#navigation a {
 color: #cc0000;
 background-color: #FFFFFF;
 padding: 0 0 0 0;
 font: 13px Arial, sans-serif;
 font-weight: bold;
 text-decoration: none;
 display: block;
 margin: 0 0 0 0;
 width: 100%;
 text-align: left;
}
div#navigation a:hover {
 background-color: #EEEEEE;
 padding: 0 0 0 0;
 color: #00000;
 text-decoration: none;
}
div#content {
 background-color: #FFFFFF;
 color: #000000;
 border: 1px solid;
 border-color: #000000;
 width: 385px;
 float: right;
 margin-right: 5px;
}
  1. body {
  2.  padding: 0 0 0 0;
  3.  background-color: #FFFFFF;
  4. }
  5. html {
  6.  padding: 0 0 0 0;
  7.  width: 100%;
  8.  height: 100%;
  9. }
  10. a:link {
  11.  color: #0000FF;
  12.  text-decoration: none;
  13. }
  14. a:visited {
  15.  color: #880088;
  16.  text-decoration: none;
  17. }
  18. a:active {
  19.  color: #FF0000;
  20.  text-decoration: none;
  21. }
  22. a:hover {
  23.  color: #0099FF;
  24.  text-decoration: none;
  25. }
  26. ul,li {
  27. width: 100%;
  28. }
  29. div#wrap {
  30.  width: 600px;
  31.  height: 100%;
  32.  margin-left: auto;
  33.  margin-right: auto;
  34.  background-color: #FFCC00;
  35. }
  36. div#header {
  37.  width: 100%;
  38.  background-color: #CECECE;
  39.  color: #000000;
  40.  text-align: center;
  41.  font-size: 20px;
  42. }
  43. div#navigation {
  44.  margin-left: 5px;
  45.  width: 195px;
  46.  border: 1px solid;
  47.  border-color: #000000;
  48.  padding-left: 2px;
  49.  background-color: #FFFFFF;
  50. }
  51. div#navigation a {
  52.  color: #cc0000;
  53.  background-color: #FFFFFF;
  54.  padding: 0 0 0 0;
  55.  font: 13px Arial, sans-serif;
  56.  font-weight: bold;
  57.  text-decoration: none;
  58.  display: block;
  59.  margin: 0 0 0 0;
  60.  width: 100%;
  61.  text-align: left;
  62. }
  63. div#navigation a:hover {
  64.  background-color: #EEEEEE;
  65.  padding: 0 0 0 0;
  66.  color: #00000;
  67.  text-decoration: none;
  68. }
  69. div#content {
  70.  background-color: #FFFFFF;
  71.  color: #000000;
  72.  border: 1px solid;
  73.  border-color: #000000;
  74.  width: 385px;
  75.  float: right;
  76.  margin-right: 5px;
  77. }


And the following is my HTML...

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<meta name="keywords" content="keywords" />
<meta name="description" content="description" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<p>My Site</p>
</div>
<div id="navigation">
<a href="Index.php">Home</a>
<a href="Log-In.php">Log-In</a>
</div>
<div id="content">
Some content here
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>My Title</title>
  5. <meta name="keywords" content="keywords" />
  6. <meta name="description" content="description" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <link rel="stylesheet" href="style.css" />
  9. </head>
  10. <body>
  11. <div id="wrap">
  12. <div id="header">
  13. <p>My Site</p>
  14. </div>
  15. <div id="navigation">
  16. <a href="Index.php">Home</a>
  17. <a href="Log-In.php">Log-In</a>
  18. </div>
  19. <div id="content">
  20. Some content here
  21. </div>
  22. </div>
  23. </body>
  24. </html>


What I want to attempt at is to make the div id'd as "content" to be to the right of the navigation but I don't really know how to do that... I need help with that... Thanks... help would be greatly appreciated... :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I think that I have solved it... here is my current CSS.. Tell me if it is a good idea...

Code: [ Select ]
body {
background-color: #000000;
margin: 0 0 0 0;
}
html {
height: 100%;
width: 100%;
}
a:link {
 color: #0000FF;
 text-decoration: none;
}
a:visited {
 color: #880088;
 text-decoration: none;
}
a:active {
 color: #FF0000;
 text-decoration: none;
}
a:hover {
 color: #0099FF;
 text-decoration: none;
}
ul,li {
width: 100%;
}
p {
margin-top: 0;
}
div#wrap {
 width: 600px;
 height: 100%;
 margin-left: auto;
 margin-right: auto;
 background-color: #FFCC00;
}
div#header {
 width: 100%;
 background-color: #CECECE;
 color: #000000;
 text-align: center;
 font-size: 20px;
}
div#navigation {
 margin-left: 5px;
 width: 195px;
 border: 1px solid;
 border-color: #000000;
 padding-left: 2px;
 background-color: #FFFFFF;
}
div#navigation a {
 color: #cc0000;
 background-color: #FFFFFF;
 padding: 0 0 0 0;
 font: 13px Arial, sans-serif;
 font-weight: bold;
 text-decoration: none;
 display: block;
 margin: 0 0 0 0;
 width: 100%;
 text-align: left;
}
div#navigation a:hover {
 background-color: #EEEEEE;
 padding: 0 0 0 0;
 color: #00000;
 text-decoration: none;
}
div#container {
 margin-top: 5px;
}
div#content {
 background-color: #FFFFFF;
 color: #000000;
 border: 1px solid;
 border-color: #000000;
 width: 385px;
 margin-right: 5px;
 margin-left: 210px;
 margin-top: -34px;
 margin-bottom: 0px;
}
div#footer {
 width: 100%;
 background-color: #CECECE;
 color: #000000;
 text-align: center;
 font-size: 12px;
}
  1. body {
  2. background-color: #000000;
  3. margin: 0 0 0 0;
  4. }
  5. html {
  6. height: 100%;
  7. width: 100%;
  8. }
  9. a:link {
  10.  color: #0000FF;
  11.  text-decoration: none;
  12. }
  13. a:visited {
  14.  color: #880088;
  15.  text-decoration: none;
  16. }
  17. a:active {
  18.  color: #FF0000;
  19.  text-decoration: none;
  20. }
  21. a:hover {
  22.  color: #0099FF;
  23.  text-decoration: none;
  24. }
  25. ul,li {
  26. width: 100%;
  27. }
  28. p {
  29. margin-top: 0;
  30. }
  31. div#wrap {
  32.  width: 600px;
  33.  height: 100%;
  34.  margin-left: auto;
  35.  margin-right: auto;
  36.  background-color: #FFCC00;
  37. }
  38. div#header {
  39.  width: 100%;
  40.  background-color: #CECECE;
  41.  color: #000000;
  42.  text-align: center;
  43.  font-size: 20px;
  44. }
  45. div#navigation {
  46.  margin-left: 5px;
  47.  width: 195px;
  48.  border: 1px solid;
  49.  border-color: #000000;
  50.  padding-left: 2px;
  51.  background-color: #FFFFFF;
  52. }
  53. div#navigation a {
  54.  color: #cc0000;
  55.  background-color: #FFFFFF;
  56.  padding: 0 0 0 0;
  57.  font: 13px Arial, sans-serif;
  58.  font-weight: bold;
  59.  text-decoration: none;
  60.  display: block;
  61.  margin: 0 0 0 0;
  62.  width: 100%;
  63.  text-align: left;
  64. }
  65. div#navigation a:hover {
  66.  background-color: #EEEEEE;
  67.  padding: 0 0 0 0;
  68.  color: #00000;
  69.  text-decoration: none;
  70. }
  71. div#container {
  72.  margin-top: 5px;
  73. }
  74. div#content {
  75.  background-color: #FFFFFF;
  76.  color: #000000;
  77.  border: 1px solid;
  78.  border-color: #000000;
  79.  width: 385px;
  80.  margin-right: 5px;
  81.  margin-left: 210px;
  82.  margin-top: -34px;
  83.  margin-bottom: 0px;
  84. }
  85. div#footer {
  86.  width: 100%;
  87.  background-color: #CECECE;
  88.  color: #000000;
  89.  text-align: center;
  90.  font-size: 12px;
  91. }


and my HTML...
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<meta name="keywords" content="keywords" />
<meta name="description" content="description" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<p>My Site</p>
</div>
<div id="container">
<div id="navigation">
<a href="Index.php">Home</a>
<a href="Log-In.php">Log-In</a>
</div>
<div id="content">
Some content here
</div>
</div>
<div id="footer">
<p>My footer</p>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>My Title</title>
  5. <meta name="keywords" content="keywords" />
  6. <meta name="description" content="description" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <link rel="stylesheet" href="style.css" />
  9. </head>
  10. <body>
  11. <div id="wrap">
  12. <div id="header">
  13. <p>My Site</p>
  14. </div>
  15. <div id="container">
  16. <div id="navigation">
  17. <a href="Index.php">Home</a>
  18. <a href="Log-In.php">Log-In</a>
  19. </div>
  20. <div id="content">
  21. Some content here
  22. </div>
  23. </div>
  24. <div id="footer">
  25. <p>My footer</p>
  26. </div>
  27. </div>
  28. </body>
  29. </html>


Is that the best way? what I did is set a margin-left: to 210px and the margin-top I put -34px... is that the best way to do that?

(It's a fixed layout by the way)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I came to the conclusion that that way is not a good idea because if I add more info/links to the left column than the content bumps down... although that works well in Firefox and IE... but if I'm to use that way than I would have to change the CSS every time... what is the best way?

Code: [ Select ]
float: right;


The code above doesn't seem to work in Firefox even though it does for my other site layout... and it doesn't work in IE no matter how you use it... it just makes the div go to the right but doesn't it bring up...

Please I need help on this.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

It works for me in FF and IE6 ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

It does... have you tried adding more content to the left column? The column that has the navigation? It makes the right column go down...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Here's the basic structure I'd set up...
http://www.myirmo.com/bogey/

Code: [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Bogey 2 column</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{text-align:center;background:#000;}
div{text-align:left;}
#wrap{margin:0 auto;width:600px;background:#0F0;}
#header{background:#F00;}
#header h1{margin:0;}
#navigation{float:left;width:195px;background:#00F;color:#000;}
#navigation ul li a{color:#000;}
#content{float:left;width:405px;margin:0;background:#FF0;}
#content h1{margin:0;}
.clear{clear:both;}</style></head>
<body>
<div id="wrap">
    <div id="header">
        <h1>My Site</h1></div>
    <div id="navigation">
        <ul>
            <li><a href="Index.php">Home</a></li>
            <li><a href="Log-In.php">Log-In</a></li></ul>
        <p>Now is the time for all good men to come to the aid of their country.</p></div>
    <div id="content">
        <h1>Some content here</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at purus vitae lorem tincidunt pellentesque. Suspendisse leo justo, suscipit nec, eleifend ut, fringilla in, mauris. Proin pede metus, iaculis eget, dapibus vitae, cursus sit amet, velit. Quisque tellus. Duis rhoncus rhoncus massa. In eu erat. Aenean elementum, mi vitae sodales semper, nisl sem vulputate est, id luctus mi neque nec magna. Aenean neque justo, blandit ac, sollicitudin et, fringilla quis, elit. Proin ut mauris. Sed dolor. Integer pellentesque. Ut sed leo non magna consectetuer pellentesque. Donec vitae risus sed justo nonummy euismod. In nisi urna, ullamcorper vel, accumsan eget, eleifend vitae, augue. Suspendisse rutrum mauris ut mauris. Vestibulum velit mauris, mollis in, vestibulum ac, convallis non, magna. Suspendisse potenti. Mauris ornare mi id libero. Donec sit amet turpis ac elit ultrices luctus. Quisque sagittis ante sed lorem. </p></div>
    <div class="clear"> &copy; </div></div></body></html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Bogey 2 column</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <style>
  8. body{text-align:center;background:#000;}
  9. div{text-align:left;}
  10. #wrap{margin:0 auto;width:600px;background:#0F0;}
  11. #header{background:#F00;}
  12. #header h1{margin:0;}
  13. #navigation{float:left;width:195px;background:#00F;color:#000;}
  14. #navigation ul li a{color:#000;}
  15. #content{float:left;width:405px;margin:0;background:#FF0;}
  16. #content h1{margin:0;}
  17. .clear{clear:both;}</style></head>
  18. <body>
  19. <div id="wrap">
  20.     <div id="header">
  21.         <h1>My Site</h1></div>
  22.     <div id="navigation">
  23.         <ul>
  24.             <li><a href="Index.php">Home</a></li>
  25.             <li><a href="Log-In.php">Log-In</a></li></ul>
  26.         <p>Now is the time for all good men to come to the aid of their country.</p></div>
  27.     <div id="content">
  28.         <h1>Some content here</h1>
  29.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at purus vitae lorem tincidunt pellentesque. Suspendisse leo justo, suscipit nec, eleifend ut, fringilla in, mauris. Proin pede metus, iaculis eget, dapibus vitae, cursus sit amet, velit. Quisque tellus. Duis rhoncus rhoncus massa. In eu erat. Aenean elementum, mi vitae sodales semper, nisl sem vulputate est, id luctus mi neque nec magna. Aenean neque justo, blandit ac, sollicitudin et, fringilla quis, elit. Proin ut mauris. Sed dolor. Integer pellentesque. Ut sed leo non magna consectetuer pellentesque. Donec vitae risus sed justo nonummy euismod. In nisi urna, ullamcorper vel, accumsan eget, eleifend vitae, augue. Suspendisse rutrum mauris ut mauris. Vestibulum velit mauris, mollis in, vestibulum ac, convallis non, magna. Suspendisse potenti. Mauris ornare mi id libero. Donec sit amet turpis ac elit ultrices luctus. Quisque sagittis ante sed lorem. </p></div>
  30.     <div class="clear"> &copy; </div></div></body></html>
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Thanks... I'll see what I can do with it L) Thanks :D
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Why can't the CSS be external? If I make the CSS external than it turns into a 2 row template rather than 2 column... that is SOOO frustrating...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Bogey, I just updated that link and checked it 4 browsers. No change.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

digitalMedia wrote:
Bogey, I just updated that link and checked it 4 browsers. No change.


Thanks but it worked even before... make the CSS external... with each different command on a new line such as...

Code: [ Select ]
#content {
float: left;
width: 405px;
margin: 0;
background: #FF0;
}
  1. #content {
  2. float: left;
  3. width: 405px;
  4. margin: 0;
  5. background: #FF0;
  6. }


I like to be a little organized in CSS... I can read it this way better.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I meant I took the HEAD styles and moved them to an external file. No change. I have no idea what you meant.

Could you define "organized"? :P
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

digitalMedia wrote:
Could you define "organized"? :P


:lol: Thanks... your other post to another similar (actually, it was this very problem but different layout) had helped me out... Thanks so much.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 43 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.