XHTML/CSS Conversion Failing

Xtremer360 · June 8, 2011

I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong?

PSD jpg

kansasoutlawwrestling.com/wrestling2.jpg

Site

kansasoutlawwrestling.com

cssfreakie · June 8, 2011

Sorry the wizards (with mind reading skills) are on a sabbatical, maybe be more precise and give some actual code / symptoms your facing which need to be solved.

Philip · June 8, 2011

Offending code would be nice.

I can tell you just by looking at the site, #content has margin: 0; when it should be margin: 0 auto; to match #nav-wrap

sunfighter · June 8, 2011

When you place a <div> inside of a <div> you can not make it's width larger than the containing element or you end up with what you have.

An ex.

You have <div id="content-middle"> this is 395px wide, but inside of this div you have welcome-title; width:420px; and main-news width: 530px;

Also your logo is too large and not centered. Your footer uses position:fixed and will run into your page smaller browser settings.

Start with the header - three content divs and the footer. Get them worked out and slowly add divs to them. The added divs should inherent the width.

sunfighter · June 9, 2011

I had a little time to look this over. Made a bunch of changes in the css file. You should be able to find what i did, if not ask.

CSS:

/*------------------------------Reset style Starts-------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;/*font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;*/vertical-align:baseline;}
body{line-height:1;color:black;background:white;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{text-align:left;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
/* HTML5 tags */
header, section, footer, aside, nav, article, figure {display: block;}
/*------------------------------Reset style Ends-------------------------------*/
a { text-decoration:none; color:red }
ul { list-style:none }
ol { color: red; }
li.event-name { color:red; }
hr { margin: 10px 0px 10px 0px; }
P { margin-bottom: 10px; text-indent: 5% }


body {
    font-family:Verdana, Geneva, sans-serif;
    color:#FFF;
    background-color:#000;
    font-size:12px;
}

div.clear-both {
    clear:both;
}

div#page-wrap {
    margin-right: auto;
    margin-left: auto;
    //margin-bottom: 150px;
    padding:0px;
    width:930px;
    background-image:url(http://kansasoutlawwrestling.com/images/head2-bg.png);
    background-repeat:no-repeat;
}

div#nav-wrap {
    margin-left:auto;
    margin-right:auto;
    padding:134px 0 30px 0;
    width:637px;
    height:37px;
}

div#nav-bar {
    margin:0;
    padding:0;
    width:637px;
    height:37px;
    background-image:url(http://kansasoutlawwrestling.com/images/nav-sprite.png);
    background-repeat:no-repeat;
}

div#content {
    margin:0;
    //padding:0;
    padding-left:100px;
    //width:695px;
    width:950px;
margin-right: auto;
margin-left: auto;
}

div#content-left {
    margin:0;
    padding:0;
    width:180px;
    float:left;
}

div#content-middle {
    margin:0;
    padding:0;
    width:395px;
     float:left;
    padding: 0px 20px 0px 20px;
}

div#content-right {
    margin:0;
    padding:0;
    width:130px;
    float:left;
}

div#welcome-title {
    margin:0 auto;
    width:420px;
    height:57px;
    background-image:url(http://kansasoutlawwrestling.com/images/sprite.png);
    background-repeat:no-repeat;
    background-position:0px 0px;
}

/*div#main-news {
    width: 530px;
}*/

img#main-news-pic {
    float: left;
    width: 183px;
    height: 142px;
    padding-right:10px;
}

div#news-articles {
    margin: 0px;
    width: 418px;
    height: 34px;
    background-image: url(http://kansasoutlawwrestling.com/images/sprite.png);
    background-repeat:no-repeat;
    background-position: 0px -303px

}

div#top5 {
    width:160px;
    height:75px;
margin-right:auto;
margin-left:auto;
    background-image:url(http://kansasoutlawwrestling.com/images/sprite.png);
    background-repeat:no-repeat;
    background-position:0px -140px;
}

div#rankings {
    //width: 150px;
    text-align: center;
}

div#rankings ol {
    margin: 0px auto;
}

div#upcoming-events {
    width:130px;
    height:75px;
    background-image:url(http://kansasoutlawwrestling.com/images/sprite.png);
    background-repeat:no-repeat;
    background-position:-12px -215px;
float:left;
}

div#events {
    padding: 0px 10px 10px 10px;
    font-size: 11.5px;
}

div#poll {
    width:130px;
    height:75px;
    background-image:url(http://kansasoutlawwrestling.com/images/sprite.png);
    background-repeat:no-repeat;
    background-position:-12px -65px;
float:left;
}

div#monthly-poll-question {
    padding: 0px 10px 10px 10px;
}

span#poll-question {
    color: red;
}

div#footer {
    //position:fixed;
    //z-index:950;
    margin:0 0 1px 0;
    padding:0;
    bottom:0;
    //width:100%;
    //height:150px;
}

div#footer-wrap {
    margin:0 auto;
    //padding:100px 0 0 0;
padding-top: 100px;
    width:930px;
    //height:100px;
    text-align:center;
    background-image:url(http://kansasoutlawwrestling.com/images/footer.png);
    background-repeat:no-repeat;
}

div#footer-wrap span {
    display: block;
    //padding: 10px 0px 0px 0px;
}

A small change to the html file:

<!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=us-ascii" />
<title>Kansas Outlaw Wrestling :: True Outlaws of the Midwest</title>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<base href="http://kansasoutlawwrestling.com/" />
</head>

<body>

<div id="page-wrap">
<div id="nav-wrap">
<div id="nav-bar"></div>
</div>
<div id="content">
<div id="content-left"><img src="images/spotlight/default.png" alt="Wrestler Spotlight" />
	<div id="top5"></div>
	<div id="rankings">
		<ol>
		<li><a href="#">TBD</a></li>
		<li><a href="#">TBD</a></li>
		<li><a href="#">TBD</a></li>
		<li><a href="#">TBD</a></li>
		<li><a href="#">TBD</a></li>
		</ol>
		<br />
	</div>
	<!--<div class="clear-both"></div>-->
</div>
<div id="content-middle">
	<div id="welcome-title"></div>
	<div id="main-news"><img id="main-news-pic" src="images/logo.png" alt="Kid Wonder Angered With KOW Management" />
		<p>Pellentesque habitant morbi tristique senectus et netus et
		malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
		vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
		amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
		placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
		pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae,
		ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		<p>Pellentesque habitant morbi tristique senectus et netus et
		malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
		vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
		amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
		placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
		pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae,
		ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
		condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
		dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
		Praesent dapibus, neque id cursus faucibus, tortor neque egestas
		augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam
		dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
		metus</p>
	</div>
	<div id="news-articles"></div>
	<!--<div class="clear-both"></div>-->
</div>

<div id="content-right">
	<div id="upcoming-events"></div>
	<div id="events">
		<ul class="event-info">
		<li class="event-name">First City Festival</li>
		<li>September 11th 2009 7pm</li>
		</ul>
		<hr />
		<ul class="event-info">
		<li class="event-name">First City Festival</li>
		<li>September 11th 2009 7pm</li>
		</ul>
		<hr />
		<ul class="event-info">
		<li class="event-name">First City Festival</li>
		<li>September 11th 2009 7pm</li>
		</ul>
		<hr />
		<ul class="event-info">
		<li class="event-name">First City Festival</li>
		<li>September 11th 2009 7pm</li>
		</ul>
	</div>

	<div id="poll"></div>
	<div id="monthly-poll-question">
		<form action="poll.php" method="post"><span id="poll-question">What
		do you think of the new website?<br /></span>
		<input name="poll_button" type="radio" />Great<br />
		<input name="poll_button" type="radio" />Okay <br />
		<input name="poll_button" type="radio" />Bad <br />
		<input name="poll_button" type="radio" />Change It
		</form>
	</div>
	<div class="clear-both"></div>
</div>
<div class="clear-both"></div>
</div>  <!--end of "content"-->


<!--<div class="clear-both"></div>-->



<!--<div id="footer">-->
<div id="footer-wrap">
<span>
	<a href="http://kansasoutlawwrestling.com">Home</a> |
	<a href="http://kansasoutlawwrestling.com/aboutus">About Us</a> |
	<a href="http://kansasoutlawwrestling.com/sitemap">Site Map</a> |
	<a href="http://kansasoutlawwrestling.com/contactus">Contact Us</a> |
	<a href="/feed">News Feed</a>
</span>
<span>© 2010 Kansas
	Outlaw Wrestling, LLC. All Rights Reserved.
</span>
</div>
<!--</div>-->
</div>  <!--end of "page-wrap"-->   <!--THIS HAS BEEN MOVED-->
</body>
</html>

I had to to change your img to absolute addresses. You should cange them back.

Sign In

XHTML/CSS Conversion Failing

Recommended Posts

Xtremer360

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information