|
CSS - Centreing All Content Inside A Div?
I want to centre all the small divs that go inside the nav div.
Currently the code below centres the text inside each div in the #nav element but it does not centre the actual elements. I have 9 menu items and they should appear in the centre of the nav bar with centred text. Not on the left with centred text. The only work around I can think of is to use an inline style on the first element inside the nav bar and apply padding. This is fine for a fixed width design but we want to use the same nav bar in some fluid designs. Similar TutorialsI can't get a div to centre inside a 100% width div in firefox. Any ideas? PHP Code: #footer_full_width { position:absolute; bottom:0; height:19px; background-image: url(../images/bottomredstripe.jpg); width:100%; color:#fff; background-color: #999; text-align:center; } #footer_panel { position:relative; bottom:0; height:19px; background-image: url(../images/gray_bottom.jpg); width:730px; height: 19px; color:#fff; background-color: #999; text-align:center; } <div id="footer_full_width"> <div id="footer_panel">FOOTER</div> </div> Ive arrived at this forum as Im at my wits end. The solution is prob really simple for seasoned css experts but its foxed me as Im still learning css as i want to move away from tables Ive converted a website done with tables into css but i cant get the whole webpage centered. Its using absolute rather than relative placement which may be the problem. Thats because the content (images and flash) have to go into predetermined sized cells. I wont go through the list of solutions ive tried. Instead im hoping someone can help me with something that will work for css thats using absolute placement cuz Im here is the external css [CODE] <style type="text/css"> body { margin:0 auto; width:690px; } #header { left:0px; top:0px; width:690px; height:214px } #menu { position:absolute; left:0px; top:214px; width:179px; height:316px; } #content { position:absolute; left:179px; top:214px; width:511px; height:505px; text-align: left; } #face { position:absolute; left:0px; top:530px; width:179px; height:189px; } #id- { position:absolute; left:0px; top:719px; width:690px; height:61px; } </style> and here is the css div layout <html> <head> <title>header</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="sheet1.css" rel="stylesheet" type="text/css"> </head> <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <div id="body"> <div id="header"> <img src="images/header.jpg" width="690" height="214" alt=""> </div> <div id="menu"> <img src="images/menu.jpg" width="179" height="316" alt=""> </div> <div id="content"> <img src="images/content.jpg" width="511" height="505" alt=""> </div> <div id="face"> <img src="images/face.jpg" width="179" height="189" alt=""> </div> <div id="id-"> <img src="images/_.gif" width="690" height="61" alt=""> </div> </div> </body> </html> THANKS!!!!! There are floods of threads pertaining to vertical aligning so I hope i'm not assaulted for asking this How would I go about vertically align content inside of a floating div with a fixed width and height. This is what I have so far. http://section31.us/temp/gallery/images.htm I obviously would like to have those images vertically aligned, can anyone help? Hi http://www.sential.co.uk/releases.html http://www.sential.co.uk/style.css the box model is based on the thrashbox it works fine on the other pages, except the releases page where there is an image at the bottom of the box. It has the incorrect alignment on the left border. And only in IE Any help would be very appreciated. -Luke Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! Hello, This look good on IE not on FF, why? Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#username {
position:relative;
width:508px;
height:72px;
margin:2px;
padding:4px;
border:1px #CCCCCC solid;
border-bottom-width: 20px;
}
</style>
</head>
<body>
<div id="username" >div<br />div<br />div<br />div<br />div<br />div<br />div<br />div<br />
</div>
</body>
</html>
I need several div's inside each other, to be padded 10px. I use the code bellow and the result is in image here , I also drawn what I want to accomplish. Can you help me ? PHP Code: .class-help_section_method { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#E1F9FF; padding:10px; width:100%; } .class-help_section_method_sub { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#FFFFFF; padding:10px; width:100%; } .class-help_section_niv { border: solid 1px #D9D9D9; -moz-border-radius: 7px 7px 7px 7px; background-color:#F3F3F3; padding:10px; width:100%; } Hello! Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read). So the current html below would be shortened to: Code: <a href="javascript:void(0);" class="sddm"><u>Settings</u> <div id="m1" class="alignl"> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">JavaScript DropDown</a> <a href="#">Cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </a> ORIGINAL CSS/HTML: Code: <style type="text/css">
/* Drop Down Menu */
span.sddm {
z-index: 30;
white-space: nowrap;
position: relative;
}
span.sddm a {
text-decoration: none;
}
span.sddm a:hover {
text-decoration: none;
color: blue;
}
span.sddm div {
position: absolute;
display: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #3366cc;
border-top: 1px solid #c9d7f1;
border-left: 1px solid #c9d7f1;
top: 18px;
}
span.sddm div a {
position: relative;
display: block;
margin: 0px;
padding: 2px 5px;
width: auto;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
span.sddm div a:hover {
background: #3366cc;
color: #fff;
}
span.sddm .alignl {
left: 0px;
}
span.sddm .alignr {
right: 3px;
}
</style>
<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>
I have a problem with positioning divs and here is the html code Code: HTML <div id=wrapper> <div id=header> header contents </div> <!-- end header --> <div id=body> <div id=profile> <div id=avatar> avatar data goes here </div> <!-- end avatar --> <div id=userdata> user data goes here </div> <!-- end userdata --> </div> <!-- end profile --> </div> <!-- end body --> <div id=footer> footer goes here </div> <!-- end footer --> </div> <!-- end wrapper --> The problem is that the footer div is supposed to be below the body div but it is wrapped by the userdata div and i rellay sdo not kno why! I will post the CSS in another post Thanks Hi I am looking for stylesheet method where I can give a image and a hyperlink for that image inside a stylesheet.. Kindly post ur suggestions to my email adddress godwinsharmila@yahoo.com Thanks in advance.. Regards Sharmila Hi I am trying to convert a site from HTML to one that relies more on CSS. For the time being I need to position two div's inside a td one at 100% and the other centered with say 10px padding down each side. The first one goes in ok but the second overflows the td cell I'm trying to put some padding on thus Code: <div style="position: relative; padding: 10"> But the div pops out of the td Any ideas??? Hey there! First off, take a look he http://apollomix.com As you can see, I have that little chat box on the sidebar. However, for the life of me, I can't figure out how to make it 100% tall! I've tried giving the main content div a height of 100%, the body a height of 100%... everything. It just won't go! What gives? Based on what I read, the parent DIV should be 100% tall, and it should work. I guess not. Any help would be really, really appreciated! Thanks! I'm setting up a website order form, and using CSS for formatting. I want to be able to put a picture icon (to view a picture of the product) beside the products details. I'm having problems because the product details keep wrapping to a new line. Here are some images illustrating the predicament: What it currently looks like Picture 1 What I want it to look like Picture 2 Structure of the DIV boxes Picture 3 The code for the boxes is he Code:
<A href="http://localhost/21072004/picture.php?id=t35064">
<SPAN class=kitTitle>t35064. Kampfpanzer Leopard </SPAN></A>
<DIV style="position: relative; WIDTH: 500px; HEIGHT: 100px">
<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" style=\"position: absolute; margin: 0px 0px 0px 0px;\">
<DIV style="position: relative;LEFT: 45px; WIDTH: 400px; TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #f0f0f0">
<TABLE class=dataFile border=0>
<FORM name=module action=cart.php?action=confirm method=post>
<TBODY>
<TR class=listColor>
<TH>1:35</TH>
<TH class=listHighlight>AFV</TH>
<TH>AU$30.00</TH>
<TH align=right>QTY
<INPUT type=textField size=3 value=1 name=qty>
<INPUT type=submit size=3 value="Add to Cart" name=submit>
<INPUT type=hidden size=3 value=t35064 name=id>
</TH>
</TR>
</TBODY>
</FORM>
</TABLE>
</DIV>
I also took the liberty of putting a sample capture page on my webspace (if anyone wishes to investigate further) Sample Page Page Stylesheet I'm trying to use a "DIV within a DIV", but when I set the positioning to "absolute", the DIV warps to the top of the page! I've been stumped for days on this, and it's delayed the page's launch. If anyone can help me... it'd be very much appreciated. I need to style all images within a div. For example, I want to do something like this: <div style="img{border: 0;}"> <img src="" /> <img src="" /> <img src="" /> </div> But that does not seem to work. Is it this possible with css? It is for an ebay template, so I don't think I can reference a separate stylesheet. thanks. Charley Hi All, How can I enable the inside bordder of a TD in html. Thans in advance I'm trying to center the <div class="menu"> inside the <div id="nav"> but I cannot figure out what to do exactly. I've tried so many different things with the text-align:center to putting it into a table and centering that... Nothing I try is making it go to the center. Will someone please assist me in getting this centered? EDIT: The way I have it currently, If I put text outside of the <div class="menu"> then that will be centered fine like I want the div. HMTL code Code:
<div id="nav">
<div class="menu">
<ul>
<li><a class="hide" href="#">Top 1</a>
<ul>
<li>Sub Top 1.1</li>
<li>Sub Top 1.2</li>
</ul>
</li>
<li><a class="hide" href="#">Top 2</a>
<ul>
<li>Sub Top 2.1</li>
<li>Sub Top 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
CSS code Code:
#nav{background-color:Blue;height:35px;width:auto;text-align:center;}
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
I explain my issue in detail he colorandinformation.com/~pressfor/csshelp.htm New to CSS and could use some help with this, thanks. |
|||||||