Right now I have...
<header id="background-color">
<img src="header_image.gif" alt="header">
<h1>Header</h1>
</header>
and the relevant CSS is...
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
This puts the image above the h1 obviously. What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).
And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins. I've got no idea how to do this, I'm totally new to web design.
Thanks.
You can add margin-right: -100%; to image, so header text will not touch the right edge of image. and will align center in header. check this fiddle
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}
Look at the jsfiddle
http://jsfiddle.net/EScBs/
A quick Answer.. May need to fine tune...
Add wrapping div...
<header id="background-color">
<div id="container">
<img src="Beach_Party.jpg" alt="header">
<h1>Header</h1>
</div>
</header>
Try to use relative positioning and absolute positioning of the child elements
<style>
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
img {
float:left;
text-align:left;
position: absolute;
top:0;
left:0;
}
h1 {
z-index:10;
}
#container {
position: relative;
}
</style>
It worked for me.. Adjust it to suit your case.. Hope it helps!
Related
I'm new at coding and I've managed to figure out some things, but this one is bugging me deeply as I can't seem to find a solution.
I have an horizontal & vertically centered div on a page. I want to place a header on top of it, without decentering the main div.
How it looks like now (both are centered as a whole):
How I want it to look (yellow is centered, blue header on top):
..
Basic code:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.main {
width: 1000px;
height: 500px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
This is most likely not the best answer, but it's a start.
Baisically I centered the container using this method. Then I added the -50px to the top attribute of the container (half of the header height), moving the container 50px upwards, making the content div totally centered again. This solution should work on most newer browsers, but has some "limits" more here.
HTML
<div class="centered-container">
<div class="header">
header stuff
</div>
<div class="content">
Content stuff here.
</div>
</div>
CSS
body {
background: #600;
}
.centered-container {
position: absolute;
left: 50%;
top: 50%;
top: calc(50% - 50px);
transform: translate(-50%, -50%);
width: 600px;
background: red;
color: white;
text-align: center;
}
.header {
height:100px;
background:blue;
}
.content {
height:300px;
background:teal;
}
fiddle here.
I made the content 600px wide and 300px high and header 100px high, just so it is easier to see.
The negative margin
<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
<style>
/** Web browsers load whatever is in the <head> tag FIRST
*/
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
/* You can use "margin: 0 auto;" to center this object.
* No need for left and right margin centering.
*
* Also, set the position to be relative then try adding your heading object
*/
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin: 0 auto;
position: relative;
}
/* You don't need the margin to be 0 auto on both right and left
* if you have the width 100%
*/
.main {
width: 100%;
height: 500px;
background-color: yellow;
margin: 0;
}
</style>
</head>
<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the
header. -->
<body>
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
</body>
So I've been working on a page with text and an image. However, I can't find a way to put the image between the text. either it stays on the top left, or it only centers horizontally. here is the code that is of importance:
<style>
body {
margin: 0;
background-image: url("rainbowbg.png");
}
div #hype {
margin-left: auto;
margin-right: auto;
display: block;
positon: relative;
}
#hypetop {
position: fixed;
top: 0;
width: 100%;
}
#hypebot {
position: fixed;
bottom: 0;
width: 100%;
}
.hypetext {
font-family: Impact, Charcoal, sans-serif;
font-size: 64px;
text-align: center;
}
</style>
<body>
<div>
<h1 class="hypetext" id="hypetop">DIRE</h1>
<img id="hype" src="DIREHYPE.png" width="224" height="224">
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1>
</div>
</body>
If anyone knows how I could get the image centered between the text, that would be great.
You can use this responsive css code. It may be help for you. Try it.I can change only position:fixed to position:relative.
Live Working Demo
HTML Code:
<div>
<h1 class="hypetext" id="hypetop">DIRE</h1>
<img id="hype" src="http://s30.postimg.org/qnju89rkx/banner.png" width="224" height="224"/>
<h1 class="hypetext" id="hypebot">HYPPPPPPPPPPPE</h1>
</div>
CSS Code:
body {
margin: 0;
background-image: url("rainbowbg.png");
}
div #hype {
margin:auto;
display: block;
position: relative;
margin-top:50px;
}
#hypetop {
position: relative;
top: 0;
width: 100%;
}
#hypebot {
position:relative;
bottom: 0;
width: 100%;
}
.hypetext {
font-family: Impact, Charcoal, sans-serif;
font-size: 64px;
text-align: center;
}
Result:
Remove position:fixed; from hypetop and hypebot. This caused these elements to have fixed positions and not relative to the image.
you have to imagine them as blocks first. From what I get .. you need 3 blocks in the horizontal order: paragraph | image | paragraph , which gives us the following structure:
<p></p><img></img><p></p>
what you are missing is.. that you need to use the span tag instead fo a tag to make them not break. Which is opposite of making the page responsive (using )
simply put them like this:
<span>
<span id="test"><h1></h1></span>
<img src="" width="200px" height="200px" />
<span id="test"><h1></h1></span>
</span>
#test {
position: relative;
height: 200px;
width: 200px;
text-align: center;
display: block;
}
giving the above css rules... puts the text into a invisible/transparent block.. because we are not declaring any backround-color value. thus all 3 blocks become equal size.. 200px by 200px .. side-by-side in one line..
I'm trying to center a div at the bottom of the page and having no luck. I've scoured the web, but keep turning up nothing when attempting to apply their solutions.
Any chance anyone out there might have a solution? See code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
<style type="text/css">
body {
background-color: aqua;
height:100%;
min-height:100%;
}
.centerDiv {
display: table;
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
text-align: center;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="box box1" style="background-color:#585858;"> </div>
<div class="box box2" style="background-color:#118C4E;"> </div>
<div class="box box3" style="background-color:#C1E1A6;"> </div>
<div class="box box4" style="background-color:#FF9009;"> </div>
</div>
</body>
</html>
I think you mean, that your div will be at the bottom of page. This would help you:
.centerDiv {
display: block;
width: 100%;
margin: 0 auto;
height: auto;
text-align: center;
position: fixed;
bottom: 0;
}
Setting position to fixed and div will stay at a place anytime (also when you scroll down).
The problem you're having is that the box is technically already at the bottom of the page -- the page expands to fit the content, not the window. If you want the box to always be at the bottom of the window, then you need to use position: fixed, and it will be at the bottom of the window no matter how much you scroll or how short/tall the page is.
See the demo here for the result with the fixed position.
.centerDiv {
width:100%;
text-align: center;
position: fixed;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
}
Now, if you want the box to always be at the bottom of the page, except when the page height is less than the window height (in which case it would be at the bottom of the window), you're going to have trouble. That's a bit tougher to do with CSS. However, it's easy with jQuery, if you don't mind using scripting:
See the demo here for the result using jQuery.
var minheight = $(window).height();
$("body").css("min-height", minheight);
and
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
}
.centerDiv {
width:100%;
text-align: center;
position: absolute;
bottom: 0;
}
.box {
display: inline-block;
width: 100px;
height:100px;
border: 3px solid #fff;
}
div element has an align attribute so it can help:
<div align="center"></div>
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/