1 reply [Last post]
johnny0313x
Offline
newbie
Bethlehem, PA
Last seen: 11 years 18 weeks ago
Bethlehem, PA
Timezone: GMT-5
Joined: 2009-01-06
Posts: 10
Points: 11

I have a question and I am sure my code is a mess because I am new to CSS but so far I have only noticed a problem in Safari for windows which I will work all that out at the end but I am confused about my main content area and the side bar on the right. I want them to always be the same height no matter what. Most likely the content/news section will dominate the length of the page. So the sidebar should just show white space and continue down next to the news articles. RIght now it's not doing that, I tried height auto and 100% and they did not work. I know auto goes off of the content inside the div and the content will be shorter them the news portion will be so that will not work and 100% did nothing. I am new to CSS so please go easy on me about explaining things. Baby talk would be best lol.

http://www.keshanow.net/index12.php

The primary divs you would be looking at are Content which is "housing" the two divs(sidebar and content1[news])
footer is using clear both to stay at the bottom which is that blue box at the bottom
The heading stuff at the top I think is okay though I am sure it could be cleaned up my focus is getting the sidebar and news section on the page height.
I would love some feedback cleaning all this up but I will settle for just getting these two boxes even and I will try and clean the mess up at the end as well as try and get it working in all browsers.

CSS

body {
 
background-color: #000;
background:#1E1B16 url(images/neonbg.gif);
 
text-align:center;
 
margin:0; 
 
 
}
 
 
 
 
#header{
width:800px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height:445px;
background:#1E1B16 url(images/bg_top.gif) repeat-x top;
margin-left: auto;
margin-right: auto;
}
 
#kesha{
position: relative; 
float: left;
 
    width:324px;
 
    height:445px;
 
    margin: 0px;
 
    top: 0px;
 
    left: 0px;
 
    background-color: #FF0000;
background:url(images/kesha_top.png) no-repeat;
 
}
 
#innerwrap{
	width:447px;
	height:445px;
	margin:0px;
	top: 0px;
	position: relative; 
	float: right;
 
 
}
 
#menu{
	width:447px;
	height:287px;
	margin:0px;
	top: 8px;
	position: relative; 
	float: right;
	background:url(images/headlines.png) no-repeat;
 
 
}
 
#menu p {
  margin-top: 75px;
  margin-left:75px;
  font-size: 12px;
  line-height: 1.5em;
  text-align: left;
  font-family: sans-serif;
  font-style: normal;
  font-variant: normal;
	font-weight: normal;
	font-size: small;
	line-height: 150%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-indent: 0ex;
	color: #222;
 
 
}
 
.class1	a:link {color: #E0FFFF; text-decoration: underline; }
.class1 a:active {color: #0000ff; text-decoration: underline; }
.class1 a:visited {color: #E0FFFF; text-decoration: underline; }
.class1 a:hover {color: #000; text-decoration: none; }
 
 
 
 
 
 
 
 
#album{
	margin:0px;
	width:447px;
	height:88px;
	bottom: -10px;
	right: -75px;
	position: relative; 
	float: left;
	background:url(images/album.png) no-repeat;
 
}
 
#headlines{
	margin:0px;
	width:447px;
	height:88px;
	bottom: 10px;
	right: -75px;
	position: relative; 
	float: left;
 
 
}
 
 
#logo{
	margin:0px;
	width:447px;
	height:88px;
	bottom: -15px;
	right: -95px;
	position: relative; 
	float: left;
	background:url(images/logo.png) no-repeat;
 
}
 
#links{
	margin:0px;
	width:800px;
	height:37px;
	bottom: 0px;
	right: 0px;
	position: relative; 
	float: right;
 
 
 
 
}
 
 
 
 
ul li {
	display: block;
	float: left;
	list-style: none;
}
 
ul li a {
	display: block;
	height: 37px; width: 86px;
	background: transparent url(images/links.png) no-repeat 0 0;
	text-indent:-9009px;
}
 
ul li#navigation2 a {
	width:110px;
	background-position: -86px 0;
}
 
ul li#navigation3 a {
	width:123px;
	background-position: -196px 0;
}
 
ul li#navigation4 a {
	width:97px;
	background-position: -319px 0;
}
 
ul li#navigation5 a {
	width:108px;
	background-position: -416px 0;
}
 
ul li#navigation6 a {
	width:100px;
	background-position: -524px 0;
}
 
ul li#navigation7 a {
	width:176px;
	background-position: -624px 0;
}
 
 
ul li a:hover {
	background-position: 0px -37px;
}
 
ul li#navigation2 a:hover {
	background-position: -86px -37px;
}
 
ul li#navigation3 a:hover {
	background-position: -196px -37px;
}
 
ul li#navigation4 a:hover {
	background-position: -319px -37px;
}
 
ul li#navigation5 a:hover {
	background-position: -416px -37px;
}
 
ul li#navigation6 a:hover {
	background-position: -524px -37px;
}
 
ul li#navigation7 a:hover {
	background-position: -624px -37px;
}
 
 
#content{
width:800px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#FFF;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
}
 
#content1{
width:500px;
background:#FFF;
font-family: Verdana;
font-size: 13px;
font-weight: normal;
text-decoration: none;
line-height: 17px;
color: #3e0f54;
float:left;
 
}
 
#content1 h1 {
	font-family: Verdana;
	font-size: 23px;
	line-height: 5px;
	padding-top: 27px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	color: #f40ce1;
}
 
#content1 h2 {
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	line-height: 5px;
	color: #0ccbf4;
}
 
 
#content1 a {
	font-family: Verdana;
	font-weight: normal;
	color: #0eebd8;
}
 
#content1 a:visited {
	font-weight: normal;
	color: #87d8bd;
}
 
#content1 a:hover {
	text-decoration: none;
	color: #3acbeb;
}
 
 
#sidebar{
width: 300px;
height: auto;
background:#fff;
font-family: Verdana;
font-size: 13px;
font-weight: normal;
text-decoration: none;
line-height: 17px;
color: #3e0f54;
float: right;
 
}
 
 
 
#content-lyrics{
width:780px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#FFF;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
}
 
#footer{
clear:both;
width:780px;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#66ccdd;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
}

HTML

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />		
    <title>title</title>
    <meta name="description" content="Kesha Fansite with Media, News, Social network, lyrics, and more!" />
    <meta name="keywords" content="Kesha, Tik Tok, Pop star, Social, Lyrics, Media, News, Blah Blah Blah, Sebert, Kmoney" />
    <meta name="author" content="Jly" />
    <link rel="stylesheet" type="text/css" href="master.css" />
    <meta name="google-site-verification" content="ct9oLaPt5WpwOhRqDd6KUKEh4CxltU52srO0S9Q-I6o" />
  </head>
<body>
<div id="header">
<div id="kesha"></div>
<div id="innerwrap">
<div id="menu"><p><?php
include("phpnews/headlines.php");
?></p></div>
<div id="album"></div>
<div id="logo"></div>
 
</div>
<div>
<ul id="links">
<li><a href="index.php">Main</a></li>
<li id="navigation2"><a href="media.php">Media</a></li>
<li id="navigation3"><a href="contact.php">Contact</a></li>
<li id="navigation4"><a href="links.php">Links</a></li>
<li id="navigation5"><a href="http://www.keshanow.net/gallery/" target="new">Photos</a></li>
<li id="navigation6"><a href="lyrics.php">Lyrics</a></li>
<li id="navigation7"><a href="http://www.keshanow.net/knetwork/" target="new">Fan Network</a></li>
</ul>
</div>
</div>
 
 
<div id="content">
<div id="content1">
 
<?php
include("phpnews/news.php");
?>
</div>
<div id="sidebar">fsd</div>
</div>
<div id="footer"><small><span
class="Apple-style-span"
style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span
class="Apple-style-span" style="text-align: center;"><small>The views
expressed on this site are in no way affiliated with Ke$ha or her
team/label. No copyright violations are intended. If there is
copyrighted information on this site, please e-mail me to remove it. <br>
<a href="index.html">Main</a> | <a href="media.html">Media</a> | <a
href="contact.html">Contact</a> | <a href="links.html">Links</a> | <a
href="http://www.keshanow.net/gallery/">Photos</a> | <a
href="lyrics.html">Lyrics</a> | <a
href="http://www.keshanow.net/knetwork/">Fan Network</a></small><br>
</span></span></small></div>
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Faux columns.

Faux columns.