I want to have my list (nav) align to the center of an image (logo). I tried using vertical-align: middle;, but I couldn't get it to work when I floated the images left and right.
Here's my code:
HTML:
<div id="head">
<img id="logo" src="logo.png" />
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS:
#head {
margin-top: 2px;
width: 100%;
}
#logo {
float: left;
}
ul#nav {
float: right;
}
ul#nav li {
display: inline;
list-style-type: none;
}
I took all the vertical-align: middle;'s from where I put them (I tested it in each element, even though it was only supposed to be applied to #logo, from what I've read.)
Anyways, any help would be appreciated.
Vertical-align:middle aligns the median of child element to the median of parent element. If all child elements have float:left, then the parent has a height of 0px and hence its median is above the child elements.
So, you might add a <br style='clear:both' /> after your menu and the DIV will finally get its vertical size.
table with single row comes handy here.
<div id="head">
<table>
<tr>
<td>
<h1>Fluid Heading</h1>
</td>
<td style="width: 5%">
<img id="logo" src="logo.png" />
</td>
<td style="width: 5%">
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</td>
</tr>
</table>
</div>
CSS:
.head td { vertical-align: middle; }
Related
Oh, the golden days of table-based layouts. Shouldn't we all go back there and screw semantics? (I know, I know, ...)
But I have a tricky website layout that is done in seconds and very few lines of code if I use a table. I have been pulling my hair over achieving the same with divs for two days now. Maybe someone can help.
This is the layout I want to achieve:
http://jsfiddle.net/reltek/13c6yfmh/
This is the code using tables, nice and easy:
<table border="1" width="100%">
<tr>
<th rowspan="2" width="30%" valign="top">
<h2>Main Navigation</h2>
<p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</th>
<td valign="top">
<h1>Main Content</h1>
<p>Flexible, might get really long.</p>
</td>
</tr>
<tr>
<td height="3em">
<h2>Footer</h2>
<p>flexible height, should stay at the bottom of the page.</h2>
</td>
</tr>
</table>
My div-based HTML can be found here: http://jsfiddle.net/reltek/48rmshen/
The problem is: the footer on the right doesn't stay at the bottom, if the left column is longer than the right one.
Any help appreciated, thanks everyone!
This is a job for flexbox (prefixing and workarounds for older browsers left as an exercise for the reader)
body {
display: flex;
}
nav {
background: red;
}
.non-nav {
display: flex;
flex-direction: column;
}
main {
background: green;
flex-grow: 1;
}
footer {
background: blue;
flex-shrink: 1;
}
<nav>
<h2>Main Navigation</h2>
<p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</nav>
<div class="non-nav">
<main>
<h1>Main Content</h1>
<p>Flexible, might get really long.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>end of text</p>
</main>
<footer>
<h2>Footer</h2>
<p>flexible height, should stay at the bottom of the page.</p>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</footer>
</div>
In keeping with your display:table in your example the following works.
Here is the jsfiddle http://jsfiddle.net/r4pg8p25/2/
You can add and subtract your empty paragraphs and see it expand and contract in sync with the left hand panel.
Hope this helps,
Tim
<html>
<header>
<style>
html, body { text-align: justify; height: 100%; }
.layout { display: table; height: 100%;}
.layout .columns-container { display: table-row; height: 100%;}
.layout .columns-container .column { display: table-cell; height: 100%;}
.layout .top { display: table-row; height: 100%;}
.layout .bottom { display: table-row; height: 100%;}
.layout .top .main{ display: table-cell; height: 100%;}
.layout .top .footer{ display: table-cell; height: 100%;}
.one-third { width:33%; float: left; height: 100%;}
.two-thirds { width:66%; height:100%; float: right; }
.main-footer { height: 100%; }
.nav { background: red; padding: 20px; }
.main { background: green; padding: 20px; height: 100%; }
.footer { background: brown; padding: 20px; height: 150px; }
</style>
</header>
<body>
<div class="layout">
<div class="columns-container">
<div class="column one-third">
<div class='nav'>
<h2>Main Navigation</h2>
<p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
padding-bottom:100%; margin-bottom:-100%;
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>end</p>
</div>
</div>
<div class="column two-thirds">
<div class="layout main-footer">
<div class='top'>
<div class="main" role="main">
<h1>Main Content</h1>
<p>Flexible, might get really long.</p>
<p>end of text</p>
</div>
</div>
<div class='bottom'>
<div class="footer">
<section id="colophon" class="site-info" role="contentinfo">
<h2>Footer</h2>
<p>flexible height, should stay at the bottom of the page.</p>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can make use of display:table but unfortunately you can't do rowspan so you need to get a bit creative with the div structure:
html, body {
min-height:100%;
padding:0;
margin:0;
}
#wrapper {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.table {
display:table;
width:100%;
height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
#left-column {
width:30%;
background:red;
}
#right-column {
width:70%;
height:100%;
}
#content, #header {
height:100%;
}
#header {
background-color:green;
}
#footer {
background-color:blue;
}
<div id="wrapper">
<div class="table">
<div class="row">
<div id="left-column" class="cell">
<h2>Main Navigation</h2>
<p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="right-column" class="cell">
<div id="content" class="table">
<div id="header" class="row">
<div class="cell">
<h1>Main Content</h1>
<p>Flexible, might get really long.</p>
</div>
</div>
<div id="footer" class="row">
<div class="cell">
<h2>Footer</h2>
<p>flexible height, should stay at the bottom of the page.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Example Fiddle
I'm looking to change the background color of a footer. I tried making another div around it which worked but no matter what the background-color didn't budge. I must be overlooking something obvious!
This is what I have right now: http://jsfiddle.net/x5yvm50r/
And the code:
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}
If anyone has any idea, I'd really appreciate pointing me in the right direction! This is more or less what I'm hoping for it to look like eventually
Thanks! :)
Simple, you should wrap the content in a seperate block level element (i.e. div or footer). Here is the updated fiddle, using a block level element with id="wrapper": http://jsfiddle.net/df1zjwmb/1/
<footer id="wrapper">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
And the CSS:
#wrapper {
background-color: green;
}
Clearing floated elements means that elements below the clear will be reset, but does not turn the floated elements into a block itself. To solve the problem requires adding a wrapper div, which creates a block level element that you can apply a background color to. Or you could use something other than floats, like inline blocks.
Here is more information: Advantages of using display:inline-block vs float:left in CSS
Check this fiddle
HTML
<div class="floatleft footcontainer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons</div>
<div class="clear"></div>
</div>
CSS
.floatleft {
float: left;
margin: 0 20px 0 0;
width: 400px;
}
.clear {
clear:both
}
.footcontainer {
background-color:lightblue;
float:left;
}
I've added a div which holds the 3 divs and gave it the background color and the float property.
Here you go: http://jsfiddle.net/5s4w19zy/
I wrapped the three floated divs in a container div (footer) and then floated them inside of that.
<footer>
<div>
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div>
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div>
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
footer
{
width: 100%;
height: 150px;
background: #f5f5f5;
overflow: hidden;
}
footer div
{
float: left;
display: block;
margin: 0 0 0 0;
width: 33.333333%;
height: 150px;
}
.clear {clear:both}
HTML5 offers semantic markup tags, and since you need a wrapper for your footer (allowing a parent element to have a the background-color property of your choosing), <footer> tag sounds like the way to go:
<footer id="footer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
#footer { background-color:#asYouLikeIt; }
I have used flex box:
check this : http://jsfiddle.net/x5yvm50r/9/
HTML:
<footer>
<section class="left">l</section>
<section class="center">c</section>
<section class="right">r</section>
</footer>
CSS:
footer{
width:100%;
display:flex;
}
footer section{
flex:1;
}
I'm having some trouble formatting some text that appears after an ordered list. The text after the list is no longer indented. Why is this happening and how can I fix it?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practice Site</title>
<link rel="stylesheet" type="text/css" href="prac_style.css">
</head>
<body>
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>
List of things:
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
Text after list.
</p>
</div>
</div>
</body>
</html>
And here is my CSS:
body {
margin: 0;
background: #FFEEEB;
font-family: verdana, sans-serif;
font-size: 0.85em;
}
p {
line-height: 1.5em;
text-align: justify;
}
#content {
float: left;
width: 700px;
margin-right: 20px;
}
#content .post {
background: #FFF;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #CCC;
}
#content .post p {
margin: 10px 20px;
}
I believe the reason is that your HTML is not properly formatted. You shouldn't wrap an <ol> list inside a <p> tag. Also, I recommend you close the open <li> tags too.
Try this HTML instead:
<body>
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
</div>
</div>
</body>
Your problem is that the browser is automatically ending the <p> tag before the <ol>. It's kind of like how you don't end your <li> tags because you know they will be ended automatically.(Which, by the way, is not the proper way of doing it.)
To fix this, just put the 'List of things:' and 'Text after list.' in their own separate <p> tags like this:
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
If you have Chrome our some other browser with 'inspect element', use that and you will see what I mean.
Lists get given padding by default, other elements don't. You either need to apply the same padding to the <p> tag so they line up, or reset the padding and the list-style-position of the <ol>.
Also, don't nest <ol> inside <p>, it's not allowed. And close your <li> tags (</li>). Although I don't think it's required in HTML5, it is best practice.
Try:
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
</div>
</div>
To reset the list indentation use:
ol {
list-style-position: inside;
padding: 0;
}
You can then control the padding on the parent <div> if you want the whole block indented.
Demo
I am attempting to create a bucket in HTML and CSS by placing a header image on top of a bottom image. When i do this in dreamweaver, there is no gap between the two objects. However, when I upload it to a server, a gap develops between the two images. Any help or suggestions?
<div class="wrapBucketInnerLeft">
<div class="bucketLeft">
<h2 class="bucketHeader"><img src="images/bucket_header_text_basic.png" width="212" height="36" alt="Basic Plan" /></h2></td></tr>
<div class="bucketDetails">
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
<div class="bucketBottom">
<p class="cost">$1.95</p>
<img class="button" src="images/button_bucket.png" width="117" height="42" alt="Learn More" /></div>
</div>
</div>
<!--Bucket 2-->
<div class="bucketRight">
<h2 class="bucketHeader"><img src="images/bucket_header_text_economy.png" width="212" height="36" alt="Basic Plan" /></h2>
<div class="bucketDetails">
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
<div class="bucketBottom">
<p class="cost">$1.95</p>
<img class="button" src="images/button_bucket.png" width="117" height="42" alt="Learn More" /></div>
</div>
</div>
</div>
CSS:
.bucketHeader {
background-image:url(images/bg_header_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:46px;
margin:0px 0px 0px 0px;
padding:14px 0px 0px 18px;
}
.bucketDetails {
background-image:url(images/bg_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:278px;
margin:0px 0px 0px 0px;
padding:0px;
}
.bucketBottom p.cost {
font-size:28px;
font-weight:bold;
color:#335191;
margin:0px 0px 6px 0px;
padding:0px;
}
.bucketBottom{
text-align:center;
}
a img.button {
border:none;
}
well i know what is it! padding of .bucketHeader
.bucketHeader {
background-image:url(images/bg_header_bucket.png);
background-repeat:no-repeat;
background-position:top center;
height:46px; // here reduce the height of this div until the gap between them is removed, i think it should be 28px
margin:0px 0px 0px 0px;
padding:14px 0px 0px 18px; // here you see you have given padding of 14px of both top and bottom, this increases the height of div magically which you can't see because your image has background-repeat:no-repeat
}
Why are you using background-image? Do you see how the header and bottom images have like a pixel offset on the right side like this? Why don't you use div's with the images in them instead and don't put position:relative; top:0px to get the job done. You can put whatever text you want within a div with higher z-index ontop of the divs with the images and ofset top:-(whatever the height of the other div is)px or left:(whatever the width is)px?
Just a thought.
Cheers!
I have an area on my page #topLeft which has a minimum height set to it.
Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;
At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.
I am assuming the problem is called by mixing a min-height with absolute positioned content?
Any ideas how to get round this, code below:
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#heroBanners {bottom:0; position:absolute;}
It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of heroBanners.
<div id="parent">
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#parent {bottom:0; position:absolute;}