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.
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!
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
Here is a link of what I currently have for my skeleton design.
I'm new to using divs, I always used table but moving towards divs.
But anyways, my question would be...How do I align my content of each div properly.
I want the navigation to be centered along with the main content.
Index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chomas Tool</title>
<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->
<div id="navbox">Home | About | Projects | Contact</div>
<div id="content">TEST</div>
<div id="footer">Copyright © Chomas Tool</div>
</div><!--Close_wrapper-->
</body>
Main.css
body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
The reason you are getting strange results with that layout is that your #logo div is set to a height of 400px. That is pushing everything else over to the right.
If you remove the height: 400px on the #logo div, and then add this to your styles:
img {vertical-align: bottom;}
everything will appear as you'd expect.
There are a few issues with your code.
The reason your Nav div, Content div and Footer divs are aligning improperly is because you have your #logo div set to a 400px height and floated, but you aren't clearing your float. Unfortunately you can't properly clear that div because you have a height on header of 100px, which is less than your 400px div that is nested inside the header.
For the purpose of teaching you, I'll assume your logo should NOT be 400px high, so I'll set it to be equal to the header height of 100px.
#logo {
height: 100px;
width: 300px;
float: left;
}
While we are on the concept of height, it's acceptable to have a fixed height on your header, as it's a div that shouldn't be super tall or allowed to change (generally speaking there are exceptions). That said... Your content div really shouldn't have a height, I can see you did it here to simulate that you had more content, instead let's just add some content there.
So now we are here: http://jsfiddle.net/dkCZ6/
As you can see the navigation is centered nicely, your content is where it should be as well as the footer.
Let's center the footer to make it nice looking... I added text-align: center;
http://jsfiddle.net/dkCZ6/1/
#footer {
background-color:grey;
width: 100%;
height: 20px;
text-align: center;
}
Noticed that white space that was created between the nav and content area? That's from adding the paragraph around the content stuff. Let's reset all padding and margin by adding * { margin: 0; padding: 0; } to the top of our CSS. (you should use a proper Reset CSS Stylesheet or use a Normalize CSS Sheet. These reset stylesheets help standardize elements across the different browsers, and also gives you a blank slate from which to develope from, without having to worry about weird things occuring, like that white space that we fixed.
Here is the best answer I have:
text-align: center
But base on that code you have then I have done:
**margin: 0 auto**
http://jsfiddle.net/Riskbreaker/WASEH/5/
Just to chow you I did this only on the nav:
Added:
<div class="inner">Home | About | Projects | Contact</div>
and on CSS:
.inner {margin: 0 auto; width: 50%;}
Classes are always good to use when you want to do multiple calls of the same to minimize code. Get in the habit of doing classes.
Lastly I suggest learning HTML5...Divs are great but you can simplified your code with html5
..
..Its simple to learn :)
Add
<div style="clear:both;"></div>
after you close the header
Your image style is all wrong hence why everything will look in the wrong position.
You should also be aware that you can use
margin: 0 auto;
Rather than
margin-right: auto;
margin-left: auto;
Consider using list elements for your navigation rather than just static text.
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>
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.