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;
}
Related
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.
So basically I want a side bar and a navigation bar. But when I set the div2 (the side bar) top margin to 110px it moves div1 down with it. Please help me.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Home.css">
<title>Home</title>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
And the CSS...
body {
background-color:#CCC;
}
#div1 {
width:auto;
height:100px;
background-color:gray;
border-radius:10px;
}
#div2 {
width: 150px;
height: 500px;
background-color: grey;
border-radius: 10px;
margin-top:110px;
}
http://jsfiddle.net/shane__kerr/5p8Qr/2/
Fiddle
Now i did a float:left and width:100% to div1 and clear:both to div2.
Dont forget to add clear:both to any div inside the div1
Change the height in #div1 to auto and set margin-top:100px in #div1, not #div2.
When you add a margin-top to div2, the webpage also creates the other elements to 'trap' that element on its position. To fix this you should use display: inline-block; this way all not given margin is gone.
Why not use float?
Well basically float also sets the display to inline-block but will also position the element. With display-inline only the given margin will be used, without reposition it.
jsFiddle
I thinks your CSS looks good. But I think div 1 and 2 should not be inside each other to achieve what you want.
Try this:
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
Demo here
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.
I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.
Hope this make sense.
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
height:20px;
}
#right {
width: 100%;
background-color:#00FF00;
height:30px;
}
</style>
</head>
<body>
<div>
<div id="left">Nav</div>
<div id="right">This is the space I need to fill but not go underneath the nav div</div>
</div>
</body>
</html>
On #right, simply remove width: 100%, and add overflow: hidden.
See: http://jsfiddle.net/hJzJf/ - (I'm assuming your heights are just for testing purposes)
Why does this work?
See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
Set margin-left: 180px; on the #right element. This will offset it by the width of the first element.
http://jsfiddle.net/DHSej/
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