|
CSS - Centering A Series Of Div's
Hello everyone,
This is my first post. I hope you can help me with this problem. The design i'm trying to build is made up of a series of blocks, say 200x200px. What i would like is to have them stack up from left to right, and when the right edge of the page is reached continue on the next line. See image he (URL blocked - I have no privileges!) If the window is resized, the grid of blocks has to reorder itself according to window width. For example if a window allows for 5 blocks horizontally is resized down to where it allows for only 4 blocks, then the fifth block will move to the next row, and so on. So, in the case of 5 blocks on a row, total width is 1000, in case of 4 blocks the total width is 800px. Now if the window is resized to for instance 980, there's 180 px of empty space left on a row. Here's where my problem lies. I'd like the rows to be centered on the page, with the extra 180 pix of width distributed 90 left and 90 right of the page. I hope I've explained myself well. Can anyone point me to a solution? Thanks. Similar TutorialsHello, I couldn't think of a more appropriate title, so I apologize - but as it says, I have a series of small questions regarding my CSS layout and would be most grateful if someone could assist me. I'll start with the biggest one. (See Image) http://img379.imageshack.us/img379/9779/46432769lm3.png As you can see, when viewing my layout in Google Chrome or Safari, everything in between the header and the footer gets caught on my top menu. I tried to correct it, but I am really unaware of the problem's source; if anyone knows I'd appreciate it. The topmenu CSS is he Code: .topmenu {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
width:898px; border:solid 1px #363636;
clear:both;
}
.topmenu a, .topmenu a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
text-decoration: none;
}
.topmenu ul {
list-style-type:none;
padding:0;
margin:0;
}
.topmenu ul li {
float:left;
position:relative;
z-index:auto !important /*Non-IE6*/;
z-index:1000 /*IE6*/;
border-right:solid 1px #363636;
}
.topmenu ul li a {
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
float:none !important /*Non-IE6*/; float:left /*IE-6*/;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.topmenu ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
}
.topmenu ul li:hover a {
background-color:#008000;
text-decoration:none;
color:#FFFF00;
}
.topmenu ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.topmenu ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #363636;
border-bottom: solid 1px #363636;
background-color:#0000FF;
color:#FFFFFF;
}
.topmenu ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00;
}
.topmenu table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
color: #FFFFFF;
background: #0000A0 url(/menbg.png);
}
.topmenu ul li a:hover {
background-color:#008000;
text-decoration:none;
color:#FFFF00;
}
.topmenu ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px; left:0;
}
.topmenu ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em; padding:4px 16px 4px 16px;
border-left:solid 1px #363636;
border-bottom: solid 1px #363636; background-color:#0000FF;
color:#FFFFFF;
}
.topmenu ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00;
}
The next two things aren't really significant. (See Image) http://img73.imageshack.us/img73/1725/50804367ww7.png (Shown in red) If possible, I would like to remove that space in the center column and expand the width of the blockquote section in my sidebar, but I can't seem to find out how. Website: http://banjouniverse.110mb.com/css2.php CSS: http://banjouniverse.110mb.com/master2.css What I need to do is align a series of icons to the center, but there are a few complications, they must continue to be centered with any combination of 4-5 different(same sized) icons. For example icon 3 and 4, when displayed must be centered together, and at the same time, if icon 1 and 5 are being displayed they must also be centered correctly. First of all they are appearing on 2 seperate lines, and I seem to be unable to put them on the same line without using float:left on one. But I can't just float:left image one to put them on the same line, as image one may not be displayed in the next instance(with a different combination of images). And I don't think I can set a width on the div and center it because there will not be the same number of icons displayed in each instance(could be 1-5, 14x14 icons). My guess is that some % values can make this work but I'm just not sure how. I was going to post an illustration of what I mean but I guess it's blocked... Any help would be greatly appreciated. Thanks. This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly. I have 2 problems: 1. How can I get these list items centered? 2. the second level seems to have problems displaying horizontally in IE. How can I fix it? Code: <div id="tablenavcontainer">
<div id="navcontainer">
<ul>
<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>
<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>
<ul>
<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>
<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
</ul>
</ul>
<br style="clear: both;" />
</div>
</div>
Hi, This is my first css only layout and I am trying to centre the navigation. But it wont. Any suggestions? http://www.wnv2.com/v9.htm <<link here CSS File: Code: /* CSS Document */
body {
background-image:url(bg.jpg); background-repeat: repeat-x;
background-color:#65B240;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/*---------- Divs ------------*/
#wrapper {
margin: 0px;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
width: 540px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color:#DDDDDD;
}
#navigation ul {
display: block;
float:left;
}
#navigation li, #navigation li a {
color:#59933E;
font-weight:bold;
letter-spacing:1px;
height: 25px;
display: block;
margin: 0 2 0 2;
float:left;
}
#navigation .left_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5 55 5 55;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
HTML: View Cource Thanks How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hi all, this is my CSS: Code: body {
font-family:arial;
font-size:14px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
.mainbar {
position:absolute;
height:100%;
width:600px;
display:block;
background-color:#F2F2F2;
top:0px;
bottom:0px;
z-index:0;
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
.contact {
position:absolute;
display:block;
height:40px;
width:600px;
background-color:#FFFFFF;
top:80%;
bottom:0px;
z-index:0;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
.logo {
position:absolute;
display:block;
height:200px;
width:600px;
background-color:#CCCCCC;
top:10%;
bottom:10%;
border:1px solid #000000;
z-index:2;
}
.logoborder {
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated! Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!! Thanks! Jack. I was wondering how I could center a CSS div so I would have one column going thorugh the middle. I tryed using "center" in the CSS but that didn't work and then I read some where else about floats and how they will make every go to either the left or right. How would I go about centering a Div like that? Thankyou for any help. Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly. It's very basic. You have blank page. No wrappers no nothing. Then 1 div, holds, 1 ul, with 20 li. The div has specified width. How to center the ul inside the div? I need the UL to NOT have specified width since I'll be adding more items to it over time. Thanks! im trying to center this div but im not to sure on how to do it Code: <style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake. Hi there, I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE. Any ideas? This is my code: PHP Code: #top_bar{ background-image: url('img/top_bar.jpg'); height: 54px; font-family: arial; font-size: 14px; color: #ffffff; width: 100%; } #top_bar_content{ padding: 18px 0 10px 0px; width: 870px; margin: 0 auto; position: relative; } Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso Good day to you all, I'm working on a pop up css box. My problem is that I can't make it to be centered. Here is my code : PHP Code: echo "<a onmouseover=\"this.style.cursor='pointer'\" onfocus=\"this.blur();\" onclick=\"document.getElementById('$namess').style.display = 'block' \" >\r"; echo "<span><img src=\"http://ponder.peuplies.info/V_0-1/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" /></span></a>\r"; echo "<div id=\"$namess\" align=\"center\" style='display: none; position: absolute; margin: auto; margin-left: auto; margin-right: auto; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; color:#000000; font-size: 12px; '>\r"; echo "This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.\r"; echo "<img src=\"http://test.com/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" />"; echo "<br />\r"; echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('$namess').style.display = 'none' \" ><span style=\"text-decoration: underline; color:#000000;\">Close</span></a></div>\r"; echo "</div>\r"; Can somebody help me ? Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? |
|||||||