Have been trying to fix this problem I have here. Basically I have a website that has a background. Ontop of this background I have an centered image, lets call this image1. Exactly on top of image1 i want to draw image2. So basically I have a background which I want to draw two centered images ontop. I call them centeredImage and overlayImage.
Thank you for the help!
Best regards, Lukas
here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media=screen>
body{
background-color:#f1e6d0;
background-image:url('backgroundPattern.jpg');
}
.containerPage
{
position:relative;
display: block;
width:1024;
height:1515;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.overlayImage1
{
position:absolute;
left:0px;
top: 0px;
z-index: 1;
}
.overlayImage2
{
position:absolute;
left:0px;
top: 0px;
z-index: 2;
}
</style>
<title>A dream within a dream</title>
</head>
<body>
<!-- PAGE BEGINS -->
<div class= "containerPage">
<!-- BACKGROUND IMAGE -->
<img class="overlayImage1" src="column.gif" unselectable="on" height="1515" width="1024"/>
<img class="overlayImage2" src="webSite_split_page1.gif" height="1515" width="1024"/>
<!-- CONTENT BEGINS -->
<!-- LEFT SIDE -->
</div>
</body>
</html>
I see what you are after now. Try this. You will need to tweak the top value to get the correct vertical alignment.
http://jsfiddle.net/frV3D/
body{
background-color:#f1e6d0;
background-image:url('backgroundPattern.jpg');
}
.containerPage
{
position:relative;
display: block;
width:1024;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.centeredImage { display: block; margin: 0 auto; }
.overlayImage {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px; /* Half the height */
margin-left: -150px; /* Half the width */
}
Give a position value to anything you want to provide a z-index to - in this case your .centeredImage.
Related
I started writing my first website, and tried to center the container id in CSS using various methods found on the web (the most common of which being margin-left:auto; margin-right:auto;) but it simply won't work, and I have no idea why, or what could I do about it (I know, I could make a table with three columns in the html file, but I don't want to mix and match tables and divs)
My code so far looks like this:
HTML:
<!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>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content">
hello world!
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
Solution #1:
Replace position: absolute; with position: relative; in #content(CSS).
JSFiddle - DEMO and Full Screen View
body, html {
background-color:#FFF;
height:100%;
}
#content {
width:980px;
height: 100%;
background-color:#FCC;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
text-align:center;
}
<div id="content">hello world!</div>
More Info about margin: 0 auto; center to work:
What, exactly, is needed for margin: 0 auto; to work?
Solution #2:
Add left: 50%; and margin-left: -490px; (half width of #content div) to #content
JSFiddle - DEMO and Full Screen View
#content {
width: 980px;
background-color: #FCC;
position: absolute;
display: block;
top: 0px;
bottom: 0px;
margin-left: -490px;
left: 50%;
text-align: center;
}
Container is in center you need to align text in the center if you want,
align:center
should be
text-align:center;
Demo
Are you trying to center the "Hello world" text?? If add
text-align: center;
Instead of
align:center;
You can't center something with position: absolute; on it, as far as I know. position: absolute; means, that the div has an absolute positioning to something.
If you want to center it, then you could wrap the container, in a div, with position: relative; on it, and then center that one.
Like this:
<!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>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
hello world!
</div>
</div>
</body>
</html>
With this CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#wrapper {
position: relative; /* Needs to be there, for the #content-container to know,
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
The other way is just to replace this from your code:
position: absolute;
top: 0px;
bottom:0px;
With this:
position: relative;
Then your code should work as well...
Why do you want to center it, with position: absolute; ? Perhaps you want to achieve something, that there is another way of doing...
So, the issue is rather obvious. Now I've two elements in div containers, that should abut one another, but because of lack of css skills I need your help. So, the code is rather primitive.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Новый формат общения</title>
<html>
<link rel="stylesheet" type="text/css" href="center_ribbon.css">
<link rel="stylesheet" type="text/css" href="center.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.center {
top: 50%;
left: 50%;
width: 310px;
height: 50px;
position: absolute;
margin-top: -155px;
margin-left: -25px;
}
</style>
<body>
<div class="center"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>foo</h1></strong><div class="ribbon-stitches-bottom"></div></div></div>
<div class="wrap"><div class = "lifted">
<p>footext</p></div></div>
</body>
</html>
So, the corresponding code of css as follows
center_ribbon.css
html, body {height:100%;}
.wrap_ribbon {
position:relative;
width:50%;
margin: 0px auto ;
height:auto !important;
height:100%;
min-height:100%;
}
.contentdiv_ribbon {
display:block;
position:fixed;
margin-top: 200px;
margin-left: 170px;
}
center.css
html, body {height:100%;}
.wrap {
.center {
top: 50%;
left: 50%;
width: 260px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -130px;
}
}
As you can rightly notice, here is mess of code, sorry for that. I'm new to css and other web stuff and just poking around. Any improvements would be appreciated.
UPD. Added my page http://jsfiddle.net/7xZLM/5/
Try this:
<head>
<style>
.main {
margin: 0 auto;
}
.column {
float: left;
width: 40%;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="column">DIV 1</div>
<div class="column">DIV 2</div>
</div>
</body>
Click JSFiddle
It's hard to know what you're asking. It sounds like you want 2 divs that sit next to each other. If so, you're wanting to look at float in CSS.
simplified example
CSS
.col1 {
float: left;
}
HTML
<div class='bold col1'> foo</div>
<div class='col2'>footext</div>
An absolutely positioned element is positioned relative to the first parent having position other than static, if none is there it'll be positioned relative to the initial container, <html>
In your code .wrap doesn't have a positioned parent so it'll be positioned relative to the document, top:50%` will position the div 50% below the top of document...
Update
Since .wrap is positioned relative to the document, it's position changes with the height of the page, while the ribbon will stay at the top of the page, causing space between them.
Wrapping them inside a positioned parent will fix the issue.
check this JSFiddle
And from what i understood, you need the .wrap to look like it's coming out from the ribbon, for that you can apply an z-index less than the ribbon to .wrap,
as in this Updated JSFiddle
I've looked at 20 threads at least so far so sorry if this has been answered before but I couldn't find a solution that suits my particular css layout.
I want to set the height of 2 columns equal to each other in a way that the leftcolumn equals the contentcolumn. I've tried using multiple javascripts like this :
`
$(document).ready(function() {
// get the heights
l = $('#contentcolumn').height();
// get maximum heights of all columns
h = Math.max(l);
// apply it
$('#leftcolumn').height(h);
});
And:
document.getElementById("leftcolumn").style.maxHeight = document.getElementById("contentcolumn").style.height;
And:
$("#contentcolumn").height($("#leftcolumn").height())
The problem with the first code is that it drops the left div to some really long height which I don't even know. The second and third codes change nothing at all.
Can someone please help me I know there's probably a really simple solution to this problem but I just can't find and I just can't go to sleep until I do !
New webpage after clean up:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn">
</div>
</font>
</body>
</html>
New CSS after clean up:
body,
html {
background: #cacaca url(img/bg.png) repeat-x;
}
#maincontainer {
width:1000px;
margin:0 auto;
background: url(img/bg5.png) repeat-x;
}
#topsection {
background: #ffffff url(img/bg4.png) repeat-y;
height: 10px;
}
#leftcolumn {
float:left;
height: 100%;
width: 145px;
background: url(img/bg2.png) repeat-y;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 800px;
height: auto;
background: #dbdbdb url(img/bg3.png) repeat-x;
padding:10px;
}
You can do this without javascript--in a cross-browser way, even. This takes advantage of absolutely-positioning elements within relatively-positioned elements. If you set your #maincontainer div to position: relative and your #leftcolumn div to position: absolute, you can then set both top and bottom on #leftcolumn, so it always assumes the height of its parent (#maincontainer), even though #maincontiner's height is being set by its children (#contentcolumn in this case). Use this jsfiddle demo and play with #contentcolumn's height to see how #leftcolumn responds.
HTML:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn"></div>
</div>
</body>
</html>
CSS:
body,
html {
background: #cacaca;
}
#maincontainer {
position: relative;
width:500px;
margin:0 auto;
background: #000;
}
#topsection {
background: #ffffff;
height: 10px;
}
#leftcolumn {
position: absolute;
top: 10px; /* room for #topsection */
bottom: 0;
left: 0;
width: 145px;
background: red;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 500px;
height: auto;
background: #dbdbdb;
padding:10px;
}
Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean.
Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!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>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you re-size the window all the content re-sizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe.
Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>
<style type="text/css" media="screen">
html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}
body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}
#top {
background-color:#00FF80;
height: 10%;
}
#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}
#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}
#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
I am afraid this is another case of IE getting it wrong, and FF getting it right. You cannot have 100% height and then have an additional margins or padding top or bottom, you will need to find another way. If you could post your html or a link we may be able to guide further.