|
CSS - Background Image Won't Tile...float Issue.
Hi there,
I'm trying to get the background image to repeat down the page, but I think the float is messing it up since it's outside the element, or something like that. The background image call works fine, you can test it if you enlarge the #Middle height values. http://www.wpforrealestate.com/prod...es/Design2/www/ I've had this problem before, but figured it out through the help here and some links on floats, but this time I'm just not getting it for some reason. Any ideas? Thanks. Similar TutorialsI've got two DIVs that flank my page content. Here's some CSS: #leftside { width: 35px; background-image: url("_images/left.gif"); background-repeat: repeat; float: left; clear: both; overflow: auto; } As you can see, I've used both clear and overflow and the background will not tile in ANY browser, PC or Mac. I've applied combinations or overflow and clear to every DIV on the page and nothing works. It just will not tile unless I put something in the DIV (like text or an image) or if I hardcode the height, which is unacceptable since every page will differ. I'm at my wits end. I've spent the last 4 hours searching for answers and none seem to work. I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig I'm trying to tile the background of my menu infinitely so the design stretches to the very edge at the bottom of the viewport. Unfortunately, for some strange reason, it just decides to stop in the middle of the page. I've tried height:100% in various places with no luck. Help would be immensely appreciated! To see what I'm talking about, go here . My page code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Z Studios ::</title> <style type="text/css" title="currentStyle" media="screen"> @import "zstudios.css"; </style> </head> <body> <div id="pageHeader"> <h1><span>Z-Studios</span></h1> </div> <div id="mainnav"> <ul> <li id="navLife"><a href="#life">Life</a></li> <li id="navMovies"><a href="#movies">Movies</a></li> <li id="navArt"><a href="#art">Art</a></li> <li id="navBusiness"><a href="#business">Business</a></li> </ul> </div> <div id="page"> <div id="mainleft"> <div id="mainleftTop"> </div> </div> <div id="maincenter"> <div id="content"> kjfdlsj (repeated over and over to test background stretching) </div> </div> <div id="mainright"> <div id="mainrightTop"></div> </div> </div> </body> </html> ... and my stylesheet: Code: /* Header/Logo - using an image to replace text in an h1. */
#pageHeader h1 {
background: transparent url('images/header.jpg') no-repeat top left;
width: 774px;
height: 148px;
float: none;
margin: 0;
}
#pageHeader h1 span {
display:none
}
/* Main menu bar */
#mainnav {
width: 774px;
height: 38px;
border: 0;
padding: 0;
margin: 0;
top: 78px;
left: 0px;
}
#mainnav ul {
width: 774px;
height: 38px;
background: url(images/menu.gif) no-repeat;
margin: 0;
padding: 0;
position: relative;
left: 0px;
}
#mainnav ul li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#mainnav ul li, #mainnav a {
height: 38px;
display: block;
}
#mainnav ul li a {
text-indent: -9999px;
text-decoration: none;
}
/* Mouseover buttons */
#navLife {
left: 100px;
width: 60px;
}
#navMovies {left: 250px; width: 85px;}
#navArt {left: 430px; width: 60px;}
#navBusiness {left: 565px; width: 100px;}
#navLife a:hover {background: transparent url(images/menu.gif) no-repeat -100px -38px;}
#navMovies a:hover {background: transparent url(images/menu.gif) -250px -38px no-repeat;}
#navArt a:hover {background: transparent url(images/menu.gif) -430px -38px no-repeat;}
#navBusiness a:hover {background: transparent url(images/menu.gif) -565px -38px no-repeat;}
html, body {
margin:0px 0px 0px 0px;
padding:0px;
background-image: url("images/bg.jpg");
height: 100%;
}
#page {
height: 100%;
}
#maincenter {
background-image:url("images/content_border_top.gif");
background-repeat: no-repeat;
width:529px;
float:left;
padding-top:36px;
height: 100%;
}
#content {
background-image:url("images/content_bg.jpg");
background-repeat: repeat-y;
text-align: left;
padding-left: 30px;
padding-right: 30px;
}
#mainleft {
width:190px;
float:left;
background-image:url("images/menu_left.gif");
background-position: 0px 67px;
padding-bottom: 36px;
height: 100%;
}
#mainright {
width:55px;
height: 100%;
float:left;
background-image:url("images/right_border.gif");
background-repeat: repeat-y;
background-position: 0px 67px;
padding-bottom: 36px;
}
#mainleftTop {
padding-left: 55px;
padding-top: 67px;
text-align: center;
background-image:url("images/top_left.gif");
background-repeat: no-repeat;
}
#mainrightTop {
width:55px;
float:left;
background-image:url("images/top_right.gif");
background-repeat: no-repeat;
padding-bottom:0;
}
Thanks again! ~Zach Hiya, So what I'm trying to do is have a base image used as a background that sits on the left side, and then another image to be used to tile across the rest of the page from where the first one left off. I'm not really sure how/if you can easily do something like that, and I can't seem to find anything when I'm searching. And when its all said and done, text would still go over both images as if it was one image. Thanks, -Sky hi everyone, i'm having some trouble with using floats and a background image. here's is how it's setup: > Div holder that holds floats / background image --> Float that has content to the right --> Content on the left now before you guys start scratching you head trying to figure out my logic, this is my first dive into using CSS so i'm still learning. lastly, it only seems to do this in firefox but works in IE. here's the example: http://vsm.intriguemedia.net/ and here's the CSS file: http://vsm.intriguemedia.net/lib/css/base.css any head would be appreciated, thanks. I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link I am using eclipse ide to develop a html page. It has a preview function where I can see the background image correctly. However when I run this in a an external browser (IE/Firefox) the background image does not appear. I can go to the location of the image in the browser and see it, also I can view source in browser and it is as below. Also the image is in the same directory as the html page. Any help at all on this would be very much appreciated. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body {margin-left: 0px;margin-right: 0px;background:url(bg-gray.gif) repeat center left;color: #000000;}
</style>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Login</title>
</head>
<body >
</body>
</html>
Hi to all, I have a problem to show full image on background.The css which i am using is good if the screen size is 17 inches or less but above 17 inches background image does not expand to full width and height. One thing i want to clear that we can't repeat that image . any solution to this problem will be appreciated. thanks for some reason i cant figure out, i cant get a background image to show up at all in my document. ive tryed validating both CSS and HTML, ive tryed different approaches to adding a background image in CSS and even removing individual styles to try to find the source of the issue. I am new to this forum and this is my first post. if anyone can tell me why this isnt working i would greatly appriciate it. here is the code: Code: <html>
<head>
<title>Home</title>
<style type="text/css">
body
{
background:#3D1400;
}
/******modual positioning******/
div#container
{
width:48em;
height:41em;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:0em;
padding:1em;
padding-top:0em;
background:#00BFBF;
}
/******* this is where im trying to put a background image*/
div#headding
{
background:url("") purple repeat-x;
width:48em;
height:4em;
padding:1em;
margin-bottom:3.5em;
margin-left:-1em;
}
img.bd
{
position:relative;
width:50em;
height:0.5em;
left:-1em;
top:-0.5em;
}
nav
{
margin-top:-1em;
margin-left:0em;
margin-bottom:3em;
width:48em;
height:1.5em;
background:#ffffff;
padding-left:0em;
border-radius:0.2em;
}
/*side bar*/
div#side_left
{
width:10em;
height:29em;
float:left;
background:#4CD2D2;
}
#contests, #featured_blog, #featured_discussion, #featured_poll
{
width:10em;
margin:0.8em;
color:#0D1A8C;
font-weight:900;
font-size:0.8em;
background:#79DDDD;
padding:0.5em;
}
hr.side
{
border:0.1em solid #0D1A8C;
width:10em;
}
/*side bar end*/
div#featured_photo
{
float:left;
margin-left:1em;
width:20em;
height:20em;
background:#000000;
overflow:hidden;
border-radius:1em;
}
div#top_rated_photos
{
float:right;
width:16em;
height:20em;
background:#111111;
}
footer
{
position:relative;
height:4em;
width:58.6em;
margin-right:auto;
margin-left:auto;
background:#000000;
text-align:center;
padding:2em;
font-size:0.8em;
}
a.f
{
color:#ffffff;
text-decoration:none;
border-right:.1em solid #ffffff;
padding-right:1em;
margin-right:0.3em;
padding-left:0.3em;
margin-left:0.3em;
}
/**********Photo Gallery**********/
a.tr_img img.top_r
{
height:3.9em;
width:3.9em;
float:left;
border:0.1em solid #000000;
}
a.tr_img img.top_r:hover
{
margin:0em;
border:.1em solid #ff0000;
}
/******text styles******/
h1
{
font-size:2em;
text-transform:capitalize;
border-bottom:0.2em solid #8C8CE8;
color:#8C8CE8;
}
span#fp
{
color:#999999;
float:right;
margin-right:1em;
font-weight:bold;
display:block;
}
/***************************************NAVIGATION BAR***************************/
/*top level styles*/
ul.top_link li
{
float:left;
background:#ffffff;
position:relative;
display:inline;
border-right:0.1em solid #00BFBF;
border-left:0.1em solid #00BFBF;
}
ul.top_link a
{
display:block;
position:relative;
font-size:1.3em;
color:#000000;
text-decoration:none;
padding-left:1em;
padding-right:1em;
}
/* style the top level hover incase images fail *//* dropdown ul styles */
ul.top_link li.sub_link a
{
padding-right:0.5em;
padding-left:0.5em;
width:8em;
}
ul.top_link >li:hover
{
background:#000080;
}
ul.top_link >li>a:hover
{
color:#ffffff;
}
ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active
{
background:#000080;
color:#ffffff;
}
/********* dropdown sytles *********/
ul.top_link li ul
{
position:absolute;
top:2em;
left:0;
z-index:1;
visibility:hidden;
}
ul.top_link li > ul
{
top:auto;
left:auto;
}
ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul
{
visibility:visible;
}
ul.top_link ul li
{
border:none;
height:auto;
float:left;
width:8em;
top:0.15em;
left:-2.6em;
padding:0em;
text-align:left;
background:#ffffff;
}
ul.top_link ul li a
{
float:left;
font-size:0.8em;
text-decoration:none;
display:block;
height:2em;
line-height:2em;
text-align:left;
}
/************************** ~DROPDOWN STYLES~ *************************/
.top_link li.sub_link ul
{
background:#ffffff;
padding-left:0em;
}
.top_link li.sub_link ul li a
{
width:8em;
}
.top_link li.sub_link ul li a:hover
{
background:#000080;
color:#6385A6;
} </style>
<base href="index.html" />
</head>
<body>
<div id="container">
<div id="headding">
<h1>Welcome to purple panda bear ♥</h1>
<img src="" class="bd" />
<img src="" class="bd" />
<img src="" class="bd" />
</div>
<nav>
<ul class="top_link">
<li class="top_link">
<a href="index">home</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">blog</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">gallery</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">anime</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">login</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="side_left">
<div id="contests">
Featured Contests
<hr class="side" />
<a href="">Bunnys vs. Pandas</a>
<a href="">Dianoaurs vs. Elefants</a>
<a href="">Pickles vs. Ice Cream</a>
</div>
<div id="featured_blog">
Featured Blogs
<hr class="side" />
<a href="">blog 1</a> by,
user 1<br />
<a href="">blog 2</a> by,
user 2<br />
<a href="">blog 3</a> by,
user 3<br />
</div>
<div id="featured_discussion">
Featured Forums
<hr class="side" />
<a href="">Anime discussion</a>
<a href="">Panda discussion</a>
<a href="">Epicness </a>
</div>
<div id="featured_poll">
Featured Poll
<hr class="side" />
What is your favorate fuzy animal?<br />
<input type="radio" value="bunnys" />Bunnies<br />
<input type="radio" value="pandas" />Pandas<br />
<input type="radio" value="kittys" />Kittys
</div>
</div>
</div>
<footer>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
</footer>
</body>
</html>
Hi all, This problem has been plaguing me for a long while now and I am getting to the end of my tether! All I want to do is add a simple repeating background image to my 'container' div (i called mine #outer for some reason!) To do this i added the following CSS: Code: #outer { width:970px; text-align:left; margin:0 auto 50px; padding:0; background-image:url(/Images/bg.jpg); background-position:center; background-repeat:repeat-y;}
Pretty simple I thought! However, in FF/Chrome the background image does not show up at all, but in IE it does...here is the page: http://onyahead.com/latestnews_test.php Obviously, the output that i get from IE is actually the output I want...i just cannot get to the bottom of why it is not showing in FF!! Any ideas? Sam Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! Hello. I use List (<ul>,<li>), to make a menu. When I add float:left; parameter to li{} selector, the green background of the list becomes transparent. I give the bgcolor to the list like this: ul{ background-color: #00CC00; } here are tha sample pages, so you can view the source. without float:left http://www.dinal.ru/test/liul.htm with float:left http://www.dinal.ru/test/liul2.htm my question is: where is the green color, where does it go? Thank You Artashes Hello i would like to know if there is any hacks or tips to resolve problem in IE6's rendering of Floated Boxes? It seems IE6 add extra padding or margin to some floated element, specially those near the borders of container... How do i get around this? Hatchetradio.com/radio/ if you check this page it's fine in firefox if you check this page in I.E. the tab on the left hand side actually sits on top of the layout. I'm trying to get it to fit snug. I'm not sure why this is happening. hatchetradio.com/radio/wp-content/themes/reborn/style.css that's the css im using heys all, im having an issue with text that is variable length. i want to float something in the bottom right corner of some text. that something which is floated should have a width of 100px and height of 100px. so for example text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE text text text text text text text text text FLOATED HERE now the sample text above can be 1 line, or 100 lines. anyone have any ideas? i've been hammering away at this too long Thanks. Hi Guys, Ive got a serious'ish error on a site im responsible for and with it being the period between christmas and new years I cant find anyone to help me. So im coming asking for help with an IE6 error which is occuring on http://social.eyeforpharma.com/ It appears fine in every browser apart from IE6. IE7, FF, Safari etc work fine. With no decent debug tools for IE6 available im stuck. Help REALLY appreciated. Kevin. Edit - The error gets worse when you go to view an article. Having one last problem before the site goes beta live... I have rounded divs, and inside is a floated left menu element. If something in the menu expands the round corners pop out of place rather then shift down. Im not sure what to chage. The site is: adventurevalley.ca/jason/programs/prgSwim.cfm If you mouse over the birthday parties link you will see what I mean (IE7 issue). Thanks a mill! I have a section of 3 divs, 1 floated to the left, one to the right and one in the middle. IE 7 & Firefox are fine however in IE 6 it seems to display the left and right columns as a block pushing the middle column down to the bottom. see screenshot, the image is the middle div while the white side parts are the left and right columns. My code is as follows: CSS Code: Original - CSS Code #headerLeft { float: left; background-image: url('/media/images/040708_05.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #headerRight { float: right; background-image: url('/media/images/040708_07.jpg'); background-repeat: no-repeat; width: 20px; height: 323px; } #flashMovie { background-color: #FFFFFF; margin-left: 20px; margin-right: 20px; width: 730px; }
hello. i am making a small, rough bar graph on the left side of my page. when i try it, the bar ends up going to a new line. what i'd like to do is have a colored div fill up 80% or 100% of the rest of the space to the right of the key. here is the code: Code:
<div class="bar_graph">
<div class="key">signed: 8,000</div>
<div class="bar signed" style="width: 80%"> </div>
</div>
...
.signatures {
margin-top: 20px;
}
.signatures .bar_graph {
overflow: auto;
margin-top: 2px;
}
.signatures .key {
float: left;
font-size: 8px;
text-align: right;
width: 40px;
}
.signatures .bar {
float: left;
height: 17px;
}
.signatures .signed {
background: #f3b400;
}
.signatures .goal {
width: 100%;
background: #e58728;
}
|
|||||||