The #content div holds most of the web content. As you can see below, there is a top margin of 280px, because that is the height of the header image of the site, which is placed in the 'body' as a background (image/sky1.jpg).
How do I position a div as a holder above the 'margin' of the #content div so that I could place my #navigation, #Title divs above the header image?
The #top-float div just above the #content div was the start of it but each time I add more to the height the
'margin' get affected pushing it below.
I tried putting the <div id="top-float></div> above the <div id="content"></div> in the html. Is this how should I position this?
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
padding-left:2.3em;
padding-right:2.3em;
height:10em;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: px auto 0;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
The easiest way would be to give your #top-float a height of 280px and drop the top-margin for #content as such:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
margin: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 0 auto;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#top-float">
</div>
<div id="#content">
</div>
<div id="#footer">
</div>
</body>
</html>
If you need em sizing, then give the children of #top-float em sizing, and make sure to give #top-float overflow: hidden;
If you want your content to appear above your header in your markup for SEO purposes, you can do the following:
<html>
<head>
<style type="text/css">
html {
background: #73ADD7 url(images/gradient.gif) repeat-x;
}
body {
padding: 0;
margin: 0;
background:url(images/sky1.jpg) no-repeat center top;
color: #666;
width: 100%;
display: table;
}
#top-float{
position: absolute;
top: 0;
left: 0;
padding: 0 2.3em;
height:280px;
}
#content {
width: 890px;
margin: 280px auto 0;
background: #fff;
border: solid 0px #ccc;
padding: 0px;
}
#footer {
width: 890px;
margin: 0 auto;
background:url(images/footer-bg.jpg)
no-repeat center bottom #fff;
border: solid 0px #ccc;
height:250px;
}
</style>
</head>
<body>
<div id="#content">
</div>
<div id="#footer">
</div>
<div id="#top-float">
</div>
</body>
</html>
Just remove the top margin from your content div, and add the placeholder above it with the height specified.
HTML snip:
<body>
<div id="header">Stuff</div>
<div id="content">Body stuff.../div>
</body>
And CSS:
#content {
margin-top:0;
}
#header {
height:280px;
}
If it makes more sense for the extra header information to be within the content div (semantically), you can use a negative margin.
HTML snip:
<body>
<div id="content">
<div id="header">Stuff</div>
Body stuff...
</div>
</body>
And CSS:
#content {
margin-top:280px;
}
#header {
margin-top:-280px;
}
It is a little tricky answering this without also seeing your HTML, but a few suggestions:
Place your #top-float div outside of your content div
Use negative margins
Put your content div flush with the top of the browser with a header div inside. Then put your header image inside your header div as the background image
it doesn't look like you are centering anything so you can also use absolute positioning for the header div
As always, there is no one way of accomplishing this.
You may want to use absolute or fixed positioning for your #top-float div.
Why do you want to put the header image as a background image? I think you'll find that it all works out easier if you don't put the site's header image as a background. It is also common practice that clicking on the site's logo (which I assume is in your header image) takes the user back to the home page. Making the site's logo a background image effectively disables this feature.
Related
I have two buttons that appear side by side. The idea is that whenever the screen width changes, the buttons will grow or shrink accordingly. This is working fine. However, I'd like to have a 10px distance between the buttons, no matter what the screen width is. In my case as the screen width grows, the gap also grows which I'd like to avoid.
Here is the test code I have been working with:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
}
a.left, a.right {
display: block;
width: 49%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
float: left;
}
a.right {
float: right;
}
</style>
</head>
<body>
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
</body>
</html>
I can tell that giving a 1% to the gap will make it grow with the screen, but I'm trying to find a way of giving the gap a fixed size while having the button behave as expected.
EDITED TO ADD: I'm looking for a solution which not only would keep the gap fixed but that will also keep the left and right margins fixed as well. So 5px space to edge, button, 10px gap, button, 5px space to edge.
Thanks for any help you can provide.
I have a solution in this fiddle.
HTML
<div class="buttons">
<div class="button-container">
<a class="button">first</a>
</div><div class="button-container">
<a class="button">second</a>
</div>
</div>
CSS
.buttons {
width: 100%;
box-sizing: border-box;
padding: 0;
}
.button-container {
display: inline-block;
width: 50%;
box-sizing: border-box;
border: none;
padding: 0;
margin: 0;
}
.button {
display: block;
box-sizing: border-box;
background-color: #f00;
text-align: center;
padding: 5px;
}
.button-container:nth-child(odd) .button {
margin-right: 5px;
}
.button-container:nth-child(even) .button {
margin-left: 5px;
}
Key points to take home. Firstly, you need to avoid any whitespace between the inline-block elements .button-container to avoid a rendered space. Otherwise, setting width:50% will end up wrapping (because your have two 50% wide items with an intervening space, which is more that 100% width). Secondly, using .button-container allows you to evenly split the buttons across the page using a set percentage. The spacing between buttons then becomes a margin interior to the container.
That's due to the fact that you links are aligned to the outer borders (via float), not to each other. To change it the way you want, remove the floats and center them, plus add a 10px margin-right on the left one:
(for the snippet I reduced the width to 48% since otherwise it won't fit into a small screen)
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
text-align: center;
}
a.left, a.right {
display: inline-block;
width: 48%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
margin-right: 10px;
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
So here's a new version, fulfilling your later added additional requirements.
It gives the buttons absolute position and defines their width by defining their left and right borders 5px from the outer border and 5px each from the center (adding up to a 10px distance between them), using calc:
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
height: 1.6em;
}
a.left, a.right {
position: absolute;
display: block;
background-color: #f00;
text-align: center;
}
a.left {
left: 5px;
right: calc(50% + 5px);
}
a.right {
right: 5px;
left: calc(50% + 5px);
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
I'm sure I'm doing something obvious wrong, but I haven't been able to figure it out. My lightboxes size dynamically (percentage width), and I want the content within the lightboxes to scroll vertically as needed on smaller screens without displacing the border (actually a box-shadow) around the content.
As an added caveat, I need the "container" div to have dynamic height. When I set the container div to height: 100%, the lightbox functions like I want (see code below), but when I remove the height setting, the overflow no longer works right.
This demo of my lightboxes in action should help clarify my question:
http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview
Here's my CSS:
html{
height: 100%;}
body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}
div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}
div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}
div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
And my HTML:
<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
If your browser support requirements allow it, consider absolutely positioning your .container div, and setting its top, left, etc appropriately:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That has some downsides if you're trying to position other elements on the page, but for a lightbox, it's a reasonable solution.
I want my 'header' div to sit within the 'container' div. At the moment the 'header' div is sitting above the 'container' div and I cannot seem to put it in it. Below is the coding. Thanks for the help.
HTML:
<body>
<div id="container">
<div id="header">
<h1>Title Goes Here</h1>
</div>
</div>
</body>
CSS:
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
It is inside it. Remove the background color on your header and you'll see the container's background behind.
It is inside the container, just the looks like it's on top because of the colors. Open up w/e browser tools you prefer and take a look at the container div.
It is inside your container. Adding padding or remove the background will make it more visable
jsfiddle
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
padding:20px;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
set background color to transparent or just remove it temporarily, you'll see that the header is inside there
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)