|
CSS - Repeat From Right To Left
Morning 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.
Similar TutorialsAfter 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! 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? 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; }
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;
}
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 I'm trying to vertically repeat a background image, but only in one way. Here is what I have right now: Code: background: white url(../images/side.gif); background-repeat: repeat-y; background-position: 612px 80px; I want the background image to start 80px from the top and repeat down, but NOT UP. Is there a way to do this? 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; } 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 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 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 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; } --> Hi everybody, i need some help figuring out some things with css and html: This is the CSS part of the code <style> .leftbanner{ background:url(leftbanner.jpg), right, repeat-y; } .topbanner{ height:100%; width:100%; background:url(topbanner.jpg), bottom, repeat-x; } body{ margin:0px; } this is the cell that i want the topbanner class to be used on. there are two more images in that cell but the strange thing for me is that i dont get any background image?!? any help ? <td colspan="2" align="center" valign="bottom" class="topbanner"> <img src="spacer40jpg" width="100%" height="1"> <br> <img src="kormrez.jpg" width="451" height="85"></td> Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great: Css Code Code:
.container {
width: 1000px;
margin: 0px auto;
}
.header {
background: url(../images/headerbg.jpg);
height: 200px;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.background {
background: url(../images/backgroud.jpg) repeat-x;
width: 14px;
}
.leftnav {
background: url(../images/stripes.jpg) repeat;
float: left;
width: 150px;
color: #FFFFFF;
visibility: visible;
margin-right: auto;
margin-left: auto;
}
.maincontent {
background: #FFFFFF;
width: 487px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
float: left;
}
.rightside {
background: url(../images/body.jpg);
float: right;
height: 461px;
width: 351px;
margin-right: 2px;
}
.border1 {
background: url(../images/border1.gif) repeat-x;
height: 14px;
}
XHTML Code Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
background: url(../images/temp_slices_03.jpg) repeat-x;
width: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="leftnav">Content for class "leftnav" Goes Here</div>
<div class="maincontent">Content for class "maincontent" Goes Here</div>
<div class="rightside">Content for class "rightside" Goes Here</div>
</div>
</div>
</body>
</html>
So I've only been building layouts with CSS for 2 yrs now and I guess I've never really had this issue before (though I imagine it's an easy one). On the page I'm building I have a text area that starts off with a rough paper texture thats about 400 px tall (with text on top) and I want the rest of the text on top to overflow into a different y-repeat background image. I got it to work PERFECTLY in IE7, but firefox has been nothing but a pain. I know that I'm close since one browser is showing it correctly, but I need either a firefox-only fix or an overall fix that won't mess up the way IE7 displays it. To keep from posting the whole document I'll post the reference on my HTML page and the CSS itself (I can add more later if need be) CSS: Code: #textbgtop {
width: 886px;
min-height: 580px;
background-image: url(img/TextBGtop2.jpg);
background-repeat: no-repeat;
padding-left: 14px;
padding-right: 14px;
}
#maintextarea {
width: 886px;
background-image: url(img/TextBGrepeat.jpg);
background-repeat: repeat-y;
}
HTML REFERENCE: Code:
<div id="maintextarea">
<div id="textbgtop">
TEXT GOES HERE....I am running an DO WHILE statement that pulls content from a mySQL DB. The content is all displaying correctly. As it is, the page displays fine in IE7, but on firefox the top image is in the proper place, but the TextBGrepeat img is directly below it, and then the text overflows in the main page background, THEN the bottom nav bar is placed below that.
</div></div>
I don't know if I've provided enough information but does anyone see an obvious error? If not I can definately post more but I would need to modify some specifics. Thanks in advance for any help! -crazygol4 On my page I've got a center content portion and to get it to stretch to fit the text I had to use overflow: auto; This worked for a while but in firefox 1.5 it would break if I put in too much text, i think. I managed to fix it by repositioning one of the inner divs but I want to know is there a way to get the background to resize/repeat to fit the content without using overflow: auto; HTML: http://www.codetranscendence.com CSS: http://www.codetranscendence.com/styles/main.css I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work. Here is a sample of my style sheet .content{ padding: 0px;margin:0px; width:961px;height:100%; float:left; } #bgLeft { width:5px;height: 100%; min-height: 100%; background: url(img/bg_left.gif) repeat-y; float:left; } #bgRight { background:url(img/bg_right.gif) repeat-y 100%; width:5px;height:100%; min-height:100%; float:left; } .bodyMain{ padding: 0px;margin:0px; width:735px;height:100%; background-color: #f8f8f8; float:left; } And here is a copy of my html <div class="content" align="left"> <div id="bgLeft"> </div> <div class="bodyMain" > <!-- ###CONTENT### --> </div> <div id="bgRight"> </div> </div> n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space. In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see anything. Any ideas? thanks |
|||||||