PDA

View Full Version : Problem with positioning

nachocheesier
07-24-2006, 05:12 PM
Hey~
I posted my problem with tables the other day, and 2 people recommended using CSS, so I attempted that. But now I have a problem.

I have 4 pictures (slices of my layout) total, but one of them will not go where I want it to go because I simply don't know how.

Here are the four slices in order:
slice 1 (http://i4.photobucket.com/albums/y129/dejavu1490/clothing_01.gif)
2 (http://i4.photobucket.com/albums/y129/dejavu1490/clothing_02.gif)
3 (http://i4.photobucket.com/albums/y129/dejavu1490/clothing_03.gif)
4 (http://i4.photobucket.com/albums/y129/dejavu1490/clothing_04.gif)

I went to www.w3schools.com and used this template (http://www.w3schools.com/css/tryit.asp?filename=trycss_float6) and I managed to get most of it the way I like it.

Here's the CSS file:

<html>
<head>
<style type="text/css">


div.container
{




width:570px;
height:400px
margin:0px;
background-image:url(http://i4.photobucket.com/albums/y129/dejavu1490/clothing_03.gif);


}





div.header
{
width:750px;
height:150px;
padding:0em;
color:white;
background-image:url(http://i4.photobucket.com/albums/y129/dejavu1490/clothing_01.gif);
clear:center;
}




h1.header
{

position:absolute;
left:300px;
top:20px
}






div.left
{
clear:right;
float:left;
width:180px;
height:400px;

margin:0;
padding:0.4em;
background-image:
url('http://i4.photobucket.com/albums/y129/dejavu1490/clothing_07.gif');
background-repeat:
no-repeat;
background-attachment:
scroll


}



div.content
{
position:absolute;
left:184px;
top:4px
clear:left;








}




div.footer
{
width:750px;
height:50px;
padding:0em;
color:white;

background-image:url(http://i4.photobucket.com/albums/y129/dejavu1490/clothing_04.gif);
clear:left;
}


</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">STAR WARS Clothing</h1></div>
<div class="left"><p>t W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

W3Schools - The Largest We</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Layout by nacho</div>
</div>

</body>
</html>

I hope you can see what the problem is, and if you do please help me.
Thank you so much.
Turquoise
07-24-2006, 06:06 PM
Firstly, change the width of your div.container from 570px to 750px (I'm not sure whether that was a typo or just coincidence the digits were switched round, but it is neccessary for the other changes I am going to make).

Now, add
float: right;
width: 570px;
height: 400px;
to your div.content. Remove the

position:absolute;
left:184px;
top:4px

This should hopefully make all the boxes go into place.

Also, to link an image in CSS you need to use:
background-image: url('yourimage.gif');
Turquoise
07-24-2006, 06:17 PM
I'm really sorry for double posting, I forgot to add you need to put the clothing_03.gif image in the div.content instead of the div.container.

Here's the whole code if it's easier (I got rid of the clear and margins that weren't doing anything):

<html>
<head>
<style type="text/css">

div.container {
width:750px;
height:400px
margin:0px;
}

div.header {
width:750px;
height:150px;
color:white;
background-image:url('http://i4.photobucket.com/albums/y129/dejavu1490/clothing_01.gif');
}

h1.header {
position:absolute;
left:300px;
top:20px;
}

div.left {
float:left;
width:180px;
height:400px;
background-image: url('http://i4.photobucket.com/albums/y129/dejavu1490/clothing_02.gif');
background-repeat:no-repeat;
}

div.content {
float: right;
width: 570px;
height: 400px;
background-image: url('http://i4.photobucket.com/albums/y129/dejavu1490/clothing_03.gif');
}

div.footer {
width:750px;
height:50px;
color:white;
background-image:url('http://i4.photobucket.com/albums/y129/dejavu1490/clothing_04.gif');
clear:both;
}

</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">STAR WARS Clothing</h1></div>
<div class="left"><p>t W3Schools you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.
W3Schools - The Largest We</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Layout by nacho</div>
</div>

</body>
</html>
nachocheesier
07-24-2006, 06:43 PM
Sweeeet! Thanks you helped me a lot. Like you don't even know haha
Ok, there are minor things I would like to modify on that there webpage. Like in the navigation box, I want to have the text start a little off from the edge of the border. I tried using margin:0.4px; but that totally messes the page up. Same for the content box too. Is there an alternative to using margin?
Thanks for all your help:blush:
Turquoise
07-24-2006, 07:07 PM
Yep, I thought that would come up :) Don't worry, I planned ahead!

Padding would be a better option, although the problem comes up in how browsers treat their padding.

Basically put, Firefox expands the box if you apply padding and IE doesn't. I don't know the effects on other browsers as those are the only two I use.

So, say you wanted to apply

padding-left: 5px;
padding-right: 5px;

on your container div, that would look fine on Internet Explorer but on Firefox the box increases in width and doesn't float to the right any more. That's probably what you were experiencing with the margin as well.

You can decrease the box size 10px in width so it looks good in Firefox but then there will be a big gap in IE. So, it looks like a no-win situation.

However, if you add

p {
padding-left: 5px;
}

then just the paragraphs will have padding and there should be no difference between the browsers.

Sorry about the complicated explanation! ;)
nachocheesier
07-24-2006, 09:32 PM
OK now I understand what's going on. I used Firefox and occasionally IE.
So what I don't understand is where to put this code in:
p {
padding-left: 5px;
}

mmm I tried putting it beside div.left and that didn't work out. So I guessed I should put it where the text was, but that didn't work either :tired:
Sooo could you tell me where to put it?
nachocheesier
07-24-2006, 09:44 PM
_-_ ehhh double post
But I also wanna know how to view/upload my css file onto my website?

This sounds dumb.
Turquoise
07-24-2006, 10:50 PM
Just anywhere in the style sheet should be fine.

Is it a .css? Just upload it like you would a normal file, and then link to it in the head of the page you wish to be styled.

<link rel="stylesheet" type="text/css" href="whatever.css" />
nachocheesier
07-25-2006, 12:57 AM
Thanks! :D
The page is now working!!! As soon as I finish, I'll let you know.
See you around, Turquoise.
nachocheesier
08-01-2006, 03:46 AM
I got another problem...:(
Ok. So Turquoise was nice enough to code me my layout, which looks like this:

<html>
<head>

<title>nacho's STAR WARS Sims :: About</title>
<link rel="stylesheet" type="text/css" href="style.css">


<center>

<style type="text/css">

p {
padding-left: 5px;
}


body {background-color:gray}




div.container {
width:750px;
height:400px
margin:0px;
}






div.header {
width:750px;
height:150px;
color:white;
background-image:url('yodaabout_01.gif');
}






h1.header {
position:absolute;
left:300px;
top:20px;
}






div.left {
float:left;
width:180px;
height:400px;
background-image: url('yodaabout_02.gif');
background-repeat:no-repeat;
}






div.content {
float: right;
width: 570px;
height: 400px;
background-image: url('yodaabout_03.gif');
background-repeat: repeat-y
}







div.footer {
width:750px;
height:50px;
color:white;
background-image:url('yodaabout_04.gif');
clear:both;
}






</style>
</head>
<body>






<div class="container">
<div class="header"><h1 class="header"></h1></div>
<div class="left"><p><br>
<a href="http://www.geocities.com/dabestsauce">Home</a></br></p>
<br><a href="http://www.geocities.com/dabestsauce/sims">Sims</a></br>
<br><a href="http://www.geocities.com/dabestsauce/clothing">Clothing</a></br>
<a href="http://www.geocities.com/dabestsauce/buildings">Buildings</a>
<a href="http://www.geocities.com/dabestsauce/miscellaneous">Miscellaneous</a>
<a href="#">Link here</a><br /></p></div>






<div class="content">
<h2>About nacho's STAR WARS Sims</h2>
<p>I bet there are hundreds of Sims 2 sites with a lot of custom content like meshes and modded items.
<br>
What makes this one a bit different is because it features Star Wars content.</br>
<br>I just want to save you the trouble of searching everywhere for Star Wars stuff.</br>
<br>For everything downloadable, I have to link back to either www.modthesims2.com or www.sims2.com because I can't store downloadable files anywhere. So I recommend registering at both websites. Otherwise, you won't be able to download these files. I hope you have as much fun looking through the pages as I did making them. Come back periodically. I might find some new things to post here. And you can always post things on the forums.</p>



<h2>Me!</h2>
<p>
Ehhhh...
<br>
errrr...
<br>
Well my name isn't really nacho. I mean, what kind of parents would name me nacho? Real name's Jennie. I'm a movie buff and I absolutely adore the Star Wars movies. The action, adventure, characters, aliens, the LIGHTSABERS!!11!!!!1! omg they rock. Seriously I want one of those FX lightsabers from Master Replicas. So I'm a movie buff, Sims 2 player, I play 3 instruments, I like sports, funky music, dogs, watermelon (all fruits besides tropical), yeah that's pretty much it. I'm kinda simple. I just don't get how my friends put up with me and my Star Wars self. hahaha -_-^
</p>




<h2>Special Thanks</h2>
I want to express my gratitude for the help of my friend, Karen. She was the one who helped me actually build this website from scratch. (I mean, it's pretty good for my first actual website huh? jk jk) It's all because she helped me so much with the technical things like coding.
<p>Thank you so much Karen.
Go visit her website:
<p>
<a href="http://euphoria.unrefrained.org/">Euphoria</a></br></p>

<p>
Website viewable in both Mozilla Firefox and Internet Explorer, but Internet Explorer is recommended. :D </p>
</div>




<div class="footer">
<br>Layout by nacho</br></div>
</div>



But the problem is with Mozilla Firefox. The words come out of the box, when the box itself is supposed to expand with the words. You could try it out on Internet Explorer to see what it's supposed to look like. It works fine on IE.

www.geocities.com/dabestsauce/about.html

It's so weird. If you have any ideas, please post! Thanks.
Milque
08-02-2006, 02:20 PM
Well, so that the box looks continuous, take out the height attributes from div.content, div.container and div.left. You'll have this:


div.container {
width:750px;
margin:0px;
}

div.left {
float:left;
width:180px;
background-image: url('yodaabout_02.gif');
background-repeat:no-repeat;
}

div.content {
float: right;
width: 570px;
background-image: url('yodaabout_03.gif');
background-repeat: repeat-y
}

And then, add this line:
background-color: #D1D1D1;
to div.container so that your left navigation menu's background doesn't end midway.

Your should end up with this:


div.container {
width:750px;
margin:0px;
background-color: #D1D1D1;
}

div.left {
float:left;
width:180px;
background-image: url('yodaabout_02.gif');
background-repeat:no-repeat;
}

div.content {
float: right;
width: 570px;
background-image: url('yodaabout_03.gif');
background-repeat: repeat-y
}

Hope that helps :)
nachocheesier
08-03-2006, 02:19 AM
You're so kind to help me! It works!!!!!!!!!!!!!
OH YEAH! Thank you so so much. You rock.
Milque
08-03-2006, 07:26 AM
No problem. Glad to have helped :)