I am trying to center a div. This is my code:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
* {
text-align: left;
}
</style>
</head>
<body>
<div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
<div id="content" style="text-align: center;">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</div>
</body>
</html>
It isn't completely center, because I set in the CSS reset that text-align is left. If I remove this line everything is fine. Why is text-align: center; of the div with the id #content not overriding the CSS reset?
You need !important to overwrite that (leaving the p tag)
#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}
DEMO 1
Or else you can write css for p tag
#content p{text-align: center }
DEMO 2
Try this
Key point is
margin: 0 auto
Even better, less markup:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
#content{
width: 500px;
margin:0 auto;
}
#content p {
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</body>
</html>
In most cases it's better to prevent useing ìnline-styles`. Also move your styles in an seperate css file for a better maintainability.
In HTML * tag means its consider all tags strictly the property as you mention in between, you need to little change your style please visit link
Related
I wrote this css example, it works fine if the content is not much in number
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
html{
height:100%;
margin:0px;
}
body{
height:100%;
margin:0px;
}
div{
height:100%;
margin:0px;
background-color:red;
width:100%;
}
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
But my example fails as soon as you add more content
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
How do I write some css to wrap the content when the content is in a greater number?
When you make your html's height 100%, it will scale the body tag to the 100%, limiting the div's height ultimately, to work around this problem, you have two approaches.
Approach 1
Apply height 100% only to the body tag
body {
height: 100%;
overflow: auto;
margin: 0px;
}
div {
height: 100%;
background-color: red;
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
Approach 2
Add overflow:auto to your div to make it's overflow automatic and based on the content, like
body,html {
height: 100%;
overflow: auto;
margin: 0px;
}
div {
height: 100%;
overflow:auto;
background-color: red;
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
Fixed widths and fixed heights don't work for modern responsive layouts. If you provide us with more specific information on the widths of the columns in percentages of the viewport width, I will update this answer with a tried-and-true approach to equal height columns.
I have a case where when specifying a fluid margin-top like for instance 20% and when
I resize my browser window horizontally, the margin-top increases. This is a bit unexpected for me. I am looking for a quick fix for this ..
<html>
<head>
<title>Make yourself lucky</title>
<meta name="description" content="Make yourself lucky" />
<style type="text/css">
#slideshow {
float: left;
background-color: red;
width: 100px;
height: 100px;
margin-top: 20%;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='slideshow'>
slideshow
</div>
</div>
</body>
</html>
http://jsfiddle.net/eVfCc/
Try adding position:absolute to the same CSS.
The point is to have this video to always be 100% of the viewport width;
But to have the height just to a point where no scroll is needed.
Can this be achieved without using overflow:hidden; ?
You can copy paste the following as is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello User!</title>
<style type="text/css">
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
</style>
</head>
<body>
<div>
<div>
Im the navigation!! Wupii
</div>
<div>
<p>I'm more text, more things</p>
<p>I'm more text, more things</p>
</div>
<div id="video-border">
<video controls="controls">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
alt text
</video>
</div>
<div id="footer"><p>I'm the footer hello</p><p>I'm the footer yeah again</p></div>
</body>
</html>
To be honest, I'm not even sure if this solution will properly work. Not sure if the video will behave on those circumstances, still... wondering.
Please advice.
Agree with Patrick.
If you instead want to use it in a fixed, pre-calculated height box, use this:
div#video-border {
background-color: black;
border: 2px solid red;
}
video {
max-width: 100%;
width: 100%;
height: auto;
max-height: 150px; /* your desired height */
}
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
even after many lines i've written in css and html, the css-behaviour still manages to surprise me - in a bad way.
I was putting together a sample site for a friend to show him how he could build his layout,
but Firefox 3.0.5 and IE8 create margins between my #header, #content, and #footer-divs out of nowhere. If i switch in IE7 Mode, the margins disappear.
CSS:
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
}
#page {
background-image: url('bg_gradiant.png');
background-repeat: repeat-y;
width: 950px; /* 770px + 2 * 90px; */
margin: 0 auto;
padding-left: 90px;
}
#header {
width: 770px;
margin: 0;
padding: 0;
}
#header #row1 {
background-color: #9ab3ba;
height: 50px;
}
#header #row2 {
background-color: #517279;
height: 50px;
}
#content {
width: 770px;
background-color: #d7e9ed;
}
#footer {
background-color: #5eb6cc;
width: 770px;
height: 150px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Test</title>
</head>
<body>
<div id="page">
<div id="header">
<div id="row1"></div>
<div id="row2"></div>
</div>
<div id="content">
<p style="height: 600px">Beware of the Content</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You can view this page here: https://codepen.io/lx-s/pen/eRrOpL
Browsing through the IE Developer Tools and Firebug showed me that they were no default-margin values set for these div's, but as one can see, they are there.
Hope you can give me a hint how to get rid of them - it's seriously driving me crazy.
Thanks in advance!
Add the following to your stylesheet:
* {
margin: 0;
}
It's not the DIV but the P tag that has the margin set by default. I tested setting it to 0 and the space disappeared.
The margins are on the p tag in the #content div
Hope this helps you a little
You need to use a reset css. You should do this on every Web page/site you develop. A good reset CSS will remove many of the default settings and make cross-browser look and feel much less painless.
There are several of these around such as Eric Meyer's or the Yahoo UI Reset CSS.
When I've seen this before, I've added a padding-bottom:1px to the bottom of the containing DIV so that I can keep the margins on the Paragraphs
Hope that helps