|
CSS - Centering An Image In A Float Right Column
Hello,
I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee Similar TutorialsThis is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Ok, so I've got a decent design laid out, and I'm working on creating the markup for it, but I've run into some trouble. It's a fairly common style, two collumn with a header and footer. The navbar is a 2 deep nested unordered list sitting on the left side inside a floated div called "sidebar." What I'd like, is for the space to the right of it to function as if it was a separate cell as it were (in tables lingo anyway, if you can't tell I'm still learning the new way of things). The funny thing is, IE does this by default, and I know that's incorrect, but I really wish I could get the layout working just like it works in IE. The page is located at: http://www.digital-traffic.net/gallery.php CSS is at: http://www.digital-traffic.net/styles/main.css Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here Hello: I'm having trouble centering my page layout. I never had a problem in the past but someone passed this coding over to me and it won't center. I have a div id named container which is what I'm using to position my layout on the page. Can someone help me out? Thanks in advance. This is the HTML: Code:
<html>
<head>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script language="JavaScript" src="email.js" type="text/javascript"></script>
<!--[if IE]><link rel="stylesheet" href="email-archive.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="container">
<table width="850" height="27" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="menu">
<ul class="menu1" id="nav">
<li><span class="menu_top"><a href="#" style="padding: 0;">Communities</a></span>
<ul>
<li><a href="#">Chestatee</a></li>
<li><a href="#">Hawks Ridge</a></li>
<li><a href="#">Lake Arrowhead</a></li>
<li><a href="#">Area Map</a></li>
</ul>
</li>
</ul>
<ul class="menu2" id="nav">
<li><span class="menu_top"><a href="#" style="padding: 0;">Build On Your Own Lot</a></span>
</li>
</ul>
<ul class="menu3">
<li><span class="menu_top"><a href="#" style="padding: 0;">House Plans</a></span>
<ul>
<li><a href="under-3000.html">Examples of stock home plans under 3000 sq.ft.</a></li>
<li><a href="over-3000.html">Examples of stock home plans over 3000 sq.ft.</a></li>
<li><a href="custom-homes.html">Examples of Custom Homes Plans</a></li>
</ul>
</li>
</ul>
<ul class="menu4">
<li><span class="menu_top"><a href="#" style="padding: 0;">Available Homes</a></span>
<ul>
<li><a href="#">Chestatee</a>
<ul>
<li><a href="#">The Greens</a></li>
<li><a href="#">The Waterfront</a></li>
<li><a href="#">Linkside</a></li>
</ul>
</li>
<li><a href="#">Hawks Ridge</a></li>
<li><a href="#">Lake Arrowhead</a></li>
</ul>
</li>
</ul>
<ul class="menu5">
<li><span class="menu_top"><a href="#" style="padding: 0;">Gallery</a></span>
<ul>
<li><a href="#">Exterior Gallery</a></li>
<li><a href="#">Interior Gallery</a></li>
</ul>
</li>
</ul>
<ul class="menu6">
<li><span class="menu_top"><a href="#" style="padding: 0;">Features</a></span></li>
</ul>
<ul class="menu7">
<li><span class="menu_top"><a href="#" style="padding: 0;">Design Center</a></span></li>
</ul>
<ul class="menu8">
<li><span class="menu_top"><a href="#" style="padding: 0;">Selected Option Prices</a></span></li>
</ul>
</div> </td>
</tr>
</table>
<div id="main">
this is the main content area
<br><br>
</div>
</div>
</body>
</html>
===== This is the css file: Code:
#container
{
width: 850px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
/* communities */
.menu1 {
width: 90px;
}
/* build on your own lot */
.menu2 {
width: 140px;
}
/* house plans */
.menu3 {
width: 95px;
}
/* available homes */
.menu4 {
width: 120px;
}
/* gallery */
.menu5 {
width: 65px;
}
/* features */
.menu6 {
width: 70px;
}
/* design center */
.menu7 {
width: 102px;
}
/* selected option prices */
.menu8 {
width: 135px;
}
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu ul ul li{
width: 120px;
background: #DDDDDD;
}
#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
display: block;
border-width: 0;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
}
#menu .menu_top {
color: #fff;
text-align: center;
}
#menu a {
text-decoration: none;
padding: 3px 3px 4px 10px;
}
#menu a:hover {
color: #ffffff;
background: #8C8C8C;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul li {
background: #DDDDDD;
}
#menu ul ul li:hover a{
color: #fff;
background: #8C8C8C;
}
#menu ul ul a {
color: #000;
}
#menu ul ul a:active {
background: #8C8C8C;
}
#menu ul ul ul {
top: 0;
left: 100%;
}
#menu ul ul ul li {
background: #8C8C8C;
}
#menu ul ul ul a{
color: #fff;
}
#menu ul ul ul a:hover{
color: #fff;
background: #336699;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/** end navbar css code **/
==== This is the other CSS file being used: Code:
body {
font-size: 100%; /* enable IE to resize em fonts */
behavior: url(csshover.htc); /* call hover behaviour file */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
=== This is the .htc file: Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* - Martin Reurings
* - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns. the attempt is he http://www.jimpix.co.uk/rejig/008.htm I have the two content columns defined as: #leftcol { width:70%; float:left; border:1px solid black; } #rightcol { width:25%; float:right; border:1px solid black; } The above divs sit within a main 'content' div: #content { padding:10px; border-top:2px solid #999999; border-bottom:10px solid black; } But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns. Can anyone see what I am doing wrong please? Thanks Jim I'm doing a 2 column layout via css (my first attempt at doing full css layout) and I'm having some problems in firefox getting it to work right. Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #0163CB;
}
#content{
width: 80%;
float:left;
}
then my divs are as follows:
<div id=navBar>
stuff
</div>
<div id=content>
more stuff
</div>
The problem is that in firefox the top of content sits directly to the bottom and left of the end of navBar . If I set conent width to 78% it seems to be fine but it there are borders inside content that i want to take up 100% of the remaining page. Thanks Dave Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible. The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column. I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using. 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> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the header</div> <div id="main"> <div id="mainleft">stuff on the left<br /> more stuff on the left</div> <div id="mainleft1">stuff on the left<br /> more stuff on the left</div> <div id="mainleft2">stuff on the left<br /> more stuff on the left </div> <div id="mainleft3">stuff on the left<br /> more stuff on the left</div> <div id="mainleft4">stuff on the left<br /> more stuff on the left</div> <div id="mainleft5">stuff on the left<br /> more stuff on the left</div> <div id="maincenter">stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /></div> <div class="clear"></div> </div> <div id="footer">This is the footer</div> </div> </body> </html> CSS: Code:
#container {
width: 600px;
text-align: center;
margin: 20px auto 0 auto; }
#header {
width: 598px;
margin: 0px 0px 0px 0px;
border: solid 1px; }
#main {
margin: 20px 0px 0px 0px;
border: solid 1px;
float: left;
width: 598px;
overflow: auto; }
#mainleft {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft1 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft2 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft3 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft4 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft5 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#maincenter {
float: left;
display: inline;
margin: 5px 5px 5px 5px;
border: solid 1px;
width: 424px; }
.clear { clear: both; }
#footer {
margin: 20px 0px 0px 0px;
border: solid 1px;
width: 598px; }
Some notes: 1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it? 2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids. 3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats). Is IE 6 displaying the code right, or is Opera 9? --> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments Many thanks Scott Greetings, Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? I have a page that has a header, footer, left content box, and right sidebar. I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box. It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer). I have uploaded the page on one of my servers:test page page so you can see it in action. Here's the CSS/HTML code: 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" xml:lang="en"><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}
div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}
div#headerbox {
border: solid 1px gray;
width: 741px;
height: 95px;
}
div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}
#middlecontent {
border: solid 1px purple;
margin-right: 210px;
text-align: left;
}
div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}
div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}
</style></head>
<body>
<div id="pageframe">
<div id="headerbox">
<h1>This is the Header.</h1>
</div>
<div id="whiteboxes">
<div id="middlecontent">
<h1>middle content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
</div><!-- end middlecontent -->
<div id="rightside">
<h1>right frame</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
</div>
</div><!-- end whiteboxes -->
<div id="footer">
<p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
</div>
</div><!-- end pageFrame -->
</body></html>
Any help is greatly appreciated. I know this is probably soooo not kosher, but this is where I'm at ... I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen. I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose. Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it. Here's the css code: Code: /* star rating */
.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
ul.rating li{
display:inline
}
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
.rating a:active {
background-position:top;
}
and here's the HTML code (in php format): Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns. Cheers. Julian Hello, Thank you for reading my post This is what I try to create. A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered. I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center. The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width. What I already got : The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size. I did try and search for several hours, but couldn't find a good solution. Mainly my question would be, how I can shrink or grow an image without knowing his size. Basicly my html code is Code: <div id="navBar"> <div class="navElement" id="nav1"> <img class="navImg" src="images/home.gif" /> </div> <div class="navElement" id="navN"> <img class="navImg" src="images/notHome.gif" /> </div> </div> my latest css for unknown image size Code: #navBar { /* main page navigation container */
height: 460px;
width: 70px; /* 1. this will be dynamically set */
left: 100px;
top: 151px;
position: absolute;
visibility: visible;
}
.navImg {
height: auto;
width: auto;
/* height: 60px;*/
/*width: inherit;*/
position: relative;
top:0px;
margin:0 auto;
}
#navElement1 {
position: relative;
width: auto;
height: 70Px;
top:0px;
margin:0 3px;
visibility: visible; }
With javascript I add a onclick event handler on each navImg wich trigger the action. This works to. Please, Is someone willing to help with pointers. Thanks in Advance SC At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? Having an odd rendering problem involving centering content in a fixed-width right hand column that lies within a fixed width centered master content div. Take a look at the template he http://www.ipfwcommunicator.org/devindex.php At first I tried to center the content using align="center" in the HTML markup, which I know is a no-no, so I'm not too sad it didn't work. I then tried {margin-left: auto; margin-right: auto;}, thinking it would work in IE as it does with tables, but it did not. Both of these attempts worked worked with most modern browsers (Moz/Firefox/Safari/NN7) but failed on MSIE5/Mac and IE6/Win. Nice and compliant, and I would be happy in a perfect world, but alas, 90% of my readers use a (vastly) imperfect browser. I decided to get a bit more professional and utilize CSS positioning, setting the DIVs that hold the content boxes (i.e., Weather/Search/etc.) as {position: relative; left: 15px;}This also worked in most browsers, but oddly enough on IE5 Mac (and assume IE6 win although I didn't have a chance to test) the boxes centered but the tables inside the weather/search boxes that allow for cross-platform formating jutted out the side. Lastly, and this is the current solution, since the column is fixed width and the boxes are fixed width, I used the "ice" solution of dividing the remaining margin by two, and setting margin-left: equal to that. In this case: {margin-left: 15px;} Oddly enough this works FINE on everything, even IE5/Mac, but doesn't work on IE6/Windows, which instead results in what appears to be 5 or 6px more than the defined 15px. Compare here between Firefox and IE6 and you'll see it. And CSS is here So the question: What IS the best way to center up those boxes in that column? This is my first major CSS undertaking, having worked with nested tables up until now, so any pointers on my bad markup will be gladly accepted Thanks in advance, Aiden Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Can anyone please tell me why this code isnt working? Code:
<html>
<head>
<style type="text/css">
p.leftfloat {img-float: left}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p class="leftfloat" >
<img src="logocss.gif" width="95" height="84" />
</p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</body>
</html>
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>
hi everyone, i'm having some trouble with using floats and a background image. here's is how it's setup: > Div holder that holds floats / background image --> Float that has content to the right --> Content on the left now before you guys start scratching you head trying to figure out my logic, this is my first dive into using CSS so i'm still learning. lastly, it only seems to do this in firefox but works in IE. here's the example: http://vsm.intriguemedia.net/ and here's the CSS file: http://vsm.intriguemedia.net/lib/css/base.css any head would be appreciated, thanks. I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis |
|||||||