13 replies to this topic

[wvcaudill2]

Hello, im trying to design a nice layout and stuff for my new website, but im having help.

First off, how can I center a div inside of another?

[wvcaudill2]

Eh, im not sure thats what I want. You see, im trying to create an advanced layout using divs that will expand or contract to fit the size of the content. And, ym layout has a border. The border is 3 different colors, so im making a div for each, and making each one relative and nested inside the one before it so that it will look like a border. Then, inside of all the border divs, im going to put the layout images and content, and make all that absolute. Its really hard to explain, so if you have any questions, please feel free to ask. This is what I have so far:

http://70.252.1.93:3...yout/header.php

As you can see, I only have the 2 border divs up right now. I need the second one to be centered inside the first. Am I going about this whole thing the right way? I could really use some guidance and help!

Thanks!

[Lastcrime]

okay, so from what ive understood your problem here is the borders, not so much centering divs. My advice would be to go into photoshop or whatever and combine all three borders save them as one image and then put the image into a div and make that a container so that the background of the border would go inside. This way you could position the border in any way and the background would automatically be contained within the border.

Your way requires to much code for a border, because you have to align each div perfectly, you have to make each one float over each other, then you have to position them,

if youre going to use ur way id suggest using absolute positioning and then making the z-index for each of the borders a number for each one you want on top of the other:

background-image:border if its an image if not dont include this;
border:color;
position:absolute;
left:whatever;
top:whatever;
z-index:1;

Border 2

background-image:border2 if its an image if not dont include this;
border:color;
position:absolute;
left:whatever;
top:whatever;
z-index:2;

Border 3

background-image:border3 if its an image if not dont include this;
border:color;
position:absolute;
left:whatever;
top:whatever;
z-index:3;

Edited by Lastcrime, 20 August 2007 - 03:19 PM.

[wvcaudill2]

Okay, im trying to do it your way, since I think its better, but I cant get the background to work.

First, I deleted the second div, and then I modified the style.css page to this:

.container1 {
background-image: url("/layout/border.gif");
background-repeat: repeat;
background-color: #797979;
background-position: top left;
width: 1000px;
min-height: 900px;
position: relative;
text-align: center;
vertical-align: center;
align: center;
margin: auto;
}

[wvcaudill2]

Okay, I got another problem. Now I need the white area in this link to be moved to the left.

http://70.252.1.93:3...yout/header.php

Here is the css code:

body {
font-family: Tahoma, Verdana, Arial, sans-serif;
background-color: #BDBDBD;
font-size: 12px;
}

.container1 {
background-image: url("/layout/border.gif");
background-repeat: repeat;
background-color: #797979;
background-position: top left;
width: 985px;
min-height: 900px;
position: relative;
text-align: center;
vertical-align: center;
align: center;
margin: auto;
}

.logo {
background-image: url("/layout/logo.gif");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 192px;
height: 90px;
position: absolute;
top: 0px;
left: 3px;
text-align: left;
}

.header {
background-image: url("/layout/blacktop.gif");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 786px;
height: 90px;
position: absolute;
top: 0px;
left: 196px;
text-align: left;
}

.content {
background-color: #FFFFFF;
width: 981px;
min-height: 711px;
position: relative;
top: 90px;
left: 3px;
text-align: left;
vertical-align: left;
align: left;
margin: auto;
}

[Lastcrime]

why would you want the white are to be moved left... im using firefox and the picture you uploaded shows the white content area perfectly aligned left but its not wide enough.

Since its not wide enough just make the width 984px or play around till you get it dead on.

also you dont have to add this but its a good thing to have, in the container div add, overflow:hidden; this way if you make things to big they won't mess up your container and wont go over it.

Edited by Lastcrime, 20 August 2007 - 11:53 PM.

[wvcaudill2]

I noticed this too. It looks fine in FF, Opera, and every other browser EXCEPT Internet Explorer. if you look at it in IE, you will see what I mean.

[Lastcrime]

ok ill take a look at it in ie, your probly going to have to put a css hack in your code somewhere, im assuming that a line of code is screwing something up in ie, to fix it you block it out with a hack (if you already know about them great if not just do a search in p2l search css hacks.)

[Lastcrime]

Try pming albinoAZN, i saw in another topic that he can decode in ie and other browsers.

[wvcaudill2]

Okay, I PMed him.

[wvcaudill2]

He isnt answering, anybody else know the css hackk I should use?

[Lastcrime]

okay heres a page that i have saved all about hacks:

http://www.webcredible.co.uk/user-friendly...detection.shtml

I know about the hacks i just dont know where to put them to fix it thats my only problem maybe you can understand more from reading this.

[wvcaudill2]

Okay, I got it moved left, but now the layout is not centered. How can I center it without messing it up again?