CSS Layout Problems

August 21, 201115 yr

Hey everyone,

Been a while since I've been on here, but hoping to get the same expert level of help I got last time!

I've designed a site for a friend and am trying to code it into an HTML page before moving it to Wordpress so she can update it as necessary. I've attached the original design, and the CSS code below - as you can see, what I've got is getting there, but I'm not sure where it's going wrong in the CSS code that's moving the various elements around. I guess I'm struggling with the basic way of laying the page out - it looks like the width settings of the div content and sidebar are messing me around...

If anyone has any ideas that would be great!

body
{
background: #000000 url('./images/jpgs/bg-image.jpg') fixed no-repeat bottom center;
color: #333;
margin: 0px;
padding: 0px;
text-align: center;
}

h1, h2, h3, ul, li, p, form
{
margin: 0px;
padding: 0px
}

hr
{
display: none;
}

a{
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

.space
{
clear: both;
}

#page
{
margin: 0px auto;
padding: 0;
width: 960px;/*909*/
}

#header
{
background: url('./images/pngs/header-960x308.png') no-repeat top left;
height: 308px;
width: 960px;/*909*/
text-align: center;
}

#headerimg
{
height: 185px;
margin: 0px;
padding: 25px 0px 0px 45px;
text-align: left;
}

#top_nav
{
height: 45px;
padding: 20px 0px 0px 50px;
text-align: left;
}

#top_nav ul
{
	list-style: none;
}

#top_nav li
{
	display: inline;
}

#top_nav li a:hover
{
	background: url('./images/pngs/hover.png') no-repeat bottom center;
}

#top_sidebar
{
color: #fff;
font-weight: bold;
height: 10px;
padding-right: 0px;
text-align: right;
}

#content
{
background: url('./images/pngs/bg-635x1.png') repeat-y top right;
float: right;
text-align: left;
}

.blogcontent, .widecolumn
{
float: right;
padding: 0px 30px 0px 0px;
width: 635px;
}

.blogcontent form
{
	color: #fff;
	padding: 10px 50px 0px 90px;
}

.blogcontent input
{
	background-color: transparent;
	border: 1px solid #214b73;
	color: #fff;
}

.blogcontent #searchsubmit
{
	background: #b1b1b1;
	color: #214b73;
	font-weight: bold;
	padding: 2px;
}

.blogcontent h2
{
	color: #fff;
	font: bold 18px  Georgia, Arial;
	padding: 0px 50px 0px 90px;
}

.blogcontent small a
{
	font-size: 18px;
	padding: 0px 50px 0px 90px;
}

.post
{
padding: 0px 50px 0px 90px;
text-align: left;
}

.post h2
{
	color: #fff;
	padding: 0px;
}

.post .post_title
{
	float: left;
	width: 90%;
}

	.post_title h2, a
	{
		color: #b31414;
		font: normal 24px Georgia, Arial;
		padding: 0px;
		margin: 0px;
	}

	.post_title a
	{
		text-decoration: none;
	}

	.post_title a:hover
	{
		color: #fff;
	}

	.post_title small
	{
		color: #385673;
		font: normal 12px Georgia, Arial;
	}

		.post_title small a
		{
			color: #385673;
			font: normal 12px Georgia, Arial;
			padding: 0px;
			margin: 0px;
		}

.post .postmetadata
{
	background: url('./images/pngs/bg-45x58.png') no-repeat top left;
	float: right;
	height: 34px;
	padding: 12px 10px;
	width: 25px;
}

	.postmetadata a
	{
		color: #416fa3;
		text-decoration: none;
	}

	.postmetadata span
	{
		color: #416fa3;
		font: normal 24px Georgia, Arial;
		padding-left:5px;
	}

.entry
{
color: #c3c3c3;
font: normal 12px Arial;
padding: 20px 0px;
}

.entry a
{
	color: #385673;
	font: normal 12px Georgia, Arial;
	padding: 0px;
	margin: 0px;
}

.entry a:hover
{
	color: #69c;
}

.entry blockquote
{
	border: 2px dashed #042748;
	padding: 8px;
}

.entry img
{
	float: left;
	padding: 0px 20px 0px 0px;
}

.entry ul
{
	padding-left: 20px;
}

.entry li
{
	list-style: url('./images/pngs/bull-list.png');
}

.entry ol li
{
	list-style: decimal;
}	

.entry p
{
	text-align: justify;
	padding: 0px;
}

.entry span
{
	color: #b31414;
}

#sidebar
{
background: url('./images/pngs/bg-325x1.png') repeat-y top left;
float: left;
padding: 0px 0px;
text-align: top;
width: 325px;
}

#sidebar ul
{
	list-style: none;
	margin: 0px;
	padding: 5px 0px 0px 70px;
}

#sidebar li
{
	margin: 0px;
	padding: 0px 0px 0px 20px;
}

#sidebar li h2
{
	color: #fff;
	font: normal 18px Rockwell, Georgia, Arial;
	margin: 0px;
	padding: 10px 0px;
}

	#sidebar ul ul
	{
		list-style: none;
		margin: 0px;
	}

	#sidebar ul ul li
	{
		margin: 0px;
		padding: 0px 0px 0px 30px;
	}

	#sidebar ul ul li a
	{
		color: #69c;
		font: normal 12px Arial;
		text-decoration: none;
	}

	#sidebar ul ul li a:hover
	{
		color: #b31414;
	}

.bottom_sidebar
{
background: url('./images/pngs/bottom-325x90.png') no-repeat bottom left;
float: left;
padding: 0px 150px 0px 0px;
height: 0px;
text-align: left;
width: 325px;
}

#search
{
font: bold 12px Arial;
color: #fff;
padding: 10px 0px 0px 90px;
}

#search input
{
	background-color: transparent;
	border: 1px solid #214b73;
	color: #fff;
}

#search #searchsubmit
{
	background:#0B192C;
	color: #FFFFFF;
	font-weight: bold;
	padding: 2px;
}

#footer
{
background: url('./images/pngs/footer-960x200.png') no-repeat top left;
color: #fff;
height: 200px;
text-align: left;
width: 960px;
}

#footer .column1
{
	float: left;
	font: normal 10px Arial;
	padding: 0px 0px 0px 80px;
	width: 300px;
}

	.column1 .bottom
	{
		padding: 0px 0px 0px 40px;
	}

	.column1 a
	{
		color: #fff;
		font: normal 12px Arial;
		text-decoration: none;
	}

#footer .column2
{
	position: left;
	font: normal 12px Arial;
	padding: 5px 0px 0px 70px;
	width: 300px;
}

	.column2 h2
	{
		color: #457db9;
		font: normal 20px Rockwell;
	}

	.column2 ul
	{
		list-style: none;
	}

	.column2 a
	{
		color: #fff;
		font: normal 12px Arial;
		text-decoration: none;
	}

August 22, 201115 yr

You need to post a link to the online version so we can test with images and see your html markup, including head section. Have you got a doctype?

August 22, 201115 yr

you should post html and css file or links online, for easy detection and error correction

August 22, 201115 yr

Author

I've uploaded the site here

HTML file attached, CSS below.

As you can see, I need to swap the content block and the sidebar block. The template I've modified has these elements on opposite sides.

body
{
background: #000000 url('./images/jpgs/bg-image.jpg') fixed no-repeat bottom center;
color: #333;
margin: 0px;
padding: 0px;
text-align: center;
}

h1, h2, h3, ul, li, p, form
{
margin: 0px;
padding: 0px
}

hr
{
display: none;
}

a{
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

.space
{
clear: both;
}

#page
{
margin: 0px auto;
padding: 0;
width: 960px;/*909*/
}

#header
{
background: url('./images/pngs/header-960x308.png') no-repeat top left;
height: 308px;
width: 960px;/*909*/
text-align: center;
}

#headerimg
{
height: 185px;
margin: 0px;
padding: 55px 0px 0px 45px;
text-align: left;
}

#top_nav
{
height: 45px;
padding-left: 105px;
text-align: left;
}

#top_nav ul
{
	list-style: none;
}

#top_nav li
{
	display: inline;
}

#top_nav li a:hover
{
	background: url('./images/pngs/hover.png') no-repeat bottom center;
}

#top_sidebar
{
color: #fff;
font-weight: bold;
height: 10px;
padding-right: 155px;
text-align: right;
}

#content
{
background: url('./images/pngs/bg-635x1.png') repeat-y top left;
float: left;
text-align: left;
}

.blogcontent, .widecolumn
{
float: left;
padding: 10px 0px;
width: 635px;
}

.blogcontent form
{
	color: #fff;
	padding: 10px 50px 0px 90px;
}

.blogcontent input
{
	background-color: transparent;
	border: 1px solid #214b73;
	color: #fff;
}

.blogcontent #searchsubmit
{
	background: #b1b1b1;
	color: #214b73;
	font-weight: bold;
	padding: 2px;
}

.blogcontent h2
{
	color: #fff;
	font: bold 18px  Georgia, Arial;
	padding: 0px 50px 0px 90px;
}

.blogcontent small a
{
	font-size: 18px;
	padding: 0px 50px 0px 90px;
}

.post
{
padding: 0px 50px 0px 90px;
text-align: left;
}

.post h2
{
	color: #fff;
	padding: 0px;
}

.post .post_title
{
	float: left;
	width: 90%;
}

	.post_title h2, a
	{
		color: #b31414;
		font: normal 24px Georgia, Arial;
		padding: 0px;
		margin: 0px;
	}

	.post_title a
	{
		text-decoration: none;
	}

	.post_title a:hover
	{
		color: #fff;
	}

	.post_title small
	{
		color: #385673;
		font: normal 12px Georgia, Arial;
	}

		.post_title small a
		{
			color: #385673;
			font: normal 12px Georgia, Arial;
			padding: 0px;
			margin: 0px;
		}

.post .postmetadata
{
	background: url('./images/pngs/bg-45x58.png') no-repeat top left;
	float: right;
	height: 34px;
	padding: 12px 10px;
	width: 25px;
}

	.postmetadata a
	{
		color: #416fa3;
		text-decoration: none;
	}

	.postmetadata span
	{
		color: #416fa3;
		font: normal 24px Georgia, Arial;
		padding-left:5px;
	}

.entry
{
color: #c3c3c3;
font: normal 12px Arial;
padding: 20px 0px;
}

.entry a
{
	color: #385673;
	font: normal 12px Georgia, Arial;
	padding: 0px;
	margin: 0px;
}

.entry a:hover
{
	color: #69c;
}

.entry blockquote
{
	border: 2px dashed #042748;
	padding: 8px;
}

.entry img
{
	float: left;
	padding: 0px 20px 0px 0px;
}

.entry ul
{
	padding-left: 20px;
}

.entry li
{
	list-style: url('./images/pngs/bull-list.png');
}

.entry ol li
{
	list-style: decimal;
}	

.entry p
{
	text-align: justify;
	padding: 0px;
}

.entry span
{
	color: #b31414;
}

#sidebar
{
background: url('./images/pngs/bg-325x1.png') repeat-y top left;
float: left;
padding: 0px 20px;
text-align: left;
width: 285px;
}

#sidebar ul
{
	list-style: none;
	margin: 0px;
	padding: 5px 0px;
}

#sidebar li
{
	margin: 0px;
	padding: 0px 0px 0px 20px;
}

#sidebar li h2
{
	color: #fff;
	font: normal 18px Rockwell, Georgia, Arial;
	margin: 0px;
	padding: 10px 0px;
}

	#sidebar ul ul
	{
		list-style: none;
		margin: 0px;
	}

	#sidebar ul ul li
	{
		margin: 0px;
		padding: 0px 0px 0px 30px;
	}

	#sidebar ul ul li a
	{
		color: #69c;
		font: normal 12px Arial;
		text-decoration: none;
	}

	#sidebar ul ul li a:hover
	{
		color: #b31414;
	}

.bottom_sidebar
{
background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
float: right;
padding: 0px 0px 0px 15px;
height: 90px;
text-align: left;
width: 310px;
}

#search
{
font: bold 12px Arial;
color: #fff;
padding: 0px 0px 15px 15px;
}

#search input
{
	background-color: transparent;
	border: 1px solid #214b73;
	color: #fff;
}

#search #searchsubmit
{
	background:#0B192C;
	color: #FFFFFF;
	font-weight: bold;
	padding: 2px;
}

#footer
{
background: url('./images/pngs/footer-960x200.png') no-repeat top left;
color: #fff;
height: 200px;
text-align: left;
width: 960px;
}

#footer .column1
{
	float: left;
	font: normal 10px Arial;
	padding: 0px 0px 0px 80px;
	width: 300px;
}

	.column1 .bottom
	{
		padding: 50px 0px 0px 40px;
	}

	.column1 a
	{
		color: #fff;
		font: normal 12px Arial;
		text-decoration: none;
	}

#footer .column2
{
	float: left;
	font: normal 12px Arial;
	padding: 35px 0px 0px 0px;
	width: 250px;
}

	.column2 h2
	{
		color: #457db9;
		font: normal 20px Rockwell;
	}

	.column2 ul
	{
		list-style: none;
	}

	.column2 a
	{
		color: #fff;
		font: normal 12px Arial;
		text-decoration: none;
	}

final.html

August 23, 201115 yr

This is the best I can do:-

http://www.wickham43.com/forumposts/ppdfinal110822.html

It validates and looks more or less OK in Firefox and IE9 but the background image border on the left side of the #content div doesn't line up and I think it's because the image doesn't match the header and footer images.

I altered quite a lot in both the html file and css file, including the image paths to match my folder structure.

There's quite a lot I don't like in the code which is based on your code, but it works and looks like your original page with the sidebar swapped to the left.

Hope it helps.

ppdesign and jheg
2

August 23, 201115 yr

Author

This is the best I can do:-

http://www.wickham43.com/forumposts/ppdfinal110822.html

It validates and looks more or less OK in Firefox and IE9 but the background image border on the left side of the #content div doesn't line up and I think it's because the image doesn't match the header and footer images.

I altered quite a lot in both the html file and css file, including the image paths to match my folder structure.

There's quite a lot I don't like in the code which is based on your code, but it works and looks like your original page with the sidebar swapped to the left.

Hope it helps.

Everything seems fine here in Safari...brilliant job! Can I grab the HTML and CSS from somewhere?

August 23, 201115 yr

Everything seems fine here in Safari...brilliant job! Can I grab the HTML and CSS from somewhere?

Just look at View/ Source for the html and save it. If you have Firefox, use right click View Page Source then click the CSS file link and save that, or put the css filename instead of the html filename in your browser window, like this:-

http://www.wickham43.com/forumposts/ppdstyle110822.css

Edited August 23, 201115 yr by Wickham

ppdesign
1

August 23, 201115 yr

Author

Thanks Wickham - have grabbed the files and updated with new files. For some reason the header image isn't showing, despite being in the correct place from what I can see....

http://pixelproofdesign.co.uk/test/ppdfinal110822.html

August 23, 201115 yr

www.pastebin.com

August 23, 201115 yr

Author

Right - got the header back in there - missing a full stop in the code. Doh!

Also managed to tweak the tables a little bit so everything lines up - just need to get rid of a bit of extra length in the sidebar that shows below the base of it. Not sure where it's coming from!

Edited August 23, 201115 yr by ppdesign

CSS Layout Problems

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)