I'm going to scream!

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

I'm trying to make 2 column design, but what I don't want it to do is float... why? Because it gets out of the flow of the design... I don't really want to do that... and making an internal CSS (that works... that makes my design work :x ... at least it did before... now I don't know since I edited a bit of HTML and the CSS I got from digitalMedia's example... :x :x :x) is something I don't want... I don't want to edit the CSS of a lot of pages... I'm going to scream... please help... I really need help with this CSS problem... :x :x :x

My CSS so far is...

Code: [ Select ]
body {
 text-align: center;
 background: #000000;
 padding: 0 0 0 0;
 margin: 0 0 0 0;
}
html {
 height: 100%;
 padding: 0 0 0 0;
 margin: 0 0 0 0;
}
a {
 text-decoration : none;
 color: #996600;
}
a:visited {
 color: #CC6600;
}
a:hover {
 color: #996600;
 text-decoration: underline;
}
a:active {
 color: #33ccff;
}
 html, body {
 height: 99%;
}
p {
 margin-top: 0;
}
 blockquote {
 background-color: #777777;
 border-color: #000000;
 border-style: dashed;
 border-width: thin;
 font-family: monospace;
 font-size: 14px;
 font-variant: normal;
}
h1, h2, h3, h4, h5, h6 {
 margin-bottom: 0;
 margin-top: 0;
}
h1 {
 font-size: 50px;
}
h2 {
 font-size: 35px;
}
div {
 text-align: left;
}
div#wrap {
 margin: 0 auto;
 width: 600px;
 background: #FFCC00;
}
div#header {
 background: #F00;
}
div#header h2 {
 margin: 0;
}
div#footer {
 text-align: center;
 font-size: 12px;
 background-color: #CECECE;
}
div#navigation {
 float: left;
 width: 195px;
 background: #CECECE;
 color: #000000;
}
div#buttons {
 padding-bottom: 10px;
}
div#buttons a:link, a:active {
 color: #000000;
 display: block;
}
div#navigation li {
 list-style-type: none;
 margin: 0 0 0 0;
 padding: 0 0 0 0;
}
div#content {
 width: 405px;
 margin: 0;
 background: #FFFFFF;
 display: inline;
}
div#content h1 {
 margin: 0;
}
div#advertisement {
 float: left;
 divwidth: 195px;
 background: #CECECE;
 color: #000000;
}
.clear {
 clear: both;
}
  1. body {
  2.  text-align: center;
  3.  background: #000000;
  4.  padding: 0 0 0 0;
  5.  margin: 0 0 0 0;
  6. }
  7. html {
  8.  height: 100%;
  9.  padding: 0 0 0 0;
  10.  margin: 0 0 0 0;
  11. }
  12. a {
  13.  text-decoration : none;
  14.  color: #996600;
  15. }
  16. a:visited {
  17.  color: #CC6600;
  18. }
  19. a:hover {
  20.  color: #996600;
  21.  text-decoration: underline;
  22. }
  23. a:active {
  24.  color: #33ccff;
  25. }
  26.  html, body {
  27.  height: 99%;
  28. }
  29. p {
  30.  margin-top: 0;
  31. }
  32.  blockquote {
  33.  background-color: #777777;
  34.  border-color: #000000;
  35.  border-style: dashed;
  36.  border-width: thin;
  37.  font-family: monospace;
  38.  font-size: 14px;
  39.  font-variant: normal;
  40. }
  41. h1, h2, h3, h4, h5, h6 {
  42.  margin-bottom: 0;
  43.  margin-top: 0;
  44. }
  45. h1 {
  46.  font-size: 50px;
  47. }
  48. h2 {
  49.  font-size: 35px;
  50. }
  51. div {
  52.  text-align: left;
  53. }
  54. div#wrap {
  55.  margin: 0 auto;
  56.  width: 600px;
  57.  background: #FFCC00;
  58. }
  59. div#header {
  60.  background: #F00;
  61. }
  62. div#header h2 {
  63.  margin: 0;
  64. }
  65. div#footer {
  66.  text-align: center;
  67.  font-size: 12px;
  68.  background-color: #CECECE;
  69. }
  70. div#navigation {
  71.  float: left;
  72.  width: 195px;
  73.  background: #CECECE;
  74.  color: #000000;
  75. }
  76. div#buttons {
  77.  padding-bottom: 10px;
  78. }
  79. div#buttons a:link, a:active {
  80.  color: #000000;
  81.  display: block;
  82. }
  83. div#navigation li {
  84.  list-style-type: none;
  85.  margin: 0 0 0 0;
  86.  padding: 0 0 0 0;
  87. }
  88. div#content {
  89.  width: 405px;
  90.  margin: 0;
  91.  background: #FFFFFF;
  92.  display: inline;
  93. }
  94. div#content h1 {
  95.  margin: 0;
  96. }
  97. div#advertisement {
  98.  float: left;
  99.  divwidth: 195px;
  100.  background: #CECECE;
  101.  color: #000000;
  102. }
  103. .clear {
  104.  clear: both;
  105. }


...and my html is...
Code: [ Select ]
<?php include_once('site_config.php'); ?>
<?xml version="1.0" encoding="iso-8859-1"?>
<!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 Site</title>
<meta name="keywords" content="keywords" />
<meta name="description" content="description" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h2>My Site</h2>
</div>
<div id="navigation">
<div id="buttons">
<a href="/ReInfomania/index.php">Home</a>
<a href="/ReInfomania/index.php">Home</a>
<a href="/ReInfomania/index.php">Home</a>
</div>
<div id="advertisement">
<p>Ads go here</p>
<a href="/Infomania/Admin/site-config.php">Site Config</a>
</div>
</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 id="footer">
<p>Copyright &copy; 2007-2008<br /> <a href="/infomania/tos.php">Terms of Service</a> | <a href="/infomania/ppolicy.php">Privacy Policy</a></p>
</div>
</div>
</body>
</html>
  1. <?php include_once('site_config.php'); ?>
  2. <?xml version="1.0" encoding="iso-8859-1"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>My Site</title>
  7. <meta name="keywords" content="keywords" />
  8. <meta name="description" content="description" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10. <link rel="stylesheet" href="layout.css" />
  11. </head>
  12. <body>
  13. <div id="wrap">
  14. <div id="header">
  15. <h2>My Site</h2>
  16. </div>
  17. <div id="navigation">
  18. <div id="buttons">
  19. <a href="/ReInfomania/index.php">Home</a>
  20. <a href="/ReInfomania/index.php">Home</a>
  21. <a href="/ReInfomania/index.php">Home</a>
  22. </div>
  23. <div id="advertisement">
  24. <p>Ads go here</p>
  25. <a href="/Infomania/Admin/site-config.php">Site Config</a>
  26. </div>
  27. </div>
  28. <div id="content">
  29. <h1>Some content here</h1>
  30. <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>
  31. </div>
  32. <div id="footer">
  33. <p>Copyright &copy; 2007-2008<br /> <a href="/infomania/tos.php">Terms of Service</a> | <a href="/infomania/ppolicy.php">Privacy Policy</a></p>
  34. </div>
  35. </div>
  36. </body>
  37. </html>
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

You forgot to float div#content. That was the only thing I changed.
http://www.myirmo.com/bogey/bogeystyle.html

btw: Why do you do all of this stuff below?
Code: [ Select ]
html {
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

html, body {
height: 99%;
}
  1. html {
  2. height: 100%;
  3. padding: 0 0 0 0;
  4. margin: 0 0 0 0;
  5. }
  6. html, body {
  7. height: 99%;
  8. }


one more btw: padding:0 0 0 0; is equivelant to padding:0;
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

...and you need to relax. :flower:
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

You know what? Your awesome digitalMedia :D Thanks for that :D That helped out A LOT!
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

No problem, sir. The float shceme gave me headaches when I was figuring it out a couple years ago.

Glad I could help. I always feel like I'm coming across as an "A"hole. :)

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 77 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.