|
CSS - Background Image And Float
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. Similar TutorialsHi 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. 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 http://www.mrossana.com/storage/bel.../template1.html In Firefox, the background of #topmenu2 and 3 extend the entire width of the surrounding div, which is what I want it to do. In Internet Explorer, the floated #logo_wrapper div stops the background of #topmenu2 and 3. Is there any way I can get this to work in Internet Explorer the way it does in Firefox? Essentially I'm creating a 'drop-up' menu without javascript. Here is my test page: http://38.99.165.179/kalle/cssmenu/index3.html PROBLEM: I am using 'float: left' to arrange my main menu items horizontally. With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears. Why is this happening? This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left. Here is my code: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #555555;
color: #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#top {
width: 100%;
height: 80%;
text-align: center;
}
/* MENU BAR */
#menu_container {
width: 100%;
margin: 0 auto;
/* doesn't work!!! */
background-color: #CC6666;
}
#menu {
font-size: 16px;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
}
#menu ul {
}
#menu li {
position: relative;
display: block;
height: 1.2em;
margin-right: 50px;
text-align: left;
/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?
float: left;
/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */
}
#menu li ul {
background-color: #BBBBBB;
position: absolute;
bottom: 1.2em;
display: none;
list-style: none;
width: 110px;
padding: 0px;
}
#menu li:hover ul {
display: block;
white-space: nowrap;
}
#menu li:hover ul li {
display: block;
}
#menu li:hover ul li:hover {
background-color: #777777;
}
/* END - menu bar */
#bottom {
margin-top: 70px;
height: 150px;
text-align: center;
clear: both;
padding-top: 2px;
background-color: #222222;
}
</style>
</head>
<body>
<div id="top">
content
</div>
<div id="menu_container">
<ul id="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Anything</a></li>
<li><a href="#">Needed</a></li>
<li><a href="#">Here?</a></li>
</ul>
</li>
<li><a href="#">Something 1</a>
<ul>
<li><a href="#">Imagine</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Possibilities</a></li>
<li><a href="#">of Magic!</a></li>
</ul>
</li>
<li><a href="#">Something 2</a>
<ul>
<li><a href="#">Taste</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Sensation</a></li>
<li><a href="#">of the Bubbles</a></li>
<li><a href="#">on your Tongue!</a></li>
</ul>
</li>
<li><a href="#">Something 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="bottom">
content
</div>
</body>
</html>
When I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! Can anyone please tell me why this code isnt working? Code:
<html>
<head>
<style type="text/css">
p.leftfloat {img-float: left}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p class="leftfloat" >
<img src="logocss.gif" width="95" height="84" />
</p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</body>
</html>
Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hello, I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div. I have tried a couple of things, here is the page I'm working on and this is the css file This hasn't been tested on Windows, so I have no idea how it looks. It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack. The current setup of the page is this: HTML: Code: <div id="content"> <div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div> <div class="image1"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="image2"> <img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p> </div> <div class="another3"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla consectetuer.</p> </div> CSS: Code: img.left {
float: left;
border: solid 1px black;
padding: 10px;
margin-right:10px;
margin: bottom: 10px;
}
img.right {
float: right;
border: solid 1px black;
padding: 10px;
margin-left:10px;
}
.image1 {
border: red 1px solid;
padding : 0px;
}
.image2 {
border: orange 1px solid;
padding : 0px;
}
.image3 {
border: blue 1px solid;
padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.another {display: inline-table;}
/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */
/* .clearer {
clear: both;
} */
p.red {
color: red;
}
p.orange {
color: orange;
}
p.blue {
color: blue;
}
Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either. Is there a solution? I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here. PseudoCSS: Code: #topdiv{
width:960px;
}
#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}
.previous a{
background: url('images/previous.png') no-repeat;
}
.previous a:hover {
background-position:0 -62px;
}
PseudoHTML: Code: <div id="topdiv"><a href="" class="previous">Link</a></div> <div id="bottomdiv">Content</div> When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements? I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. This is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? 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 Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! |
|||||||