Hi again.
I usually layout my pages with a centered 740 table to allow for smaller resolutions. Im trying to create the same thing with a div. Just messing about really. Ive got something like what I want in ff but it wont center in IE I also note the borders dont all display (probably due to syntax no doubt ?????). Could someone point me in the right direction of a site that tells you how to center divs in IE and how to get the borders to appear.
This is my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Hello</title>
<style type="text/css">
#centre {
align:center;
width:740px;
background:blue;
border-top:2px solid #000;
border-left:2px solid #000
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-left: auto;
margin-right: auto;
padding-left:5pt
}
</style>
</head>
<body>
<div id="centre" >
<p>Hello</p>
</div>
</body>
</html>
If its a long way off the mark would you be kind enough to let me know.
Thanks in advance - Glenn
Just so frustrating
It's
text-align:center;
Just so frustrating
Why is there a gap at the top of the div in ff ?
Just so frustrating
try changing the declared margins to margin: 0 auto;
instead of auto only. this shorthand will replace both of the margin-left and margin-right in your code. It is the same as saying:
margin-top:0; margin-right: auto; margin-bottom:0; margin-left:auto;
Just so frustrating
or
body{margin:0;}
Just so frustrating
Hi DAnA,
Thanks for that, it centers ok now. That puts the div right at the top. I still have a space inside the div between the top margin and the text, only in firefox does this gap appear. Is there someway to loose the gap ?
Just so frustrating
You might want to get a doctype, get all browsers rendering the same
Just so frustrating
Thanks everyone. Cracked it now. But immediataly met by another problem. This css thing isnt easy is it !!!!!!
Just so frustrating
What's the next problem?
Just so frustrating
Ok.
As long as you dont mind , I know you guys get frustrated when we ask too many questions without trying to find the answers ourselves, but I can honestly say I have tried.
I am just learning about div instead of table for design.. My site using tables currently looks like this :
http://homepage.ntlworld.com/lisa.broadley/Fishing%20club%20website/_private/index.htm
I would like to do that without the tables and have got this far
http://homepage.ntlworld.com/lisa.broadley/Fishing%20club%20website/_private/divattempt.htm
I would like to give the menu a navy background but I am struggling.
So far I have styled the li background to navy but that puts background on all the li even the dropdown ones. I then gave the first level li a class of blue with a navy background. This did the trick just about but I had a gap at the end of the menu which stayed white and a small gap at the top between menu and the picture (only in internet explorer).
So I guess my question is :
Is there an easy way to give the first level of the menu a navy background for most browsers as it has in my version using tables.
Thanks in advance
Just so frustrating
background-color: blue
Just so frustrating
where ???
on the li or the #centercontent or somewhere else entirely.
If I do the #centerpoint it turns the whole div blue.
Just so frustrating
Do you think it would be less painful to remove your own eyeballs ?
Ive been trying for 2 hours non stop. I had what I thought was a really good idea of having 2 divs one to hold the topimage and the menu and one to hold the text area. It looks just as desired in IE but when I go to ff its nothing like. Has anyone any spare valium ??? or a few words of encouragement.
Is css really worth the effort or would you just stick with tables ?
http://homepage.ntlworld.com/lisa.broadley/Fishing%20club%20website/_private/divattempt.htm
Just so frustrating
1. Yes CSS is really worth the effort
2. Don't design in IE... design in FF
3. Validate your CSS
check this for a drop down menu
http://www.cssplay.co.uk/menus/final_drop.html
Just so frustrating
Hi try
li { float: left; position: relative; width: 5em; background:#000080; }
Is that what you wanted?
EDIT OOps just re-read, you tried that already.
Just so frustrating
Add
#nav { height:1.2em; background:#000080; }to your CSS. You can adjust the height yourself.
Just so frustrating
Thanks that about does it. It looks right now in FF but in IE there is a tiny whitespace between the menu and picture. From what ive read so far it is better to have it wrong in IE than in ff.
Just so frustrating
Hi,
I got some help in another forum and appear to have solved the problem.
The answer was
#centercontent img {
display:block;
}
and this article explains simply what the problem was
http://devedge-temp.mozilla.org/viewsource/2002/img-table/
I just love simple articles without too much jargon.
Thanks to you all for your help. Im sure I'll be back again soon .