HTML Forum

**rareillusions** · 11-23-2007, 08:59 PM

I tried that exact thing, and it didn't work :/ it's not centered and I want to position the text where I want it, but still having the text be in the center in any sized window...

**xprmnt** · 11-24-2007, 03:59 AM

Quote:

Originally Posted by rareillusions

I tried that exact thing, and it didn't work :/ it's not centered and I want to position the text where I want it, but still having the text be in the center in any sized window...

NO !!!! IT WORKS !!!!! (can someone else confirm ?) and its also been tested in quite a few browsers.

The wrapper layer is indeed HORIZONTALLY centered and there is even a place for you to put your background image

If you want it VERTICALLY CENTERED as well, I gave you the code (not complete code) in an earlier post.

**rareillusions** · 11-24-2007, 11:28 AM

ya, i know, I tried that exact code, it works in ie7?

**rareillusions** · 06:05 PM

Ok, I just got it to work using the tutorial here : http://www.tutorialtastic.co.uk/tuto...bleless_layout

and I got it, but on my side bar, I use individual divs for each seperate content, if you catch what I'm saying, it looks like this:
http://i214.photobucket.com/albums/c...screenshot.jpg

and the top works great, and the text was in the right place, except for when I did those seperate divs inside. Here's what happened:
http://i214.photobucket.com/albums/c...messedupss.jpg

The main text content is down at the bottom of the page, and the footer is not where it's supposed to be, and is outlined by red

I really want to keep those individual divs if possible.

(Here's the tutorial on the individual boxs, if you want to see the code. : http://xoxmariah.com/tutorials/files/css/sidebarbox.php )

**xprmnt** · 11-24-2007, 07:06 PM

OK I think you got this going for you BUT

you have to remember if you want people to help you

You have to explain it thoroughly (screenshots are perfect for this)
but have to provide the code that you are using also
otherwise we are not clairvoyants to be able to guess

I suspect that the divs that go down have a width that is bigger than it should

left div + main div + paddings + margins <= width of the container div + padding of it

**rareillusions** · 11-24-2007, 07:17 PM

Sorry, my bad. Here's some snippets of the code:

Stylesheet:

Quote:

.box {
font-family: tahoma;
font-size: 8pt;
color: #323232;
padding: 1px;
line-height: 15px;
width: 180px;
}

.box1 {

color: #d7d7d7;
font-family: helvetica;
font-weight: bold;
text-align: justify;
padding-left: 5px;
font-size: 18px;
line-height: 20px;
letter-spacing: -1px;
text-transform: lowercase;
border-bottom: 5px solid #f23990;
width: 180px;
}
.box2 {
color: #323232;
font-family: tahoma;
font-size: 8pt;
line-height: 15px;
padding: 5px;
background-color: #ffffff;
background-image: url('http://i148.photobucket.com/albums/s26/iluvsavvy/bgbox.jpg');
border: 1px solid #bebebe;
border-top: 0px solid #bebebe;
border-bottom: 2.5px solid #ff93c6;
width: 180px;
}

div#wrapper {width:800px;
position: relative;
background: #f2f5ca url('http://i214.photobucket.com/albums/cc286/rare-illusions/layouts/layout11table.jpg') repeat-y;
margin-left: 35px auto;
text-align: left;
}
#header{
width: auto;
}
#navigation{
width: auto;
}
div#sidebar {position: absolute;
position: relative;
float: left;
margin-left: 80px ;
width: 190px;}

div#main {position: absolute;
float: right;
margin-left: 6px ;
width: 470px;}
#footer {
clear: both;
}

HTML:

Quote:

<html>
<head>
<title>______some things take time__________RARE ILLUSIONS___________ </title>
<meta name="author" content="Brittany">
<meta name="keywords" content="design, site, content, goodies, portflio, brushes, tutorials, textures, dowloads, graphics">
<meta name="description" content="A personal website with tutorials, dowloads and graphics for the visitor and a portfolio of the owner, Brittany">
<LINK REL=stylesheet HREF="css.css" TYPE="text/css">
</head>
<body>
<center>
<div id="wrapper">
<div id="header"> <img src="http://i214.photobucket.com/albums/c...ut11copy-1.jpg"> </div>
<div id="navigation" ><center> <a href="index.php" class="nav">Home</a><a href="webmistress.php"class="nav">Owner</a><a href="site.php"class="nav">Site</a><a
href="you.php"class="nav">Visitor</a><a href="me.php"class="nav">Portfolio</a></center></div><br>

<div id="sidebar" >
<div class="box" width: 179px;>
<div class="box1" width: 179px;><b class="bsidebar">Site</b>info</div>
<div class="box2" width: 179px;>
TEXT HERE>>.... and there's more boxes, just the red code repeated</div>
</div>
<div id="footer"> <img src="http://i214.photobucket.com/albums/c...uts/footer.jpg"> </div>
</div>
</div>
<div id="main">
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main </div>
</p>
<div id="footer"> <img src="http://i214.photobucket.com/albums/c...uts/footer.jpg"> </div>
</div>
</body></html>

theres more but that sums it up and i had too many characters.

**xprmnt** · 11-24-2007, 08:06 PM

your code is a TOTAL MESS ...

you can't mix and match the code as you wish

1. get rid of the <center> </center> tags they are deprecated
2. get rid of the width: 179px; where you have it is WRONG
you should use ids for each div and give them individual widths or put those widths in the .box css definition
3. read the w3schools.com you cann't just throw a few html and css tags and expect it to work
4. consider using dreamweaver
5. get the code you like from http://blog.html.it/layoutgala/
6. if you get something working CHANGE one think at a time and test to see if you SCREW the design with you addition, if you did UNDO, read about the change that you did and see how its done correctly
7. consider buying a book and start from the beggining
8. get a nice layout from places such http://oswd.org and modify it always remembering 6.
9. I could go on forever ... but if you are serious about web design ... you have to start reading, you can't expect other people to do it for you, unless you are the manager of a website company.

**rareillusions** · 04:15 PM

Ok, I fixed everything, thanks for the links, that first one really helped. And thanks for your patience

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!