For some reason the code below works once, but if I change the height values for .Image, it stops working. The test image overflows instead of being hidden. Then the containing div won't resize no matter how often I try to change height.
.Image{
background-color:red;
height:400px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="Image">
<img "src="images/test.jpg" alt="test">
</div>
</div>
</body>
</html>
the reason why is doesn't work is because you have an error in your code at img
<img "src="images/test.jpg" alt="test">
your error is ->
<img "src="...">
it should be ->
<img src="...">
with out the extra quote
so your code should look like this
.Image{
background-color:red;
height:400px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="Image">
<img src="images/test.jpg" alt="test">
</div>
</div>
</body>
</html>
Related
I've got a website with images tot he left and right in their own divs, one with float:right and one with float:left.
I also have an image that travels across the screen with the marquee tag.
Is there any way to get the marquee between the divs? So basically it would start at the left side of the right images and start to disappear on the right side of the left images.
If you don't get what I'm on about, here's an example page: http://benjiworld.ueuo.com/Example.html and as you can see, the marquee just appears underneath both divs, even when there's enough space for the marqueeing image between the divs.
This is my code for the test site:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:350px">
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<div style="float:right; width:350px" >
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<p style="text-align: center">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Can anybody help? I really don't know how to sort it out, I've tried putting the marquee in a div in the centre but it didn't work either.
you can use position:absolute as I did:
.left,.right,.center{
position:absolute;
top:0;
}
.left,.right{
width:200px;
height:300px;
background-color:orange;
}
.center{
left:200px;
right:200px;
}
.left{
left:0;
}
.right{
right:0;
}
<div class="right">right</div>
<div class="left">left</div>
<div class="center">
<marquee>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
</marquee>
</div>
here is the jsfiddle : http://jsfiddle.net/78pgca5o/
Just give a style as float:left to paragraph tag
Just like below
<p style="text-align: center;float:left">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Try this:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:50px">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<div style="float:right; width:50px" >
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<p style="text-align: center; position: absolute; z-index: -1; width: 100%">
<marquee><img src="http://benjiworld.ueuo.com/Hobnobs.jpg"></marquee>
</p>
I'm trying to make something like this. Any help will be greatly appreciated.
(can't paste the image due to 2 missing points of reputation ;) ) http://i.stack.imgur.com/p7xhr.jpg
I'm sorry I've given an impression like I don't know what I'm doing at all and I want someone else to do my work for me. I did try various solutions none of which seems to work.
on jfsfiddle it seems to work, but when I check on the actual site the top right image gets moved to another row
http://jsfiddle.net/37GAn/1/
html
<div>
<div class="image">
<img src="image.jpg" width="98" height="203"/>
</div>
<div class="image">
<img src="image.jpg" width="85" height="203"/>
</div>
<div class="clear"></div>
</div>
<div>
<div class="image">
<img src="image.jpg" width="130" height="210"/>
</div>
<div class="image">
<img src="image.jpg" width="69" height="197"/>
</div>
<div class="clear"></div>
</div>
css
.image {
float: left;
width: 100px;
margin-top:50px;
margin-left:280px;
}
This is just to give you a round-about idea.
You'll need your HTML as such:
<div id="contentHolder">
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
<div class="row">
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
<div>
<div class="image"></div>
<div class="textHolder">Some text here</div>
</div>
</div>
</div>
and CSS as such:
* {
margin:0;
padding:0;
}
#contentHolder {
background-color:Gray;
height:100%;
padding:40px 10px;
}
.row {
height:250px;
width:100%;
margin-bottom:30px;
}
.row > div {
display:inline-block;
width:48%;
height:inherit;
vertical-align:top;
}
.image {
background:white url(http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png) no-repeat 0px 0px scroll;
height:160px;
width:70%;
margin:20px auto;
border-radius:10px;
}
.textHolder {
color:White;
width:50%;
height:20px;
margin:0 auto;
}
This should work for you. This may still need some work as I have not tried to make it inch-perfect. That I'll leave it to you!!! :)
You can see that here:http://jsfiddle.net/a7zLW/
Hope this helps!!!
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.
I tried many "Display" param in CSS and seem none able to set a proper alignment, please help me to solve it.
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
Display will not set any allignment.
This may be what you need.
<style type="text/css">
.prev, .next, .status{float:left;}
</style>
try this:
<center>
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</center>
Can you modify the HTML? If so, add a container for the two anchors and the div like this
<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</div>
And use this CSS
.linkscontainer{
margin:0px auto;
min-width:50%;
}
.status{
display:inline;
}