|
CSS - Content Div Is Not Lineing Up..why?
Hi
Could someone please take a look at this please http://dmumford.bizhat.com/test/ When viewed in IE5 the clinical info box does not line up to the righ hand edge. I have tried a few hacks but I don't think I am implementing them right. Your help is much appreicated Thanks Similar TutorialsHi Could someone take a look at this please : http://www.guatemalastreetkids.co.uk/ If you view it in IE5 you will notice that the header (the pics and navigation) does not line up with the background image. If you view it in any other browser you will see what I mean. many thanks Hello. The address text on the following page doesn't line up. The address/phone/fax for each location should be side by side. Firefox 3 works fine. IE6 the "Westwood Location" text moves down below. What am I missing?' http://nessphysiotherapy.com/contact.php Thanks Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! my css : Code: #contentright {
width:171px;
padding:0px;
float:left;
background:#fff;
}
I am new to useing css for layout and am running into a problem where if I do Code: <div id="contenteight"> some text </div> then try to do it again Code: <div id="contenteight"> some more text </div> it doesn't place the new text on the right, but rather at the bottom left. also my while page is inside of Code: #frame {
width:823px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
any help thanks Hi, I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc. The design of the site goes: header -> main content -> footer. The navigation will sit in the header above the main content. all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands. So my question is... I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.? any tips ladies and gentlemen? I am working form a template that I am modifying a website and the the content is working fine in Chrome, Safari, and FF, but the part of the sidebar shows up in IE7 and no other content. Any asssitance will be appreciated. I tried different hacks with no luck. I got errors for unscrollable content but I don't believe that is it because I tried all "fixes" Code: /* begin Page */
www.justgreek.com/questions.html
body
{
margin: 0 auto;
padding: 0;
background-color: #D08C35;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
}
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 630px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 630px;
width: 817px;
margin: 0;
}
html:first-child #art-page-background-glare
{
border: 1px solid transparent; /* Opera fix */
}
#art-page-background-gradient
{
position: absolute;
background-image: url('images/Page-BgGradient.jpg');
background-repeat: repeat-x;
top:0;
width:100%;
height: 900px;
}
#art-page-background-gradient
{
background-position: top left;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
form
{
padding:0 !important;
margin:0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */
/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 955px;
min-width:55px;
min-height:55px;
}
.art-Sheet-body
{
position: relative;
z-index: 1;
padding: 4px;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 66px;
height: 66px;
background-image: url('images/Sheet-s.png');
}
.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 33px, 33px, auto);
}
.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 33px, 33px);
}
.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(33px, 33px, auto, auto);
}
.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(33px, auto, auto, 33px);
}
.art-Sheet-tc, .art-Sheet-bc
{
left: 33px;
right: 33px;
height: 66px;
background-image: url('images/Sheet-h.png');
}
.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 33px, auto);
}
.art-Sheet-bc
{
bottom: 0;
clip: rect(33px, auto, auto, auto);
}
.art-Sheet-cr, .art-Sheet-cl
{
top: 33px;
bottom: 33px;
width: 66px;
background-image: url('images/Sheet-v.png');
}
.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 33px);
}
.art-Sheet-cl
{
left:0;
clip: rect(auto, 33px, auto, auto);
}
.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 33px;
left: 33px;
right: 33px;
bottom: 33px;
background-color: #FFFFFF;
}
.art-Sheet
{
margin-top: 10px !important;
}
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:955px;
}
/* end Box, Sheet */
/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 947px;
height: 136px;
}
div.art-Header-png
{
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 947px;
height: 136px;
background-image: url('images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 947px;
height: 136px;
background-image: url('images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.art-menu li li
{
float: none;
}
.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}
.art-menu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.art-menu
{
padding: 4px 2px 0px 2px;
}
.art-nav
{
position: relative;
height: 29px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 29px;
background-image: url('images/nav.png');
}
.art-nav .l
{
left: 0;
right:0px;
}
.art-nav .r
{
right: 0;
width: 947px;
clip: rect(auto, auto, auto, 947px);
}
/* end Menu */
/* begin MenuItem */
.art-menu ul li
{
clear: both;
}
.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 25px;
cursor: pointer;
text-decoration: none;
margin-right: 4px;
margin-left: 4px;
}
.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 75px;
background-image: url('images/MenuItem.png');
}
.art-menu a .l
{
left:0;
right:11px;
}
.art-menu a .r
{
width:422px;
right:0;
clip: rect(auto, auto, auto, 411px);
}
.art-menu a .t
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #DEDEDE;
padding: 0 2px;
margin: 0 11px;
line-height: 25px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top:-25px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-25px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-25px;
}
.art-menu a:hover .t
{
color: #F0F0F0;
}
.art-menu li:hover a .t
{
color: #F0F0F0;
}
.art-menu li:hover>a .t
{
color: #F0F0F0;
}
.art-menu a.active .l, .art-menu a.active .r
{
top: -50px;
}
.art-menu a.active .t
{
color: #000000;
}
/* end MenuItem */
/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow:hidden;
line-height: 20px;
margin-right: auto;
background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0px;
border-style: solid;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-menu ul ul a
{
margin-left: auto;
}
.art-menu ul li a:hover
{
color: #3B3B3B;
background-position: 0 -20px;
}
.art-menu ul li:hover>a
{
color: #3B3B3B;
background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #3B3B3B;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #3B3B3B;
}
/* end MenuSubItem */
/* begin ContentLayout */
div.art-content
{
width:709px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right auto;
}
.art-contentLayout
{
position: absolute;
top: 156px;
margin-bottom: 6px;
width: 947px;
}
/* end ContentLayout */
/* begin Box, Block */
.art-Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:15px;
min-height:15px;
}
.art-Block-body
{
position: relative;
z-index: 1;
padding: 7px;
}
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
width: 14px;
height: 14px;
background-image: url('images/Block-s.png');
}
.art-Block-tl
{
top:0;
left:0;
clip: rect(auto, 7px, 7px, auto);
}
.art-Block-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 7px, 7px);
}
.art-Block-bl
{
bottom: 0;
left: 0;
clip: rect(7px, 7px, auto, auto);
}
.art-Block-br
{
bottom: 0;
right: 0;
clip: rect(7px, auto, auto, 7px);
}
.art-Block-tc, .art-Block-bc
{
left: 7px;
right: 7px;
height: 115px;
background-image: url('images/Block-h.png');
}
.art-Block-tc
{
top: 0;
clip: rect(auto, auto, 7px, auto);
}
.art-Block-bc
{
bottom: 0;
clip: rect(7px, auto, auto, auto);
}
.art-Block-cr, .art-Block-cl
{
top: 7px;
bottom: 7px;
width: 1px;
background-image: url('images/Block-v.png');
}
.art-Block-cr
{
right:0;
clip: rect(auto, auto, auto, 7px);
}
.art-Block-cl
{
left:0;
clip: rect(auto, 7px, auto, auto);
}
.art-Block-cc
{
position:absolute;
z-index:-1;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
background-color: #F8EFE2;
}
.art-Block
{
margin: 7px;
}
/* end Box, Block */
/* begin BlockHeader */
.art-BlockHeader
{
position:relative;
z-index:0;
height: 30px;
padding: 0 7px;
margin-bottom: 7px;
}
.art-BlockHeader .t
{
height: 30px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
white-space : nowrap;
padding: 0 6px;
line-height: 30px;
}
.art-BlockHeader .l, .art-BlockHeader .r
{
display:block;
position:absolute;
z-index:-1;
height: 30px;
background-image: url('images/BlockHeader.png');
}
.art-BlockHeader .l
{
left:0;
right:6px;
}
.art-BlockHeader .r
{
width:947px;
right:0;
clip: rect(auto, auto, auto, 941px);
}
.art-header-tag-icon
{
height: 30px;
background-position:left top;
background-image: url('images/BlockHeaderIcon.png');
padding:0 0 0 12px;
background-repeat: no-repeat;
min-height: 12px;
margin: 0 0 0 5px;
}
/* end BlockHeader */
/* begin Box, BlockContent */
.art-BlockContent
{
position:relative;
z-index:0;
margin:0 auto;
min-width:1px;
min-height:1px;
background-color: #FFFFFF;
}
.art-BlockContent-body
{
position: relative;
z-index: 1;
padding: 8px;
}
.art-BlockContent-body
{
color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-BlockContent-body a:link
{
color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
.art-BlockContent-body ul
{
list-style-type: none;
color: #4A4A4A;
margin:0;
padding:0;
}
.art-BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}
.art-BlockContent-body ul li
{
padding:0px 0 0px 13px;
background-image: url('images/BlockContentBullets.png');
background-repeat:no-repeat;
margin:0.5em 0 0.5em 0;
line-height:1.2em;
}
/* end Box, BlockContent */
/* begin Box, Post */
.art-Post
{
position:absolute;
z-index:0;
margin:0 auto;
min-width:706px;
min-height:1px;
}
.art-Post-body
{
position: absolute;
z-index: 1;
padding: 10px;
}
.art-Post
{
margin: 7px;
}
/* Start images */
a img
{
border: 0;
}
.art-article img, img.art-article
{
border: solid 1px #C4C4C4;
margin: 1em;
}
.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
/* Finish images */
/* Start tables */
.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
width:auto;
}
.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
background-color:Transparent;
}
.art-article th, .art-article td
{
padding: 2px;
border: solid 1px #5C5C5C;
vertical-align: top;
text-align:left;
}
.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}
/* Finish tables */
pre
{
overflow: auto;
padding: 0.1em;
}
/* end Box, Post */
/* begin PostHeaderIcon */
.art-PostHeader
{
text-decoration:none;
margin: 0.2em 0;
padding: 0;
font-weight:normal;
font-style:normal;
letter-spacing:normal;
word-spacing:normal;
font-variant:normal;
text-decoration:none;
font-variant:normal;
text-transform:none;
text-align:left;
text-indent:0;
line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #661919;
}
.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
margin:0;
color: #661919;
}
/* end PostHeaderIcon */
/* begin PostHeader */
.art-PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #7A1F1F;
}
.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #4D4D4D;
}
.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #BC2F2F;
}
/* end PostHeader */
/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #404040;
}
.art-PostContent p
{
margin: 0.5em 0;
}
.art-PostContent, .art-PostContent p
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-align: justify;
color: #84561E;
}
.art-PostContent
{
margin:0;
}
/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #3B3B3B;
}
/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #BC2F2F;
}
/* Finish Content link style */
/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
font-weight: normal;
font-style: normal;
text-decoration: none;
}
/* Start Content headings Fonts & Colors */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #8F2424;
}
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #BC2F2F;
}
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #595959;
}
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #A72A2A;
}
h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #292929;
}
h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #292929;
}
/* Finish Content headings Fonts & Colors */
/* end PostContent */
/* begin PostBullets */
/* Start Content list */
ol, ul
{
color: #404040;
margin:1em 0 1em 2em;
padding:0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}
li ol, li ul
{
margin:0.5em 0 0.5em 2em;
padding:0;
}
li
{
margin:0.2em 0;
padding:0;
}
ul
{
list-style-type: none;
}
ol
{
list-style-position:inside;
}
.art-Post li
{
padding:0px 0 0px 13px;
line-height:1.2em;
}
.art-Post ol li, .art-Post ul ol li
{
background: none;
padding-left:0;
}
.art-Post ul li, .art-Post ol ul li
{
background-image: url('images/PostBullets.png');
background-repeat:no-repeat;
padding-left:13px;
}
/* Finish Content list */
/* end PostBullets */
/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
color:#2E2E2E;
font-family: Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}
blockquote,
.art-PostContent blockquote
{
border:solid 1px #DD7878;
margin:10px 10px 10px 50px;
padding:5px 5px 5px 41px;
background-color:#EEBABA;
background-image:url('images/PostQuote.png');
background-position:left top;
background-repeat:no-repeat;
}
/* Finish blockuote */
/* end PostQuote */
/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:33px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
}
.art-button-wrapper
{
display:inline-block;
position:relative;
height: 33px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}
.firefox2 .art-button-wrapper
{
display:block;
float:left;
}
.art-button-wrapper .art-button
{
display:block;
height: 33px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-align: left;
padding: 0 21px !important;
line-height: 33px;
text-decoration: none !important;
color: #FAF3EA !important;
}
input, select
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FBEFEF !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #F2F2F2 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 92px;
background-image: url('images/Button.png');
}
.art-button-wrapper .l
{
left:0;
right:10px;
}
.art-button-wrapper .r
{
width:409px;
right:0;
clip: rect(auto, auto, auto, 399px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -33px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -66px;
}
/* end Button */
/* begin Footer */
.art-Footer
{
position:relative;
z-index:0;
overflow:hidden;
width: 947px;
margin: 5px auto 0px auto;
}
.art-Footer .art-Footer-inner
{
height:1%;
position: relative;
z-index: 0;
padding: 8px;
text-align: center;
}
.art-Footer .art-Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('images/Footer.png');
width: 947px;
height: 150px;
bottom:0;
left:0;
}
.art-Footer .art-Footer-text p
{
margin: 0;
}
.art-Footer .art-Footer-text
{
display:inline-block;
color:#000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}
.art-Footer .art-Footer-text a:link
{
text-decoration: none;
color: #DEAF73;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-Footer .art-Footer-text a:visited
{
text-decoration: none;
color: #333333;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.art-Footer .art-Footer-text a:hover
{
text-decoration: none;
color: #291C0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */
/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
font-family:Arial;
font-size:10px;
letter-spacing:normal;
word-spacing:normal;
font-style:normal;
font-weight:normal;
text-decoration:underline;
color:#D69D51;
}
.art-page-footer
{
margin:1em;
text-align:center;
text-decoration:none;
color:#949494;
}
/* end PageFooter */
/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
position: absolute;
margin: 0;
padding: 0;
border: 0;
left: 0;
overflow: hidden;
width: 236px;
}
/* end LayoutCell */
/* begin LayoutCell */
.art-contentLayout .art-content
{
position: absolute;
margin: 0;
padding: 0;
border: 0;
right: 0;
overflow: hidden;
width: 709px;
}
.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 945px;
}
.ProductItem {
border-color:#CCCCCC;
border-style:solid;
border-width:1;
padding:5;
padding-top:10;
width:200px;
}
.ProductItem {
font-size:11;
width:200px;
}
.ProductItemClick {
text-align:center;
width:100%;
cursor:pointer;
}
.ProductItemImage {
text-align:center;
width:200px;
cursor:pointer;
height:125px;
}
.ProductItemName {
height:40;
text-align:center;
line-height:14px;
}
.ProductItemShortDesc {
border-color:#857358;
border-style:solid;
border-width:1;
background-image:url(Images/DescBG.png);
color:#FFFFFF;
height:35;
padding:0;
!padding:3;
font-size:10px;
line-height:12px;
}
/* end LayoutCell */
hi, I have a layour where the container is 100% high, and then I have a header and nav then I have a #main and #bar divs (columns) then #footer I would like for the footer to stick to the bottom and the main, and bar expand to the bottom (even if there isn't enough text) does this make sense, heres my css PHP Code: html,body { height:100%; margin:0px; padding:0px; background: #eee; } #container { height:100%; margin: 0 auto; width: 720px; border-left: 1px solid #000; border-right: 1px solid #000; background: #f00; } #header { height: 170px; background: #ff0 url('../images/header.gif'); } #nav { height: 25px; padding: 5px; background: #666; } #main { width: 400px; float: left; padding: 10px; background: #fff; } #bar { padding: 10px; margin-left: 420px; border-left: 1px solid #006; background: #fff; } #copy { height: 30px; background: #999; clear: both; } I'm sure this has been asked, and I've googled for help without finding anything that works. I'm redesigning a site from html/tables -> css and need to keep a footer at the bottom of each page (after the content, not stuck to the bottom of the window). Being pretty unfamiliar with css positioning I'm having a bit of trouble. Site is here - huguenotbats . com / redesignfiles CSS is here - huguenotbats . com / redesignfiles / stylesheets / hbstyle . css As is everything works, but when I try to add a footer it sits on top of the content. Help, anyone?? Hi all, How do you put the content div? at the top of a page's source code? I've never figured out how to do this and I'm very interested. Hi, I had a little problem with this design earlier, and a kind soul on the forum helped me by showing me a template to use (instead of all the absolute positioning i was using), but i've got one little issue, and it's all that's stopping my site from going live. You'll see it quite clearly, my "content" gets pushed under my "menu" - fnb4wd.com.au/4x4wh/help/category1_1.htm is the URL. Any advice would be greatly appreciated. Thanks in advance. I feel so STUPID. I have DIV[a] inside DIV[a] is DIV[z] DIV[z] is 200px high. there is no height attribute et for DIV[a] shouldnt DIV[a] stretch atleast to fit in DIV[z] You can see here, in firefox, the dark background only comes down 200px. That is because its height is at 200px, i did that so you could see it. If I remove the height attribute, it dissapears completley. The menu and such on the left are within this div, so it should stretch correct? It works fine in IE. If I need to explain more let me know. Thanks Hi there! I am tweaking a WordPress template to fit a blog for a roleplaying game. The template is a three-column, fixed-width one. It looks fine on my tiny 17" monitor at work, but at home on my 22", the blog is very small and sits in the center of the page. (The content section is just 904px wide.) Is there a way to tweak the style.css file in order to give the columns percentage widths instead of absolute pixel widths, so that the center "content" area will resize properly according to the reader's resolution/monitor size/window size? I have some experience with CSS and I'm usually pretty good at tweaking pre-existing CSS to fit my needs, but this is something that's a bit beyond me. I can't put a direct URL in my post, but here's a snippet of the CSS file: Code:
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #fff url();
color: #fff;
}
h1, h2, h3, h4, h5, h6{
font-family: Arial, Helvetica, Georgia, Sans-Serif;
font-size: 16px;
}
a{
text-decoration: underline;
color: #08441e;
}
a:hover{ text-decoration: none; }
a img{ border: 0; }
abbr, acronym{ border: 0; }
address, dl, p{ padding: 10px 0 0; }
blockquote{
margin: 10px 10px 0;
background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
color: #736926;
}
blockquote p{
padding: 10px 10px 10px 20px;
}
blockquote blockquote{
margin: 10px 20px;
background: #fff;
color: #333;
}
blockquote blockquote p{ padding: 10px; }
code{
background: #f9f9f9;
}
dt{
font-weight: bold;
}
dd{
padding: 0 0 5px 15px;
}
hr{
clear: both;
margin: 15px 0 5px;
width: 100%;
border: 0;
height: 1px;
text-align: left;
background: url(images/bg_comment_bottom.gif) no-repeat;
}
small{
font-size: 10px;
}
input, textarea{
font-family: Arial, Helvetica, Georgia, sans-serif;
font-size: 12px;
padding: 2px;
}
input#author, input#email, input#url, textarea#comment{
border: 1px solid #cbb945;
background-color: #fffadb;
padding: 3px;
}
input#author, input#email, input#url{
margin: 0 5px 0 0;
}
#container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
text-align: left;
vertical-align: top;
}
#container{
margin: 0 auto;
width: 904px;
padding: 10px 0 0;
}
#header{
margin: 0 0 10px;
float: left;
width: 904px;
height: 250px;
background: url(images/bg_header.gif) no-repeat left bottom;
color: #333;
}
#menu ul{
margin: 0;
padding: 0 0 0 175px;
list-style: none;
}
#menu ul li{
float: left;
margin: 0 5px 0 0;
font-size: 14px;
font-weight: bold;
background: url(images/bg_tab_right.gif) no-repeat right top;
color: #ffffff;
}
#menu ul li a{
display: block;
padding: 14px 20px 10px;
text-decoration: none;
background: url(images/bg_tab_left.gif) no-repeat left top;
color: #ffffff;
}
#menu ul li a:hover{
text-decoration: underline;
}
#pagetitle{
clear: both;
width: 904px;
height: 250px;
}
}
#pagetitle h1 a{
text-decoration: none;
color: #fff;
}
.pagewrapper{
margin: 0 0 10px;
float: left;
width: 904px;
background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
color: #333;
}
.page{
float: left;
padding: 0 5px 5px;
background: url(images/bg_page_top.gif) no-repeat;
}
.wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
float: left;
width: 500px;
}
.narrowcolumnwrapper{
margin: 5px 0 0;
float: left;
width: 500px;
background: #fff url(images/bg_narrowcol.gif) repeat-y;
}
.narrowcolumn{
float: left;
width: 500px;
background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
}
.content{
float: left;
width: 500px;
background: url(images/bg_narrowcol_top.gif) no-repeat left top;
}
Thank you! You can see the problem he BrianRoyer.com The google adsense ad is expanding past the container. Here is my style.css for troubleshooting: Code: html, body {
background: #a0a0a0 url(images/main_bg.gif) center top repeat-x;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
#container {
width: 703px;
margin: 0 auto;
background: #068add url('images/content_bg.gif');
border-left: 5px solid #cdcdcd;
border-right: 5px solid #cdcdcd;
border-bottom: 5px solid #cdcdcd;
}
#content em.u {
text-decoration: underline;
font-style: normal;
}
#top {
padding: 0;
border: 0;
}
#top img {
border: 0;
}
#top h1 {
padding: 0;
margin: 0;
}
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: .25em 0 0 .75em;
}
#rightnav {
float: right;
width: 125px;
margin: 0;
text-align: center;
padding: 1em 1em 0 0;
}
#rightnav img {
margin: 0;
border: 0;
text-align: center;
padding: 1em 0 0 0;
}
#content {
margin-left: 200px;
margin-right: 200px;
padding: 1em 0 0 0;
width: 290px;
}
#content img.left {
margin: 5px;
border: 1px solid #000000;
float: left;
}
#content img.right {
margin: 5px;
border: 1px solid #000000;
float: right;
}
#leftnav img {
margin: 0;
border: 0;
}
#google-search img {
border: 0;
padding: 1em;
}
#footer {
width: 699px;
padding-top: 1em;
margin: 0 auto;
background: #068add url(images/footer_bg.gif) center bottom repeat-x;
}
#leftnav p, #content p {
margin: 0 0 1em 0;
text-align: justify;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
}
#rightnav p {
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 10px;
}
#leftnav hr, #content hr, #rightnav hr {
color: #FFFFFF;
height: 1px;
}
#content h2 {
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h2.center {
text-align: center;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#leftnav h2, #rightnav h2 {
text-align: center;
margin: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h6, #leftnav h6, #rightnav h6 {
text-align: center;
margin: 0;
padding: 1em;
color: #FFFFFF;
font-family: Verdana;
font-size: 8px;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
padding: 0 0 0 1.25em;
margin: 0;
}
#navcontainer ul li a
{
background: transparent url(images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 10px Verdana;
text-decoration: none;
color: #FFF;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list_on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list_active.gif) left center no-repeat;
color: #666;
}
And here is snippet of code where the adsense ad is located: Code: <div id="container">
<div id="top">
<? include("ssi/header.inc"); ?>
</div>
<div id="leftnav">
<? include("ssi/leftnav.inc"); ?>
</div>
<div id="rightnav">
<? include("ssi/rightnav.inc"); ?>
</div>
<div id="content">
ad = rightnav.inc I am working on a website combining css/tables. The #links cell expands taller than its content in ie. This causes all content in the cells below to shift down. It renders fine in all other browsers that I have tried. The site validates fine on w3. Here is a link with some screenshots of my problem. screenshots Sorry its in sluggish tripod. It was the easiest way for me to post it online quickly. Please Help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<title>Stick Boy Bread Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="text/drop_down.js"></script>
<link href="sbbc.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
background-color: #EEE074;
padding: 0px;
margin-top: 0px;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 0%;
background-image: url(images/gradient.gif);
}
#mainTable {
width: 740px;
height: auto;
border: thin solid #000000;
line-height: 1.5em;
margin: 25px 0 25px 35px;
background-image: url(images/gradient.gif);
background-repeat: repeat-x;
padding-left: 0%;
}
.rt {
border-left: medium double #000000;
vertical-align: top;
font-size: 100%;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
background-image: url(images/gradient4.gif);
}
.rt1 { border-left: medium double #000000;
vertical-align: top;
font-size: 100%;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
background-image: url(images/gradient4.gif);
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="mainTable">
<tr class="top">
<td height="90" class="topheader" colspan="3"><a href="index_final.htm"><img src="images/StickBoy_OvalLogo.gif" alt="Stick Boy Bread Company Bakery Boone" width="225" height="90" border="0"></a></td>
</tr>
<tr>
<td width="120" id="links"><ul id="nav">
<li><a href="text/history.htm">History</a></li>
<li><a href="text/products.htm">Products</a>
<ul>
<li><a href="text/breads.htm">Artisan Breads</a></li>
<li><a href="text/pastries.htm">Breakfast Pastries & Sweet Breads</a></li>
<li><a href="text/soups.htm">Foccacia, Soups & Take-Out Catering</a></li>
<li><a href="text/coffee.htm">Drip Coffee, Espresso Bar & Smoothies</a></li>
<li><a href="text/desserts.htm">Desserts & Cakes</a></li>
<li><a href="text/wedding.htm">Wedding Cakes</a></li>
</ul></li>
<li><a href="text/letter.htm">Letter from Carson</a></li>
<li><a href="text/contact.htm">Contact</a></li>
</ul></td>
<td width="380" rowspan="2" class="rt"><h2>Welcome to Stick Boy<br>
Bread Company!</h2>
<p><strong> If you are looking for a "real" bakery, you are in the right place. Welcome to Stick Boy Bread Company!</strong></p>
<script language="JavaScript" type="text/javascript">
<!--
/*
Random Image
*/
function random_imglink(){
var myimages=new Array()
myimages[1]="images/breadfront.jpg"
myimages[2]="images/french.jpg"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img alt="natural breads" class="icenter" src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>
<p>text here</p>
<p> </p>
<p>text here</p>
</td>
<td width="220" rowspan="2" class="rt"><img src="images/sticknews3.gif" alt="Stick Boy Bakery News" width="257" height="151">
<p>text here <a href="text/news.htm">more</a></p>
<img src="images/ovenonlyandcover_edit.gif" alt="Stone Deck Oven" width="220" height="261" class="icenter">
<br />
<p>Download our latest newsletter <a href="text/news_winter06.pdf">here</a>.</p>
<p> </p>
</td>
</tr>
<tr>
<td rowspan="2" align="center" class="lft"><img src="images/soupoday.gif" alt="Soup of the Day" width="140" height="188" align="top" class="clear"><br>
<!-- the text below is edited from the external file called soup.js -->
<script language="JavaScript" type="text/javascript" src="text/soup.js">
</script>
<hr>
<a href="text/news_winter06.pdf"><img src="images/news_winter06.gif" alt="Download Newsletter" border="0" class="clear"></a>
</td>
</tr>
<tr>
<td colspan="2" class="btm"> <br />
<img src="images/keylime.jpg" alt="Key Lime Pie" width="252" height="154" class="fllftclear">
<p class="fresh"><strong>Key Lime Pie</strong></p>
<p>text here</p>
</td>
</tr>
</table>
</body>
</html>
Here is the css that seems relevant to my problem. Code:
.lft {
background-image: none;
padding: 0;
margin: 0;
background-color: #FFFFCC;
border-left-width: thin;
border-left-style: none;
border-left-color: #000000;
vertical-align: top;
clear: left;
}
#links {
background-image: none;
padding: 0;
margin: 0;
width: 140px;
display: block;
float: left;
vertical-align: top;
clear: both;
}
#links ul
{
margin: 0;
padding: 0;
list-style:none;
width: 100%;
}
#links ul li
{
margin: 0px;
padding: 0px;
float: left;
width: 100%;
position: relative;
}
#links li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
#links ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
background:#003366;
padding: 10px;
border-bottom: 1px solid #ccc;
border-right: none;
border-left: none;
font-size: 12px;
font-weight: bold;
height: 100%
}
#links ul li a:hover {
display: block;
text-decoration: none;
color: #FFFFFF;
background:#cc6633;
padding: 10px;
border-bottom: 1px solid #ccc;
border-right: none;
border-left: none;
text-align: left;
font-size: 12px;
font-weight: bold;
}
/* Fix IE. Hide from IE Mac \*/
* html #links ul li { float: left; height: 1%; }
* html #links ul li a { height: 1%; }
/* End */
#links li:hover ul, #links li.over ul
{
display: block;
text-align: left; }
HR {
height:0;
width:100%;
margin: 0;
text-align: center;
vertical-align: top;
padding: 0;
border-top: 0 none;
border-right: 0 none;
border-bottom: medium double #000000;
border-left: 0 none;
}
.rt {
border-left: medium double #000000;
vertical-align: top;
font-size: 100%;
padding: 0;
margin: 0;
background-color: #FFCC66;
background-image: url(images/gradient4.gif);
}
Hi I have site where I am forced to set my content div <div id="content"> min-height with jquery on each page.Site Link This is because the content div keeps collapsing and ignoring the content it has. Can someone teach me how to fix this please. |
|||||||