PDA

View Full Version : Help with coding. REP+



jacko2244
03-05-2010, 05:42 PM
I have a problem with coding, this is the first 2 collum layout i've coded & I have came across a problem, can somebody help me please.

I will give REP+ for problem solved.

Direct Link: http://hufile.cc/1272908501.png
http://hufile.cc/1272908501.png

jacko2244
03-05-2010, 05:52 PM
Sorry, I forgot to put the HTML & CSS in. My bad. Could a MOD merge my posts please.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>FansiteName - Welcome to version one!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK REL=StyleSheet HREF="style.css" TITLE="Contemporary">
</head>

<div id="container">

<div id="djsays"><strong>DJ Jack:</strong> Hello everybody, hope you like the new version of FansiteName and get them requests in!</div>

<div id="banner"></div>

<div id="navigation"><center><strong>Home | FansiteName | Radio | Community | Staff of the week | Archvie | Forum</strong></center></div>

<div id="orangebox"><a href="#"><img src="welcome.png" alt="Welcome image." border="0" /></a> <a href="#"><img src="feedback.png" alt="Feedback link." border="0" /></a></div>

<div id="midcontainer">
<div id="maincontenttop"></div>
<div id="maincontentmid">
Fusce auctor blandit commodo. Donec euismod magna quis nisi accumsan aliquam. Vestibulum tincidunt aliquet nulla quis tempor. Quisque mattis arcu ac felis congue et sodales lectus auctor. Donec aliquam placerat dui non convallis? Donec sed erat vel nibh porttitor sollicitudin sed sit amet nibh. Suspendisse ut ante et orci pulvinar eleifend sit amet eu arcu. Nam placerat mattis nunc ut ornare. Curabitur eu odio metus. Curabitur ac magna enim.
<br><br>


Morbi orci quam, venenatis ac eleifend sit amet, pretium nec eros. Fusce mauris mauris, aliquet vulputate pulvinar a, faucibus a turpis. Nam ut nulla justo, eu consectetur mauris. Aliquam cursus massa consectetur urna posuere a ullamcorper urna aliquam. Nulla tortor metus, lacinia id sollicitudin aliquet, egestas vitae massa. Vivamus eget mauris ut urna venenatis pulvinar. Aenean in ante ante, eget feugiat massa? Nulla tristique orci ac nisl mollis rhoncus. Proin convallis ultricies orci, eu egestas erat venenatis at. Aliquam tempus pretium feugiat. Nulla facilisi. Integer id dapibus dui. Maecenas felis risus, mattis sit amet molestie nec, consequat non metus. Sed rutrum risus nisl. In nec eros ante. Pellentesque vulputate, est vitae semper commodo, lacus arcu dignissim purus, vitae posuere dui eros nec tellus. Aliquam in ornare diam. Integer sed turpis risus. Nam at magna vitae tellus lobortis scelerisque.
<br><br>


Nullam volutpat sollicitudin nulla; quis venenatis orci tempor id. Mauris mauris lacus, venenatis eget congue sed, imperdiet ut quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus euismod, est et congue semper, massa purus tempor libero, sit amet vehicula leo diam id lorem. In placerat placerat vestibulum. Donec porta ligula egestas magna commodo sit amet rutrum diam volutpat. Morbi iaculis metus non ante congue gravida feugiat sapien pretium. Aliquam tellus ipsum, gravida eget adipiscing a, rhoncus eu odio. Curabitur arcu arcu, dapibus nec lobortis eget, vestibulum in ipsum. Etiam nec arcu ultricies nisi pulvinar gravida. Vivamus laoreet justo nulla! Morbi nibh sapien, placerat eget placerat in, fringilla et sapien.
<br><br></div>
<div id="maincontentbot">

<div id="yellowboxtop"></div>
<div id="yellowboxmid">Woahh weee woo wee wee</div>
<div id="yellowboxbot"></div>

</div>
And the CSS


body {
text-align: center;
background: url(background.png);
margin-top: 100px;
}
#container {
width: 900px;
margin: auto;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
}

#djsays {
background: url(djsays.png) no-repeat;
height: 23px;
width: 825px;
text-align: left;
padding-left: 75px;
padding-top: 7px;
padding-right: 7px;
color:white;
}

#banner {
background: url(banner.png) no-repeat;
height: 198px;
width: 900px;
}

#navigation {
background: url(navigation.png) no-repeat;
height: 23px;
text-align: left;
padding-left: 75px;
padding-top: 7px;
padding-right: 7px;
color:white;
}

#orangebox {
background: url(orangebox.png) no-repeat;
height: 154px;
text-align: left;
padding-left: 17px;
padding-top: 10px;
padding-right: 7px;
color:white;
}

#midcontainer {
background: url(midcontainer.png);
height: auto;
width: 895px;
padding-left: 5px;
}

#maincontenttop {
background: url(maincontenttop.png);
height: 44px;
width: 593px;
}

#maincontentmid {
background: url(maincontentmid.png);
width: 583px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: left;
}

#maincontentbot {
background: url(maincontentbot.png);
height: 6px;
width: 593px;
}

#yellowboxtop {
background: url(yellowboxtop.png);
height: 44px;
width: 281px;
float: right;
}
#yellowboxmid {
background: url(yellowboxmid.png);
width: 281px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: left;
float: right;
}
#yellowboxbot {
background: url(yellowboxbot.png);
height: 6px;
width: 281px;
float: right;
}

Edited by Nicola (Forum Super Moderator): Please do not multiple post within the 15 minute edit time, thanks :)

iJoe
03-05-2010, 06:53 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>FansiteName - Welcome to version one!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK REL=StyleSheet HREF="style.css" TITLE="Contemporary">
</head>

<div id="container">

<div id="djsays"><strong>DJ Jack:</strong> Hello everybody, hope you like the new version of FansiteName and get them requests in!</div>

<div id="banner"></div>

<div id="navigation"><center><strong>Home | FansiteName | Radio | Community | Staff of the week | Archvie | Forum</strong></center></div>

<div id="orangebox"><a href="#"><img src="welcome.png" alt="Welcome image." border="0" /></a> <a href="#"><img src="feedback.png" alt="Feedback link." border="0" /></a></div>

<div id="midcontainer">
<div id="maincontenttop"></div>
<div id="maincontentmid">
Fusce auctor blandit commodo. Donec euismod magna quis nisi accumsan aliquam. Vestibulum tincidunt aliquet nulla quis tempor. Quisque mattis arcu ac felis congue et sodales lectus auctor. Donec aliquam placerat dui non convallis? Donec sed erat vel nibh porttitor sollicitudin sed sit amet nibh. Suspendisse ut ante et orci pulvinar eleifend sit amet eu arcu. Nam placerat mattis nunc ut ornare. Curabitur eu odio metus. Curabitur ac magna enim.
<br><br>


Morbi orci quam, venenatis ac eleifend sit amet, pretium nec eros. Fusce mauris mauris, aliquet vulputate pulvinar a, faucibus a turpis. Nam ut nulla justo, eu consectetur mauris. Aliquam cursus massa consectetur urna posuere a ullamcorper urna aliquam. Nulla tortor metus, lacinia id sollicitudin aliquet, egestas vitae massa. Vivamus eget mauris ut urna venenatis pulvinar. Aenean in ante ante, eget feugiat massa? Nulla tristique orci ac nisl mollis rhoncus. Proin convallis ultricies orci, eu egestas erat venenatis at. Aliquam tempus pretium feugiat. Nulla facilisi. Integer id dapibus dui. Maecenas felis risus, mattis sit amet molestie nec, consequat non metus. Sed rutrum risus nisl. In nec eros ante. Pellentesque vulputate, est vitae semper commodo, lacus arcu dignissim purus, vitae posuere dui eros nec tellus. Aliquam in ornare diam. Integer sed turpis risus. Nam at magna vitae tellus lobortis scelerisque.
<br><br>


Nullam volutpat sollicitudin nulla; quis venenatis orci tempor id. Mauris mauris lacus, venenatis eget congue sed, imperdiet ut quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus euismod, est et congue semper, massa purus tempor libero, sit amet vehicula leo diam id lorem. In placerat placerat vestibulum. Donec porta ligula egestas magna commodo sit amet rutrum diam volutpat. Morbi iaculis metus non ante congue gravida feugiat sapien pretium. Aliquam tellus ipsum, gravida eget adipiscing a, rhoncus eu odio. Curabitur arcu arcu, dapibus nec lobortis eget, vestibulum in ipsum. Etiam nec arcu ultricies nisi pulvinar gravida. Vivamus laoreet justo nulla! Morbi nibh sapien, placerat eget placerat in, fringilla et sapien.
<br><br></div>
<div id="maincontentbot"></div>
</div>

<div id="yellowboxtop"></div>
<div id="yellowboxmid">Woahh weee woo wee wee</div>
<div id="yellowboxbot"></div>

</div>


the first </div> ends the maincontentbot

The second ends the mid container which is keeping the yellow in the middle

90% sure that will work now

Want to hide these adverts? Register an account for free!