I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick example:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
Related
When I set margin-right: 50px; I do not see any effect, yet when I replace the margin-right: 50px; with margin-left: 50px; or margin-top: 50px; I do see an effect. Here is the code with margin-right...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Max Pietsch homepage</title>
<style type="text/css">
.me {
margin-right: 20px;
}
#pic_of_me {
width: 200px;
}
</style>
</head>
<body>
<div class="me">
<img id="pic_of_me" src="me.jpg" alt="A picture of me">
</div>
</body>
Html elements are per default always alligned at the top left corner of their parent element.
Your .me is thus placed in the top left corner of the body element.
If you add a margin-top or margin-left your .me "pushes" itself away from this corner (this is why you see it moving) .
If you add a margin-right or margin-bottom other elements on the right/below your element would be "pushed" away.
As you don't have any elements on the right/below your element you can't see this effect.
Try it out!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#content {
margin-top: 100px;
margin-bottom: 100px;
}
.left { float: left; }
.middle { margin-left:511px; float: none; }
.right { float: right; width: 115px; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>css test</title>
</head>
<body>
<div class="top">I have a dream</div>
<div id="content">
<div class="left">I am left</div>
<div class="middle">I am middle</div>
<div class="right">I am right</div>
</div>
<div id="footer"> I am in the footer</div>
</body>
</html>
Above is my html source code.
It displayed in the browser like below.
My question is why "I am right" is below of "I am middle". I think they should have the same height. How can I improve my css style. Thanks.
Here is the your corrected Fiddle link. Following is your corrected CSS
.middle { margin-left:511px; float: left; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding:15px 15px 15px 0;
}
Add float: left; to your .middle class instead of float:none;
div is a block element and i.e. its takes the full width, for making it to work as you mentioned add float:left; to the middle class.
Output -
Try using display: inline-block to your class="left, middle, right".
Problems With float
The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it.
Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.
To learn more about inline-block refer Robert's Page.
JSFiddle for reference.
I am having an issue with div position. My website for reference is;
http://konzine.com
The issue I am having is tough to explain. I have a wrapper div of 1000px that is divided into two sections; one being 350px and the other being 650px. The wrapper is meant to be centered on the page, and have the left and right side correspond to that center. I would need the divs to stretch the width and length of the page to cover the sides in their corresponding color.
Is this possible?
Quick Edit;
I drew a picture to better illustrate my issue:
http://i.stack.imgur.com/UsRJG.jpg
The red line would represent the middle of the page, the entire black outline would be the wrapper div and the inner 2 separate colors are the 2 divs inside. I need them to maintain there center position on the page, but also be able to come out to fill the page.
Your reference site simply uses a centered background image repeated vertically which consists of the two colours.
In it's case the image is 3300px wide and so I had to stretch my browser over both monitors to see it's flaw. If you're ok with assuming that most people won't try and stretch it beyond the width of your image (technically you could make it as large as you like) then that might be the simplest way to do it.
The relevant css from the reference site is
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
The rest of the site would just sit in the wrapper as normal.
You can horizontally-center the wrapper by settings its left and right margins to auto. For example, the following would horizontally center a div element with ID as wrapper.
div#wrapper {
margin-left: auto;
margin-right: auto;
}
A complete example:
<!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>
<title>test</title>
<style type="text/css">
div#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border: 1px solid gray;
}
div#left {
float: left;
width: 50%;
background: #bbccdd;
}
div#right {
float: right;
width: 50%;
background: #ddeeff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
foo<br />
foo<br />
foo<br />
foo<br />
</div>
<div id="right">
bar<br />
bar<br />
bar<br />
bar<br />
</div>
</div>
</body>
</html>
Note that when you use float in a div element, the containment of the container div breaks. That is fixed with overflow: hidden. This fix works for modern browsers. In case you want to fix this for IE6 as well, there is a clumsy fix which I've documented here: http://notes.susam.in/2011/06/float-containment.html
I'd like to create a div that has the same width as the text's length inside it.
I can do it without problem when the div is inside a DOM element that has enough width to fit the text in.
But when I put my text holder div inside another div that is not wide enough the text will be fractioned into lines even if I set the text holder div's max height and the container div's overflow to visible.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body{
background: #c0c0c0;
}
#wrapper{
margin: auto;
width: 200px;
height: 300px;
border: 1px solid yellow;
overflow: visible;
}
.text{
display: inline;
min-width: 200px;
max-height: 19px;
line-height: 19px;
font-size: 19px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</div>
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</body>
</html>
Here's a picture of that:
http://i36.tinypic.com/331ix53.png
I'd like the text inside the "wrapper" DOM element to be in ONE line like the text outside it (and of course to be overflowed)
You can do this by adding the CSS white-space property to your .text class:
.text{
white-space: nowrap;
/* other css declarations */
}
In action here.
I am trying to get an image to stretch out a div element in my new Tumblr blog theme.
Currently my photo div is sizing to the full width of its parent container. The problem I have is that I also have a captions div below the photo and if the photo is not the full width of its containing div I dont want the captions to spill past the edges of the photo.
The Problem !
This is what I am after:
alt text http://dl.getdropbox.com/u/973862/problem.jpg
Here is a drawing !
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Brant Winter">
<!-- Date: 2009-04-26 -->
</head>
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div class="container">
<div class="photo">
<img src="http://8.media.tumblr.com/mFYIJY2I7mpit79h73TC9xa7o1_400.jpg">
<div class="caption">Sausage dog airtime</div>
</div>
</div>
</body>
</html>
And this is what it looks like in my browser:
alt text http://dl.getdropbox.com/u/973862/Picture%202.png
This is what it looks like
The container div should be centered, the image should be centered within that and the caption text should not be allowed to go past the edges of the photo ( if there was enough text to do so )
Not sure if I am making any sense, but any help would be appreciated - I have spent hours on this today !!!
You mean like centering the photo?
.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <---
}
I think the easiest solution would just to be to fix the width of the container. Why is it 520px?
If it has to be 520px, though, then just center the stuff in the container and add auto-margins for the caption:
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
.caption {
max-width: 333px;
margin-left: auto;
margin-right: auto;
}
</style>
The max-width property, in particular, will prevent the caption from spilling past the edges of the photo.
If you don't mind using jQuery to resize it, you could try something like this:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".container").css("width", $(".photo img").css("width"));
});
</script>
That finds the width of the image inside the div (note the space between ".photo" and "img") with class "photo" and applies that width to the div with class "container". Just to be safe, you'll probably want to use IDs if possible, but this will work as long as the class names are unique.