Site isnt comin out the way i want


#1

im havin trouble lining up my site in the middle of the browser. on the computer im makin the site it is in the center but when i try at home then it is in one side. please help me.
the site is www.carriagecleanerscumming.com


#2

I am no CSS guru, but it seems to me that your problem is caused by the fact that your divs are using absolute positioning. The content will be positioned at a certain distance from the left (in pixels) regardless of screen resolution.

You can correct this by nesting your existing absolutely positioned divs inside a container div whose position is set to relative. This will keep the content centered regardless of resolution.

Something like;

#container {
position: relative;
margin: 0 auto;
}

Mark


Save [color=#CC0000]$50[/color] on DreamHost hosting using promo code [color=#CC0000]SAVEMONEY[/color] ( Click for promo code details )


#3

ok so i tried your advice, i changed the position to relative but i cant find the margin which i can change. btw im using macromedia dreamweaver 8, cuz im not too familiar with html so im using what u see is what u get thing.


#4

I am not sure you understood what I said in my previous post. I didn’t mean for you to change your existing divs to relative positioning, you should leave these as absolute.

My suggestion was to create a new ‘container’ div that has its position set to relative and nest all your existing content within that div.

In your style block…

#container {
position: relative;
margin: 0 auto;
}

Then in your body…
[b]

***Your existing content***
[/b] I hope my explanation is clearer this time.

Mark


Save [color=#CC0000]$50[/color] on DreamHost hosting using promo code [color=#CC0000]SAVEMONEY[/color] ( Click for promo code details )


#5

Try this tutorial: http://www.maxdesign.com.au/presentation/process/

It’s been invaluable to me when I was trying to figure out how to do what you’re now trying to do.

I dislike Dreamweaver a lot. Not just because spews out a lot of unnecessary code, or won’t do the things I ask of it (try to do something like http://meyerweb.com/eric/css/edge/slantastic/demo.html and see how it likes that), but because when people rely on dreamweaver, they get snagged up and can’t figure things out, because they’ve got no experience with the code. This might not necessarily be your case, but 90% of the time, that’s what I see. ^^;


#6

This is a pretty common problem. One way to fix it is to create a table and set the alignment to “center”, then put the rest of your content inside the table cell.

ie:

Your content

================================
Angela Gann
CrimsonDryad Web Design Services
Web Design, Custom Software Development
http://www.crimsondryad.com


#7

This is actually a bug in IE6 in quirks mode. I believe IE6 in strict mode works properly.

Technically, in CSS, all you need is margin: auto; and set a div witdh to center a div (by default, divs are blocks at 100%).

Using a table isn’t the “proper” way of fixing it. You can fix this, cause of IE, by using:

That’ll center it in IE6 quirks mode, IE5.5 and properly center it with Opera and Firefox. As you will see, there is a reason why developers hate IE. :slight_smile:


yerba# rm -rf /etc
yerba#


#8

Guice,
I see your point. But not everyone has the time to go through and play with IE6 in strict mode. When I design sites, I do my best to use “proper” CSS. But the fact is, sometimes you just gotta make it work and you don’t have time to fool around with it.

I ALWAYS check my dev in IE and Firefox.

But yes, you’re right. I do hate IE. I can have things beautiful in Firefox and IE jacks it all up. The margin/padding issues are a pain.

================================
Angela Gann
CrimsonDryad Web Design Services
Web Design, Custom Software Development
http://www.crimsondryad.com


#9

alrite i made the changes but dont have another computer to see how it worked out could you guys please let me noe


#10

I just checked your site again and the content is still displayed to the left on my monitor (resolution = 1920x1200).

Edit: I forgot to specify that I am using Firefox 1.5.0.4 under WinXP Pro SP2.

Mark


Save [color=#CC0000]$50[/color] on DreamHost hosting using promo code [color=#CC0000]SAVEMONEY[/color] ( Click for promo code details )


#11

It comes up centered on the page for me (Mozilla 1.7.13, win xp, screen res 1024x768).

The best advice I can give is to install a few different browsers on your system and always check out your sites in different browsers and at different screen resolutions. You can’t tell what it’ll look like for everyone, but you can get a much better idea of things that way.


#12

Instead of using two DIV tags, add these to the pertinant parts of your styleshee

html, body { text-align: center; } #Layer1 { margin:0px auto; position:absolute; }

You only have to put one

around your code. Several of my designs use this, including this one.

The thing is if you take proper time to use css, you completely separate the content from the presentation, this means if you need to in the future you can really easily redesign the entire site. Also, it cleans up the code a lot which means two things: first, your pages end up being a lot smaller which means you use less bandwidth serving each page, and each page arrives to the viewer so much faster. Second, screen-readers and search engines have a much easier time to go through the page. A little tinkering in the beginning makes life much better in the long run.

(edit: looked at your site in firefox, mozilla, and IE -all most up to date- and the page is centered for all of them.)

Satyagraha


#13

Using Firefox 1.5.04 on Ubuntu Linux and it’s centered for me.


yerba# rm -rf /etc
yerba#


#14

thanks guys so far i checked it and its lookin alrite


#15

ok i tried it again at home with a 1280x? resolution and results were not good. when i added the code above then the background and everything gets messed up. arrgg. if i start over how should my code look like… from scratch.