|
CSS - Vertical Centering Without Tables?
Hi guys.
I've got a single element (image) that I want to vertically center in an otherwise blank page. Can anyone tell me how I can do this, that works with all browsers, and doesn't requite tables? http://www.waxpad.com/articles/vcexample.html I found this article on it, but joy of joys, it doesn't work in Safari on a mac! Similar TutorialsHow can I get the text to display in the middle of these boxes (vertically)? I would think vertical-align: middle would do it, but it doesn't work. Thanks in advance for any help! LauraS. Here's the code: 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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.buttonscontainer-top {
width: 142px;
height: 36px;
}
.buttons-top a {
color: #777777;
background-color: #DDDDDD;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
display: block;
height: 36px;
text-align: center;
vertical-align: middle;
}
.buttons-top a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<table width="710" height="36">
<tr>
<td class="buttons-top a"><a href="index.html">home</a></td>
<td class="buttons-top a"><a href="about.html">about</a></td>
<td class="buttons-top a"><a href="our_work.html">our work</a></td>
<td class="buttons-top a"><a href="clients.html">clients</a></td>
<td class="buttons-top a"><a href="contact.html">contact</a></td>
</tr>
</table>
</body>
</html>
I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas? So here's the page I'm working on: http://johannkwan.com/about.html The HTML side is simple: Code: <div id="horizon"> <div id="wrapper"> <div id="about_content">About</div> <a href="http://www.johannkwan.com" id="back">Back</a> </div> </div> The CSS side is just a horizon bar with the wrapper in the middle, the top margin offset to half the wrapper so it'll center properly. Code: #horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -300px;
text-align: center;
min-width: 800px;
}
#wrapper {
position: relative;
text-align: left;
width: 800px;
height: 600px;
margin: 0px auto;
}
Here's my problem. If you're looking at the page on anything under 800x600 (or if you resize your browser to under 600) the top bit cuts off. You can't scroll up past part-way up the image. But it's not 300px of cut off... it's some sort of distance I haven't defined, so I'm not entirely sure where I'm going wrong. Is there a better way to vertically center my content? Or is there just something wrong in my stylesheet I'm not seeing? Any help would be appreciated. Thanks! Hello everyone, I'm trying to center a fixed size div both vertically and horizontally. Everything would work, but, as usual ... IE doesn't know how to handle it properly. Let me explain: 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 name="robots" content="ALL, INDEX, FOLLOW" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Title</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.d1 {
width: 1px;
height: 1px;
position: absolute;
left: 50%;
top: 50%;
}
.d2 {
width: 700px;
height: 300px;
background-color: black;
position: relative;
left: -350px;
top: -150px;
}
</style>
</head>
<body>
<div class="d1"><div class="d2"></div></div>
</body>
</html>
If you copy and paste it to explorer, everything might even look good. But if you resize the browser to be just a little bit larger than the black div, you'll notice that both vertical and horizontal scrollbars appear. Why is this happening? How do i prevent IE from acting stupid? I've tested with ie6 and ie7. Can someone please explain this to me, because I'm apparently missing something. I have a div that I am using as an overlay to my site. I want this div to be 50% wide, and 50% high, and be properly centered on the screen. I was able to get horizontal centering working almost perfectly, but when it comes to vertical centering- things just don't make sense. To center, I'm setting top & left to 50% and then using margin-top and margin-left with negative values to compensate. What I assume should work (and seems to work with horizontal centering) is that if I set the margin-left to -25%, the leftmost side of my div should end up half-way between the beginning of the browser window and the center of the browser window. But if I set margin-top to -25%, by the same logic, it should move the topmost side of the div up to between the top of the browser view area and the center. But that doesn't seem to happen- at least in FF3: Code:
<html>
<head>
<style>
div#dialog
{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin-top: -50%;
margin-left: -25%;
background-color: #FFFFFF;
border-top: #FF0000 3px solid;
border-left: #FF0000 3px solid;
border-right: #FF0000 3px solid;
border-bottom: #FF0000 3px solid;
z-index: 202;
}
</style>
</head>
<body>
<div id="dialog"></div>
</body>
</html>
Instead what happens is the top of my div ends up at the very top of the viewing area of the browser- and actually a little bit ABOVE it (outside of the view area). WHY!? If I set the margin-top to -50%, which I would expect to place the topmost edge of the div at the very top of the browser viewing area, the div disappears entirely! Yet if I set margin-left to -50%, it appears along the left side of the browser window where I'd expect it to be. Why might this be happening? Again, obviously I'm missing something. Can someone please explain? Is there another/better way of doing this? Thanks, - skubik Hi, I would like to center a div inside another div (both vertical and horizontal) in such a way that the inner div would move/reside depending on the content inside it. In other words I have two divs; outerDiv and innerDiv. InnerDiv will have more html inside it and I would like innerDiv to always be in the middle of outerDiv regardless of its content. I did some research on the internet and I managed to achieve the following: 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>
<style type="text/css">
div#mbBackground{
display:block;
position: fixed;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
margin: 0 auto;
z-index: 2;
background-color: #c00;
}
div#mbBackground div#mbWindow{
position:fixed;
top: 40%;
left: 40%;
z-index: 2;
margin: 0 auto !important;
margin-left: 40%;
margin-top: 40%;
height: 200px;
width: 200px;
background-color: #fff;
color: #000000;
}
</style>
</head>
<body>
<!-- start: message box -->
<div id="mbBackground">
<div id="mbWindow">
Please Wait
</div>
</div>
<!-- end: message box -->
</body>
</html>
However with the above code, innerDiv does not re-position it-self correctly based on its content. Is what I need possible? Regards, Sim085 Hello, i'm have a recurring problem when programming websites and it is the vertical spacing added by IE6 between two images. Here is an example template I am working on. brycecre8iv.com The lines beneath the buttons are getting an extra 10px padding at the top in IE6. Appears in order on FF2. Also for some reason the centering is not working with the main container in IE. this usually works perhaps someone can spot my errors. Thanks for any help. webg 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 my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering. placement: well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure??? Code: #navbar {
text-align:right;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
padding-right: 8px;
margin-top:-12;
height:31;
}
#navbar ul {
margin-right: -0.3em;
height:31px;
position:relative;
bottom:-2px;
}
#navbar ul li {
display: inline;
list-style-type:none;
margin-left: 0.3em;
margin-right: 0.3em;
position:relative;
vertical-align:middle;
}
#navbar ul li a {
padding-top:11px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li div {
position:relative;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
margin: 0;
}
vertical centering: i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this... ....................................... . . . texttexttexttexttext. .image texttexttexttexttext. .----- texttexttexttexttext. . . ....................................... so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc. i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this. http://www.viportals.com/ EDIT: DID IT ON MY OWN!!! THATS A FIRST!!! Code: #navbar {
text-align:center;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top:-15px;
height:31px;
line-height:31px;
margin-left:0;
margin-right:0;
}
#navbar ul li {
display: inline;
list-style-type:none;
}
#navbar ul li a {
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 4px;
padding-bottom: 4px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
vertical-align: middle;
}
now i have one QUESTION: how do i get all the buttons to align center?????????? they all stay to the right oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well. Hi, i'm making a site, and want the links in my navigation bar to be centered hoizontally and vertically. the vertical align centering doen't work. does anyone have an idea how to fix it..? the site: http://www.jarra.nl/_TEST/test4.htm the css file: http://www.jarra.nl/_TEST/test4.css oh, and if you notice any problems by viewing this page in other browsers than ie6, please let me know as well. thanks a lot, jarra Hey guys. http://fairplaygamers.com/fifa/application.php if you look there you will see my banner which is 760px. I want to make the whole entire rest of the page to be within those margins. How can I achieve this? Pretty much itd be like having a 1 cell table with everything in between. Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
/*Left Links*/ #leftcol{ float: left; display: block; width: 200px; /*Width of left column*/ } ul#leftcol{ list-style-type: none; padding: 0.5em 0 1em 0; margin: 0; } li#leftcol{ margin: 0; padding: 0; } #leftcol a, #leftcol a:link, #nav a:visited { float: left; display: block; position:relative; width: 165px; height: 1%; padding: 8px 5px 8px 30px; margin: 0; font: normal 11px Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration:none; background-image:url(images/sidelinks_back.jpg); border-bottom: 1px solid #FFFFFF; } #leftcol a:hover { background-position: 0 -45px; color: #0C0F1B; } #leftcol img { border-bottom: 1px solid #FFFFFF; } <!--LEFT COLUMN --> <ul id="leftcol" ><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li> <li><a href="**">Collision Repair</a></li> <li><a href="**" >Heavy Frame Repairs</a></li> <li><a href="**">Truck Body Repairs</a></li> <li><a href="**" >Sprinter Repair Specialists</a></li> <li><a href="**">Commercial Van Repairs</a></li> <li><a href="**">Painting & Decaling</a></li> <li><a href="**">Custom Truck Body Services</a></li> <li><a href="**">Morgan Body Parts & Service</a></li> <li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li ></ul> 2 problems: 1) In IE and Firefox: gap between <img> and <li> 2) In IE6, a gap appears between all my <li>tags What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>? Is not working for me, or I'm not using it right. Here is my problem: http://www.kingtoad.net/development/kingtoad.net/ I want the "navigation" to align to the top even with the "content". I can't seem to get it up there though. Any suggestions would be nice. Hi, I've seen a number of posts and web pages about this but so far have NOT found a method that conforms to the w3.orgs css standard. There seems to be a lot of interest in this and l wondered whether anyone has found a work around that is compatible on more browsers than I.E? Hello all, I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own. I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time. bcode. =========== CSS File============ .wdlogo { visibility:visible; position:absolute; z-index:0; left:10px; top:10px; } .slidingtext { visibility:visible; position:relative; z-index:2; left:245px; top:-200px; } .blacklink { text-decoration: none; color: #000000; } .blacklink:hover { text-decoration: none; color: #000000; } .intro { text-align: left; color: #000000; font-size: 12pt; font-family: Lithograph, sans-serif; position: absolute; visibility: visible; z-index: 2; left: 360px; top: 300px; } .center { visibility: visible; position: absolute; z-index: 0; top: 165px; left: 85px; } .shadowleft { width:32px; background-image: url(images/Working/jpg/left_ver_5.jpg); background-repeat: repeat-y; background-position: right top; } .background { background-image: url(images/Working/jpg/background.jpg); background-repeat: repeat; } .shadowright { width: 32px; background-image: url(images/Working/jpg/right_ver_3.jpg); background-repeat: repeat-y; background-position: left top; } .top { position: absolute; visibility: visible; top: 0px; } .dots { position: relative; visibility: visible; z-index: 2; left: 160px; top: -150px; } .nav { position: relative; visibility: visible; z-index: 2; left: 5px; top: 250px; } .bar1 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -460px; } .bar2 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -420px; } .bar3 { position: relative; visibility: visible; z-index: 2; left: 240px; top: -380px; } .welcometext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -455px; width:330px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } .whytext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -415px; width:310px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } .empowertext { position: relative; visibility: visible; z-index: 2; left: 245px; top: -375px; width:310px; font-family: verdana, arial, sans-serif; font-size: 11px; line-height: 17px; } ================================= ==========XHTML File=============== <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Author: Mathew Pridham Date: April 2004 --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Web Diligence</title> <link rel="stylesheet" type="text/css" href="wd.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="wdiespecific.css" /> <![endif]--> <!--webbot bot="Include" endspan i-checksum="11150" --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body topmargin="0" bottommargin="0" class="background"> <table cellpadding="0" cellspacing="0" align="center" width="800px"> <td class="shadowleft" height="100%" width="32px" rowspan="20"> </td> <td width="800px" height="100%" bgcolor="#FFFFFF"> <img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" /> <object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="flash/banner/textslide_ver_2.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed> </object> <img src="images/Working/gif/dotted4.gif" class="dots" border="0" /> <table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0"> <tr> <td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td> </tr> <tr> <td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td> </tr> <tr> <td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td> </tr> </table> <img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" /> <div class="welcometext"> We are a small web design & development company, specialized in quality web design for small businesses. </div> <img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" /> <div class="whytext"> We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price. We create websites that are an effective combination of functionality, style, and creativity. We specialize in custom web design as well as website makeovers. </div> <img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" /> <div class="empowertext"> Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for. Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination, but also fits into a small business budget. </div> </td> <td class="shadowright" height="100%" width="32px" rowspan="20"> </td> </table> </body> </html> Hi I want to know if it is possible to vertical align the text in these div tags and how it's done. 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>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>
Greets, dabomb_gent Hi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey If you look at Lakelandedc.com you notice the menu is very weird when trying to go from each link to the other links... how can i fix the menu so it is easier to navigate? Code: /* CSS Document */
#menu
{
text-align:left;
width:155px;
background-color:#084D9C;
margin:0;
padding:0;
}
#menu ul
{
list-style:none;
margin:0;
padding:0;
}
#menu a, #menu h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:block;
border-width:1px;
border-style:solid;
border-top:solid 2px;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 3px;
}
#menu h2
{
color:#fff;
background:#BA5D92;
text-transform:uppercase;
}
#menu a
{
color:#FFF;
text-decoration:none;
}
#menu ul a:hover
{
color:#fff;
background-color:#091F51;
text-decoration:none;
}
#menu ul
{
position:relative;
}
#menu ul ul
{
position:relative;
top:0;
left:10%;
width:100%;
}
s#menu a:hover {
}
.submenu
{
background-color:#9A1F61;
color:#fff;
}
div#menu ul ul,
div#menu ul ul li:hover ul ul
{
display:none;
}
div#menu ul:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
|
|||||||