|
CSS - Left Nav Bg Set To Repeat, But Stops
After hours, upon hours of trying to figure out what I did wrong, I've given in and i need to ask for help.
Problem: The left Side Nav section BG stops toward the bottom for no reason. I want the left side to continue to repeat like the right side as new content is added. Website: Http://www.ihorde.wowstead.com CSS Code: Code:
body {
background:#000000 url(http://ihorde.wowstead.com/files/bg.jpg) no-repeat center 0;
color:#999999;
font-size:12px;
}
#header {
background:transparent url(http://ihorde.wowstead.com/files/header_tl.png) no-repeat scroll 0 0;
border:0 solid #FFFFFF;
clear:none;
height:190px;
margin:-15px 202px 0;
position:relative;
text-align:center;
z-index:52;
}
#header .title_name {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/header_tr.png);
background-position:right center;
background-repeat:no-repeat;
border:0 solid red;
color:transparent;
display:block;
font-size:0;
height:190px;
left:auto;
margin:0 0 0 auto;
position:relative;
top:0;
width:100%;
}
#header .title_realm {
display:none;
}
#contentarea {
margin:0;
}
#content {
background-color:transparent;
border:0 solid #FFFFFF;
left:-10px;
margin:0 220px 3px 0;
padding:0;
position:relative;
}
div#pagenavbar {
background:transparent url(http://images.wowstead.com/templates/nexus/wotlk/breadcrumb.png) repeat scroll 0 0;
border:1px solid #253039;
margin:0 230px 3px;
padding:1px 20px;
}
#leftnav {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/sidepanel.png);
background-repeat:repeat-y;
border:0 solid #FFFFFF;
display:block;
float:left;
height:1000px;
left:0;
margin-right:20px;
position:relative;
top:-175px;
width:220px;
z-index:50;
}
#rightnav {
background-color:transparent;
border:0 solid #FFFFFF;
display:block;
height:100%;
margin-left:25px;
position:absolute;
right:0;
top:-175px;
width:220px;
z-index:50;
}
#bg {
background:transparent url(http://ihorde.wowstead.com/files/sidepanel.png) repeat-y scroll right center;
min-height:1000px;
}
div.divheadline {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/headerdiv2.png);
background-position:center center;
background-repeat:no-repeat;
border:0 solid #FFFFFF;
color:#090909;
font-family:Copperplate;
font-size:16px;
font-variant:small-caps;
font-weight:bold;
height:39px;
margin-left:auto;
margin-right:auto;
width:180px;
}
div.divcontent {
border:0 solid #FFFFFF;
margin-left:auto;
margin-right:auto;
padding:4px;
width:180px;
}
#netbar {
background:transparent url(http://ihorde.wowstead.com/files/netbar.png) repeat scroll 0 0;
border-bottom:0 none;
height:37px;
}
.bordered .c {
background:transparent url(http://ihorde.wowstead.com/files/content_bg.png) repeat scroll 0 0;
padding:7px;
}
.bordered .tl {
background:transparent url(vborder-tl.png) repeat scroll 0 0;
}
.bordered .tr {
background:transparent url(http://ihorde.wowstead.com/files/border-tr.png) repeat scroll 0 0;
}
.bordered .bl {
background:transparent url(http://ihorde.wowstead.com/files/border-bl.png) repeat scroll 0 0;
}
.bordered .br {
background:transparent url(http://ihorde.wowstead.com/files/border-br.png) repeat scroll 0 0;
}
#footer {
background:#000000 url(http://ihorde.wowstead.com/files/netbar2.png) repeat-x scroll 0 0;
border-color:#FFFFFF #FFFFFF -moz-use-text-color;
border-style:solid solid none;
border-width:0;
height:37px;
margin:0;
padding-top:15px;
}
Someone please help! Similar TutorialsMorning everyone. I am trying to create a background image that I can create a repeat from right to left so that people with very large monitors get a consistent looking background. I have no problem repeating from left to right with repeat-x but now I need to go right to left. I have a style sheet with a property that allows me to repeat an image from left to right. I want to go the opposite way, from right to left. Can I do this? How? Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
Hi, I have this page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB Whenever I use <br> the above class style no longer applies to the following content. Can I use something else instead of line-break to jump a line? Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks hi there, i'm using code from http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P10/ for my menubar, the problem is when i refresh the page the menubar is on it stops working. help please! I update the website of a local gaming center and I recently redesigned it. I am not a CSS expert and now that I have integrated it into to site, the background will not fill the screen on larger monitor sizes. When you scroll down to the bottom of the page it turns leaves a large white space at the bottom of the screen. There is also an odd white border around the site. The css can be found in the source code. The site is nextlevelchardon.com Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why? I am sure there is an obvious explanation but why does using display:inline in this class definition stop the height/width working? Remove it and the dimensions are preserved. PHP Code: DIV.special_offer_middle { width: 100px; height: 20px; display: inline; border: 1px dashed white; } I am working on i hate mariah dot com and I can't get the background to repeat or be fixed no matter what I do. It keeps showing the page background. This is the code I have, what am I doing wrong!! Help! #art-page-background-simple-gradient { position: absolute; background-image: url('images/blogbg.png'); background-repeat:repeat-y; top:0; width: 1700px; height: 1200px; } Hi I have a page with the following HTML, which is linked into an external CSS:- <table width="50px" align="right" > <?php do { ?> <tr> <td class="ntext_time"><?php echo $row_news['timestamp']; ?></td> </tr> <tr> <td class="ntext_item"><?php echo $row_news['newsitem']; ?></td> </tr> <?php } while ($row_news = mysql_fetch_assoc($news)); ?> </table> I then have this CSS:- .ntext_time { FONT-SIZE: 11px; line-height: normal; COLOR: #0066FF; font-family: "Courier New", Courier, mono; position: absolute; left: 85%; height: auto; width: 20%; text-align: center; display: none; } .ntext_item { FONT-SIZE: 11px; line-height: normal; COLOR: #0066FF; font-family: "Courier New", Courier, mono; position: absolute; left: 85%; height: auto; width: 20%; text-align: center; Its for a news section down the right hand side of the screen. I need to be able to display repeat redgions, otherwise i only have one news item. What happens at the moment is because the BOX is set 50px or 70px from the top, then it repeats, but all the news items end up on top of each other, e.g. can't read them. What I need to do is have the first timestamp say 50px from the top, the first new item 70px from the top. Then the 2nd timestamp 100px, and the 2nd news item 120px, so they don't overlap. Any Ideas? JAKE I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem. <!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>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" href="test.css" /> </head> <body> <div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec"> <div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div> <div id="sidebar"> <h5>Cell: 910-699-6919<br /> Res: 910-699-4441 </h5> <a href="mailto:ann@mindspring.com">ann@mindspring.com</a> </div> </div> </div> </div> </div> </body> </html> <!--body { background:#e5f6f4 url(images/huntbkg.gif); margin:10px 0; padding:0px 5px 15px 10px; font:small/1.6em Verdana, Arial, Helvetica, sans-serif; text-align:center; color:#333; } #page { background:#B8BFD8 url(images/pg_topright.gif) no-repeat right top; margin:0 auto; padding-top:0px; width:995px; text-align:left; } #pagea { background:url(images/pg_right.gif) repeat-y right top; width:995px; } #pageb { background:url(images/pg_bot.gif) no-repeat right bottom; padding:0 0px 20px 0px; width:995px; } #pagec { background: url(images/grnbar.gif) repeat-y top left; width:990px; } --> I just finished coding a new layout but it seems to collaspe in IE even though it displays perfectly in firefox and netscape (almost). The link to the layout is: URL and the link to style sheet is: URL Also another thing I can't seem to get my container div background to repeat all the way through even though its set on repeat-y. Anyone have a idea on how to fix one of these problems? Thanks I would appreciate some help on this problem of mine. I have working on this and can't really find a great answer for what I need my CSS to do. http://www.ambrelasweb.com/eshpi4/index.html I am trying to get the bg image (the people symbols) to reach to the bottom of the page for each different lengthwise page on this website without having to get a million <br> in there to make it continue down the page. Index Page: Code: <div id="symbolBG"><br /><br /><br /></div> <div id="wrapper">"All my other content"</div> CSS: Code:
#wrapper {
width: 1000px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -500px;
z-index: 2;
height: auto;
border-color: #FF0000;
border-width: 3px;
border-style: solid;}
#symbolBG {
width: 1350px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -675px;
z-index: 1;
background: url(images/symbolBG.jpg);
background-repeat: repeat-y;
text-align: left;
height: auto;
border-color: #993333;
border-width: 2px;
border-style: solid;}
I would appreciate any help anyone could provide. Thanks. I'm trying to get a background image to repeat. The only way it works is if I actually declare the height ex: height: 1000px; If I don't declare it like that it simply doesn't appear at all. If I declare it as height:100%; it makes the background the height of the browser window, but it doesn't span the height of the entire page. Meaning that if the browser window is 800px tall, it'll only display 800px of background and anything beyond that is blank regardless of whether or not the content of the page extends past 800px. Here's the doc type and style I'm using. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> #container { position: absolute; text-align: left; width: 800px; background: url(homeback.jpg) repeat-y 100%; left: 50%; right: auto; bottom: auto; clear: both; margin-left: -400px; } |
|||||||