9 replies [Last post]
godly.asian
godly.asian's picture
Offline
Regular
Last seen: 15 years 10 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

I am trying to center a div, but not center the content that is inside of it (other divs). I want it to end up something like this: http://www.dandannoodles.com , but more smoother (right now it is in tables).

this is what I came up with so far.

#container { } #menu { position: relative; top: 8.5em; width: 800px; background-color: black; color: white; } #appetizers { position: relative; top: .25em; left: .25em; background-color: gray; width: 200px; } and that is my following CSS

if there is any easier way to do this, I am open to suggestions

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

auto margins

:? auto margins

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

godly.asian
godly.asian's picture
Offline
Regular
Last seen: 15 years 10 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

clarify

so just to be sure I got it correct, this is what the CSS would look like?

#menu { position: relative; top: 8.5em; margin-left: auto; margin-right: auto; width: 800px; background-color: black; color: white; } #appetizers { position: relative; top: .25em; left: .25em; background-color: gray; width: 200px; }

godly.asian
godly.asian's picture
Offline
Regular
Last seen: 15 years 10 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

a space?

CSS
#menu {
position: relative;
top: 8.5em;
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: black;
color: white;
}
#appetizers {
position: relative;
top: .25em;
margin-top: .25em;
margin-bottom: .25em;
margin-left: .25em;
margin-right: .25em;
width: 200px;
}
#pic2 {
position: relative;
margin-left: .25em;
margin-right: .25em;
margin-top: .25em;
margin-bottom: .25em;
width: 200px;
}

HTML

blah

now when I put in "

" there is a space that comes up between pic1 and pic 2. I am pretty sure that it is not part of the margin spacing, so I am wondering it is some to do with the divs. Again I am unsure.


the area in the red.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 33 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

First, generally if we're

First, generally if we're going to be able to help you we need to have enough information. That means either a link to your page, which is all we need, or failing that, all your code, both html and CSS. Not snippets.

We provide sticky messages in each forum telling folks what we need to help them and you are expected to read them before you post.

As to the graphics problem, it is probably due to the fact that IE leaves spaces under imgages for drops on characters. IMG is an inline element and inline elements are supposed to allow room for that. Simplest fix is just to give the images a rule "display: block;" if they are supposed to be right under each other.

But please read the sticky messages and learn to give us what we need if we are to help you successfully.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

godly.asian
godly.asian's picture
Offline
Regular
Last seen: 15 years 10 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

well you solved it just fine

well you solved it just fine without the other junk...and if you rly want the full code...I can give it to you...and I am viewing it in Firefox, and it is not uploaded to a server. As for the css...that is all the css.....and the html well you want it:


DanDan Noodles




blah

does it help ne more...I doubt it...since there is nothing pertaining to the question at hand

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 33 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well if that really is all

Well if that really is all your html then your lack of a doctype declaration is going to mean all browsers will be in "quirks" rendering mode where they all work differently, and IE in particular just does things all wrong.

You must have a standards triggering doctype declaration and you must have code that is valid under that doctype or you are just on a siding to nowhere.

So right away showing us all your code has enabled us to point out a big mistake that will affect how all your CSS works thoughout the document.

CSS is defined only for valid html or xhtml. For invalid code there is no standard, and no basis for complaint. Without a document type declaration there is no standard either. So of course things aren't going to work out right.

If you don't understand how to do this read the "How to" forum right here on this site.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

godly.asian
godly.asian's picture
Offline
Regular
Last seen: 15 years 10 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

I stand corrected

I stand correct, the problem is now fixed, thanks to you.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 33 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

godly.asian wrote:I stand

godly.asian wrote:
I stand correct, the problem is now fixed, thanks to you.

Great, and I hope the lesson learned will stand you in good stead in getting other problems resolved as they arise.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

DTD

godly.asian wrote:
does it help ne more...I doubt it...since there is nothing pertaining to the question at hand

As Ed pointed out, yes it does, as it allows us to see you don't have the doctype - which is VERY IMPORTANT Wink

Did you miss this?

http://csscreator.com/node/18216

Glad you got it sorted though Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies