CSS Positioning
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?
[PHP]<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>[/PHP]
btw, the testing is just to see if i could move that and there was just something wrong when moving the img/div
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?
[PHP]<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>[/PHP]
btw, the testing is just to see if i could move that and there was just something wrong when moving the img/div
0
Comments
And, if you post the link, I'll look at the site too...
//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:
[php]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; } [/php]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.
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
[PHP]img{
border:none;
}
body{
Background-color:#000000;
}[/PHP]
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...
Using my pics your script produces
You would have arrange the position's left and top on each pic txt etc.
[PHP]
<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>[/PHP]
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.
Hi Keebs, (I'm learning by my mistakes
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.
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
fieldset for me in my most recent was the cause of some weird padding issues, solved by margin:0, padding:0