|
CSS - Middle Col Starts Too Low
demo: http://www.soundwebdev.com/hh/
As you will see, the middle column starts its background image too low. The left and right put it in the correct place, but the center is about 12px too low. All the styles are in the source. Any help is GREATLY appreciated! Similar TutorialsI am try to make a page that is similar to outlooks calendar page for a day. The page would have a scrollbar that scrolls from 12am to 12am(next day), but the initial position is 8 am instead of 12am. I can set an anchor and make sure the page opens to that anchor, but it is an awkward solution and might cause some linking problems. Anyone know who to do this? Gday CSS PPL, Im still yet to test on other browers, but im using IE 6.0 while the explorer is full screen the width of my div is 100% But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins, div.banner { background-image: url(../images/banner_repeat.gif); width:100%; height:163px; text-align:center; } and yeah, the background image 'banner_repeat' stops repeating at that point. any help would be great, Thx in advance, James how can i get a div in the middle of the y-axis of the browser window? hi is there a way to get a div to be in the vertical middle of the screen. i tried : margin-top: auto; margin-bottom: auto; but it doesn't work. thanks Ok guys, ive looked all over to try to find a code that will work, nothing so far. So here it is css Code: Original - css Code * { margin: 0px; padding: 0px; } html { width: 100%; height: 100%; } body { height: auto !important; height: 100%; min-height: 100%; background-color: #efead0; margin: 0px; padding: 0px; position: relative; } .clear { clear: both; } /* Start Site - Container sets the width for the whole page Divs: - Top is the top image - Top li is for the menus - Content is for the actual site - Footer is for the bottom image */ #div_container { margin: 0px auto; width: 800px; height: 100%; } #div_top { background-image: url(images/body_top.png); background-repeat: no-repeat; width: 800px; height: 100px; } #div_banner { text-align: center; margin-left: auto; margin-right: auto; } #div_top li { position: absolute; top: 50px; list-style-type: none; } #div_content { background-image: url(images/body_main.png); background-repeat: repeat-y; width: 800px; } #div_footer { position: absolute; bottom: 0; background-image: url(images/body_bottom.png); background-repeat: no-repeat; width: 800px; height: 100px; }
and the html html Code: Original - html Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" URLWASBLOCKED> <html xmlns=URLWASBLOCKED> <head> <title>{L_TITLE}</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="site.css" /> </head> <body> <div id="div_container"> <div id="div_top"> </div> <div id="div_content"> <div id="div_banner"> <img src="images/banner3.png" width="755px" height="136px"> </div> </div> <div id="div_footer"> </div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" URLWASBLOCKED>
<html xmlns=URLWASBLOCKED>
<head>
<title>{L_TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="site.css" />
</head>
<body>
<div id="div_container">
<div id="div_top">
</div>
<div id="div_content">
<div id="div_banner">
<img src="images/banner3.png" width="755px" height="136px">
</div>
</div>
<div id="div_footer">
</div>
</div>
</body>
</html>
What i am trying to do is have div_content take 100% of the page. having the top div stuck to the top, and the footer stuck to the bottom. I managed to do the bottom but i cant seem to make it so that the middle div takes 100% of the page. Im using Linux, so i am using firefox and chrome for testing but i also need it to be IE compatible. Help? Thanks. hi to all I have a round boxes using div, Inside this div there is an picture image which doesn't have a fix size fot both height and with. I want to put on the left and right side of another image such as left_anim.gif and right_anim.gif . But I want to center vertically this gif. If the picture image have a fix size I can center it vertically but it will varies depend on the size of the pictures, How can I achive this. any suggestions would greatly appreciated thanks in advance Tirso here is the sample link http://www.tirso.webberzsoft.com/mypicturecards_individual_others.php here is 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=iso-8859-1" />
<title>CSS Example - How to create rounded corner boxes using CSS</title>
<link type="text/css" rel="stylesheet" href="css/css.css" />
</head>
<body>
<div id="formdiv">
<div id="picturecards_individual">
<div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
<div id="buttons">
<div class="cont">
<div class="frame" id="frameimage">
<div style="float:left; vertical-align: middle"><img src="images/left_anim.gif" /></div><img src="picturecards/individual/DSCF0011.JPG"/></div>
</div>
</div>
<div style="clear:both"></div>
</div></div></div></div></div></div></div></div> <!--end of rounded box-->
</div>
</div>
</body>
</html>
I have this code: Code:
<html>
<head>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
font-size: 100%;
background: white;
padding: 2em;
margin: 0;
}
#content {
width: 34em;
background-color: #ffffff;
padding: 1em 0;
border: 6px double #6DA9CA;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 32em;
}
html>body #content {
width: 32em;
}
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
background-color: white;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
padding: 0.5em 0 1em 0;
border: solid 1px #6DA9CA;
}
#submenu li ul {
border: solid 1px #6DA9CA;
}
li>ul {
top: auto;
left: auto;
}
#nav a {
color: black;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #6DA9CA;
border-width: 0 5px;
}
li:hover ul, li.over ul{ display: block; }
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Guiding Principles</a></li>
<li>Background & Qualifications</a>
<ul>
<li><a href="">Biography</a></li>
<li><a href="">Dispute Resolution</a></li>
</ul>
</li>
<li>Developments
<ul>
<li><a href="">International</a></li>
<li><a href="">Specialty & Agrichemical News & Regulations</a></li>
<li><a href="">Archive</a></li>
</ul>
</li>
<li><a href="">Other Resources</a></li>
</ul>
</body>
</html>
And I like it - but I have one problem - I want there to be lines between each of the <li>s in the submenus - meaning between Biography and Dispute Resolution I want a line - I know there is no border-middle value - so how do I do this? hello everyone, I've been reading this forum for ages, but I thought i'd finally post. I have a problem with my site forexpm.com The ads are supposed to be on the right hand side, but some people say that in firefox they are in the middle, covering the text. I know it's something to do with css, but I can't work out what it is. Can anyone please help? Thanks muchly. I'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column. In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div. Here is my HTML Code:
<body>
<div id="wrapper">
<div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="nav">
<?php
$today = date("D M d Y");
echo "$today\n";
?>
</div>
<div id="left">left column</div>
<div id="right">right column</div>
<div id="middle">middle column</div>
</div>
</body>
CSS is he Code:
/* CSS Document */
html {
height: 100%;
}
body {
margin: 0px 0px 0px 0px;
background-color:#333;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
position: relative;
min-width: 600px;
width: 100%;
height: 100%;
color: #333;
}
#wrapper {
width: 100%;
height: 100%;
}
html>body #wrapper {
height: 100%;
}
#left {
float: left;
left:0px;
top:113px;
width:12%;
background-color: #a2cde3;
border-right: 2px solid #333;
padding: 5px 5px;
}
#middle {
top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 12%;
margin-right:12%;
padding: 5px 5px;
height: 100%;
min-width: 360px;
width: 76%;
background-color: #626262;
color: #000;
}
html>body #middle {
margin-left: 12%;
margin-right:12%;
}
#right {
float: right;
top: 0;
width:12%;
background-color: #a2cde3;
border-left: 2px solid #333;
padding: 5px 5px;
}
#top {
min-width: 600px;
width: 100%;
height: 100px;
background-color: #FFF;
color: #FFF;
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #top {
height:100px;
}
#nav {
top: 100px;
left: 0;
min-width: 600px;
width: 100%;
height: 12px;
background-color: #005698;
color: #e4e4e4;
vertical-align: bottom;
text-align:left;
text-indent: 5px;
clear: both;
}
Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me. I have set up my template to have a wrapper div with a top, middle, and bottom div inside. What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly? I have uploaded a zip file of my files he www (*) dpegues (*) com (slash) site_help (*) zip Also, I have posted a live version of it at: www (*) dpegues (*) com (slash) site_help It contains my site images, the template in the folder called Templates, and the css file. And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar? I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!! Thank you everyone. I have been looking for this all over the place but cant find the right solution. I want a div aligned like it's on this website. Code: http://www.captaincrawl.com/ 1. It's aligned in the center/middle of the screen 2. It's relative so it moves according to the window size 3. It should work on major browsers such as IE Can anyone help me please? Sorry folks, css novice here. But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this? Code: <html>
<head>
<title></title>
<style>
.greenBorder {border: 1px solid green;}
.redBorder {border: 1px solid red;}
</style>
</head>
<body>
<div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
<div class="greenBorder" style=" #position: relative; #top: -50%; " >
stuff
</div>
</div>
</body>
</html>
what am I doing wrong? recommend any good css books? Hello, 1st post on this forum. How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered? I would post links to the pages but this forum will not let me. Thanks for the help I've got an image that is 75px high. Right beside it, I have a H1. I want to vertically align the H1 in the middle of the image. Vertical align doesn't work, and for some reason, setting the line height to the height of the image doesn't work either. Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css: Code:
#header {
position: relative;
margin: 0 auto;
background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
height: 235px;
width: 760px;
text-align: left;
z-index: 10;
}
'#content {
position: relative;
background-color: #FFFFFF;
height:inherit;
width: 760px;
margin: 0 auto 0 auto;
text-align: left;
border: 1px double rgb(72,183,239);
overflow: hidden;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}
#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}
#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}
#primary-nav {
position: absolute;
background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
list-style: none;
width: 760px;
height: 26px;
top: 203px;
left: 1px;
z-index: 10;
padding-left: 5px;
}
#primary-nav li {
float: left;
background-position: 0 -26px;
}
#primary-nav li ul {
position: absolute;
background: transparent url(img/primary-nav-top.png) no-repeat;
list-style: none;
width: 159px;
left: -9999px;
margin-left: -9px;
padding-top: 5px;
}
#primary-nav a {
display: block;
height: 0px !important;
text-decoration: none;
overflow: hidden;
}
#primary-nav li a {
background-position: 0 0;
}
#primary-nav li#nav-1 {
background: transparent url(img/bg/nav-1.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-2 {
background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-3 {
background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
margin-right: 1px;
}
#primary-nav li#nav-4 {
background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}
#primary-nav li#nav-5 {
background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
background: transparent url(img/bg/nav-7-about.png) no-repeat;
}
#primary-nav li#nav-1:hover,
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover,
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover,
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover,
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover,
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover,
#primary-nav li#nav-7.sfhover{
background-position: 0 -26px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#primary-nav li#nav-1 a,
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a {
width: 107px;
height /**/: 26px;
padding: 26px 0 0 0;
}
#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
height: 21px;
}
#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
height: 14px;
width: 159px;
}
#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
overflow: hidden !important;
overflow: visible;
font-size: 10px;
color: #FFF;
height: 19px !important;
height: 19px;
width: 107px;
padding: 1px 3px 2px 19px;
}
#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}
#primary-nav li:hover ul,
#primary-nav li.sfhover ul {
left: auto;
}
html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
<title>TysonsCorner.com™</title>
<link rel="shortcut icon" href="#">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="global.css" rel="stylesheet" type="text/css">
<link href="nav1.css" rel="stylesheet" type="text/css">
</head><body>
<div id="container">
<!-- HEADER AREA STARTS HERE -->
<div id="content">
<div id="header">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<ul id="primary-nav">
<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">News</a></li>
<li><a href="#" title="Tysons 2 Stores">Events</a></li>
<li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
<ul>
<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
<li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
<li class="bottom"></li>
</ul>
</li>
<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<ul>
<li><a href="#" title="Cajun Food">Cajun</a></li>
<li><a href="#" title="Grilled Food">Grilled</a></li>
<li><a href="#" title="Foreign Food">Foreign</a></li>
<li><a href="#" title=" Full List Restaurants">Complete List</a></li>
<li class="bottom"></li>
</ul>
<li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
<li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
</li>
</ul>
</div>
<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>
<form id="form1" method="post" action="">
<p>
<label>
<input type="text" name="IDsearch" id="IDsearch" width="150"/>
</label>
</p>
</form>
<div id="leftpanel-head">
Events Calendar
</div>
<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>
<div id="welcome">Test</div>
<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div>
</div>
</body></html>
Demo: http://www.reston.com/Tysons Corner COM Ok, you can do this with a table by setting its height and width to 100% and then valigning to middle and centering. However is there a way to do it using CSS? Thanks for taking the time to read my question. I have an image that I want to place in the middle of a contaier. I have <center></center> around the <img /> tag, but I can't get it to center vertically with the css below. What am I doing wrong? Thanks, Brad CSS: Code: img.contentimg {
vertical-align: middle;
}
HTML: Code: <div class="textbox1"><center><img class="contentimg" src="images/house1.jpg" /></center></div> What I'm wanting is for the links to be in the middle of the div vertically. Currently it's at the top. I've tried using vertical-align but that doesn't work. What am I missing here? asp.net firefox 3.6.11 CSS Code:
#headercont
{
width:auto;
height:100px;
text-align:center;
background-image:url('images/headbg.png');
}
#connav
{
vertical-align:middle;
}
#connav ul
{
position:relative;
list-style-type:none;
list-style-image:none;
}
#connav li
{
display:inline;
}
#connav ul li a
{
text-decoration:none;
margin: 4px;
padding: 5px 20px 5px 20px;
color:#ccff00;
background-color:#61a003;
}
HTML (inside the body tags) Code: <div id="headercont"> <div id="connav"> <ul > <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> |
|||||||