Killersites.com Homepage

Print at Sep 3, 2014 3:03:37 AM
Posts: 17   Pages: 2   [ 1 2 | Next Page ]
View all posts in this thread on one page
Posted by Thelma at Jun 17, 2007 3:28:34 PM
Positioning - Please Teach Me!!!
I'm working on redesigning my webdesign website - decided to put the styleswitch on hold until I can get one right.

This is what I have so far

I'm not sure about the design yet - love that photo and want to go with it. The borders are just to let me know where my divisions are. Colors and additional design stuff is yet to come - My first priority is to get my division where I want them to be. As you can see, the list, which is just my content, plops up next to its container..... WTF!!!

My other great mystery is trying to get the #masthead h1 and #masthead h2 to scootch down a bit - I want h1 left-aligned and h2 right. but when I did the:

#masthead h1 {
margin_top: 25px;
margin-left: 25px,
}

(the h2 I did the same, just a bigger top and a margin-right) --- it's supposed to end before my flower starts, but the exact measurements are a matter of playing with the pixels.

It moved my whole masthead down -not just the h1 and h2 inside it.

What I'm looking for is not just an 'how to do it right' but I would really like to finally understand this positioning -so can somebody explain why what I tried didn't work?

One day, my lightbulb too, will come on............
----------------------------------------
...

Posted by lm at Jun 17, 2007 4:27:21 PM
Re: Positioning - Please Teach Me!!!
Thelma i will not write you a lot about positioning because i not a writer but i think you make it easy for yourself if in FF you alway look at your layour with Outline - outline block level elements.
For now you can see that h1 and h2 take the whole length of the header.
Position h1 fist - if you want to move it to the right you can give it padding left value- then text will move to the right. If you want to move it as a box, give it a width then you can move h1 to the right giving it margin-left value.
The same with moving h1 vertically.
To make things simple you can in the first line of your CSS set all paddings and margins to 0:

*
{
margin:0;
padding:0;
}
----------------------------------------

My blog


Posted by mismatched at Jun 17, 2007 6:05:04 PM
Re: Positioning - Please Teach Me!!!
You need to clear an earlier float, so add "clear:left;" to your content div:

#content {
border: 2px solid blue;
width: 755px;
clear:left;
}

Tommy Olsson wrote an excellent article on positioning:
http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute

Carol

Posted by mismatched at Jun 17, 2007 6:13:10 PM
Re: Positioning - Please Teach Me!!!
By the way, I'm not a big fan of the global margin and padding reset advocated earlier. It generally reeks havoc with form controls as explained in this article by Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Posted by shelfimage at Jun 17, 2007 7:47:36 PM
Re: Positioning - Please Teach Me!!!
@thelma
I think lm mentioned this, but one thing that helped the lightbulb flicker for me was to remember that anything that needs to be positioned should have a width and sometimes the height declared.

When an element has a width applied to it (either absolute with pixels, or relative with em's or %'s), it can slide next to other elements when floated. Or rather, other elements can slide next to it because it is providing enough room for more than one block level to be positioned inline.


In your case, I might use position:relative. This way the H1 and H2 elements are positioned relative to their containing block, or the Masthead.

So, you might give the H1 a width of 50% and a position it from the top using top:30px.... for example.

Then you can easily float the H2 next to it and to the right.
----------------------------------------
"The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo
Save the developers<!>
Maine Webworks

Posted by lm at Jun 18, 2007 2:50:22 AM
Re: Positioning - Please Teach Me!!!
to Carol - when you just started with positioning it is better to zero everything - just to have clean start to get the idea of positioning.
I thought somebody will come up with this Meyer article. So i didn't wrote much about positioning because there a lots already written.
Just to have a grip on: move blocks around with paddings and margins to have a full control looking in FF with "outline block level elements" Position relative and float and see what happens. Position absolute and see where the selectors go.
When float, afterwards don't forget to clear the floating divs.
I rather create a class "cleaner"{clear:both} right away and use it to clear floats.

Basically there only 3 sources i would read about positioning and then consider im done with all the theory on it:
the one Carol gave ( by Olsson)
our old pal Maxdesign
and this one Bill gave to somebody.
----------------------------------------

My blog


Posted by Thelma at Jun 18, 2007 5:57:37 AM
Re: Positioning - Please Teach Me!!!
Okay guys - thanks for the input. I am reading the articles bit by bit and am making changes - that at times bring up additional questions:

I've always started my CSS with:
body { margin:0; padding:0;} but on this project, I still had a space between banner and top - but when I moved the zero margin/padding to * { margin:0; padding:0;} my banner actually moved to the very top.

I understand that the * is the universal selector, but body is the one that holds everything. And I thought by putting body's margin and padding to zero, I zeroed them for anything between the body tags, like h1, ul, etc. --- so am I correct now in thinking that the body margin thing did not work for everything because some selectors are inherit and some are not?

About my Masthead's H1 and H2 - Thanks to lm and the outline blocklevel tip, I realized the size of that element. I finally got the text to show up where I want it to by using padding - and ----duh---- text-aligning the H2 right.

I tried to set a width -but how would I go about determining that since depending on how bit someone views my font, this could change. Right now, both Hs are roughly where I want them to be - and I do not have a width set at all - when I tried to add a width: 100%, both boxes got bigger than their containing element. I am viewing my progress in IE7, FF, Opera, and Safari, and it looks the same everywhere. So do I really need a width here after all? Why (since it seems to work better without) and if I need one, how would I figure out what width to set?

Carol, I've cleared my content and it's where it is supposed to be - but the reason I had not done it before is this: my floated nav is set at width 760 - the same width of all my content. so I would have expected my content div to have no room to start to the right of it -however, as I'm writing this just now, it dawns on me that a floated element is taken out of the flow and takes up no space - but given that, why did my first 2 bullet points appear to the right of the nav division beyond the boundaries of the whole container element?

And last question, for this post, anyway, why do I see bullets in my list in all browsers but IE7? I even just now added a list-style-type to a ul tag, and I now see circles instead of bullets everywhere but in IE7, where I still see nothing at all. Why would that be? And question part 2 - why do I see the bullets of all 3 browsers where I see them to the left of the container? I would have expected them to show up inside the box.

And now, back to article reading and experimenting.... this is fun!
----------------------------------------
...

Posted by Susie at Jun 18, 2007 6:04:30 AM
Re: Positioning - Please Teach Me!!!
And last question, for this post, anyway, why do I see bullets in my list in all browsers but IE7? I even just now added a list-style-type to a ul tag, and I now see circles instead of bullets everywhere but in IE7, where I still see nothing at all. Why would that be? And question part 2 - why do I see the bullets of all 3 browsers where I see them to the left of the container? I would have expected them to show up inside the box.


You need to add padding-left to the ul for the bullets to show up in IE and to move over in the others. Edit: As to the why, I have no idea. I just know that the browsers interpret lists differently. blushing

Posted by Thelma at Jun 18, 2007 6:19:51 AM
Re: Positioning - Please Teach Me!!!
Thanks Susie - I added the padding.

Different question to you - can you read the header text all right or is there too little contrast? (I think it's too little and could be hard to read for some folks)
----------------------------------------
...

Posted by Susie at Jun 18, 2007 6:48:55 AM
Re: Positioning - Please Teach Me!!!
I can read the a&b part, but the Your in front of Website practically disappears for me.

Posts: 17   Pages: 2   [ 1 2 | Next Page ]