14 replies [Last post]
Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

I've created my first layout using CSS, but here's the problem I've ran into:

I've centered the content, and in IE it fits perfectly on the background, but in Firefox it's off from the left about 170 pixels or so.

The page:
http://home.wanadoo.nl/dinkela/portfolio/t/index.htm

the CSS

html {
	margin: 0px;
	padding: 0px;
}

body {
	background: #9F9282 url(img/bg_container.gif) repeat-y center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px; 
	padding: 0px;
}

p { 
	color: #575757;
	font-size: 10px;
	margin-top: 0px; 
	text-align: justify;
}

h3 {
	background: White url(img/puce02.gif) no-repeat left;
	margin-top: 70px; 
	margin-bottom: 8px;
	font-weight: bold;
	margin-left: 5px;
}

h3 span {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	/*color: #514A42;*/
	color: Black;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 5px;
	margin-left: 32px;
}

a:link, a:visited {
	color: #000; 
	text-decoration: none;
	text-transform: uppercase;
}
	
a:hover, a:active { 
	text-decoration: underline; 
	color: #000;
}

/* specific divs */
#container { 
	width: 460px;
	margin: 0 auto;
	position:relative;
    margin: 0 auto;
}
	
.resources {
	display: none;
}

#pageHeader {	display:none	}


#quickSummary {
	background: White;
	margin: 20px 10px 5px 10px;
	padding: 10px 10px 10px 10px;
	width: 440px;
}

#quickSummary p {
	color: Black;
}

.p5 {
	margin: 50px 0px 30px 40px;
	color: Black;
	font-size: 11px;
	text-transform: uppercase;
}

#preamble {
	padding-left: 10px;
}

#update {
	padding-left: 10px; 
	margin-bottom: 40px;
}

#linkList {
	position: absolute;
	top: 0px; 
	width: 700px;
}

#linkList2 {
	position: absolute; 
	top: 0px; 
	width: 700px;
}

#lselect {
	position: absolute;
	padding: 0;
	width: 270px;
	margin: 261px 10px 5px 460px;
	font-size: 10px;
}

#lselect li a:link, #lresources li a:visited {
	color: #000;
	font-size: 10px;
	/*text-transform: uppercase;*/
	text-decoration: underline;
}

#lselect li a:hover, #lresources li a:active {
	color: #000;
	text-decoration: none;
	background-color: White;
}

#lselect a:link.c, #lselect a:visited.c {
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
}

#lselect a:active.c, #lselect a:hover.c {
	text-transform: uppercase;
	text-decoration: underline;
}

#lselect ul {
	margin: 0px;
	padding: 0px;
}

#lselect li {
	background-image: url(img/bglist01.gif) ;
	list-style-type: none;
	margin-left: 20px;
	padding: 4px 4px 0px 5px;
	height: 35px;
}

.select {
	display: none;
}


#lmenu {
	position: absolute;
	top: 240px;
	width: 690px;
}

#lmenu ul {
	display: inline;
}

#lmenu li {
	background: transparent url(img/ico01.gif) no-repeat left;
	display: inline;
	margin: 0px 5px 0px 5px; 
}

#lmenu li a:link, #lmenu li a:visited {
	margin-left: 12px;
	color: #000;
	font-size: 9px;
	text-transform: uppercase;
	text-decoration: none;
}

#lmenu li a:hover, #lmenu li a:active {
	color: #06F;
	text-decoration:underline;
	background-color: White;
}

#extraDiv1 {
	background: url(img/top.jpg) no-repeat; 
	position: relative;
	width: 748px; 
	height: 241px;
	margin: 0 auto;
	text-align: left;
	}
.accesskey {
	text-decoration: underline;
}

I've tried everything, but nothing worked Sad Please help me out here! Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Centered page, works fine in IE, not in FF

Angeloonie,
If I may say your layouts a little confused , I would set your background image in a container say #wrapper, center that then put your header in the container div and the rest of your divs within that, but loose the fixed width on the container which is what is causing the problem at the moment . You have a container at 460px ish and a header image of some 745px ? and you will probably need to float the #lselect div.
Remember that IE breaks the rules which is why it's better to work in FF and then check in IE, less problems to sort out.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Wranga
Offline
Regular
Last seen: 12 years 29 weeks ago
Joined: 2004-11-21
Posts: 22
Points: 0

Centered page, works fine in IE, not in FF

Validate your HTML. I've spotted a few errors which I think may at least be part of the problem.

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Centered page, works fine in IE, not in FF

Hugo wrote:
Angeloonie,
If I may say your layouts a little confused , I would set your background image in a container say #wrapper, center that then put your header in the container div and the rest of your divs within that, but loose the fixed width on the container which is what is causing the problem at the moment . You have a container at 460px ish and a header image of some 745px ? and you will probably need to float the #lselect div.
Remember that IE breaks the rules which is why it's better to work in FF and then check in IE, less problems to sort out.

Hugo.

If I take the background out, it'll make the entire background whiteish. That's not what I want.

What did work was take out the header of the #container, it popped into the right position right away. Do it's probably something on the margins on the #container.

#container { 
	width: 460px;
	margin: 0 auto;
	position:relative;
}

I'm really stuck there. But with the header image out of the #container, it should have moved, I think...

Wranga wrote:
Validate your HTML. I've spotted a few errors which I think may at least be part of the problem.

According to W3C it's valid HTML.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Centered page, works fine in IE, not in FF

Angeloonie wrote:
If I take the background out, it'll make the entire background whiteish. That's not what I want.


Angeloonie you would take the background color declared in the background rule for the image and leave that in the body rules, just the image is moved to the wrapper div, that's how it's normally done.

Give your #wrapper a width 754px and center it remove the width from the container then you will need to decide how you want to handle the rest but on #quicksummary and #update will need dimensioning of some sort , as I suggested you may want to look at floating one or other of these.

Follow this advise and you will start to get a working layout.
Let us know how you progress.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Centered page, works fine in IE, not in FF

Hugo wrote:
Angeloonie wrote:
If I take the background out, it'll make the entire background whiteish. That's not what I want.


Angeloonie you would take the background color declared in the background rule for the image and leave that in the body rules, just the image is moved to the wrapper div, that's how it's normally done.

Give your #wrapper a width 754px and center it remove the width from the container then you will need to decide how you want to handle the rest but on #quicksummary and #update will need dimensioning of some sort , as I suggested you may want to look at floating one or other of these.

Follow this advise and you will start to get a working layout.
Let us know how you progress.

Hugo.

My #body:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px; 
	padding: 0px;
	background: #9F9282;
}

My #wrapper:

#wrapper {
	background:  url(img/bg_container.gif) repeat-y center;
	background-position:center;
	margin: 0 auto;
	width: 754px;
	text-align: center;
	}

Now the background is invisible, the image I mean, when I check it in dreamweaver, it does display the background, but when I view it in IE/FF it doesn't.

This is the start of the HTML:

<body id="portfolio">

<div id="extraDiv1"></div>
<div id="wrapper"></div>
<div id="container">
	<div id="intro">
		<div id="quickSummary">
			<p class="p1">Over the past years I have loved working on images, giving them new looks, creating my own or whatever I liked. I never had a place to show them, untill now. In my portfolio you can find all the pieces I made, wallpapers, layouts. avatars, you name it, it's here. Unfortunately I've lost my first creations, but the ones from this year are available. All images are created/edited in Adobe Photoshop 7.0 and Adobe ImageReady 7.0. A few images are created with the help of tutorials, but most of them are by my own inspiration. I hope you'll enjoy viewing my works.</p>
	  </div>
	</div>
  <div id="update">
		<div id="nov262004">
			<h3><span>Update: 26-11-2004</span></h3>
			<p class="p1">Things are starting to take shape now, I can see this site getting more and more to my liking. It's not finished yet, I'm still working on the index page, let alone the content pages.</p>
			<p class="p2">Meanwhile, feel free to check my <a href="http://www.angeloonie.tk">personal site</a> for more nonsense.></p>
		</div>
		<div id="nov242004">
			<h3><span>Update: 24-11-2004</span></h3>
			<p class="p1">I recently finished my first design for a portfolio, but I didn't feel satisfied with the result. To begin with it was too standard, a bit dull and not very attractive to look at. So here I am, making an entirely new version. I'm coding the pages with valid XHTML 1.0 Strict and valid CSS 1.0.</p>
			<p class="p2"><a href="http://validator.w3.org/"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" width="88" height="31" /></a><a href="http://jigsaw.w3.org/css-validator/"><img src="http://www.w3.org/Icons/valid-css" alt="Valid CSS 1.0!" width="88" height="31" /></a></p>
			<p class="p3">CSS allows complete and total control over the style of a hypertext document. In my previous websites I have mainly used tables for layouts, and I know now: tables are bad!! bad I tell you! I think I've moved over to CSS layouts permanently.</p>
		</div>
  </div>

Have I placed the wrapper in the right location?

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Centered page, works fine in IE, not in FF

It used to look like this:

http://home.wanadoo.nl/dinkela/portfolio/index.htm

but when you resize the window smaller than 750ish px, the content on the left goes outside the screen, making it not possible to read.

Maybe you can help changing it with that css, since it was all centered.

html {
    margin: 0px;
    padding: 0px;
}

body {
    background: #9F9282 url(img/bg_container.gif) repeat-y center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0px; 
    padding: 0px;
}

p { 
    color: #575757;
    font-size: 10px;
    margin-top: 0px; 
    text-align: justify;
}

h3 {
    background: White url(img/puce02.gif) no-repeat left;
    margin-top: 70px; 
    margin-bottom: 8px;
    font-weight: bold;
    margin-left: 5px;
}

h3 span {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    /*color: #514A42;*/
    color: Black;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 5px;
    margin-left: 32px;
}

a:link, a:visited {
    color: #000; 
    text-decoration: none;
    text-transform: uppercase;
}
    
a:hover, a:active { 
    text-decoration: underline; 
    color: #000;
}

/* specific divs */
#container { 
    position: absolute;
    width: 460px;
    left: 50%;
    margin-left: -370px;
    margin-top: 260px;
}
    
.resources {
    display: none;
}

#pageHeader {    display:none    }

/*#quickSummary {
    background: #9F9282;
    border-color: #666;
    border-style: dashed;
    border-width: thin;
    margin: 20px 10px 5px 10px;
    padding: 5px 5px 2px 5px;
    width: 440px;
}*/

#quickSummary {
    background: White;
    margin: 20px 10px 5px 10px;
    padding: 10px 10px 10px 10px;
    width: 440px;
}

#quickSummary p {
    color: Black;
}

.p5 {
    margin: 50px 0px 30px 40px;
    color: Black;
    font-size: 11px;
    text-transform: uppercase;
}

#preamble {
    padding-left: 10px;
}

#update {
    padding-left: 10px; 
    margin-bottom: 40px;
}

#linkList {
    position: absolute;
    top: 0px; 
    width: 700px;
}

#linkList2 {
    position: absolute; 
    top: 0px; 
    width: 700px;
}

#lselect {
    position: absolute;
    padding: 0;
    width: 270px;
    margin: 20px 10px 5px 460px;
    font-size: 10px;
}

#lselect li a:link, #lresources li a:visited {
    color: #000;
    font-size: 10px;
    /*text-transform: uppercase;*/
    text-decoration: underline;
}

#lselect li a:hover, #lresources li a:active {
    color: #000;
    text-decoration: none;
    background-color: White;
}

#lselect a:link.c, #lselect a:visited.c {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}

#lselect a:active.c, #lselect a:hover.c {
    text-transform: uppercase;
    text-decoration: underline;
}

#lselect ul {
    margin: 0px;
    padding: 0px;
}

#lselect li {
    background-image: url(img/bglist01.gif) ;
    list-style-type: none;
    margin-left: 20px;
    padding: 4px 4px 0px 5px;
    height: 35px;
}

.select {
    display: none;
}


#lmenu {
    position: absolute;
    top: -15px;
    width: 690px;
}

#lmenu ul {
    display: inline;
}

#lmenu li {
    background: transparent url(img/ico01.gif) no-repeat left;
    display: inline;
    margin: 0px 5px 0px 5px; 
}

#lmenu li a:link, #lmenu li a:visited {
    margin-left: 12px;
    color: #000;
    font-size: 9px;
    text-transform: uppercase;
    text-decoration: none;
}

#lmenu li a:hover, #lmenu li a:active {
    color: #06F;
    text-decoration:underline;
    background-color: White;
}

#extraDiv1 {
    background: url(img/top.jpg) no-repeat; 
    position: absolute;
    width: 748px; 
    height: 241px;
    left: 50%;
    top: 0px;
    margin-left: -374px;
    }
.accesskey {
    text-decoration: underline;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Centered page, works fine in IE, not in FF

Angeloonie, your #wrapper, is as the name implies a wrapper for the whole page and as such needs to be the first div after the body tag and to close as the last div before the body tag closes, at the moment
you have it opening and closing before the #extradivl element.

The text-align: center; wants to be on the body declaration and text-align: left on either the wrapper or container divs and you shouldn't need the background-position on the wrapper.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Centered page, works fine in IE, not in FF

Hugo wrote:
Angeloonie, your #wrapper, is as the name implies a wrapper for the whole page and as such needs to be the first div after the body tag and to close as the last div before the body tag closes, at the moment
you have it opening and closing before the #extradivl element.

The text-align: center; wants to be on the body declaration and text-align: left on either the wrapper or container divs and you shouldn't need the background-position on the wrapper.

Hugo.

Ok, I repositioned the #wrapper.

This is the css for my:

Body:

body {
	background: #9F9282;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px; 
	padding: 0px;
	text-align: center;
}

Wrapper

#wrapper {
	 background: url(img/bg_container.gif) repeat-y;
	 width: 754px;
     text-align: left;
	 }

Container

#container { 
	margin: 0 auto;
	}

If I check the page now, the content is placed on the body nicely, the way it should look, but in FF it's aligned to the left, and in IE it's centered perfectly.

I feel we're getting closer to getting it right, but I don't know why this aligning isn't working.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Close but no cigar . . .

Angeloonie

You have a mixture of good and bad stuff here. First off, the #container is redundant and to center all you needed was margin:0 auto; applied to your #wrapper.

You have absolutely positioned some stuff when there was no need for it. I have appended an alternate version of your page with simplification and flowing of your menus. (the CSS is moved into the head for convenience)

There are still issues with you using more CSS than is needed but at least the major structural probs are fixed. The HTML is valididated and so is the CSS.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Re: Close but no cigar . . .

DCElliott wrote:
Angeloonie

You have a mixture of good and bad stuff here. First off, the #container is redundant and to center all you needed was margin:0 auto; applied to your #wrapper.

You have absolutely positioned some stuff when there was no need for it. I have appended an alternate version of your page with simplification and flowing of your menus. (the CSS is moved into the head for convenience)

There are still issues with you using more CSS than is needed but at least the major structural probs are fixed. The HTML is valididated and so is the CSS.

DE

Wow, I really appreciate that, thanks a lot!

Now, I don't mean to be unthankfull, but there are a few things I noticed, which would be above my skills to change. For example the content was aligned a bit strange, which caused the lines to be discontinued, the parts were either a bit to the left, or to the right of the #summary, also the Latest Additions is floating a bit too far to the right, and since I don't know anything about that, I can't change it.

But, I tried your other suggestion to add the "margin:0 auto;" to the #wrapper, that did it all, completely centered, thanks a lot!

With the help of your changed css elements I tried to change/delete as much css as I could, removing the useless css.

It's all looking perfect now, it's valid and centered. Take a now

Thank you all for your help, I really appreciate it, since I would have never worked it out myself, and would probably have stepped back to tables again (like my personal site, http://www.angeloonie.tk).

Cheers! *hugs everyone*

Vince

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Centered page, works fine in IE, not in FF

Well, you need to look at the styles associated with my restyled divs and adjust some of the widths and margins to bring it into compliance with your example. If you look at what I sent, you can change font sizes to the point where the menu wraps but it doesn't really break the page. I didn't try to tweak everything - had to leave some stuff for you to do.

If you are willing to keep on with this we can work through getting rid of the absolutely positioned elements - they will hurt you in the end.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Centered page, works fine in IE, not in FF

DCElliott wrote:
Well, you need to look at the styles associated with my restyled divs and adjust some of the widths and margins to bring it into compliance with your example. If you look at what I sent, you can change font sizes to the point where the menu wraps but it doesn't really break the page. I didn't try to tweak everything - had to leave some stuff for you to do.

If you are willing to keep on with this we can work through getting rid of the absolutely positioned elements - they will hurt you in the end.

DE

Well, we can try, but you'll have to explain to me how the relative thing works, I know it places the content ##px from the left/top/right side of the base element, but what should be considered the base?

All I know is that with absolutes the elements are on the exact same spot every time.

Maybe it's my habit of using tables that creates this idea, I don't really know :?

Just let me know what to do (I'll start by replacing the absolutes with relatives) Wink

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Centered page, works fine in IE, not in FF

Well, first of all you have to realize that there has been some reordering and different nesting of your HTML, in particular, following your #extradiv1 there is the #lmenu followed by (1)The right hand image menu #linkList2 is floated to the right with a width of 245px followed by (2)#inner to wrap the rest of the content. #inner has a right margin equal to 250px giving a 5px gap. Floating a menu in the margin of another containing block is a standard trick and works very well.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Angeloonie
Offline
newbie
Last seen: 17 years 5 days ago
Timezone: GMT+1
Joined: 2004-11-28
Posts: 8
Points: 0

Centered page, works fine in IE, not in FF

I see, logical order Smile It was a bit weird before, with the header at the bottom and all :oops: