Im trying to re-create my mockup from photoshop in code. I've managed to get all elements in the page.
I want a picture and then to have to text directly to the right of it.
Any CSS help would be amazing, thank you in advance!
HTML
<h1>About Me</h1>
<div id="about">
<img src="images/me.png" class="meimage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus tortor, sodales ac velit sit amet, imperdiet posuere risus. Nam congue volutpat vehicula. Sed convallis tempor orci vitae aliquam. Quisque at faucibus eros. Sed laoreet, orci et ultricies luctus, turpis leo pharetra felis, ac tristique ligula nisl id enim. Nullam porta quam et dolor eleifend placerat. Aenean rhoncus, tellus ut sodales suscipit, nunc enim ornare dui, cursus tincidunt urna nisl vitae lacus. Nunc tincidunt auctor dolor, eget laoreet justo gravida vel. In convallis arcu massa, quis gravida purus vestibulum eget.
</div>
CSS
.meimage{
margin: 20px 20px 20px 20px;
height:200px;
width:200px;
}
#about{
text-align: center;
width:800px;
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
font-family: 'Verdana', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cantarell', sans-serif;
font-weight:700;}
h1{
display: block;
padding: 0px 155px;
font-family: 'Cantarell', sans-serif;
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
}
You can use CSS float to wrap text around an image. Though I'd say it looks a little strange with the text centered:
.meimage {
float:left;
margin:0 1em 1em 0;
}
http://jsfiddle.net/SJTDS/1/
Edit
If this is a static page and the content won't be changing, you can probably just update the padding on your <h1> to get it to align with the image.
h1 {
...
padding: 0px 20px;
}
http://jsfiddle.net/SJTDS/4/
Keep in mind that fixed pixel settings can be fragile and break when, for instance, you upload a larger image.
If this is an issue, I'd use a different structure.
.meimage, #about {
float: left;
}
Edit: You wanted header floated left too:
.col {
float: left;
margin: ...;
}
<div class="col"><h1>About Me</h1><img ... /></div>
<div class="col"><p>Lorem Ipsum...</p></div>
Related
I'm back, and doing yet another school project. I'm trying to get my site to use some custom font that I found online. This is my JSFiddle link to my code, and my HTML code is as follows:
<!doctype html>
<html>
<head>
<title>
| Bat-tection |
</title>
<meta charset="utf-8">
<link href="Styles/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="title">
Bat-Tection
</h1>
<h6 id="ctrtitle">
The only home protection service you will ever need!
</h6>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<aside>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
</aside>
<section class="text">
<article>
<h2>Article One Heading</h2>
<p>
Article One Content<img src="../Tuts/Images/pic07.jpg" alt="A Generic Image Caption Here" class="rgt">
</p>
<p>
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor. Curabitur posuere vulputate egestas. Vestibulum a leo id sapien commodo aliquam commodo quis dui. Phasellus at leo id elit dignissim egestas a eu elit. Quisque bibendum tellus at placerat luctus. Nulla blandit erat ipsum, eu molestie purus sollicitudin sit amet. Sed vehicula tortor quis libero finibus fringilla. Nam nibh mauris, lacinia a suscipit et, fringilla non lorem. Vestibulum tempor vel ligula ut interdum. Donec convallis porttitor est sit amet porttitor. Sed ullamcorper mauris nibh, id fermentum velit iaculis quis. Etiam rutrum blandit hendrerit. Proin a laoreet purus.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
<p class="spec"></p>
<article class="cols">
<h2 class="cols-span">Lorem ipsum dolor sit</h2>
<p class="lead cols-span">
Vestibulum mi felis, sollicitudin nec iaculis at, facilisis a dolor.
</p>
<p>
Curabitur sed leo ligula. Duis sed bibendum mi. Quisque fermentum, lacus in suscipit vulputate, tellus eros tempus metus, non convallis justo augue et turpis. Sed ut tempor elit. Pellentesque congue turpis turpis, nec lobortis arcu sollicitudin non. Nunc pellentesque luctus massa ac faucibus. Nulla ac libero ut diam consectetur euismod sed eget odio. Phasellus maximus justo eget ultricies consectetur. Curabitur nec mi lectus. Nunc vel varius enim. Praesent pulvinar nisi volutpat, facilisis ligula at, volutpat lorem. Mauris nec cursus libero, eget dictum arcu. Praesent tristique lacinia erat sed vestibulum. Cras vestibulum tellus vel urna bibendum eleifend. Proin non nisi ut sapien mattis blandit ut in tellus. Maecenas congue magna nec purus suscipit, in pellentesque quam blandit.
</p>
</article>
</section>
<aside class="ads">
<p>
Advertisment can run the size out to the margin of the previous container element, no more!
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
<p>
Advertisment
</p>
</aside>
<footer>
<p>
Copyright © 2016 All Right Reserved
</p>
</footer>
</div>
</body>
</html>
My CSS code is as follows:
#charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
#font-face {
font-family: battext;
src: url(../Fonts/batmfa.eot), /* IE9 Compat Modes */
src: url(../Fonts/batmfa.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
url(../Fonts/batmfa.woff2) format(woff2), /* Super Modern Browsers */
url(../Fonts/batmfa.woff) format(woff), /* Pretty Modern Browsers */
url(../Fonts/batmfa.ttf) format(truetype), /* Safari, Android, iOS */
url(../Fonts/batmfa.svg#svgFontName) format(svg); /* Legacy iOS */
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: left;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 20px;
}
article p{
text-indent: 2em;
padding-left: 1.5em;
}
body{
font-family: "battext";
color: #FFFD5D;
background-color: #252122;
font: 100% Verdana;
}
#ctrtitle{
text-align: center;
}
.cols{
/*-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10px;
-moz-colum-gap: 10px;
column-gap: 10px;*/
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.cols-span{
-webkit-coloumn-span: all;
-moz-column-span: all;
column-span: all;
font-size: 1.2em;
margin-bottom: 0.2em;
line-height: 1.2em;
}
.cols p{
margin-bottom:1.1em;
text-align: justify;
}
footer{
clear: both;
background-color: #29292C;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
header{
background-color: #29292C;
padding-bottom: 1em;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0 0 1em 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav ul{
text-align: center;
margin: 1em;
list-style: none;
}
nav ul li{
display: inline-block;
margin: 0 0.35em;
nav ul li a{
background-image: url(../Images/bat-button1.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
color: #e1e2dd;
text-decoration: none;
padding: 0.6em 1.2em 0.6em 1.2em;
outline: 0;
}
nav ul li a:hover{
background-image: url(../Images/bat-button2.jpg);
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
nav ul li ul{
display: none;
}
p{
margin-bottom: 1.2em;
}
.rgt{
float: right;
max-width: 30%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.spec{
margin: -5px 0 10px 0;
border-bottom: 1px dashed #000000;
line-height: 0;
}
.text{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#title{
color: #FFFD5D;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
Can you guys off me any help?
Thanks,
-dark_nemesis
what i understand from your question is that you want to know how to use fonts, isn't it?
you can always visit https://www.google.com/fonts and under every font there is a button about how to use this font.
You're just missing a line of code (I think) it is
font-family: battext, sans-serif;
If you insert that under the body element as well as the font-face. Then I think it will work. Hope this helps...
take the quotations off the css
font-family: "battext"
side note, check to make sure you have right to use it in whatever you're doing
also check to make sure the file path is correct.
If your structure is like this: (upper case = folders)
HTML
index.html
CSS
styles.css
FONT
myfont.ttf
then.. these should be your code
html: <link type="text/css" rel="stylesheet" href="../css/styles.css" />
take off "../" if index.html is same level as CSS/FONT folder
css: #font-face { font-family: myfont; src: url(../font/myfont.ttf); }
the src for css will start where in the folder it's in, so styles.css has to go back a directory, then go to font and your file
I'm taking an old WordPress site I designed years ago and now I'm making it responsive. Problem is I have a main content area on the site and a sidebar div and the issue is the sidebar div is not expanding down the entire height of the #contentWrap div on this site. I've already tried adding 100% heights to the #page, #contentWrap and #sidebar, all to no avail. On the old site design, I did a trick using background images, but that realistically won't work with a responsive desig.Any idea how I can make this work?
Site in question: http://destinationbeershow.com/episode-guide/
Code:
<div id="contentWrap">
<div id="content" class="narrowcolumn">
</div>
<div id="sidebar">
</div>
</div>
CSS:
#contentWrap {
width: 856px;
height: 100%;
}
#page {
background-color: #ac4f23;
text-align: left;
margin: 0px auto;
width: 856px;
height: 100%;
}
.narrowcolumn {
background-color: #ac4f23;
float: left;
padding: 0;
margin: 0;
width: 640px;
color: #FFF;
}
#sidebar {
padding: 16px 8px 10px 8px;
float: right;
width: 160px;
height: 100%;
font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
border-left: 10px solid #fff;
background-color: #ebd299;
}
You can make everything collapse below your 856px hard width and use percentages inside that, or you can fiddle with the math. You also don't mention how you are doing your media queries, I'm assuming mobile first, which means that IE8 won't see the columns unless you learn more about that or use desktop first responsive design, however to make the columns the same height no matter what is inside either, here's one way (display:table/display:table-cell) which stacks below the 856px width you have on your #page. Use percentages.
DEMO: http://jsbin.com/biyito/1/
CSS:
.narrowcolumn {
background-color: #ac4f23;
color: #fff;
box-sizing: border-box;
padding: 10px 20px;
}
#sidebar {
padding: 10px 20px;
border-top: 10px solid #fff;
background-color: #ebd299;
box-sizing: border-box;
}
#media (min-width:856px) {
#contentWrap {
width: 100%;
display: table;
}
.narrowcolumn {
width: 80%;
display: table-cell;
}
#sidebar {
display: table-cell;
padding: 10px;
width: 20%;
border-left: 10px solid #fff;
border-top: 0px;
}
}
HTML
<div id="contentWrap">
<div id="content" class="narrowcolumn">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
<div id="sidebar">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
the #contentWrap has no height... i tried I really tried to make it responsive with your content but it just doesn't work. For now if you define the height of it, the bar will be end to end.
In that page the height would be 1361px
If you can place the content in http://jsfiddle.net/ is much more easy to find and get to the problem.
Please review this Sample Fiddle.
You'll notice I have two colums, side by side, and content under the headers. I'm trying to align the Lorem Ipsum with the vertical center of the paragraph to the right.
I thought a vertical align set to the column 1 would would, but it's not.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
margin-left: 4%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
text-align: center;
}
Ideas?
Set "col1-row1" and "col2-row1" to display: table-cell instead of inline-block, and then include vertical-align: middle.
just replace this css for col1-row1 and col2-row1 classes in your stylesheet,this works fine in your fiddle.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
.col2-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width: 45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
If you can pre-determine the height of the right-hand block of text, you can do something like the following (I set it at 206px):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
div.left p {
height:206px;
line-height: 206px;
}
div.right p {
height:206px;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
If the height of the paragraph in the right hand column is dynamic and can not be determined beforehand, you can use JavaScript (here I'm using jQuery):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var target_height = $('div.right p').height()+'px';
$('div.left p').css({
'height': target_height,
'lineHeight': target_height
});
});
</script>
I'm in trouble with the following html layout.
I know that there are other questions about absolute positioning and sticky footer, I tried a lot of solutions but I didn't make this work, so I tried to post the whole layout html code to see if someone can find a solution.
I used this StickyFooter solution.
The problem is the right bar.
It shoud stay fixed at 25px from the footer, but, as you see, if the bar content grows, the content goes down over the footer and outside the bar bottom border.
Obviously I would the content stay inside the bar, causing the bar to grown and pushing the footer down.
<!doctype html>
<head>
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionBar">
<div id="divBarContent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis.
</div>
</div>
</div>
<div id="headerPage">
<div id="navPage">menu</div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div>
<div id="sectionPage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
<div id="divPush"></div>
</div>
<div id="footerPage">footer</div>
</body>
</html>
Leave your HTML as-is, change your CSS to this:
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
clear:both;
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { width:960px;position:absolute;top:0;left:0; }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
}
#divPush {clear:both;}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }
P.S. this is a bad question.
I am going to give you the benefit of the doubt and say you're working for an unreasonable client or with some uneditable HTML markup and you need to do some sort of hack to get this presentable.
Otherwise, there's no excuse for taking this approach.
I made some changes on the code you posted, I hope that helps !`
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage
{
height: 50px; /* .push must be the same height as .footer */
}
#divPush {height: 800px; }
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
right:10px; top:13px; width:200px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
display:inline;
float:right;
height: 100%;
}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>`
I might be confused on what you are looking for, but why not add overflow:auto under the id=sectionBar? That way if the content if greater than your box it will add a scroll bar and not flow over the footer. Again, maybe I am missing the question or the end result you are looking for.
#lorenzo.macon is right - you need to avoid using position: absolute, and use a float instead.
One of your issues was also that your footer needs to have the same total height as the negative margin of the wrapper; it looks like perhaps you weren't accounting for padding and/or borders in the equation.
The supplied code includes the sidebar second in the code, so that if it were not floated (e.g., for a responsive layout), it would come later. But you can actually have it either way, and it should work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* LAYOUT */
/* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */
* { margin: 0 }
html, body, .wrapper {
height: 100%;
}
body {
margin: 0 auto;
position: relative;
}
.wrapper {
position: relative;
min-height: 100%;
height: auto !important;
margin: 0 auto -70px; /* bottom margin = -1 x ( #footerPage height + padding + border ) */
}
#footerPage, #divPush {
height: 50px; /* .push must be the same height as .footer */
padding: 10px; /* must have same padding! */
}
#divPush {
clear: both;
}
/* End / Sticky Footer */
#sectionPage {
width: 70%;
float: left;
}
/*
#sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage
and ems for T+B padding so can relate to typography. This is less important.
*/
#sectionBar {
width: 20%;
padding: 2em 5%;
margin-left: -1px; /* IE7 needed this */
float: right;
display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */
}
/* VISUAL STYLE separated for clarity */
body {
background: #000;
max-width: 960px; /* use max-width for flexible layouts */
font-family: Tahoma, Verdana;
}
div.wrapper { background: #fff }
#divHeaderImg { height: 100px; }
#navPage { background: #90bfe7; padding: .5em; }
#divSubMenu {
background: #90bfe7;
padding: .5em;
}
#sectionBar {
background: #fcf;
}
#footerPage {
position: relative;
background: #90bfe7;
}
#content {
background: #ffc;
padding: 12px 10px 10px 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionPage">
<div id="headerPage">
<div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div><!-- #headerPage -->
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
</div><!-- #sectionPage -->
<div id="sectionBar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
<div id="divPush"></div>
</div><!-- .wrapper -->
<div id="footerPage">footer</div>
</body>
</html>
You can't make the bar absolute with top and bottom "margins" and expect it to grow beyond the size you're telling it to be.
Below is a slightly different approach which looks very much (exactly?) like yours. I didn't test in other browsers than firefox 8 so I can't guarantee that it's bulletproof, but this should at least give you an alternative idea:
<!doctype html>
<head>
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000;
width:960px;
margin:0 auto;
position:relative;
font-family:Tahoma, Verdana;
}
div.wrapper {
background-color:#fff; position:relative;
border:2px solid pink;
}
#headerPage {
border:2px solid green;
}
#divHeaderImg { height:100px; }
#navPage {
height:30px;
line-height: 30px;
font-size:16px;
background-color:#90bfe7;
padding:0 10px;
/*
position:relative;
overflow:hidden;
*/
vertical-align: middle;
border:2px solid lime;
}
#leftBox {
border:2px solid yellow;
float;left;
}
#divSubMenu {
border:2px solid darkgreen;
background-color: #90BFE7;
line-height: 28px;
padding: 10px;
vertical-align: middle;
}
#divBarContent {
border:1px solid firebrick;
}
#divBarContent div {
border:1px solid cyan;
}
#sectionBar {
z-index:1000;
/*
position:absolute; right:10px; top:13px; width:200px; bottom:75px;
*/
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
float:right;
margin:0px 10px 25px 0px;
width:200px;
/*
*/
}
/*
*/
/* footer height + 25px */
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionBar">
<div id="divBarContent">
<div>
# Update from 2.0-BETA3 to 2.0-BETA4
## XML Driver <change-tracking-policy /> element demoted to attribute
We changed how the XML Driver allows to define the change-tracking-policy. The working case is now:
# Update from 2.0-BETA2 to 2.0-BETA3
## Serialization of Uninitialized Proxies
As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when
trying to access methods on the unserialized proxy as long as it has not been re-attached to the
EntityManager using `EntityManager#merge()`. See this example:
The Collection interface in the Common package has been updated with some missing methods
that were present only on the default implementation, ArrayCollection. Custom collection
implementations need to be updated to adhere to the updated interface.
</div>
</div>
</div>
<div id="leftBox">
<div id="headerPage">
<div id="navPage">menu</div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div>
<div id="sectionPage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
<br> <br> <br> <br> <br> <br> moo
</div>
<div id="divPush"></div>
</div>
<div style="clear:both;">
</div>
<div id="footerPage">footer</div>
</body>
</html>
You can probably use position:relative; instead because absolute will make your elements go behind it unless you use z-index: then the elements will go on top of it. Look at this sticky footer if you really have to build it this way
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Edit:
I'm not sure what you are trying to accomplish really. Because the current way the HTML built isn't really semantic for what you're doing. Since sectionBar is a side bar it shouldn't be above your main content it should be structured after after your sectionPage content. You should also be using floats instead of position. That way you don't have to deal with z-index and content going behind. The page would also expand correctly using float but you would have to make use of a .clearfix hack for IE mainly.
There's also almost never a case where you have to build something a certain way. The only time that's a case is if your using a CMS or per-existing old code. So if your not getting an effect you want then you need to look at your Semantic structure of your code.
I saw in one of your comments that this is based on a photoshop layout which leads me to believe you are building this from scratch and means you have complete control over the HTML. So if that's the case then saying it has to be built this way is unacceptable.
It is solvable. You can do it by floating #sectionBar as #lorenzo.marcon mentioned.
You'd need to move #sectionBar to right before#sectionPage` and wrap both elements. I've also added a clearfix to the wrapper.
See this fiddle for the solution.
I'd remove position:absolute; and add a float:right; in #sectionBar definition.
Then add a <br clear="all" /> immediately before closing the div with class "wrapper".
Then you will have to reposition your elements. Work on margins and paddings to get the desired result.
The problem you describe is caused by position:absolute behaviour. In fact, with absolute positioning, the element is removed from the natural flow of the html, and as the name suggests, absolutely positioned :) Thus, the other elements (e.g. footer) go "under" it.
This problem with calling up the font that has been declared at the start of the CSS has been bugging me for a day. I've checked many resources and the code seems to be ok, but maybe i'm missing something. I've put in the #font face and tried to use it in my h1 header but it doesn't work.
Thanks in advance guys.
HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Photoblog</TITLE>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</HEAD>
<BODY>
<div id="container">
<header>
<H1>Howard Tang</H1>
</header>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id='container'>
<aside>
<h2>About Me</h2>
<p>Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.</p>
</aside>
<article>
<h2>Welcome:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic1.jpg" alt="Angry face" class="resize"/>
</article>
<article>
<h2>First Impressions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic2.jpg" alt="Angry face" />
</article>
<article>
<h2>Bro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu.
Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue.
Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus
id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac
turpis. </p>
<img src="pic3.gif" alt="Angry face" />
</article>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</BODY>
</HTML>
CSS:
#font-face {
font-family: 'Blackout';
src: url('fonts/Blackout2.ttf');
font-weight: normal;
font-style: normal;
}
body {
background-color:#F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: #1C140D;
color: #ffffff;
display:block;
height: 80px;
width: 900px;
text-align : left;
line-height: 80px ;
font-size: 60px;
font-family:'Blackout',Sans-Serif;
margin-bottom: 0px;
}
nav ul {
list-style : none;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px;
padding-left: 0px;
text-align : center;
}
nav ul li {
color : #111111;
margin: 0px;
display : block;
}
nav {
width:1900px;
align:center;
background-color:#F2E9E1;
margin-top: 20px;
margin-left: 0px;
padding: 0 0 0 0;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
background-color: #CBE86B;
float: left;
padding: 20px 20px 40px;
width: 560px;
height: 560px;
}
article img {
float: left;
height : 350px;
width : 550px;
}
aside {
background-color: #1C140D;
color: #CBE86B;
float: right;
padding-left: 20px;
padding-right: 20px;
width: 260px;
height: 1840px;
padding-top: 20px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
text-align: left;
}
Every browser support different type of font ( http://sixrevisions.com/css/font-face-guide/ ):
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.
so your css should look like this:
#font-face {
font-family: 'Blackout';
src: url('/Resources/fonts/Blacout2.eot');
src: url('fonts/Blacout2.ttf'), url('fonts/Blacout2.woff'), url('fonts/Blacout2.svg');
font-weight: normal;
font-style: normal;
}
A possibility is that you have NoScript (or similar) installed? It's known to block web fonts unless you allow them.
It turns out the problem was that font face src pathing is relative to the stylesheet file. So my fonts were actually in the wrong folder, which meant the code was ok but it was a simple pathing error.
I figured it out after a couple of days of frustration and will not be making this simple mistake again, thanks to everyone who helped.