473,327 Members | 1,979 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

How do i get box with compartments within using CSS

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?
Nov 8 '06 #1
8 1964
rsteph
71
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).
Nov 8 '06 #2
AricC
1,892 Expert 1GB
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?
[html]<!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>
<title>Untitled 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="container">


<div class="box">


</div>




</div>



</body>
</html>[/html]
Nov 8 '06 #3
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!
Nov 8 '06 #4
Actually and how would that example you sent me be centred?
I dont know how I managed to centre mine
Nov 8 '06 #5
ronverdonk
4,258 Expert 4TB
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:
Nov 8 '06 #6
AricC
1,892 Expert 1GB
What is centering your container is margin-left: auot; margin-right: auto



W3 Schools


This is a great place to learn CSS, and more.
Nov 8 '06 #7
Thanks for all your advice! I'll have a look at those sites...
Nov 8 '06 #8
AricC
1,892 Expert 1GB
Here is an example of boxes within a box if this will help:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.  <title>Untitled Page</title>
  5. </head>
  6. <style type="text/css">
  7. .container
  8. {
  9. position: absolute;
  10. width: 500px;
  11. height: 500px;
  12. border: 1px solid black;
  13. z-index: 0;
  14. }
  15.  
  16. .box
  17. {
  18. position: absolute;
  19. margin-left: 30px;
  20. margin-top: 25px;
  21. width: 100px;
  22. height: 100px;
  23. border: 1px solid black;
  24. z-index: 1;
  25. }
  26.  
  27.  
  28. .box1
  29. {
  30. position: absolute;
  31. margin-left: 135px;
  32. margin-top: 25px;
  33. width: 100px;
  34. height: 100px;
  35. border: 1px solid black;
  36. z-index: 2;
  37. }
  38.  
  39.  
  40. .box2
  41. {
  42. position: absolute;
  43. margin-left: 240px;
  44. margin-top: 25px;
  45. width: 100px;
  46. height: 100px;
  47. border: 1px solid black;
  48. z-index: 3;
  49. }
  50.  
  51. .box3
  52. {
  53. position: absolute;
  54. margin-left: 345px;
  55. margin-top: 25px;
  56. width: 100px;
  57. height: 100px;
  58. border: 1px solid black;
  59. z-index: 4;
  60. }
  61.  
  62.  
  63.  
  64.  
  65. </style>
  66.  
  67.  
  68.  
  69.  
  70. <body>
  71. <div class="container">
  72.  
  73.  
  74. <div class="box">
  75. Some Content Goes Here
  76. </div>
  77.  
  78. <div class="box1">
  79. Some Content Goes Here
  80. </div>
  81.  
  82. <div class="box2">
  83. Some Content Goes Here
  84. </div>
  85.  
  86. <div class="box3">
  87. Some Content Goes Here
  88. </div>
  89.  
  90.  
  91. </div>
  92.  
  93.  
  94.  
  95. </body>
  96. </html>
Nov 9 '06 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: funkiejunkie | last post by:
I also dont get css too much, when people or websites give you a code to put in, it doesnt do anything because the css has to be in a file right? All I need is a few compartments say 3 across and...
2
by: =?Utf-8?B?TG9zdEluTUQ=?= | last post by:
Hi All, I am trying to determine if the user clicked the "x" close button within the controlbox of the form (top right corner - next to minimize and maximize buttons). I am using the...
5
by: =?Utf-8?B?VmFubmk=?= | last post by:
Hi, I have a component where I need to have thread-safe access to a list. Operations on the list are done in critical sections (lock (lockObject) { ... } ) in the usual way, to make sure that no...
4
by: =?Utf-8?B?UmljaEI=?= | last post by:
I am trying to create a project using the ASP.NET AJAX accordion control. I would like to dynamically add panes to the control with a form template added when the pane is added. I have tried...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.