|
CSS - Making A Div Fit A Page (problems W/ H: 100%)
Problem page: http://www.ilumos.co.uk/site/?page=events
Working page: http://www.ilumos.co.uk/site/ Style: http://www.ilumos.co.uk/site/style/styleDefault.css Hi all, I'm trying to make the glowyness (inside div#wrap) on the right side of the page extend to the bottom of the viewport/window, even if there isnt enough content (see problem page above) but the trouble is that when I apply height: 100% (with the same in a parent element) IE refuses to scroll the longer pages. Is there anoter way to make div#wrap fill the window? Thanks Similar TutorialsHi, I haven't done any .css in a while so this might be a really dumb question I could have figured out by myself but... I'm trying to make a 3 column webpage using wordpress . I've colored the three columns blue, yellow, and red. I can get the blue and red to the relative position I want, but the red one is stuck below the two others even though I want all three on the same level. I can't quite figure out what's preventing that red column from positioning itseld higher... Any thoughts? I'm trying to make a box (graphic) that will expand vertically as more content is added. I've made my border with flourishes and shadows, so a purely CSS box design isn't an option... Here's an exploded view of what I'm looking to do: ________________ |.........................| |.........................| |.........................| Top section that is static |.........................| |.........................| |.........................| Middle section with vertically |.........................| repeatable graphic |________________| Bottom section that closes it off Here's my code so far... Code: <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">THIS IS THE CONTENT AREA</div> </div> </div> This code only makes the top half of the design, I can't seem to make the middle and bottom parts work. I'd appreciate any suggestions. Thanks. I'm trying to renovate my existing site "deepwaterchurch dot com", and part of it involves making the box on the site able to expand as more content is added to the content area. My best attempt at my new code is at "deepwaterchurch dot com slash next". I have successfully made the top of the design, but I can't figure out how to repeat the border section on the lower left and right (the part that will actually expand) in response to more content being added, then finish the bottom off with the lower border. I have created the files "leftedgelow.png", "rightedgelow.png", and "bottomedge.png" to use. Here's the code I have so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>LAYOUT</title> </head> <body style="margin:0px 80px 0px 80px; color:#FFFFFF; background-image:url(images/water.jpg);"> <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">CONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br /></div> </div> </div> </body> </html> I'd love some advice, as I'm very much a hobbyist at this. P.S. I know it's dirty to have inline CSS code, but it's much simpler at this stage to tweak. Thanks. Robin Hi, How common it is these days to make a web pages using only css and not using tables? And what are the pros and cons of that? Thanks Hi, I have attached 2 files code. I want the page to look like the second one.with both navigation boxes on the left on top of each other. But the 1st one I am trying to look the same with out putting the <divs> with in a <div> and it does not work, what am i doing technically wrong here? wrong one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:75%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#nav { width: 30%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 30%; padding: 0px; margin-top: 210px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Right one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:70%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#exp { width: 35%; padding: 0px; margin-top: 1px; float: left;
}
div#nav { width: 100%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 100%; padding: 0px; margin-top: 5px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62; vertical-align:text-top;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id=exp>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
After doing some small changes to the design I checked it in IE6 and its not slightly out of place but very messed up. The site is http://www.orchard-homes.co.uk/, has anyone got any ideas? It seems like its been stretched vertically... Thanks! OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS. thanks I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page. I have height: 100%; in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch? I have tried height: auto; but that doesnt work either. Hey I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory. Code: /* page defaults */
body {
margin: 0px;
padding: 0px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #EAEAEA;
}
/* Layout divs */
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
position: static;
left: 40px;
top: 12px;
padding: 0px;
width: 800px;
border-right: #003366 1px solid;
border-left: #003366 1px solid;
margin-right: auto;
margin-left: auto;
height: auto;
text-align:left;
background-color: #FFFFFF;
}
#title {
background-image: url(images/saved_title.gif);
margin-top: 10px;
background-repeat: no-repeat;
height: 150px;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000000;
}
#navbar {
background-image: url(images/navbar.gif);
background-repeat: no-repeat;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-right: 1px solid black;
padding: 5px;
background-color: #CCCFFF;
width: 230px;
height: 100%;
margin: 0;
float: left;
font-size: medium;
}
#content {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
padding-top: 40px;
background-image: url(images/content.gif);
background-repeat: no-repeat;
background-position: -239px 0px;
background-color: #FFFFFF;
height: auto;
width: 539px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin-bottom: 10px;
padding: 10px;
border-top: solid 1px black;
border-bottom: solid 1px black;
width: 780px;
height: 25px;
text-align: center;
}
/* Links */
a:link {
color: #006699;
}
a:visited {
color: #006699;
}
a:hover {
color: #006699;
text-decoration: none;
}
a:active {
color: #006699;
}
/* elements */
#navwin h2 {
font-size: large;
display: block;
}
#navwin ul {}
thanks Matt I truely hate IE! Firefox renders all my coding correctly and makes the website look great!! However, when I try to view it in IE, something always goes wrong. There is only one problem with firefox which I shall highlight below IE 7.0+ = The footer is NOT being placed at the bottom NOR is it being capped at 1000 pixels. It is going 100% across the full screen. The footer displays at the center of the screen rather than the bottom! IE 4.0 - 6+ = Everything goes wrong here. The header displays the red all the way down the left column and right column . The background color of the .png is no longer transparent. The footer displays 100% rather than capped at the 1000px and the main top navigation does not react as fast as it should because there is an error somewhere. The top navigation adds additional padding and doesn't load the hoover button as fast! Firefox = The footer doesn't display 1000px and it does not follow the format of the main top navigation which it is meant to, however, it goes 100% across the enter browser. The domain link is: www.gc69.com Can anyone PLEASE help me with these CSS errors and provide me with ANY solutions that may help my delicate situtation ASAP!!! Here is the page Things that I am having problem with: 1) I want 10px more space on the left side so it aligns on the left with the rest of the text (like h3 does). 2) On-line Customer Support Form and On-line Technical Support Form links are not aligning left with the rest of the <p> I have tried changing things to fix this with no luck. 3) How can a get a block of text to be on the right side of the Technical support block of text - sort of like a column?? The only thing I can think of is creating a layer, but I don't know if that makes good design sense - so is there another better way?? Here is my css code: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
h1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
h2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 14px;
font-weight: bold;
}
h3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
pre {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*customer support*/
#csupport {
padding: 10px auto auto auto;
text-align: left;
}
#csupport h1, h2, h3{
color: #000099;
font-weight: bold;
}
#csupport h2 {
margin-left: 20px;
}
#csupport h3 {
display: inline;
margin-left: 20px;
}
#csupport img {
margin-right: 20px;
float: right;
clear: none;
}
#csupport ul {
list-style: none;
padding: 0px 0px 0px 20px;
margin-left: 20px;
}
#csupport li {
margin-left: 10px;
display: inline;
}
#csupport a:link, #csupport a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#csupport a:hover, #csupport a:active {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #990099;
font-size: 12px;
font-weight: bold;
}
.contact {
margin-left: 195px;
margin-right: 20px;
}
.contact a:link, .contact a:visited {
margin-left: 195px;
}
.contact a:hover, .contact a:active {
margin-left: 195px;
}
Here is my xhtml code: Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="../products/spirometers.html">Spirometers</a></li>
<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="customer_support.html">Customer Support</a></li>
<li><a href="training_services.html">Training & Services</a></li>
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="newsletters.html">Newsletters</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="useful_links.html">Useful Links</a></li>
<li><a href="industry_information.html">Industry Information</a></li>
<li><a href="industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" -->
<div id="csupport">
<h1>Vitalograph Customer Support</h1>
<p class="contact">Our trained customer support staff is available for telephone support
on sales advice, technical queries or information requests. A team of
field based sales and training advisors are also on hand to provide
spirometry training or product demonstrations.</p>
<img src="/images/uk_customer_support.jpg" width="233" height="190" alt="Customer Support Staff" />
<h2>Contact Us</h2>
<p class="contact">
Vitalograph Ltd<br />
Maids Morton, Buckingham<br />
MK18 1SW<br />
England<br />
</p>
<p class="contact"><h3>Phone:</h3> +44(0) 1280 827110<br />
<h3>Fax</h3>: +44(0) 1280 823302<br />
</p>
<p class="contact"><h3>Email: </h3> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a><br />
<a href="/enquiry_forms/customer_support_form.html">On-Line Customer Support Form</a></p>
<ul>
<li><a href="http://www.vitalograph.ie/domains1c922.html">Ireland</a></li>
<li><a href="http://www.vitalograph.de/unternehmen/kontakt.html">Germany</a></li>
<li><a href="http://www.vitalograph.com/site_files/contact.html">USA/Canada</a></li>
<li><a href="http://www.vitalograph.co.uk/contact_international.html">Other</a></li>
</ul>
<h2>Technical Support</h2>
<p class="contact">
Vitalograph Ltd<br />
Maids Morton, Buckingham<br />
MK18 1SW<br />
England<br />
</p>
<p class="contact"><h3>Phone:</h3> +44(0) 1280 827110<br />
<h3>Fax</h3>: +44(0) 1280 823302<br />
</p>
<p class="contact"><h3>Email: </h3> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a><br />
<a href="/enquiry_forms/technical_support_form.html">On-Line Technical Support Form</a></p>
<ul>
<li><a href="http://www.vitalograph.ie/domains1c922.html">Ireland</a></li>
<li><a href="http://www.vitalograph.de/unternehmen/kontakt.html">Germany</a></li>
<li><a href="http://www.vitalograph.com/site_files/contact.html">USA/Canada</a></li>
<li><a href="http://www.vitalograph.co.uk/contact_international.html">Other</a></li>
</ul>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Hi everyone, I am trying to create a div that will "float" over an image when the mouse is moved over the image. I have got the div to appear and disappear when the mouse is hovered over the image, however, unless the positioning is absolute the page grows according to the size of the floating div. Below is the code I have used. I am almost certain there is a better way to do this. Possibly without the javascript. Any suggestions would be greatly appreciated! CSS: Code: #test {
background-color: #6374AB;
display:none;
position: relative;
top: -52px;
z-index: 2;
width: 400px;
}
#container {
background-color: #c0c0c0;
width: 500px;
border: 1px solid #000;
padding: 10px;
}
#fakeImage {
background-color: #00ff00;
width: 100px;
height: 50px;
border: 1px solid #000;
}
.opaque {
opacity: .7;
filter: alpha(opacity=70);
}
javascript: Code: function makeVisible(whichNavs)
{
document.getElementById(whichNavs).style.display="block";
}
function makeInvisible(whichNavs)
{
document.getElementById(whichNavs).style.display="none";
}
HTML: Code: <div id="container">
<div id="fakeImage" onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');"><A HREF="javascript:">expanding link</A></div>
<div onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');" id="test" class="opaque">shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf </div>
</div>
I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should. But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site? The page can be viewed he http://www.spanishguitar.co.uk If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this? My css for this is: Code:
#PageDiv {
position:absolute;
left: 50%;
top: 50%;
width: 770px;
height: 600px;
margin-top: -300px; /* half of the height */
margin-left: -385px; /* half of the width */
border: 1px solid #000;
}
I used this method because it seems like the most accessible and search-engine friendly. I run into a problem in IE6 and IE7 where the cursor does not turn into a pointer when the mouse is hovered over the image. HTML: Code: <h1 class="header">
<a href="#"><span></span>Header Text</a>
</h1>
CSS: Code: #header h1.header{
width:163px;
height:37px;
float:left;
position:relative;
}
#header h1.header a{
float:left;
display:block;
width:163px;
height:37px;
}
#header h1.header span{
background: url(../images/common/logo.gif) no-repeat;
position: absolute;
width: 163px;
height: 37px;
}
I feel like there is one style declaration I'm missing, but I cannot figure it out. I have a simple page layout using div's and CSS, but the alignment becomes screwed up when printing the page. My CSS for the layout is: #OneColumn { width:575px; background:#fff; } #LeftColumn { float:left; width:458px; background:#fff; padding-top: 15px; } #RightColumn { float: right; width:113px; background:#fff; text-align:center; padding-top: 38px; font-family: Arial; font-size: 10px; color: #000; } My code is formatted in the same order so, on the actual page OneColumn is on top of the left and right columns. If the page is short (less than on page) it prints and looks fine in print preview. Problem 1: In IE 6 If the page is longer than one page when printed the information that is in OneColumn is on the first page of the printout and the rest of the information (from the left and right column) is on the next pages. Problem 2: In IE 6 and Mozilla Firefox 0.8 Also, the right column is used to display thumbnail-pics that correlate to the text in the left column. At times I used styles to space the pictures. Here is one of them: .spacePic { margin-top: 95px } This works fine except for when printing the images, they generally are printed lower than they apprear on the screen. Any suggestions or tips would be appreciated. Thanks for your help! Casey http://www.chequedelarealidad.org/ There seems to be a problem with this site when loaded into the Mozilla broswer. When you initially click on the 'Projecten' page, the bottom bar contents are placed about two inches too high up the page. However, when I click the refresh button, this problems corrects itself. Once corrected, the page loads fine every time, but if I clear my web cache and try again, the first time I click on the link the problem appears again. Is there are mistake in my css, or does anyone know how I can correct this? I will appreciate any input. Thank you in advance, Toria I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference. I'm taking this plunge because I'm ready to rip hairs one by one on a problem. I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document. Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution. What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time. Code: <STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>
<DIV class="banner"><IMG SRC="images/vbar.PNG" WIDTH=900 HEIGHT=93 BORDER=0></DIV>
The above works but its a fixed width and I would like it to be full width no matter what resolution ones using. I have tried making the Div class="banner" use a width=100%. This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away. I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me.. Thanks in Advance Me Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Hey all i want to create a simple horizontal navigation for my page spanning the container div (735px) i want to use a UL and float them to the left: Navigation Code: <div id="container"> <ul> <li>home</li> <li>nav2</li> <li>nav3</li> <li>nav4<li> <li>nav5<li> </ul> </div> CSS Code:
#container{width:735px}
ul {width:100%; height:35px; }
li{width:149px; float:left}
The problem im having / i dont know how to do are the following: 1. Within each li i want to put a link but i want it to be the whole block of 149 x 35 clickable for the link not just the words e.g HOME 2. how do i get the text of the nav to be positioned in the middle vertically. i tried: vertical-align or what ever it was but that didnt waork. For one of my nav items it drops down a line but the others stay at the top. id like them in the middle of the block?? thanks |
|||||||