PDA

View Full Version : CSS Positioning

LokiStormrunner
18 Jul 2007, 3:24am
So web designing always seemed to be my thing and i decided to tackle my film studio's website for the hell of it... and i'm already coming up with some problems...

I'm trying to move a picture up so that it looks better and is in the spot i want it in... So far it hasn't budged for me...

Here's the code... I don't know how good it is but i think it's pretty basic for now, haha

is there anything anybody can see wrong?
<html>
<head>
<title>Evil Empire Productions :: Main Page</title>
<link rel="stylesheet" type="text/css" href="csscode.css" />
<style>
.position{
postion:relative;
top:-100px;
}
</style>
</head>
<body>
<div align="center" style="margin: 0px auto; width: 700px;"><img src="images/tribal_header_double.gif" style="z-index:2;" /></div>
<div align="center" class="position" style="margin: 0pt auto; width: 700px;"><img src="images/ee_logo.gif" style="z-index:1; " /><p class="position">testing testing testing testingtesting testing testing testingtesting testing testing testingtesting testing testing testing</p></div>
<div style="margin-top: 100px; margin-left: auto; margin-right: auto; width: 700px;" >
<div style="width: 150px">
</div>
<div style="width: 550px">
</div>
</div>
</body>
</html>
btw, the testing is just to see if i could move that and there was just something wrong when moving the img/div
RWB
18 Jul 2007, 3:51am
Try changing the post editor using the strange A/A icon at the top right corner... then post the code. Make sure to put the code in [ PHP ] tags
Lincoln
18 Jul 2007, 2:34pm
Try changing the post editor using the strange A/A icon at the top right corner... then post the code. Make sure to put the code in [ PHP ] tags
Yup.

And, if you post the link, I'll look at the site too...
LokiStormrunner
18 Jul 2007, 3:43pm
ah... thanks on how to do it... and i would give you the link but it's offline... im making it locally first
the_technocrat
18 Jul 2007, 4:07pm
I've got some CSS tutorials on my blog - link in sig
Lincoln
18 Jul 2007, 4:18pm
Err, well, this is pretty hard not knowing what pic you're trying to move up, what it looks like, or what's in that embedded CSS file. Not enough info :-/

//edit: Is it tribal_header_double.gif that you want flush against the top of the page? Perhaps the 'body' tag has padding on it by default. Try body {padding:0;}.

Check this out:

html, body, div, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li, img, a, abbr, acronym,
b, br, em, embed, form, hr, label, object, s, q, blockquote, strike, strong,
table, tbody, td, tfoot, thead, th, tr, tt, u { margin: 0; padding: 0; } I use that to start my CSS declarations on sites I make. See, every browser has different margin and padding defaults on elements. By setting all of them to zero to start, you eliminate headaches and make all browsers the same in that regard. Then, you build them backup again as you go along on your own terms. :) (Idea is from Eric Meyer (http://meyerweb.com/))
LokiStormrunner
18 Jul 2007, 4:33pm
http://i77.photobucket.com/albums/j76/MagnetTalk/eempire.jpg
I'm trying to move the bottom picture on top of the banner...

as for the embedded css, it's only borderless pics and black background

img{
border:none;
}
body{
Background-color:#000000;
}

---------------
also if you notice, my Firefox is acting kind of weird... in the picture, even though I'm on my site's tab, the title bar and address bar say I'm on the forum page... I've had this happen to me a lot lately and don't know what's wrong...
Lincoln
18 Jul 2007, 5:09pm
Getting elements to appear out of order is tricky; I recommend simply putting the lower image above the banner in the HTML rather than trying to haxxor it with CSS. The only way to do that with CSS is to use absolute positioning.
LokiStormrunner
18 Jul 2007, 9:27pm
so there's no way to do it with relative positioning? and is there any downside to absolute positioning?
Kentigern
18 Jul 2007, 11:00pm
Hi this isn't exactly css but it does the job in ie6 & ff2
Using my pics your script produces 23595the following script again using my pics produces 23594

You would have arrange the position's left and top on each pic txt etc.

<html>

<head>

<title>Evil Empire Productions :: Main Page</title>
<link rel="stylesheet" type="text/css" href="csscode.css" />
<style>
.position{
postion:relative;
top:-100px;
}
</style>
</head>

<body>

<p><span style="z-index: 0; position: absolute; left: 130; top: 15">
<img src="images/PH02373J.JPG" width="450" height="297"></span> </p>
<p><span style="z-index: 1; position: absolute; left: 232; top: 70">
<img src="images/WB02068_.GIF" width="227" height="176"></span> </p>
<span style="z-index: 2; position: absolute; left: 130; top: 385">
<p class="position">testing testing testing testingtesting testing testing
testingtesting testing testing testingtesting testing testing testing</p>
</span>

</body>

</html>
Lincoln
19 Jul 2007, 1:22am
Kentigern, that is indeed precisely CSS ;) That general idea is precisely what I had in mind when I suggested absolute positioning.

There are indeed drawbacks, like that worrying about people using different sized resolutions. Also, it will never ever move - sometimes good in the case of a banner, generally bad in the case of images in the middle of an article (the images won't stay with the text - they'll float in the same place, and the text won't wrap). I'm sure Google can yield a much more detailed look at when and when not to use absolute positioning. Yours is a case where I recommend reversing the order of the images instead.
Kentigern
19 Jul 2007, 1:34am
Yours is a case where I recommend reversing the order of the images instead.

Hi Keebs, (I'm learning by my mistakes :)) explain please, when I reversed the order (z-index) the cream square went behind the brown.
LokiStormrunner
19 Jul 2007, 2:56am
ok, thanks for all the help guys :D
Lincoln
19 Jul 2007, 12:49pm
The z-index is the layering. The highest-number z-index is what will appear on top if two things are occupying the same space (and there's no limit to how high the z-index can go).

I meant to reorder the HTML (putting one image before the other in the HTML code), not to alter the z-index (which I hadn't really been paying attention to).

//edit: Perhaps we have different ideas of what "above" means. I took it to mean "above it on the y index", as in higher than the banner on the page. If you meant layered above it on the z-index, then Kentigern's example would be fine unless you really want to get pedantic about a properly-ordered HTML hierarchy.
LokiStormrunner
19 Jul 2007, 2:04pm
yea, i was talking about them in the same space, the bottom one layered over the top... but i have a nice quick solution to that, photoshop them together :D
Lincoln
19 Jul 2007, 2:10pm
+5 points for simplicity
corroded
19 Jul 2007, 5:51pm
Check this out:

html, body, div, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li, img, a, abbr, acronym,
b, br, em, embed, form, hr, label, object, s, q, blockquote, strike, strong,
table, tbody, td, tfoot, thead, th, tr, tt, u { margin: 0; padding: 0; }

Great idea that, i might nick that.

Good idea to stick fieldset in there too... since xhtml 1.1 has a fit if you don't declare them in strict :(
Lincoln
19 Jul 2007, 6:08pm
IIRC, Eric's rationale for not including form elements (including fieldset) is that browsers interpret their margin and padding in differing ways, so setting them universally like that may exacerbate the issue rather than level the field.
corroded
19 Jul 2007, 6:20pm
fair play :)

fieldset for me in my most recent was the cause of some weird padding issues, solved by margin:0, padding:0 :)