Template prob

Chrispy · #1 10-29-2007, 12:26 AM

This won't budge - there's this problem with the right pane of the template for some reason. I started off with just a wrapper, footer, middle, and right pane, and since I've added a left pane, the crap's been hittin' the fan!

Here's the code for my HTML:

Code:

<!DOCTYPE>

<html>
<head>

<title>Title</title>

<link rel="stylesheet" href="default.css" type="text/css" />

</head>
<body>

<div id="wrapper">This is a wrapper.
This is a wrapper.
This is a wrapper.
This is a wrapper.
This is a wrapper.
<br /><br />
</div>

<div id="left">
<br />
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
This is the left pane.
<br /><br />
</div>

<div id="main">
<br />
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
This is the main section of this page.
<br /><br />
</div>

<div id="right">
<br />

<br /><br />
</div>

<div id="footer">
<br />
This is the footer.
This is the footer.
This is the footer.
This is the footer.
This is the footer.
<br />
</div>

</body>
</html>

And here's the CSS:

Code:

/* default.css */
/* CSS ELEMENTS */

body {
       background: #000000;
       color: #FFFFFF;
       font-family: Verdana;
       font-size: 13px
}

h1 {
       color: #FFFFFF;
       font-size: 25px
}

h2 {
       color: #FFFFFF;
       font-size: 20px
}

h3 {
       color: #FFFFFF;
       font-size: 15px
}

h4 {
       color: #FFFFFF;
       font-size: 10px
}

#wrapper {
	background: #575656;
	width: 891px;
	margin: 0 auto;
        float: left;
	text-align: center
}

#main {
	background: #575570;
	width: 340px; /* 560px, 660px */
	margin: 0 auto;
        float: left;
        font-size: 12px;
	text-align: center
}

#right {
	background: #575566;
	width: 231px; /* 191, 131, 231 */
	float: right;
        font-size: 12px;
	text-align: center;
        margin: 0 auto
}

#footer {
	background: #575656;
	width: 891px; /* 691px */
	margin: 0 auto;
        float: left;
	text-align: center
}

#left {
	background: #575566;
	width: 231px; /* 191, 131 */
	float: left;
        font-size: 12px;
	text-align: left;
        margin: 0 auto
}











/* BACKUP "JUST IN CASE"

#wrapper {
	background: #575656;
	width: 891px;
	margin: 0 auto;
        float: left;
	text-align: center
}

#main {
	background: #575566;
	width: 660px; /* 560px, 660px */
	margin: 0 auto;
        float: left;
        font-size: 12px;
	text-align: center
}

#right {
	background: #575566;
	width: 231px; /* 191, 131, 231 */
	float: right;
        font-size: 12px;
	text-align: center;
        margin: 0 auto
}

#footer {
	background: #575656;
	width: 891px; /* 691px */
	margin: 0 auto;
        float: left;
	text-align: center
}

#left {
	background: #575566;
	width: 231px; /* 191, 131 */
	float: left;
        font-size: 12px;
	text-align: left;
        margin: 0 auto
}

END BACKUP */

Editting the right pane via CSS does nothing at all - font size, BG colour, nothing works.

I played around with the text in the right pane's DIV, but no luck.

Thanks for any assistance guys.

Chris

Lakie · #2 10-29-2007, 03:37 AM

your closing off the div of the wrapper o early, you only close it right before you close off body, so in your code....

<div id="wrapper">This is a wrapper.
This is a wrapper.
This is a wrapper.
This is a wrapper.
This is a wrapper.
<br /><br />
<div id="left">

...

This is the footer.
<br />
</div> (closes footer)
</div> (closes wrapper)
</body>
</html>

___

Youll also want to mess with the code a bit I reckon your center block willbe pushed left, itll look off center

Chrispy · #3 10-29-2007, 10:44 PM

Only having one </div> that closes off everything at the end seems to be screwing up things for me - besides, I don't really see having multiple </div>s as a problem (seeing it's all still valid XHTML). But however, I do think it's cleaner with just one.

BTW, I'll try and mess with the centre section width and see if the right pane "jumps" in.

Chris

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Prob	turkey	Delta Force	10	04-04-2008 09:56 PM
image prob	worms12	Delta Force	4	12-21-2006 12:19 PM
CS2 prob	Steve	Sigs and Graphics	1	05-02-2005 05:55 AM
Big Prob	GeeFuss	Web design and Programming	16	04-15-2005 08:13 PM
bhd prob	.enfo.	Tech Support	3	11-23-2003 10:54 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)