Got myself stuck with css

Question

I've gotten myself really stuck with my css layout. I've
basically followed a couple of different tutorials to get where I
am. if you'll visit
http://eliteportraits.com/teetest/
you can see the effort so far. Where i'm stuck is the main content
block. I read different things on nesting div tags and can't figure
out how to do this with or without nested tags. I basically want a
white background for everything under the purple menu bar (I'd also
like that bar to extend to the edge of the top rounded white
graphic.). I ca't seem to make it work. what am I screwing
up/missing? is there a tutorial somewhere that can help? This is
the last thing I've got to figure out before I can finally move
forward. thanks so much for any help.
Mark

Answer 1

eliteportraits wrote:
> If you look to the logo on top of the page (above the
purple bar), there's
> text immediately to the right of the logo that says
"some menu links here, like
> shopping cart and such" - I would like that line of text
to sit on top of the
> purple bar (about 10px above the purple bar) and be
aligned to the right edge
> of the page. right now the text is aligned with the top
of the image.
Then you need to put that line of text in its own container,
a <div> <p>
<h> whatever. Lets just use another <div> for
now. Insert the new <div>
in your pages code, right after your logo image (see below)
<div id="top">
<img src="tutorial_files/logo.jpg">
<div id="topRight">some menu links here, like shopping
cart and
such</div><!-- end topRight -->
</div><!-- end top -->
Then use some css to style/position the new <div>
#topRight {
float: right;
width: 350px;
text-align: right;
padding-top: 65px;
Back-tracking on what I said yesterday about
relative/absolute
positioning you could also make the 'top' <div> have a
position of
relative and then the 'topRight' <div> a position of
absolute to place
it in the position required.
#top {
position: relative;
#topRight {
position: absolute;
top: 85px;
right: 0;
width: 350px;
text-align: right;
This is one of the only times you should need to use relative
positioning on a container i.e., when you require an
absolutely
positioned element to sit within it. However if there is an
alternative
way of achieving the same results then personally I would
always use
that method in preference. Many beginners just use relative
positioning
all over the place without really understanding what they are
doing. Not
all, but in the majority of cases, it is not required.
Don't be afraid to experiment with css to see what results
can be
achieved using various combinations. Once you grasp the
basics then the
rest will fall into place quite quickly.
The key is to think boxes being positioned by using
margin/padding.
Where people go wrong is they tend to use too many boxes
which results
in too many elements to keep track of or just plain don't do
the maths
needed to make css work.
Always comment the end of a container </div><!-- end
header --> or you
can put the comment inside the closing tag <!-- end header
--></div>
This will make it easier to identify them when the page gets
more complex.