A short question from a newbie designer...
Say I have a <div class="red"> folowed by a <div class="filler">.
If I use margin-left:10% on the first div and I use a background image on the second div (height=1px and width=300px) and I repeat it vertically and start it left: 10%, they won't align...
Why not?
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="test">
</div>
<div class="filler">
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
.test{
background-color: red;
width: 300px;
height: 300px;
margin-left: 10%;
}
.filler{
width:100%;
height: 300px;
background: url(../img/test.jpg) top left 10% repeat-y;
}
Maybe I'm missing something, but what?
Thanks a lot!
In the case of background images, using a percentage as a position has a special meaning.
It does not (as you might expect) align the left edge of the image at the percentage you give, but rather it aligns the percentage with the percentage.
Okay, that makes no sense in words!
Basically, it's like this:
0%:
[IMAGE ]
50%:
[ IMAGE ]
100%:
[ IMAGE]
Does that make more sense? The best way to fix this is to just add the margin-left:10% to the .filler instead of positioning the background.
Related
I've encountered a problem that I can't display full background image.
The code is below.
I think it can work,but it doesn't work.
The image displayed only based on line count.
Please tell me how to display full sized image.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
<!-- .tests {
background: url(contents01_left_bg.png);
background-position: center top;
background-attachment: fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
background-size: cover;
}
-->
</style>
</head>
<body>
<div class="tests">
a</br>
a
</div>
</body>
</html>
After rethinking your question, I believe the best approach is not to use a background image. If you place the image as regular content to a container, that container will expand to the full size of the image.
Then, you can create another container for the rest of the content and float that content over the image.
The result is the full sized image with other content above it and you don't have to worry about repeating images or aspect ratios.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#parent { border:1px solid black; }
.tests {
float:left;
}
</style>
</head>
<body>
<div id="parent">
<img src="http://findicons.com/files/icons/963/very_emotional_emoticons/128/128_33.png">
<div class="tests">
a<br>
a
</div>
</div>
<div>
<p>More content</p>
</div>
</body>
</html>
If you're looking for a full background image, with the whole image visible in the element, you need to make the element match the aspect ratio of the background image. Otherwise, the element will just be as tall/wide as the content inside of it. If you have the image dimensions, you can use padding or padding on a pseudo element of the parent to recreate the aspect ratio of the image, then the div will always be the same aspect ratio of the image, showing the whole thing instead of just what will fit based on the content.
To recreate the aspect ratio, divide the height of the image by the width (800 / 1200 in my example), multiply by 100 to get a % (66.6666666666%), and apply that as padding-bottom of the parent or a pseudo element of the parent.
body {
margin: 0;
}
div {
background: url('http://weknowyourdreams.com/images/monkey/monkey-04.jpg') 0 0 no-repeat / cover;
height: 0;
padding-bottom: 66.6667%;
color: white;
}
<div>
a<br>
a
</div>
Try using
img {
width: 100%;
max-width: 100%;
height: auto;
}
I have a large image file (3838x1049) generated from a dual screen screenshot and I need to create 2 HTML files with each file displaying one half of the image.
I was able to achieve that by using the background sprites and specifying the portion of the image I want to see.
The problem is that the image is displayed in its original size which is larger than a typical monitor resolution. I need it to resize automatically to fit the screen while preserving the aspect ratio.
Can anyone help ?
Here is my current code for displaying the right portion of the image:
<html>
<head>
<style>
img.home {
width: 1899px;
height: 1020px;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
Dont have Enough reputation to comment thats why i am putting it in here.
try adding the both styles in a main container then apply the approach of width percentage
<style>
imgMainContainer{width:100%;}
</style>
then put both the right and left images in the main container with widths 100% for each. following is the old answer so consider above only
Try using the percentage instead of pixels in background height and width.
<html>
<head>
<style>
img.home {
width: 100%;
height: 100%;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
CSS
.leftImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-hoto-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
}
.rightImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-photo-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
background-position: right top
}
and HTML
<div class="leftImg"></div>
<div class="rightImg"></div>
Try this
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height
i have a div who have some image inside them. i need to show them in center align means if i normally put that they align left.
the image is dynamic maybe it's small or big. i need to show them in middle in every condition.
how i can do this using css. any trick to do this
Use this:
img {
margin-left:auto;
margin-right:auto;
display: block;
}
Here is a sample page:
<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#container {
background-color: yellow;
width: 500px;
height: 300px;
}
img {
margin-left:auto;
margin-right:auto;
display: block;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt=" " />
</div>
</body>
</html>
Anyway, you have to try it in all the browsers, I'm not sure if it works in all of them.
Centering stuff in HTML with CSS is one of the most painful things.
You could try applying the style text-align: center to the div.
I you need the image to be at the horizontal center you can use the text-align: center on the div container as shown here
But if you need the image to be horizontal and vertical center then it will be easy to do as given here using the background style property