17 replies [Last post]
Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

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

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 1 week ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Just so frustrating

It's

text-align:center;

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

Just so frustrating

Why is there a gap at the top of the div in ff ?

jlhaslip
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

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;

I'm having a good day...so far.

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 5 days ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Just so frustrating

or
body{margin:0;}

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 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 ?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Just so frustrating

You might want to get a doctype, get all browsers rendering the same Wink

Verschwindende wrote:
  • CSS doesn't make pies

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

Just so frustrating

Thanks everyone. Cracked it now. But immediataly met by another problem. This css thing isnt easy is it !!!!!! Shock Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Just so frustrating

What's the next problem?

Verschwindende wrote:
  • CSS doesn't make pies

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

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

jlhaslip
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Just so frustrating

background-color: blue

I'm having a good day...so far.

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

Just so frustrating

where ???

on the li or the #centercontent Laughing out loud or somewhere else entirely.

If I do the #centerpoint it turns the whole div blue.

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 31 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

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

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

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.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Just so frustrating

Add

#nav {
   height:1.2em;
	background:#000080;
	}
to your CSS. You can adjust the height yourself.

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

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.

Glenn Kilpatrick
Offline
Regular
Last seen: 14 years 21 weeks ago
Joined: 2006-05-07
Posts: 31
Points: 0

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 .