Ok well... CSS yeah... I have a box in the middle which is centred. How do I have more compartments within that box im baffed?
-
-
The best way of doing that would likely depend somewhat on how you positioned the box (which I'm guessing you're refering to <div> tags). If they position the absolutely and declare a top and left position, you can do the same with the other divs and place them in a list on your page. Otherwise you could place one <div> within another <div> and then position it within your .css page using the various options.
Someone else may have a better response for you that that. But without any code or anything, that's about the best advice I'd have (with my somewhat meger web design experience). -
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">Originally posted by funkiejunkie
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitl ed Page</title>
</head>
<style type="text/css">
.container
{
width: 500px;
height: 500px;
border: 1px solid black
}
.box
{
margin-left: auto;
margin-right: auto;
margin-top: 25px;
width: 200px;
height: 200px;
border: 1px solid black
}
</style>
<body>
<div class="containe r">
<div class="box">
</div>
</div>
</body>
</html>[/html]Comment
-
That did sort of help thanks... im starting to understand it a bit more but am still stuck in trying to adapt it to what I need it for
This is the code for my main box in the middle of the page.
<style type="text/css">
<!--
}
#container {
width: 720px;
margin-right: auto;
margin-left: auto;
background-image: url(pinkbox.gif );
The pink box gif is just literally a pink box in which I want to write over.
I would like say 8 boxes evenly spread out?
I thought CSS was made to simplify!Comment
-
Actually and how would that example you sent me be centred?
I dont know how I managed to centre mineComment
-
Maybe it is time to sit back and take some serious CSS tutorials instead of running after each and every suggested solution. Try a few of the courses, to be found via following link and you'll feel a lot more confident about CSS.
CSS Directory
Ronald :cool:Comment
-
What is centering your container is margin-left: auot; margin-right: auto
W3 Schools
This is a great place to learn CSS, and more.Comment
-
Thanks for all your advice! I'll have a look at those sites...Comment
-
Here is an example of boxes within a box if this will help:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" > <head> <title>Untitled Page</title> </head> <style type="text/css"> .container { position: absolute; width: 500px; height: 500px; border: 1px solid black; z-index: 0; } .box { position: absolute; margin-left: 30px; margin-top: 25px; width: 100px; height: 100px; border: 1px solid black; z-index: 1; } .box1 { position: absolute; margin-left: 135px; margin-top: 25px; width: 100px; height: 100px; border: 1px solid black; z-index: 2; } .box2 { position: absolute; margin-left: 240px; margin-top: 25px; width: 100px; height: 100px; border: 1px solid black; z-index: 3; } .box3 { position: absolute; margin-left: 345px; margin-top: 25px; width: 100px; height: 100px; border: 1px solid black; z-index: 4; } </style> <body> <div class="container"> <div class="box"> Some Content Goes Here </div> <div class="box1"> Some Content Goes Here </div> <div class="box2"> Some Content Goes Here </div> <div class="box3"> Some Content Goes Here </div> </div> </body> </html>Comment
Comment