example
Ι'm trying to align two separate backgrounds in one html page, lets say the first part (in which it will be added a flexslider) and the remaining main-page. How can I exactly align these two backgrounds horizontally? Can you provide me an example? My code doesn't work well.
<style type="text/css">
#one {
background-image: url("http://www.fnordware.com/superpng/pnggrad8rgb.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
#two {
background-image: url("http://www.bit-101.com/blog/wp-content/uploads/2009/05/background.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
</style>
<div id="one"></div>
<div id="two"></div>
Demo
Thanks in advance
How about this?
> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
</head>
<body>
<div style="background-image: url(img/3.png);
width:1250px; height:1366px;">
</div>
<div style="background-image: url(img/two.png); width:1250px;
height:1366px;">
</div>
</body>
</html>
Related
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/
I know this is a question that is asked a lot, but I couldn't find any solution at all to what should be a simple thing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<link rel="stylesheet" href="../cssReset.css" />
<style>
html, body {
height: 100%;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
Prety simple, but I just can't make the last div extend to the bottom of the page. If I use "auto" it will not display anything, as there's no content. If I use 100%, it will use my browser height and create unecessary scrollbars.
What can I do?
Thanks.
You could always take the easy way out and use JavaScript. Here's a simple example.
<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
var menu = document.getElementById("menu");
var center = document.getElementById("center");
var main = document.getElementById("main");
var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>
may be the following markup code would be what you are looking for just add a "overflow:hidden" in your css style sheet will fix your problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
overflow: hidden;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
I tested your markup, it shows the last div 'main' extend to the bottom of the page.... what is being displayed for you? And what styling info is there in the referred cssReset.css ( although this would be overridden by the style on the page html
Maybe the following is what you are looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
}
#menu {
height: 10%;
background-color: red;
}
#center {
height: 25%;
background-color: green;
}
#main {
height: 75%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)
I have a very simple HTML. Due to some limitations, I cannot modify the HTML content. I want to center the text vertically only using CSS.
<html>
<head>...</head>
<body>
<div>Oops, the webpage is currently not available.</div>
</body>
</html>
Note that the size of the HTML can be variable.
In addition, if the text cannot be displayed in one line, it should be broken into multiple lines.
Is it possible?
I think vertical-align only works for content which is in a table. For your simple page you could put the content in a table instead of a div to avoid this problem.
There are some workarounds, see http://phrogz.net/css/vertical-align/index.html
Another possible solution:
<html>
<head>
<title>Title</title>
<style>
body {height:100%}
</style>
</head>
<body>
<div style="height:100%;">
<div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
</div>
</body>
</html>
<html>
<head>...
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid blue;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>This works fine!</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.vertical {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="vertical">
Centered
</div>
</body>
</html>
Try this:
.text-tag{
text-align: center;
margin-top: 25%;
}
And apply "text-tag" to the text you want to center.