CSS - Alignment and centering
im really trying hard to not use any tables and have jumped headfirst into css posistioning over the past 2 weeks. but i am having some trouble and cant find help.
heres what the layout looks like using tables...
http://sublimestylee.com/newsite/newsite/
but i have a lot of trouble converting it to css and still keeping it cross browser and cross res compatable.
i have only done very little in css just so i dont have to start all over, but in firefox at my 1280x800 resolution this is what it looks like for me...
and using the exact same code, this is what i see if it were to be in internet explorer
here is my code...
<html>
<head>
<style type="text/css">
a:link {
color:#385E0F
}
a:visited {
color:#507726
}
a:hover {
color:#000000
}
a:active {
color:#000000
}
body {
background-image: url('images/background.png');
margin-left: auto;
margin-right: auto;
width:750px;
}
#page {
width: 750px;
margin: 0 auto;
}
#header {
}
#menu_home {
}
#menu_boots {
margin-top: -36px;
margin-left: 79px;
}
#menu_videos {
margin-top: -36px;
margin-left: 165px;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img src="images/index_01.gif">
</div>
<div id="menu_home">
<img src="images/index_02.gif">
</div>
<div id="menu_boots">
<img src="images/index_03.gif">
</div>
<div id="menu_videos">
<img src="images/index_04.gif">
</div>
</div>
</body>
</html>Thanks for the help, and sorry for the large images!
-drew
:jump:
painperdu posted this at 21:19 — 24th August 2006.
They have: 10 posts
Joined: Aug 2006
Study these tempaltes:
http://www.glish.com/css/
sublimer posted this at 22:18 — 24th August 2006.
They have: 41 posts
Joined: Aug 2006
hmm, im hoping for more direct info...
but i think i may have found something. it seems as though i may have found something. my issue was getting it to center in both ie and firefox and then the rest of the pieces fell in from that.
if this doesnt work like i think it may i'll post here. thanks though!
-drew
painperdu posted this at 23:59 — 24th August 2006.
They have: 10 posts
Joined: Aug 2006
If I were to post possible fixes to your CSS problem then it would be pretty much indentical to what's at that link.
Also, keep in mind that IE and Firefox handle spacing, padding, alignments and a few other attribute tags differently.
Also, also, 'IDs' have to be unique. Either make all of your IDs unique or use 'Class' instead.
-Dotbob.com Limited Time SALE!:
.MOBI $9.98 .ORG $2.99 .IN $13.98 /.EU Only $13.99 / .INFO $2.15 / .ORG $2.99 -Dotbob.com
demonhale posted this at 00:21 — 25th August 2006.
He has: 3,278 posts
Joined: May 2005
two ways to have everything centered is to use the ff in the body tag on css or on the page.
use auto margins like you did body {margin: auto 0 auto 0;} but use it in conjunction with {text-align: center;} to ensure it will stay center. It would also be best to try and block element the navigation to make it stick, or use margin offset to make it fix in...
sublimer posted this at 02:20 — 25th August 2006.
They have: 41 posts
Joined: Aug 2006
ok i got the site looking how i want...but i want to add the main content area to be expandable instead of a scroll like i currently have it....
http://www.sublimestylee.com/website/pages/news_story_display.php?id=4
how can i make it so that the bottom image adjusts based on the length of the main content area???
thanks
-drew
demonhale posted this at 05:26 — 25th August 2006.
He has: 3,278 posts
Joined: May 2005
it doesnt look the way you intend in Firefox... But anyways, you can make it adjust by assigning a div wrapper on the main content area just above that footer image, that way the longer the content, it will push the image down...
sublimer posted this at 06:42 — 25th August 2006.
They have: 41 posts
Joined: Aug 2006
hmm, it looks fine to me in ff and ie - could you tell me how it looks different for you?
would you mind elaborating more on "ou can make it adjust by assigning a div wrapper on the main content area just above that footer image, that way the longer the content, it will push the image down..."
thanks
-drew
demonhale posted this at 02:51 — 26th August 2006.
He has: 3,278 posts
Joined: May 2005
I see the left box overlap the header and links, minor bug... check it out again and it looks pretty ok now... do you still have the footer problem?
sublimer posted this at 02:56 — 26th August 2006.
They have: 41 posts
Joined: Aug 2006
i dont see any overlapping. if you could take a screen shot that would be awesom!
what browser and res are you operating at?
i've been working with the cms and download manager for the site today so i havent really attempted to work on making the box expandable.
thanks
-drew
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.