|
CSS - Centering An Image Within A Block Element
Similar TutorialsHow 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?? 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 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;
}
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? the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored? Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Groups</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navbar {
position: relative;
z-index: 10000;
}
#globalNavWrapper {
position: relative;
width: 100%;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
z-index: 10;
}
#globalNavWrapper #nav ul {
list-style: none;
z-index: 20;
}
#globalNavWrapper #nav li {
float: left;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
display: inline;
height: 24px;
}
#globalNavWrapper #nav li.navpadleft {
border-left: 1px solid #999;
}
#globalNavWrapper #nav li a {
display: block;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
height: 0;
width: 100%;
padding-top: 24px;
overflow: hidden;
}
#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }
#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }
#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }
#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }
#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }
#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }
#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }
#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }
#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }
#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }
#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }
#globalNavWrapper #nav .subnav {
position: absolute;
margin: -1px;
border: 1px solid #999;
background: #fff;
width: 150px;
z-index: -10;
display: none;
overflow: hidden;
}
#globalNavWrapper #nav .subnav li {
clear: both;
float: none;
display: block;
background: none;
line-height: 18px;
height: 18px;
width: 150px;
list-style: none;
border: 0;
}
#globalNavWrapper #nav .subnav li.hr {
border-bottom: 1px solid #999;
}
#globalNavWrapper #nav .subnav li a {
background: #fff;
padding: 0 0 0 5px;
width: 1000px;
height: 18px;
color: #000;
text-decoration: none;
}
#globalNavWrapper #nav .subnav li a:hover {
background: #e4f5e5;
color: #009f00;
}
#globalNavWrapper #nav li iframe {
display: none;
z-index: -1000;
height: 220px;
width: 151px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<div id="globalNavWrapper">
<ul id="nav">
<li id="nav_home" class="navpadleft">
<a href="#">Home</a>
</li>
<li id="nav_myXXXX">
<a href="#">My XXXX</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_people">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
<li id="nav_groups" class="active">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_tnn">
<a href="#">News Network</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_green">
<a href="#">Green Living</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_ecards">
<a href="#">E-Cards</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_shopping">
<a href="#">Shopping</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_petit">
<a href="#">Petite</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_don">
<a href="#">Don</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
startList = function() {
var navRoot = document.getElementById("nav");
var is_MSIE = false;
if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
node.onmouseover = function() { this.className += " over"; }
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
this.className = this.className.replace("over", "");
}
for(j=0; j<node.childNodes.length; j++) {
if(node.childNodes[j].nodeName=="UL"){
if(is_MSIE) {
var iframe = document.createElement('<iframe frameborder="0">');
iframe.style.position = 'absolute';
iframe.border = '0';
iframe.frameborder = 0;
iframe.style.backgroundColor = '#f00';
iframe.src = 'about:blank';
node.appendChild(iframe);
}
}
}
}
}
}
startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.
document.getElementById('nav').style.zIndex = 2000;
</script>
</body>
</html>
I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes: Code:
<style type="text/css">
.container {
display: inline-block;
}
.title {
align: left;
}
.subtext {
align: right;
}
</style>
<div class="container">
<div class="header">
<div class="title">Title Goes Here</div>
<div class="subtext">Align Me Right</div>
</div>
<div class="content">
Variable content which container needs to size dynamically to fit. Could be 300px wide, could be 500px wide...
</div>
</div>
What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks! try to make a UL into a horizontal nav. i want the a's inside the li's to be display:block, so i need a block element around the outside, but that means they wrap to new lines. What is block without new lines? thanks. Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV. Visually, I am attempting this: PHP Code: ================================================================= User: John Doe Main Menu :: Logout ================================================================= To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content. I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that. The CSS: PHP Code: #loginbar { height: 14px; font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; background: #285064; margin: 0; padding: 3px 3px 0px 3px; } #logout { float: right; display: inline; } .loglink { font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; } And the markup: Code: <div id="loginbar" align="left"> User: '.$_SESSION['fullname'].' <div id="logout" align="right"> <a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a> </div></div> This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.) Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point Hello, I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! Hi all, The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.) The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas? I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it. Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh i cant seem to figure out how to center my div's in IE. they look fine in firefox and safari. what can i do? here is my stylesheet: <head> <style type="text/css"> body {background:grey url('lgrey048.jpg');} .layout{position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 646px; height: 800px; } .banner{position:absolute; top:0; left:0; height:251px; width:646px; border:1px solid black;} .links {position: absolute; top: 261px; left:0px; height: 47px; width: 646px; } .content {position: absolute; top: 318px; left:0px; height: 492px; width: 446px; background-color: white; border:1px solid black; } .sidebar {position: absolute; top: 318px; left:456px; height: 492px; width: 190px; background-color: white; border:1px solid black } img { border-style: none; } </style> </head> any suggestions? Hi, I've been designing a page that is basically made of a box that sits dead center on the page (horizontally and vertically centered). The only way I have come up with doing this is by using the following code: Code: <table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<div id="centeredDiv">
This text will sit right in the middle of the page
</div>
</td>
</tr>
</table>
I was thinking that there must be a way of doing this with CSS (without using tables) to make it a bit more tidy and standards compliant as I am laying out everything within the centeredDiv with CSS positioning. Thanks in advance, Matthew Dingley 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;
}
The year is 2009, and surely there is a way to such a simple thing as displaying photos of unknown size in the H-center of a Div--without running off the screen. Oh wait, there isn't. The problem: Given unknown picture size, 1) if I don't specify absolute positioning (or fixed), I can center it but then it floats to the top of the parent which looks silly. 2) If I do specify absolute (or fixed) positioning, I can't center it. Please prove me wrong. I just want a simple slide-show page without telling folks what to set their resolution at, or how big the pictures need to be. I have a div with background images. It is styled float:left. That is all fine. The div is sized at 50x50px. Inside this div is a smaller image. I want the image to appear centered of the div. I have tried everything I can think of w r t margins and padding but the image allways shows up in the upper left corner. Here is an example: Code: <div class='caltool' onmouseover="this.style.backgroundImage = 'url(images/litegearani.gif)';" onmouseout="this.style.backgroundImage = 'url(images/litegearstill.gif)';"> <a href="whatever.html" title="export to desktop calendar"><img style="margin: auto; height:16px; width:16px;" src="icon_export_vcal.png" width="16" height="16" border="0" /></a> </div> Here are the styles in the caltool class: Code: .caltool {
float: left;
background-image: url(../images/litegearstill.gif);
background-repeat: no-repeat;
background-position:center;
height:50px;
width: 50px;
}
How can I make the images be CENTERED over the gear background?? So I have 2 different background patterns that extend to infinity behind my logo. Problem is, I could not center my logo in front of these two patters. Code: so it should display it like; Layer 1: Left Pattern Right Pattern Layer 2: Logo But instead, its displayed as; Layer 1: Left Pattern Right Pattern Layer 2: Logo I spent over an hour searching this on the internet. Any help appreciated, thanks! Code: .subcontent {
min-height:50px;
width:100%;
background:#00CC66;
}
.leftcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_rpattern.jpg) repeat-x;
}
<div class="subcontent" style="position:relative;">
<div style="margin-left:auto; margin-right:auto; width:400px; height:50px; position:absolute;">
<img src="images/logo.jpg" alt="Insert Logo Here" name="Insert_logo" width="200px" height="50px" />
</div>
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! |
|||||||