...

View Full Version : Positioning things using html and css.



l Squid l
06-29-2007, 02:13 PM
Hello, this is my website. http://elementalstudios.freehostia.com/

It had everything positioned where I wanted to be. But people said it was messed up, my first answer was it was because I was using a theme on Firefox, SO I made the theme to default, and now I see the problem, but I can't figure out how to position it.:confused:

Css Code

@charset "utf-8";
/* Elemental Studios */

body {
text-align:center;
background:#000000;
margin:auto;
padding:0;
color:#FFFFFF;
font-family:Tahoma, Verdana, sans-serif, Arial;
font-size:11px;
text-decoration:none;
}

#content {
width:770px;
margin:auto;
}

.gapless {
display:block;
background-position:center;
}

.left {
display:block;
float:left;
margin-left:119px;
}

.right {
display:block;
float:right;
margin-right:130px;
}

.leftpipe {
display:block;
float:left;
}

.home {
display:block;
float:left;
}

.teams {
display:block;
float:left;
}

.videos {
display:block;
float:left;
}

.graphics {
display:block;
float:left;
}

.about {
display:block;
float:left;
}

.contact {
display:block;
float:left;
}

.rightpipe {
display:block;
float:left;
margin-top:500px;
}

#header {
background:url(images/Top-Content-Headers.png);
width: 535px;
height: 76px;
background-position:center;
float:left;
vertical-align:middle;
}

.textcontent {
font-family:Tahoma, Verdana, sans-serif, Arial;
font-size:11px;
text-indent:20px;
color:#FFFFFF;
text-decoration:none;
}


#contentbox {
background: #001 url(images/Content.png);
width: 535px;
height: 385px;
background-position:center;
float:left;
}

Any help is appreciated.:thumbsup:

VIPStephan
06-29-2007, 03:25 PM
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Felementalstudios.freehostia.com%2F

l Squid l
06-29-2007, 04:41 PM
Ok, now I corrected the errors, it now validated. Dang I forgot the Javascript stuff I put..well, how can I specify which css file to use if you are using a certain browser

Edit: Nevermind, I got the code, good thing I make backups! Now onwards to the positioning.

Arbitrator
06-30-2007, 02:46 AM
Now onwards to the positioning.If you still need help, you might want to describe what the desired position is. Right now, I see what appears to be a vertical lamp with no indication of where it should be.

Your document still seems to be invalid as well.

l Squid l
06-30-2007, 04:00 AM
If you still need help, you might want to describe what the desired position is. Right now, I see what appears to be a vertical lamp with no indication of where it should be.

Your document still seems to be invalid as well.

Ok Now its validated, the lamp/neon light(what i like to call it)
The left neon light is in the correct spot, but in both IE and Firefox the right neon light appears to be, in a new row. I would like to align on the opposite of the left neon light. Also, in CSS, is positioning using the margin properties such as the margin, margin-top,margin-left,ect. the right way of positioning or is there a different property, I am supposed to use to position it? Also if I don't specify an alt(I think it means alternative text) why is it an error? Thanks for inquiring if I still needed help.

Arbitrator
06-30-2007, 04:46 AM
the lamp/neon light(what i like to call it)I chose the term lamp since it looks like a hydrogen lamp. I guess that thatís a bit off though since hydrogen lamps are purple.


Also, in CSS, is positioning using the margin properties such as the margin, margin-top,margin-left,ect. the right way of positioning or is there a different property, I am supposed to use to position it?There are multiple ways of positioning things. The best method is based upon what you want to position; where you want it; possibly, why you want it there; and what and where other content will appear on the page. All I know is where you want the images, so I canít tell you what the best method would be.


Also if I don't specify an alt(I think it means alternative text) why is it an error? Thanks for inquiring if I still needed help.The DTD file referenced by the document type declaration at the top of your document indicates that the attribute is required.

The attributeís purpose is to provide a text fall‐back should it not be possible to display the image or if the user has vision issues and canít see it. Obviously, it doesnít make sense for presentational images that convey no information; such images should be displayed via CSS anyway.

Being that your images appear to be presentational, Iíve moved them to a style sheet. You can view a live example (http://www.jsgp.us/demos/CF117566.html) or use the code below. Iím not sure if itís at all what youíre looking for though.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo CF117566</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-06-28">
<meta name="Revised" content="2007-06-28">
<link rel="icon" type="image/vnd.microsoft.icon" href="CF117566.ico">
<style type="text/css">
* { margin: 0; padding: 0; }
html { background: black url("CF117566_LNL.png") no-repeat; color: white; font: 16px/1.2 sans-serif; }
body { min-height: 592px; padding: 1em 104px; background: url("CF117566_RNL.png") top right no-repeat; }
p { text-align: center; }
</style>

</head>
<body>

<p>It works.</p>

</body>
</html>

l Squid l
06-30-2007, 02:06 PM
Thanks for the handful of information, well, What I'm trying to do is center the banner in the center obvious. The left lamp/light should have its left edge align up with the left edge/side of the banner,and the right light/lamp should align up with the right edge/side of the banner. Know what Im saying? Final result is this.
http://i97.photobucket.com/albums/l231/Squid267/IndustrialTemplate_Donotrip-1.jpg
BTW
I trust community, i know you wont rip but i posted this on a different forum.:thumbsup: :D

Edit: Well, I am starting all over again. I am taking your advice to put the images in the CSS rather the HTML because of the alt. In IE it is now centered, but in Firefox, I cannot get it to center. It is validated BTW

CSS Code

.gapless {
background:url(images/Banner.png);
width:796px;
height:178px;
background-position:center;
text-align:center;
}

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elemental Studios | Montages, Graphics, Teams and more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico" />
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
-->
</style></head>

<body>

<div class="gapless" align="center"></div>

</body>
</html>

koyama
06-30-2007, 03:24 PM
I am taking your advice to put the images in the CSS rather the HTML because of the alt. In IE it is now centered, but in Firefox, I cannot get it to center.
Firefox is rendering correctly. The correct way to horizontally center a block-level element is like this:


.gapless {
margin: 0 auto;
}
.gapless is centered in IE (including IE7) because you have set body {text-align: center}. This is a due to a bug in IE.

l Squid l
06-30-2007, 03:34 PM
OoO, Thank You.

Ok well, if you check out my site. http://elementalstudios.freehostia.com/
You the see the left light. Which Css property should I use to move the lamp to the right?

Jutlander
06-30-2007, 04:13 PM
Which Css property should I use to move the lamp to the right?

Try floating it right.

l Squid l
06-30-2007, 04:23 PM
Ok, float:right moves way too much to the right, In this situation would using the margin-left property a good idea?

Jutlander
06-30-2007, 04:43 PM
Oh I thought you wanted it moved over far to the right.

I've just tested it with the margin-left applied and IE 6 doesn't display it correctly.

Try with this CSS:



body {
text-align : center;
background : #000000;
margin : auto;
padding : 0;
color : #ffffff;
font-family : Tahoma, Verdana, sans-serif, Arial;
font-size : 11px;
text-decoration : none;
}
#content {
width : 760px;
margin : 0 auto;
}
.gapless {
background : url(images/Banner.png);
width : 760px;
height : 178px;
margin : 0 auto;
}
.left {
background : url(images/Left-Neon-Light.png);
width : 178px;
height : 592px;
background-repeat : no-repeat;
float: left;
}
.right {
background : url(images/Right-Neon-Light.png);
}
body {
background-repeat : no-repeat;
}


And this HTML between the body tags:



<div id="content">

<div class="gapless" align="center"></div>

<div class="left"></div>

</div>


That works on IE 6 and 7 too. :)

l Squid l
06-30-2007, 05:32 PM
Hmm..I just try this but it doesn't go far enough to the left, but I can control how far left it goes if I enter a number then write px(pixel). I am going try that.
Edit: I added margin-left, 0 px. and it works maybe thats what you trying to tell me.
Edit again: I did the same for the firefox code and it works very nicely. Thank You.

Jutlander
06-30-2007, 05:47 PM
Hi there, it's just that with what you've done now, it looks like this on IE 6.

http://img92.imageshack.us/img92/9124/testqq4.png

Just locally, try copying this into a new document and save it as .html

It needs to be saved to the same directory as the folder /images/ :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elemental Studios | Montages, Graphics, Teams and more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico" />
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
-->
body {
text-align : center;
background-color : #000000;
background-repeat : no-repeat;
margin : auto;
padding : 0;
color : #ffffff;
font-family : Tahoma, Verdana, sans-serif, Arial;
font-size : 11px;
text-decoration : none;
}
#content {
width : 760px;
margin : 0 auto;
}
.gapless {
background : url(images/Banner.png);
width : 760px;
height : 178px;
margin : 0 auto;
}
.left {
background : url(images/Left-Neon-Light.png);
width : 178px;
height : 592px;
background-repeat : no-repeat;
float: left;
}
.right {
background : url(images/Right-Neon-Light.png);
}
</style></head>

<body>

<div id="content">

<div class="gapless" align="center"></div>

<div class="left"></div>

</div>

</body>
</html>


This looks the same on FF, IE 6 & 7 and Opera. :)

l Squid l
06-30-2007, 06:30 PM
Hmmm, but do ppl still use IE 6 if you look at the site now I made it look good with Firefox, and IE 7. I don't have major concerns for other browsers.

Edit: Ok now I have added the right lamp/light,I'd like to move directly up. How can I do this I tried background-positioning, vertical-alignment. I think its called that.

PappaJohn
06-30-2007, 06:39 PM
There's still going to be quite a few people using IE6, not everybody upgrades right away.

l Squid l
06-30-2007, 06:42 PM
I guess so, but how can I check in IE 6 if I do not use IE 6, I have already upgraded my Browser?

_Aerospace_Eng_
06-30-2007, 06:45 PM
http://tredosoft.com/Multiple_IE

l Squid l
06-30-2007, 06:49 PM
Thank You!

l Squid l
06-30-2007, 08:14 PM
Ok, how do I move the right lamp/neon light up? BTe in IE 6 it looks fine, IE 7 it also looks fine, Firefox is givin my the troubles now.:(

Jutlander
06-30-2007, 08:29 PM
.left {
background : url(images/Left-Neon-Light.png);
width : 178px;
height : 592px;
background-repeat : no-repeat;
margin-left : 0;
float: left;
}

and


.gapless {
background : url(images/Banner.png);
width : 770px;
height : 178px;
margin : 0 auto;
}

You need to apply the float: left to your .left class and then make the .gapless those 26 pixels less wide, in order for it to fit into place.

l Squid l
06-30-2007, 08:47 PM
Oh, thank you. Thanks for helping me a lot.

l Squid l
06-30-2007, 09:11 PM
Wow , another problem, I really didnt want to ask you but i Have tried everything I could think of..lots of trial and error resulting in error. The left pipe wont go all the way left nice and snug like it is in Firefox. http://elementalstudios.freehostia.com/

Css Code

.leftpipe{
background:url(images/Left-Pipe.png);
width:50px;
height:36px;
float:left;
}

Jutlander
06-30-2007, 09:43 PM
It's no hassle at all, us who helps you get better and more experienced too. :)

I can see you've used a conditional comment where you link to an IE specific stylesheet. Have you remembered to change the CSS in this also, because I checked with the source you have now and it works on IE 6 on my machine.

l Squid l
06-30-2007, 09:59 PM
Yes, I added those modifications you said before into the IE CSS also. I t doesn't look correct in my IE 6, would that be because i have installed multiple version of IE, that thingy AeroSpac posted.

Jutlander
06-30-2007, 10:03 PM
I am using the same program, Multiple IE, so apparantly we test in the same browser. Hmm...

This is the exact code I'm testing with:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elemental Studios | Montages, Graphics, Teams and more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico" />
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
-->
body {
text-align:center;
background:#000000;
margin:auto;
padding:0;
color:#FFFFFF;
font-family:Tahoma, Verdana, sans-serif, Arial;
font-size:11px;
text-decoration:none;
}

#content {
width:770px;
margin:auto;
}

.gapless {
background:url(images/Banner.png);
width:770px;
height:178px;
margin: 0 auto;
}

.left {
background:url(images/Left-Neon-Light.png);
width:121px;
height:592px;
background-repeat:no-repeat;
margin-left:0px;
float:left;
}

.right {
background:url(images/Right-Neon-Light.png);
width:117px;
height:592px;
margin-right:0px;
float:right;
}

.leftpipe{
background:url(images/Left-Pipe.png);
width:50px;
height:36px;
margin: 0 auto;
float:left;
}
body {
background-repeat : no-repeat;
}
</style></head>

<body>

<div id="content">

<div class="gapless" align="center">
</div>

<div class="left"></div>

<div class="right">
</div>

<div class="leftpipe">
</div>

</body>
</html>

l Squid l
06-30-2007, 10:28 PM
I envy you, you being such a great coder.

l Squid l
06-30-2007, 11:05 PM
Well, the good news is the nav bar is completed, check it out here (http://elementalstudios.freehostia.com/).
I did have problems with the right pipe but I thought how you would fix it, and you were talking about the size of the images so I tried making the contact us image smaller, and it worked! So like you said I was more experienced when you helped me.

Next part of the website was the Content Header, which is the top part of the header. I did this so the Image Titles, which look like this. http://i97.photobucket.com/albums/l231/Squid267/Welcome.png
But i added the height and width but it doesn't view properly, if you look in IE 6 or 7 you can see the small bar at the bottom. Thats supposed to be 535 px by 76px. But its obviously not.

Css Code

.headercontent {
background:url(images/Header-Content.png);
width:535px;
height:76;
margin: 0 auto;
float:left;
}

Edit:I forgot to add the px after 76 oops!I can't believe I overlooked that!

Edit2: Hmmm..but I can't center it... and move it up..

Jutlander
06-30-2007, 11:33 PM
I can see that you've used a gradient effect with that background image for .headercontent

This is just a suggestion and feel free to trash it, but a consistent color throughout the content area will be a lot easier to read on and it doesn't look too good when a background with a gradient is repeated. :)

So I've taken myself the freedom to modify it a little. Now it just requires some content to fill it out and some styling of the <h1> and <p> elements. :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elemental Studios | Montages, Graphics, Teams and more!</title>
<link rel="shortcut icon" type="image/ico" href="Element2.ico" />
<style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
-->
body {
text-align : center;
background : #000000;
margin : auto;
padding : 0;
color : #ffffff;
font-family : Tahoma, Verdana, sans-serif, Arial;
font-size : 11px;
text-decoration : none;
}
#content {
width : 770px;
margin : auto;
}
.gapless {
background : url(images/Banner.png);
width : 770px;
height : 178px;
margin : 0 auto;
}
.left {
background : url(images/Left-Neon-Light.png);
width : 121px;
height : 592px;
background-repeat : no-repeat;
margin-left : 0;
float : left;
}
.right {
background : url(images/Right-Neon-Light.png);
width : 117px;
height : 592px;
margin-right : 0;
float : right;
}
.leftpipe {
background : url(images/Left-Pipe.png);
width : 50px;
height : 36px;
margin : 0 auto;
float : left;
}
.home {
background : url(images/Home.png);
width : 70px;
height : 36px;
margin : 0 auto;
float : left;
}
.team {
background : url(images/Teams.png);
width : 56px;
height : 36px;
margin : 0 auto;
float : left;
}
.video {
background : url(images/Videos.png);
width : 56px;
height : 36px;
margin : 0 auto;
float : left;
}
.graphic {
background : url(images/Graphics.png);
width : 76px;
height : 36px;
margin : 0 auto;
float : left;
}
.forum {
background : url(images/Forum.png);
width : 57px;
height : 36px;
margin : 0 auto;
float : left;
}
.contact {
background : url(images/Contact-Us.png);
width : 113px;
height : 36px;
margin : 0 auto;
float : left;
}
.rightpipe {
background : url(images/Right-Pipe.png);
width : 54px;
height : 36px;
margin : 0 auto;
float : right;
}
.headercontent {
background: #1c1b1b;
border-right: 1px solid #7c0909;
border-left: 1px solid #7c0909;
border-bottom: 1px solid #7c0909;
float: left;
width: 530px;
text-align: left;
}
body {
background-repeat : no-repeat;
}
</style></head>

<body>

<div id="content">

<div class="gapless" align="center">
</div>

<div class="left"></div>

<div class="right">
</div>

<div class="leftpipe">
</div>

<div class="home">
</div>

<div class="team">

</div>

<div class="video">
</div>

<div class="graphic">
</div>

<div class="forum">
</div>

<div class="contact">
</div>

<div class="rightpipe">
</div>

<div class="headercontent">
<h1>Some content here</h1>

<p>Just testing</p>
</div>


</body>
</html>

l Squid l
07-01-2007, 03:27 AM
I finally finshed it! I had to adjust the sizes, I knew I had because it was going into the right place, and Jutlander you helped, I did learn, lol. http://elementalstudios.freehostia.com/
Your is too complicated for me at the moment but I might do it in the near future also, Jutlander I will place your name somewhere on the site thank you for helping me to code the site! Once again I thank you very much!

Jutlander
07-01-2007, 10:25 AM
No problem, be sure to post again if you encounter anymore trouble. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum