I am working on an assignment that is giving me grief. I am supposed to make a red box that matches the color of an image. This box is supposed to be centered on the page. The box is supposed to be 80% of the page. The image is supposed to be inside the box. The image is supposed to be 80% width of the BOX it sits in. The image is to be centered vertically. I am trying to do this using CSS. Here is my code. What am I missing?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="box">
<ul>
<li>
<a href="http://blackhawks.nhl.com/">
<img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg">
</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
.box {
width: 80%;
background-color: #dd111;
margin-left: auto;
margin-right: auto;
}
.box ul {
margin-left:auto;
margin-right:auto;
}
.box ul li {
width: 80%;
vertical-align: middle;
}
If the list isn't necessary you could do this. If you want to use a list you need to set the ul padding and margin to 0.
<style type="text/css">
.box {
width:80%;
margin:0 auto 0 auto;
}
img {
width:80%;
margin:0 auto 0 auto;
display:block;
}
.box-stripe {
width:80%;
height:15px;
margin:0 auto 0 auto;
}
</style>
<body>
<div class="box">
<div class="box-stripe"></div>
<img src="yourimage.png" alt="" />
<div class="box-stripe"></div>
</div>
</body>
Or if you prefer the list you could do something like this. It should get you close anyways.
<style type="text/javascript">
.box {
width:80%;
margin:0 auto 0 auto;
}
.box ul {
width:80%;
margin:0 auto 0 auto;
padding:0px;
display:block; /*may not need to do this but I don't think a UL is a block element */
}
.box ul .box-stripe {
width:100%;
display:block;
height:15px;
padding:0px;
margin:0px;
}
.box ul .img {
width:100%;
display:block;
padding:0px;
margin:0px;
}
</style>
<body>
<div class="box">
<ul>
<li>class="box-stripe"></li>
<li class="img"><img src="yourimage.png" alt="" /></li>
<li class="box-stripe"></li>
</ul>
</div>
</body>
Every browser treats HTML elements differently in terms of padding, margin, line height, ect. This is why I recommend a CSS reset. And most UL's have some padding by default.
I'm not sure if you need the ul and li for some reason, but the main thing you are missing is that the img is not given a width.
If an img does not have a width it will use the native width of the image and stretch its container. In the case of your current html (with the ul) you would need to give the image a width of 100% since the li is already set to 80%.
Try turning on borders (or use Firebug or Chrome developer tools to inspect your elements). With borders on I think it becomes a lot more obvious why things are not positioned as you think they are.
http://jsfiddle.net/2vWY3/1/
This looks like it, although I'm not sure if the box needs to be 80 or 100% of the height of the page.
http://jsfiddle.net/GolezTrol/ZLUGg/2/
I changed the box color and the image size for testing/demonstration. Makes it easier to develop too.
Related
I've been trying to make a page in which there will be one image that needs to be the same height as the viewport while the width would stretch accordingly. The img needs to be centered.
Here's the tricky part (for me anyway): I would need to place a div at the bottom of that image which would have some buttons. I thought that it would be best if I can set the width of that div to be the same as the width of the img so that whenever the screen size changes, everything would stay at the same position.
Here is what I have so far in the HTML:
<div id="main_container">
<div class="exercises">
<img class="bg" src="image.png"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
So: height is always == viewport, width is variable.
I thought about placing a div as parent to the img, but I would still need to make that div somehow fit the size of its child (the image).
I've read some posts here, but none were too related to my issue.
edit:
I'm sorry if I wasn't clear enough. I've made an illustration of what the issue is. I hope this helps:
You can try this:
#main_container {
width:600px;
}
.exercises {
width: 100%;
}
.exercises img.bg {
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.footer .buttons {
width: 100%;
}
.buttons {
padding:0;
margin:0;
}
.buttons li {
width:100%;
height:50px;
border:1px solid #000;
list-style:none;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Obviously, edit the image URL to your own :)
Consider it a start. Change size of image in inspector and see what happens.
.exercises{background: silver; display: inline-block;}
img{ border: 1px solid black;}
ul{
margin: 0;
padding: 0;}
li{
float: left;
width: 33%;
background: #ccff00;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://www.techwibe.com/wp-content/uploads/2015/04/chrome_medium.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Try this one may help
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
<style>
#main_container{
/*Make the container follow the width of body*/
position:relative;
width:100%;
}
#exercises{
/*Make the this div follow the width of #main_container*/
width:100%;
}
.bg{
/*Make the the image follow the width of #exercises*/
width:100%;
height:auto;
}
.buttons{
/*modifying ul to the bottom position*/
position:absolute;
width:100%;
bottom:0;
}
.buttons li{
/*Style the button whatever you want*/
list-style:none;
margin:10px 2%;
padding:8px 12px;
background:orange;
width:20%;
color:white;
float:left;
}
</style>
Run code snippet to see the result
I apologize again if I've set the question in a vague manner. It was a bit complicated (for me) to formulate it. And thanks to the people who tried to help me with their solutions.
However, I decided to got with JQuery on this one and set the sizes dynamically.
This is the code with which I managed to set the width of the parent div the same size as the width of it's child img (after the img's height has been rescaled relative to the window height):
var imageResize = function () {
var screenHeight = $(window).height();
$('.bg').height(screenHeight);
var resizedImgWidth = $('.bg').width();
$('.exercises').width(resizedImgWidth);
}
$(window).resize(imageResize);
$(window).load(imageResize);
As always, anyone is welcome to give their two cents regarding my solution. (perhaps its very heavy and could be better optimized. I'm new at JS, so feel free :))
I have images that are centered within their parent divs and I would only like for the images to be clickable links instead of the whole divs themselves. I'm not quite sure what the problem is, so any help would be greatly appreciated.
Here is my code:
HTML:
<div class="banner_column">
<a href="#">
<img src="images/image1.png" alt="Image 1" >
</a>
<h1>Check Out Link Above</h1>
<p>Some text here</p>
</div>
CSS:
.banner_column {
width:25%;
display:inline-block;
float:left;
margin-bottom:60px;
}
.banner_column img {
display:block;
width:300px;
height:450px;
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
}
The problem is the whole column div is a clickable link instead of just the centered image itself.
target the <a> tag not the <img> tag. also small note remember to put /> at the end of your <img> tag.
.banner_column {
width:25%;
display:inline-block;
float:left;
}
.banner_column a{
display:inline-block;
margin:30px auto 60px auto;
width:300px;
height:450px;
}
.banner_column img {
width:100%;
/*don't worry about height it will auto size*/
}
<div class="banner_column">
<a href="#">
<img src="images/image1.png" alt="Image 1" />
</a>
<h1>Check Out Link Above</h1>
<p>Some text here</p>
</div>
display:block will take up the full width of the parent element every time. if you want it to be inline then use display:inline if you want to have padding and margin and force the element in a block like element to be inline use display:inline-block;.
Perhaps you may style your a to center instead of image, then you will not have left and right margins that triggers link.
.banner_column a {
display:block;
width:300px;
height:450px;
position:relative;
margin:30px auto 0 auto;
}
Edit : Use Sergiy's solution, add in the style for the a tag.
.banner_column a {
display:block;
width:300px;
height:450px;
position:relative;
margin:30px auto 0 auto;
}
.banner_column {
width: 25%;
display: inline-block;
float: left;
margin-bottom: 60px;
}
.banner_column img {
display: block;
width: 300px;
height: 450px;
position: relative;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
<div class="banner_column">
<a href="#">
<img src="image.png" alt="Image 1"/>
</a>
<h1>Check Out Link Above</h1>
<p>Some text here</p>
</div>
https://jsfiddle.net/d3euvpr9/
< Obsolete >
I just tried it and your code works perfectly fine when run on chrome. Do you actually have a fiddle where it fails? Because as BlackHatSamurai commented too, this code works fine. Try closing the img tag maybe?
< /Obsolete >
I had a similar problem and fixed it with the following CSS targeted at the problem DIV :
#projects {pointer-events: none;} /* prevents the whole div from containing links */
#projects img {pointer-events: all;} /* restores links on just images within the div */
<img href="your href id" src="images/image1.png" alt="Image 1" > and remove the img in <a>
I am trying to take one image, place it on the screen as a background, and then put a company logo on top of it so it all looks like one image. I have looked at other people's examples, and those give me the background where I want it, but the company logo that I want on top of the background is displayed beside the background instead of on top. Nothing I try seems to be working. Can someone please help?
HTML:
<div id="Background">
<img src="images/background/background.png">
</div>
CSS:
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
Here's how I'd do it. You'll need to give the surrounding div the dimentions of the background image:
HTML
<div class="background">
<img class="logo" src="http://placehold.it/150x75/FF0000/FFF&text=Logo" alt="Company Name" />
</div>
CSS
.background
{
position:relative; /*Any child elements can now be positioned relative to this element*/
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px; /*Width of background image*/
height:150px; /*Height of background image*/
}
Example: http://jsfiddle.net/8RC7U/
There are many different ways you can then position the logo:
Margins
.logo
{
margin-top: 10px;
margin-left: 10px;
}
http://jsfiddle.net/8RC7U/1/
Absolute Positioning
.logo
{
position:absolute;
top: 15px;
right:30px;
}
http://jsfiddle.net/8RC7U/2/
and that's just for starters.
On a final note the following may be more accesible for screen readers and better for SEO:
HTML - Include the company name as text
<div class="background">
<h2 class="logo">Company Name</h2>
</div>
CSS - Shift the text off screen and use background image again
.background
{
position:relative;
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px;
height:150px;
}
.logo
{
text-indent:-9999px; /*Shift the text off screen*/
width:150px; /*Width Of logo*/
height:75px; /*Height of logo*/
background-image:url(http://placehold.it/150x75/FF0000/FFF&text=Logo);
margin: 10px 0 0 10px; /*Positioning top right bottom left*/
display:inline-block; /*Set to inline block so margins apply inside parent*/
}
Example: http://jsfiddle.net/8RC7U/3/
Use the "background-image" CSS attribute on a block-level element (, etc.) for the background PNG, then place the PNG buttons inside that block element.
You can try Like this:
CSS
<style type="text/css">
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
</style>
HTML
<div id="Background">
<img src="images/background/background.png" />
</div>
If you have doubt let me know..
One of the simple solution is use
z-index
make your logo's Z-index graterThan background Z-index e.g()
#background
{
z-index:9
}
#logo
{
z-index:99
}
This would help you accomplished what you want.
Hope that helps
FIDDLE
HTML
<div>
<img src="http://placehold.it/350x150" class="img1">
<img src="http://placehold.it/150x100" class="img2">
<div>
CSS
div {
position:relative;
}
.img1 {
position:absolute;
z-index:1;
top:0; left:0;
}
.img2 {
position:absolute;
z-index:2;
top:24px; left:100px;
border: solid 2px;
}
if you want to use only two images the best way to do it
have the div with the background, then load a image in side the div.
<div id="Background">
<img src="images/background/background.png">
</div>
#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
I am trying to make a simple page: two centered thumbnails images. Each one links to its original image. Here is the code (I've removed some part for clarity):
<!DOCTYPE html>
<html>
<head>
<style>
.column1, .column2 {
width:50%;
float:left;
}
div img {
display:block;
margin:20px auto;
width:300px;
}
</style>
</head>
<body>
<div class="column1">
<a href="#">
<img src="maelstrom_mini.jpg" />
</a>
</div>
<div class="column2">
<a href="#">
<img src="maelstrom_mini.jpg" />
</a>
</div>
</body>
</html>
The issue is that very subtle: Each image is only 300px wide, but the anchor boxes are wider that the image it is supposed to contain. It makes the image "clickable" above its surface. I can't figure out how to tell the anchor not to spread to all its column.
When I remove the display:block attribute in the style sheet, then it solves that issue, but my pictures are no longer centered in regards to the containing column.
What's the correct solution to have both correct presentation?
I've fixed your problem,
I've added a wrapping div around the a and img tag setting that width to 300px, then setting the images width to 100% like so,
<!DOCTYPE html>
<html>
<head>
<style>
.column1, .column2 {
width:49%;
float:left;
border: 1px solid red;
}
div img {
width:100%;
}
#img-wrap{
width:300px;
margin:20px auto;
display: block;
}
</style>
</head>
<body>
<div class="column1">
<div id="img-wrap">
<a href="#">
<img src="" />
</a>
</div>
</div>
<div class="column2">
<div id="img-wrap">
<a href="#">
<img src="" />
</a>
</div>
</div>
</body>
</html>
which can be found to work here > http://jsfiddle.net/3se2V/3/
I believe the issue is the margin:20px auto; on the img:
Change this:
div img {
display:block;
margin:20px auto;
width:300px;
}
to this:
div { margin: 20px 0; }
div img {
display:block;
margin:0 auto;
width:300px;
}
The only time that I can replicate the issue is if I add display:block to all a elements. So, I suggest adding this to your css:
div a {
display:inline;
}
That might resolve your issue.
I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.
Thanks
<div id=”page”>
<div id=”container”>
</div>
<div id=”main”>
<div id=”content”>
</div>
<div id=”side”>
</div>
</div>
</div>
This is my CSS code
#page
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}
#side
{
width:250px;
margin:5px;
float:left;
}
The reason you lose the background of your div is because it only contains floating content, which causes it to have no height. Once something "clears" the floats, it will occupy space again. Try adding this after your main div (you can have the style in the style sheet instead):
<div style="clear: both;"></div>
You need to contain your floats. When you float an element, it takes it out of the document flow, so any parent container will just collapse if you don't tell it to contain the child floats.
To contain child floats, the easiest is to apply overflow: auto.
So try this:
#page {
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
overflow: auto;
}
What I believe is happening is when you assign something a float, its "height" doesn't truly get represented to its parent element. Your page div now thinks that it has a height of nothing because of the floating elements within. Add a <br style="clear:both;height:1px" /> after you "side" div. Adding this will "clear" the floated div so their height is not fully represented.
This may not be your case, however I ran into this issue a few times myself and this usually fixed it.
<html><head>
<style type="text/css">
#page
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}
#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}
#content
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}
#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>
<body>
<div id="page">
<div id="container">
</div>
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
</body>
</html>