I have plans to create carousel with a background that spans the width of the browser.
To do this I set margin:0; padding:0; in the body and set my div that spans the background to width:100%. I chose this because it contains another div that has a left, and right margin:auto; making the second div centred within the div spanning the browser.
I encountered a problem trying to add the background image to the div that spans the width of the browser. When I use background-repeat:repeat-x; it is still just a 550x1 px sliver on the far left of the browser. It does not repeat. I have figured this is due to the 100% width. If I let go of the 100% width I encounter a problem of the inner div being forced to the right or left, depending on the resolution of the monitor being used. I do not want this to happen.
Does anyone know of a way I can achieve/simulate 100% width and still use background-repeat:repeat-x;?
EDIT, i use 2 divs because i am applying silverlight, and would like to place it kindof artistically on the screen. here is my code, it might make more sence what i am doing then. and if you still believe 1 div is better than 2, tell me that im wrong, but here is the code. it is very simple because much will be done in silverlight, or at least i thought it would be somewhat simple, but that's how it goes.
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>
<!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 runat="server">
<title>Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
<img src="img_data/dem_Logo.png" id="Logo"/>
</div>
</div>
<div id="Carousel">
<div id="SilverlightContainer">
</div>
</div>
</body>
</html>
CSS
body
{
margin:0;
padding:0;
background-color:#000061;
}
#NavContainer
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#Navigation
{
height:75px;
width:100%;
}
#Logo
{
float:left;
}
#Carousel
{
height:550px;
width:100%;
background-image:url('img_data/carousel_bar_01.png');
background-repeat:repeat-x;
}
#SilverlightContainer
{
height:550px;
width:900px;
margin-left:auto;
margin-right:auto;
}
You don't have to take two div's to achieve what you want.
Just take your background image in the body like
body{ background:url(image path here) repeat-x}
and give your div
certain width and give it a style like
div#yourID{margin:auto}
This will work for you just fine.
You simply need only one div, the one you want in the middle.
<div class="centered"></div>
You set the background on the body:
body {
min-height: 550px;
background: url(path/image.png) repeat-x;
background-size: 1px 550px;
}
And then you have the centered div:
.centered {
min-height: 150px; /* whatever values you wish for height and width */
width: 300px;
margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}
You can see it live at http://dabblet.com/gist/2774626
Try this:
body {
width:100%;
height:100%;
background:url(your-image.jpg) repeat-x;
position:absolute;
}
Solved! The problem was that I was not putting in the right location for the image carousel_bar_01.png.
Related
I'm making a little project-school website with x10Host, and I am writing my own custom HTML for it. The front page is going to have a little image explaining who I am and what I do. This is the image:
When I use the following HTML and CSS, it shows up perfectly (image shows):
HTML
<div class="jumbotron">
<img src="Jumbotron.png"></img>
</div>
CSS
.jumbotron{
position:relative;
min-width:100%;
min-height:100%;
top:-50px;
left:-50px;
}
.jumbotron img{
min-width:100%;
min-height:100%;
}
It shows up perfectly as this:
The only problem I am having is when I resize the window. Currently, the window is 1080p. If I resize it, this happens:
Is there any way I could modify the HTML or CSS to make the image resize to the client's screen? If you would like to see the full HTML code, the website is http://mrsquer.x10Host.com/.
You need to set max-width: 100%; height:100%; to limit it to the container's width but keep max image height.
.jumbotron{
margin-left:-10px;
margin-top:-10px;
height:100%;
min-width:100%;
position:absolute;
}
.jumbotron img{
height:100%;
width:100%;
max-width:100%;
}
try this for css
<!doctype html>
<html>
<title>css testing</title>
<style type = "text/css">
.jumbotron
{
position:relative;
width:100%;
max-width: 100%;
height:100%;
}
.jumbotron img
{
width:100%;
height: auto;
}
</style>
</head>
<body>
<div class="jumbotron">
<img src="Jumbotron.png"></img>
</div>
</body>
</html>
img height must be set to 'auto' or it will not scale correctly (as in code above).
This works for any size screen, but I wouldn't use it.
Setting the img as a background would give you more freedom to add content. And
height: 100%;
is not needed unless you want the entire screen occupied by the container div.
If you want a DIY site, maybe read-up on basic html and css. Have fun !
So I'm new to HTML and CSS and I was trying to create a layout with a header, a centered column and a background made of an image behind that column but I just can't make it work.
This is the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>mylayout </title>
<link rel="stylesheet" type=text/css
href="style/my1stcss.css" />
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="column"></div>
</div>
</body>
</html>
And this is the css stylesheet:
html, body {margin:0px; padding:0px
background-image:url (img.jpg)}
#box {
Height:auto ;
Width:100% ;
Margin-left:auto;
Margin-right:auto;
}
#header {
Height:150px;
Width:100%;
Background-color:red;
}
#column {
Height:600px ;
Width:50% ;
Margin-left:25% ;
Background-color:blue;
}
Where you see the white, behind that column I'd like to put an image.
First of all you need to write all your CSS properties in lowercase. Background-color isn't valid CSS, it must be background-color.
Next remove all empty spaces between your CSS values and always add an semicolon ; at the end. Otherwise your CSS won't take effect.
At last make sure that the path to the image is correct. If not, no image will be shown.
Here is an jsFiddle example of your provided code with a cute kitty as a background to give you an example of how it will work.
I always created such layouts, following some conventions. So if you woud like to create a centered "main-frame" with a header of fixed height than:
<body>
<div class="center">
<div class="main-frame"></div>
<div class="header"></div>
</div>
</body>
.center {
width: <must be set, can be percentage>;
margin: 0px auto;
}
.main-frame {
position: relative;
margin: <height of header> auto <height of footer> auto;
}
.header {
position: absolute;
top: 0px;
height: <height of header>;
}
The same approache for the footer. Please note that the main-frame appears before the header and footer in source, otherwise they lie behind the main-frame and are not clickable. One could also fix this by using the z-index, but I try to use this as less as possible to prevent confusion with z-indices.
Your desired background image can be attached to the "main-frame" using css in the usual way.
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
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 am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.
because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left
see here:
http://www.wireframebox.com/test/sideimages/index_leftworks.html
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">
body { margin: 0; padding: 0; border: 0; background-color:#096 }
img { border: 0; }
#main {
width:960px;
height:216px;
background-image:url(main.jpg);
position:relative;
top:0; margin: 0 auto;
}
#left {
width:170px;
height:216px;
background-image:url(left.jpg);
float:left;
left:-170px;
position:relative;
}
#right {
width:170px;
height:216px;
background-image:url(right.jpg);
float:right;
left:170px;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work
see here
http://www.wireframebox.com/test/sideimages/
Code is equal, only <div id="right"></div> is missing
the css is in the source.
you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width
http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/
why does this work on the left but not the right?
See the below fiddle for output...
Fiddle: http://jsfiddle.net/C2j6G/4/
Demo: http://jsfiddle.net/C2j6G/4/embedded/result/
see below image -
It's better if you can combine those two images & give in the background of body. like this:
HTML
<div id="main"></div>
CSS
body {
margin: 0;
padding: 0;
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center;
}
#main {
width:960px;
height:216px;
background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg);
margin:0 auto;
}
Check this http://jsfiddle.net/PVWzA/1/
If you want your website page to be 960px wide, then you should change your width of the main image to 960 - 170(left) - 170(right). Changing the width of main.jpg to 620px should fix your issue.
HTH
Put the image in a div or image tag that is larger than your center div and make it the child of the center content div. Also make sure that it's positioning will take it out of the flow(\absolute). If you then add a negative margin you can pull the image outside of the content div without disrupting its placement.
#center div.top{
width:1200px;
height:170px;
margin: 0px -170px;
position:absolute;
background:url("randombackground.png") no-repeat;
}
The html will be kinda like this:
<div id="center">
<div class="top"></div>
Content content content
</div>