|
CSS - Help Centering Items In A Display Block.
Hello,
I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance. test site is http://mtbireland.com/hkr Code: </div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 1') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<div id="footer-middle">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 2') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 3') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
Code: #footer {
height:200px;
padding:20 0 0 0;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
line-height:20px;
font-family: Tahoma,georgia,Century gothic, Arial, sans-serif;
width:100%;
float:left;
background:#392E2C;
text-align:left;
}
/* Footer Widgets */
#footerwidgets {
display: block;
width:100%;
background:#392E2C;
}
#footer-left {
width: 210px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
text-align:left;
}
#footer-middle {
width: 210px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
#footer-right {
width: 210px;
float: right;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
Similar Tutorialshi, Im making a menu that looks like: link1 link2 link3 link4 and then wen you hover over link a dropdown may appear i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later) thanks this is the html: PHP Code: <ul> <li><a href="index.php?action=home">home</a></li> <li><a href="index.php?action=whatnew">what's new</a></li> <li><a href="index.php?action=offers">special offers</a></li> <li><a href="#">collections</a> <ul><a href="#">drop1</a></ul> <ul><a href="#">drop2</a></ul> <!--when looping thru categories, do a WHERE cat_status >= 2--> </li> <li><a href="index.php?action=sBask">shopping basket</a></li> <li><a href="index.php?action=contact">contact us</a></li> </ul> this is the relevant css: PHP Code: #nav ul li { position: relative; margin: 0; padding: 0 10px 0 10px; list-style: none; display: inline; } #nav ul li ul { position: absolute; display: none; } #nav ul li:hover ul { display: block; left: 0; top: 10px; } #nav ul li:hover ul li { height: 20px; } Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? I am not sure how to centre all items on the suckerfish menus: I thought this would work, but it doesn't and even if it did it won't validate: <ul id="nav"> <div style="text-align:center;margin-left:auto;margin-right:auto;"> NAV ELEMENTS HERE... </div> </ul> Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter. Ok, I know there must be a simple solution to this that I'm blanking on. The website has a background image: Code:
#background {background-image: url(x.jpg);
margin-left: auto;
margin-right: auto;
width: 1024;
height: 760;
z-index: 1;}
So it's centered and the margins auto resize. Now, I want to add a text content area over the background so that it moves with it upon resizing. What's the best way to do so? test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated So, I'm trying to figure out the proper way to use display:block based on what my needs are. My needs: I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over). However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc.... In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied.... For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box). Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on. If you need further clarification as well, just let me know. Thanks. I'm very aware of all sorts of IE bugs, but I've never heard of a safari bug with the display:block property within an inline anchor. Does anyone have a solution for this bug? view this page with the latest Safari: animalcrossingbay.net/cmps_index.php I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table. The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off. Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage? Thanks! I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed. How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated! Hi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear. Take a look at www.webwizedezignz. co . uk to see what its like at the moment. Cheers in advance Thanks for taking the time to read my question. I have icons that I want to place on my nav buttons (which are background imgs) without having to make the button and the icon one picture and have to load a seperate button for each link. My problem is that I have my link text as block so that when the user hovers over anywhere in the button area, it's active, not just over the text. What is happening is the icons are appearing below my button, not to the right of the text in the button. Not sure how to get around this, or if I even can. Thanks agian for your help Brad Should look like: |------------------------| | Link Txt {img here} | |_____________________| Currently looks like: |------------------------| | Link Txt | |_____________________| {img shows up here} HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Notes</title> <link rel="stylesheet" type="text/css" href="home.css" media="screen" /> </head> <body> <div class="header"> <h1>Home Notes</h1> </div> <p class="instructions">Select an option to start</p> <ul> <li class="mainmenu"><a href="grocery.htm">Grocery</a><img class"menuicon" src="images/shopping_cart_basket_Small.png" /></li> <li class="mainmenu"><a href="recipe.htm">Recipe</a><img class"menuicon" src="images/notes_edit_Small.png" /></li> <li class="mainmenu"><a href="messages.htm">Messages</a><img class"menuicon" src="images/Post-It_Small.png" /></li> <li class="mainmenu"><a href="calendar.htm">Calendar</a><img class"menuicon" src="images/Calendar_Small.png" /></li> <li class="mainmenu"><a href="phonebook.htm">Phone Book</a><img class"menuicon" src="images/cellphone_128_Small.png" /></li> <li class="mainmenu"><a href="email.htm">Check E-mail </a><img class"menuicon" src="images/mail_Small1.png" /></li> </ul> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Home Notes</title> <link rel="stylesheet" type="text/css" href="home.css" media="screen" /> </head> <body> <div class="header"> <h1>Home Notes</h1> </div> <p class="instructions">Select an option to start</p> <ul> <li class="mainmenu"><a href="grocery.htm">Grocery</a><img class"menuicon" src="images/shopping_cart_basket_Small.png" /></li> <li class="mainmenu"><a href="recipe.htm">Recipe</a><img class"menuicon" src="images/notes_edit_Small.png" /></li> <li class="mainmenu"><a href="messages.htm">Messages</a><img class"menuicon" src="images/Post-It_Small.png" /></li> <li class="mainmenu"><a href="calendar.htm">Calendar</a><img class"menuicon" src="images/Calendar_Small.png" /></li> <li class="mainmenu"><a href="phonebook.htm">Phone Book</a><img class"menuicon" src="images/cellphone_128_Small.png" /></li> <li class="mainmenu"><a href="email.htm">Check E-mail </a><img class"menuicon" src="images/mail_Small1.png" /></li> </ul> </body> </html> CSS: Code: @charset "utf-8";
/* CSS Document */
Body {
color: #000000;
background-color: #666666;
font-size: 18px;
padding: 0px;
margin: 0px;
}
.header {
background-color: #0066FF;
width: auto;
height: 70px;
border-bottom: 4px #333333 solid;
padding: 0px;
margin: 0px;
}
.header h1 {
padding: 0px 0px 0px 10px;
line-height: 60px;
margin: 0px;
}
.instructions {
padding-left: 10px;
text-decoration: underline;
font-weight: bold;
}
li.menuicon {
float: right;
}
li.mainmenu{
list-style: none;
line-height: 68px;
background-image: url(images/Button1.png);
background-repeat: no-repeat;
padding-left: 10px;
margin: 4px 0px;
width: 183px;
}
li.mainmenu a:link{
color: #000000;
text-decoration: none;
display: block;
}
li.mainmenu a:visited{
color: #000000;
text-decoration: none;
display: block;
}
li.mainmenu a:hover{
text-decoration: overline underline;
display: block;
}
li.mainmenu a:active{
display: block;
}
source: bluewebpages.com/photography/album3/1 i need help setting the thumbnails which have a block display to line up on the same line. i'm using a program called photostack, which is a light-weight photoblog system. when it spits out the code, how would i center the main div containg all thumbnails? i've tried text-align, negative margins(which worked except that the main photo would display ontop of them because the negative margins involved abs positioning) mainly if someone could point me in the right direction on getting block elements on the same line then i'd be set. i can resolve the later issue. thanks, amory EDIT FIXED - need a float: left; |
|||||||