I want that my image(near-logo.png) be in header-content div, which is in header div. Image at the moment is in the left side, but it has to be in the left side of header-content div.
header div is 100% width, header-content div is 946px width.
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="header">
<div class="header_content">
<img src="img/near-logo.png"/>
</div>
</div>
</body>
</html>
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header-content {
width:946px;
position:absolute;
margin:0 auto;
}
I see two problems:
First thing, you have a mistake in your CSS, your class in your div is <div class="header_content">but in your CSS it's .header-content.
Second thing, delete the position: absolute attribute if you want your header content centered.
The image is aligned to the left of the div header_content. The problem is the div class name in your html is header_content and the name you have used is header-content in your css.
The other thing is you have used position:absolute for header_content, so that the margin:0 auto won't get applied, so remove the absolute position. Use the below code
.header_content {
width:946px;
position:absolute; // Remove this line
margin:0 auto;
}
add
.header_content {
position:absolute;
left: 0; top: 0;
}
Related
So my page has a header div that has a width of 50%, I then want to position 3 div's below it but when doing so, I set the float to left for all of them and also set the width to 33%. The problem I'm having is that the boxes being created align with the header div and not the page. Below is the code and a picture of how the page is displaying.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Main Page</title>
</head>
<body class="header">
<div class="div1">This is the header div that lies on the top of the webpage in fixed position.</div>
<div class="blank-div"></div>
<div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
<div align="center" class="float-left-middle-cell">CONTENT OF COLUMN TWO GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</body>
</html>
Then I have the css here
.header {
width:50%;
height:72px;
border: 3px solid black;
float:center;
position:fixed;
display:block-inline;
margin-left:25%;
margin-right:25%;
margin-top:20px;
margin-bottom:60px;
text-align:center;
clear:both;
}
.float-left {
float:left;
width:33%;
height:200px;
border: 3px solid black;
text-align:center;
}
.float-left-middle-cell {
float:left;
width:25%;
height:200px;
border: 3px solid black;
text-align:center;
margin-left:12.5%;
margin-right:12.5%;
}
.blank-div {
width:100%;
height:10%;
}
This is a picture of the site so far. As you can see the divs are hugging the edges of the header.
Your header class is assigned to your <BODY> tag, which means that the margins are added to your whole html body. So, there is no actual margins for your divs. And, since borders were added to the header, text in top rectangle was considered just text inside div, and the divs in next line are closer.
Secondly, as you have provided width for your middle div, next div has gone to the next line.
Solution: Remove or change values of your float-left-middle-cell class.
Then try to apply a border for div1 class and set margins for that.
I would like to let float some div with a fixed size, let's say 300px.
I took the example from Center floating DIVs
and I insert the size of the div.
They work OK but when I re size the screen (getting it smaller) they are not anymore in the center.
Moreover I also would like to have some space between the div.
Thanks in advance.
Here the actual code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
display:table;
}
#container div
{
float:left;
padding:5px;
display:cell;
width: 300px
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text ffffffffffff1<p>ddd</p>
<p>r </div>
<div style="background-color:lightgreen">Text fffffffffffff2<p>ddd</p>
<p>v</div>
<div style="background-color:lightblue">Text fffffffffffffff3<p>ddd</p>
<p>b</div>
</div>
</body>
</html>
If you don't want your block to fall to the next 'row' when screen is narrow - set a min-width to your container and also set overflow to auto - to trigger scroll.
FIDDLE
#container
{
text-align:center;
margin:0 50px;
min-width: 1036px;
overflow: auto;
}
#container div
{
padding:5px;
display:inline-block;
width: 300px;
margin: 10px;
}
Could you please try it:
Remove float: left and add display: inline-block in #container div
I'm trying to float two 'navigation' elements on either side of some content. These elements should stay in place (and visible) as a user scrolls down a page.
Example: (see less than and greater than signs): http://jsfiddle.net/dbough/tASs2/
I've tried to 'fix' both elements in place with position:fixed, but it causes the elements to collapse together
Example: http://jsfiddle.net/dbough/tASs2/1/
Looking for direction on how to make this work.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="nav">
<span id="nav_left"> <</span>
<span id="nav_right"> ></span>
</div>
<div id="content">
SOME CONTENT
</div>
</div>
</body>
</html>
CSS (without fixed positioning)
#container{
width:100%;
height:100%;
margin:auto;
padding:auto;
max-width: 400px;
}
#content{
margin:auto;
padding:auto;
}
#nav_left, #nav_right{
max-width: 10px;
font-size: 200%;
}
#nav_left {
margin-left:-10%;
}
#nav_right {
float:right;
margin-right:-10%;
}
Give position:absolute to arrow classes and relative to the parent div #container
#nav_left {
left:0; position:absolute
}
#nav_right {
right:0; position:absolute
}
DEMO
For Fixed Arrows
Use a relative div inside the fixed div and align the child div by position:absolute
HTML
<div id="nav">
<div id="wrap">
<div id="nav_left">< </div> <div id="nav_right"> ></div>
</div>
</div>
CSS
#nav{position:fixed;
width:100%;
height:40px;
}
#wrap{
position:relative;
width:100%;
height:40px;
}
#nav_left {
left:15%;
position:absolute
}
#nav_right {
right:15%;
position:absolute
}
DEMO 2
Or in simple method give direct position:fixed to the child divs and remove the outer divs
HTML
<div id="nav_left">< </div> <div id="nav_right"> ></div>
CSS
#nav_left {
left:15%;
position:fixed
}
#nav_right {
right:15%;
position:fixed
}
DEMO 3
When using position: fixed you should be using the top/bottom/right/left attributes too and not use float or margins. See the W3C CSS spec about position.
See http://jsfiddle.net/pqbkN/
I this case you should change your arrow spans to:
#nav_left {
/*margin-left:-10%;*/
left: 2em;
top: 1em;
}
#nav_right {
/*float:right;*/
right: 4em;
top: 1em;
/*margin-right:-10%;*/
}
Use for fixed version at #nav-right not margin-right:10% but right:10%.
I have a single page website that is using multiple divs inside a container div. The height of each of these is set to a min-height of 100%. This works fine until content inside one of the divs is larger than the browser resolution - the content overlaps the border divs. I've tried to add position:relative to the container, and position:absolute to the children, but this causes all but the bottom div to disappear.
I've put the following together to demonstrate what I'm talking about:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<!-- Content -->
<div id="content">
<h1>content</h1>
</div>
<!-- About -->
<div id="about">
<h1>about</h1>
<!-- Contact -->
<div id="contact">
</div>
</div>
</body>
</html>
CSS
html, body{height:100%;min-height:100%;min-width:60.000em;font-size:30px;}
#container{
width:100%;
min-height:100%;
margin:auto;
padding:auto;
height:100%;
position:relative;
}
#content, #about, #contact {
position: absolute;
}
#content{
min-height: 100%;
height:100%;
background-color:red;
}
#about{
min-height: 100%;
background-color:blue;
}
#contact {
min-height: 100%;
background-color:yellow;
}
Here it is in action: http://jsfiddle.net/s62nr/1/
If I remove the relative/absolute positioning, the size is fine, but the content overlaps: http://jsfiddle.net/s62nr/2/
What am I missing?
Found the issue (seems this always happen when I ask a question ^^).
The problem was with the fact I was setting the child div height to 100%. This needs to be removed:
From:
#content{
min-height: 100%;
height:100%;
background-color:red;
}
To:
#content{
min-height: 100%;
background-color:red;
}
I was forcing the content to take up 100% of the browser height. This stopped the div from expanding automatically like it should.
I want to put an HTML element in the middle of the page, horizontally and vertically, but I'm having a hard time making it align even horizontally. I want to center the div "content". Here is my css:
#background
{
position:absolute;
width:100%;
height:100%;
margin:0px;
padding:0px;
left:0px;
right:0px;
z-index:1;
text-align: center;
}
#content
{
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 2;
position: absolute;
}
And here is my HTML:
<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css">
</head>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">
</div>
<div id="content">
<p>Here is some content</p>
</div>
</body>
</html>
Since the div has to be positioned as absolute, doing this:
margin: 0 auto;
Won't work. I'm not sure what to do. Also, I want it in the center of the page vertically. Help is appreciated, thanks.
Edit: I need the background to be in a separate div so that it's re-sizable, and the content doesn't show if the position is relative.
<html>
<body>
<div id="background">
<div id="content">
<p>Here is some content</p>
</div>
</div>
</body>
</html>
A better structure for put contents on the middle,without use JQuery:
#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}
#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
If you are using the div id background for a background image you can style the div using css, more info at the w3schools site.
Ideally i would use a background image for the body tag rather than creating a new div with an image.
For centring content try and play around from my example.
Matt
Try to make the padding a higher number, padding is how many pixels in between the side of the screen and the text/table/picture/object. So padding should be like, say 20-40. Also, try deleting position absolute; it makes the text/table/picture/object always on the left instead of the middle.