I developed a website that contain some images , some of them are main images with about 3000px in width .
I'm using this to make the image fill the whole width and it's working with me during testing but the client said that it's not taking the whole width and sent me screenshots :
img{
display:block;
max-width:100%
height:auto;
}
Here is the demo link of the website:
http://www.zhtml.aba.ae
How to make it work?
He was browsing it from Chrome Browser on MAC
You only defined the maximum width, which is 100% of the page. You should try to replace "max-width" for just "width".
img{
display:block;
width:100%
height:auto;
}
See the differences by changing your browser: You'll understand the difference.
<style>
div.e1 {
width:400px;
margin: auto;
border: 5px solid #73AD21;
}
div.e2 {
max-width:400px;
margin: auto;
border: 5px solid #73AD21;
}
</style>
<div class="e1">width: 400px;</div>
<br>
<div class="e2">max-width: 400px;</div>
<p>blablabla</p>
Related
I'm trying to create a banner featuring some services I provide, the image below is exactly how I want it (desktop view) but when I resize the browser the text gets pushed underneath the image and is hidden by over elements of the page overlapping.
How do I make it so the image and text resize with the browser and looks exactly the same as it does on desktop?
I created an example on here http://jsfiddle.net/b7a8cvLb/4/
And my CSS
.info_banner {
background-color:white;
max-width:1166px;
margin:0 auto;
padding: 5px 5px 0px 5px;
text-align:center;
font-size:1em;
height:65px;
}
.info_block {
display:inline-block;
width:20%;
border-right-style:solid;
border-right-width:2px;
border-right-color:#F8F8F8;
height:65px;
vertical-align: text-top;
}
.info_block img {
max-width:100% !important;
height:auto;
display:inline-block;
float:left;
}
.info_block h5 {
height:100%;
width:100%;
margin:0;
}
If needs be I can set the images to display:none at a certain browser width but I'd prefer to avoid doing this.
I can see your images are already scaling down, if you want to scale down your text too you'll need to step it down using media queries.
Hope that helps!
I am trying to place an image in my body, using a div id with a background image. I don't understand why the image isn't showing up when i preview in google chrome?
I am using almost the same code on my index page and it's working fine there.
HTML:
<body>
<div id="body">
<div id="rainforestimage"></div>
</div>
</body>
CSS:
#body {
width:1024px;
height:auto;
background-image:url(../images/background2.png);
margin:0 auto;
background-repeat:no-repeat;
overflow:hidden;
}
#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
}
Your div#body needs to have a height set, try setting a height and you will see your background image.
Also your HTML page and the folder images should be siblings (same level) in the same directory.
EDIT:
If you still don't see background2.png, it's because rainforest.png is covering it(on top of it) because of the other styles you have set:
position:absolute;
z-index:1;
Div with position absolute ideally takes 0 height. you need to set height either 100%, or top:0 & bottom:0 .
Try using following CSS code.
#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
height:100%;
top:0;
bottom:0;
}
You were not able to see it because the height wasn't set.
Added in CSS
#body {
width:1024px;
height:200px;
}
https://jsfiddle.net/neerajsonar/72wr5n7u/
The image overlaps, you can set the margin according to your image.
You are keeping same width for #body and #rainforestimage,and for #body you are having height:auto,if you have only one div #rainforestimage under #body then ideally body width will be same as of #rainforestimage div,so no point you can see the background image.
so if you need increese the height of the div #body and reduce the width of your #rainforestimage,so that you can see the background image.
this will work for sure.
If you are facing any layering issues,Use z-index,make sure that the element is having position property.
Try adding min-height to div #body. actually #body won't have height because the element #rainforestimage you placed inside is positioned absolute.
#body {
min-height:364px;
}
I have create a mobile site template (320x640) size and the problem is that the background is a picture and the input boxes is absolute position (related to the background picture). I want to make it 100% width and 100% height but then the absolute input positions wouldn't be related to the picture anymore.
I want to know if there is a quick css fix so the full screen of the user would be 320x640 (y scroll is ok) but 320px width is 100% of any user that will access the page.
Here is the jsfiddle demo :
http://jsfiddle.net/t7mcn0me/
html :
<div id=mobile>
<input style="position:absolute;top:10px;left:10px;">
</div>
css:
#mobile
{
background:url('http://2.bp.blogspot.com/-oRxMu07qqUk/TqiWzl3hAaI/AAAAAAAACWc/EB6lFVu2PQI/s1600/greenlake__%252528www.mobile16.net%252529.jpg');
margin:0 auto;
width:320px;
height:640px;
position: relative;
border:1px solid grey;
}
Thanks !
try this
http://jsfiddle.net/t7mcn0me/2/
html
<div id=mobile>
<input style=" position:absolute;top:10px; width: 100vw!important;">
css
#mobile
{
background:url('http://2.bp.blogspot.com/-oRxMu07qqUk/TqiWzl3hAaI/AAAAAAAACWc/EB6lFVu2PQI/s1600/greenlake__%252528www.mobile16.net%252529.jpg');
margin:0 auto;
width:320px;
width: 100vw!important;
height:640px;
position: relative;
border:1px solid grey;background-repeat:no-repeat;background-position:center;
}
I am building a web app with jQuery Mobile.
Almost every page of the app has a single box, containing the pages' content; for the moment, these boxes have a fixed height.
What I would like is for the boxes to rescale, such that each one is the right size for its specific content. Anyone have an idea how to do this?
My CSS currently looks like this:
.ui-grid-g-login {
overflow: hidden;
background-color:#FFFFFF;
margin-right: 10px;
margin-left: 10px;
height: 350px;
padding-top:20px;
padding-bottom:20px;
padding-right:30px;
padding-left:30px;
border:2px solid;
border-radius:20px;
}
The class is assigned to a single div:
<div class="ui-grid-g-login"> content </div>
check this:
min-height:350px;
height:auto;
I just wonder because I know that my page goes haywire if you try to make it too small. Facebook, StackOverflow and almost any other well programmed site calmly adjusts the page format until they run out of 'breathing room' at which point the page is just 'eaten' by the browser's borders. How do these well programmed sites format themselves so nicely as to cope with window resizing? Are there CSS properties specifically made to help with this?
You can center your site by using a main "wrapper" div.
<div id="wrapper">
//all you content here
</div>
Then in you css your set the "wrapper" as follows
#wrapper{
width:900px //or whatever
margin: 0 auto; }
This gives it a width and a flexible margin. When the window is resized too small, it just "eats" it, as you say.
The key here is a flexible layout, either make the margin flexible (as I outlined above) or make the content flexible.
Another way to do this is to make almost everything flexible, something like this..
#wrapper{
border:1px solid red;
width:50%;
min-width:300px;
margin:0 25%;
height:50px; //for display only
}
http://jsfiddle.net/jasongennaro/6FCjZ/1/
You should look into "Fluid" CSS designs. These are CSS rules that are designed to manage a pages width.
A common way of doing this is to use max-width and min-width to manage the over all width of the website.
For example:
Click here to see a live example.
<html>
<head>
<title>Width Test</title>
<style>
#main-content {
background-color: #EEF;
border: 1px solid #003;
max-width: 45em;
min-width: 20em;
padding: 1em;
margin: 0 auto; /* center */
}
.box {
border: 1px solid #000;
background: #363;
color: #fff;
padding: .25em;
}
.left {
float: left;
margin: .5em 1em .5em 0;
}
.right {
float: right;
margin: .5em 0 .5em 1em;
}
</style>
</head>
<body>
<div id="main-content">
<p>Resize Me...</p>
<span class="box left">left</span>
<span class="box right">right</span>
<p>Fluid Layout</p>
</div>
</body>
</html>
The key element here is the styling on #main-content. The rest of that is so you can see it in action.
Both those websites are a fixed width but with expanding header backgrounds. There's nothing special going on.
The header (blue/grey bar) has a 100% width with a fixed width container inside that is centered.
Defining a width of pixels to a div usually gives it a fixed layout, while using percentage gives a fluid layout.
For kicks, check out the 960.gs, which uses a fixed layout, and is great for avoiding cross-browser issues:
http://960.gs/
There's also the fluid version of the 960.gs:
http://www.designinfluences.com/fluid960gs/