css template not working [Archive] - Dynamic Drive Forums

pngsigut

07-02-2008, 06:24 PM

i have this template i got off of this site but it does not work. When i view the web page the coloumns are shifted to the left so all you see is half of the right column and to left side of the screen.

<style type="text/css">

body{
margin: 0;
padding: 0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
width: 940px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 12px;
}

#contentwrapper{
float: right;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*width of right column in pixel*/
margin-left: -190px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 20px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}

A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}

A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
}

</style>

can anyone help with this issue.

techietim

07-02-2008, 06:32 PM

Please include your HTML as well.

pngsigut

07-02-2008, 06:45 PM

sorry bout that
<html>
<head>
<link href = "style.css" rel = "stylesheet" type = "text/css">
</head>
<title></title>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>PowerNet Global
</h1>

</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<center>main informaition.</center>
kasdjfl;kjaslkd;jflkasjdf;lkjaklsdj;lkj;lsjdfkj
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>left column: <em>180px</em></b>
<table border="0" width="180">
<tr>
<td width="100%" bgcolor="#E6E6E6"><b>links to site<b>
</tr>
</td>
<tr>
<td width="100%"><a href="services.html" class="menulink" class=&{ns4class};>Services</a>
</td>
</tr>
</table>
;kasjd;kfjalsjdf;lkjasdkljfla;ksjdflkjaslkjdglkhasfl;ghla;ksgl;asgljasjfgfkljasdf
</div>
</div>

<div id="rightcolumn">
<div class="inndertube">
fill with local/world news with weather or other info

<script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=140&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1p x+solid+%230088CC&output=js">
</script>
</div>
</div>

<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>
</div>

</body>
</html>

techietim

07-02-2008, 06:59 PM

No offense, but you have really butchered that code up. Would you please link me to the original template you used and I'll try and work you through it.

pngsigut

07-02-2008, 07:02 PM

http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-31-fixed-fixed-fixed/ how did i butcher that did think i could.

pngsigut

07-02-2008, 10:07 PM

is anyone able to help.

rangana

07-03-2008, 12:37 AM

First, you missed to add a DTD (http://alistapart.com/articles/doctype) in your page.

Secondly, I wonder why you have to float the element to the right, when your expected behavior is to the left:

#contentwrapper{
float: right;
width: 100%;
}

Change the highlighted to left.

Third, you were not closing your contentwrapper div:

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<center>main informaition.</center>
kasdjfl;kjaslkd;jflkasjdf;lkjaklsdj;lkj;lsjdfkj
</div>
</div>
</div>

Add the highlighted.

Lastly, you have this typo:

div id="rightcolumn">
<div class="inndertube">

And as a parting thought, you've got a number of deprecated tags (<center>) and attributes (http://www.codehelp.co.uk/html/deprecated.html):

Hope it helps.

pngsigut

07-03-2008, 04:05 PM

i thought the contentwrapper should enclose the entire page and other div tags... and i was using the tags just for testing. but thanks for the help so far.

pngsigut

07-03-2008, 11:47 PM

can anyone help on why this does not show up in IE

rangana

07-03-2008, 11:52 PM

Which does'nt show you mean?

Show us a your complete modification or better a link instead.

pngsigut

07-04-2008, 12:01 AM

I can only give the code as the server is a local test server and unable to get to it out of the network here is the html.

<html>
<head>

<link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>

<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>PowerNet Global
</h1>

</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up to date information to help you needs a little better. The site may continue to change over the next few months, if you have any suggestions on how to improve our site to bring you better service please feel free to eamil us at <a href="mailto:support@pngusa.net">Support@pngusa.net</a><script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&countr y=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&output=js">
</script>
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Navigation</b>
<table border="0" width="180">
<tr>
<td width="100%"><h5>Sevice Information</h5>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink" class=&{ns4class};>Overview Of Services</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
</td>
</tr>
</table>
</div>
</div>

<div id="rightcolumn">
<div class="innertube">
<script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1p x+solid+%230088CC&output=js">
</script>
</div>
</div>

<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>

</body>
</html>

and the css
<style type="text/css">

body{
margin: 0;
padding: 0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
width: 940px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 12px;
background: url(images/png_logo.gif) no-repeat right bottom;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 195px; /*width of right column in pixel*/
margin-left: -195px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 2px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}

A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}

A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
}

</style>

rangana

07-04-2008, 12:08 AM

It's showing.

Remove the <style type="text/css"> and </style> in your style.css.

pngsigut

07-04-2008, 12:11 AM

ok i did that but the right column is missing when you look at it now.

rangana

07-04-2008, 12:34 AM

As I said, you should add a DTD.

Have this right above your <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

It's showing, apparently you are using the wrong tag.
You're calling an external page not a script, so replace this part:

<script src="http://www.google.com/xhtml?lang=en&country=us&.lang=en&.country=us&synd=ig&mid=0&ifpctok=3212911599792006246&parent=&libs=yiCLud5iV1U/lib/libcore.js">
</script>

to:

<iframe src="http://www.google.com/xhtml?lang=en&country=us&.lang=en&.country=us&synd=ig&mid=0&ifpctok=3212911599792006246&parent=&libs=yiCLud5iV1U/lib/libcore.js">
</iframe>

And lastly, close your maincontainer div. Add the highlighted:

<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>
</div>

See if it helps.

pngsigut

07-04-2008, 12:19 PM

Thanks for the help.... and i was looking at the DTD and went with transitional as i set the table borders and strict does not allow that. and fixed the other errors you pointed out. I am still unable to get the page to look correct in IE 6 and i am unable to test in ie 7. is there any other things you can point out that could fix the issue.

rangana

07-04-2008, 01:20 PM

My apologies, but I don't have IE6 for test. Maybe some other members might be able to help you with IE6 problem.

Anyway, the main reason of my response was to ask for your complete modification (wit suggestion above).
This will (somehow) speed us up helping you.

pngsigut

07-04-2008, 03:36 PM

sorry that i can't give a direct link.

here is the html i change the script to iframe like you suggested but the frames did not retain there size setting and took up half the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>

<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>PowerNet Global
</h1>

</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up
to date information to help you needs a little better. The site may continue to change over the next few months, if you have
any suggestions on how to improve our site to bring you better service please feel free to eamil us at
<a href="mailto:support@pngusa.net">Support@pngusa.net</a>
<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&countr y=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><strong>Navigation</strong>
<table border="0" width="180">
<tr>
<td ><h5>Sevice Information</h5>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink">Overview Of Services</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
</td>
</tr>
</table>
</div>
</div>

<div id="rightcolumn">
<div class="innertube">
<script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1p x+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>

<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>
</div>

</body>
</html>

pngsigut

07-07-2008, 03:59 PM

well i think in know whats wrong but don't know how to fix this..... if i am right i need to have the ie 6 css switch things where i would have *body {} or something like that for ie 6 to use instead of the main css. anyone got any ideas.

I found another way to do this with an IE selector of  but i do not know what i would have to make the css to for this to work can anyone point me in the correct path

pngsigut

07-07-2008, 07:12 PM

i hate to be a pest but can anyone show me how to change the css to be compliant with ie 6 or a website that may assist me in doing so.