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
Related
I want to create a box for pros and cons just like Life Hacker which looks like this:
As a beginner in HTML CSS, I started and so far, I have this:
As can see there is too much overlapping. How do I fix this? Also, I would like to align the text with the list.
HTML:
.indent-1 {
float: left;
border: 2px solid orange;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
}
.indent-1 section {
float: left;
}
<section class="indent-1">
<section>
<h3>What we like:</h3>
<ul>
<li>Pro 1</li>
<li>Pro 2</li>
<li>Pro 3</li>
</ul>
</section>
<section>
<h3>What we don't like:</h3>
<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>
</section>
</section>
Any more suggestions to make it look pretty will be welcomed.
Thanks
Grid is the way to go here as you can use the grid-template-columns to set the width equally. Flexbox will do the same but it need a bit more work, especially if you want to stop your headers wrapping. There's a good introduction to grid from Kevin Powell and CSS tricks also have a good guide. It's very powerful and recommended to learn both flex and grid as they solve a lot of problems from the bad old days.
.indent-1 {
display: inline-grid;
grid-template-columns: 1fr 1fr;
border: 2px solid orange;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
}
<section class="indent-1">
<section>
<h3>What we like:</h3>
<ul>
<li>Pro 1</li>
<li>Pro 2</li>
<li>Pro 3</li>
</ul>
</section>
<section>
<h3>What we don't like:</h3>
<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>
</section>
</section>
.indent-1 {
display: flex;
justify-content: space-between;
border: 2px solid orangered;
border-radius: 5px;
padding: 10px 20px;
}
<section class="indent-1">
<section>
<h3>What we like:</h3>
<ul>
<li>Pro 1</li>
<li>Pro 2</li>
<li>Pro 3</li>
</ul>
</section>
<section>
<h3>What we don't like:</h3>
<ul>
<li>Con 1</li>
<li>Con 2</li>
<li>Con 3</li>
</ul>
</section>
</section>
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 attempting to make tabs in a section in my body, but it's not showing up as tabs, but rather just links to sections of the text.
<div class="tabs">
<ul id="tabsnav" data-tab>
<li class="selected">Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
</div>
<div id="tab-1">
<p> tab 1</p>
</div>
<div id="tab-2">
<p> tab 2.</p>
</div>
<div id="tab-3">
<p> tab 3.</p>
</div>
<div id="tab-4">
<p> tab 4.</p>
</div>
In the CSS I have this:
div.tabs #tabsnav {
list-style-type: none;
float: left;
text-align: left;
margin: 60px;
background: #000000;
width:300px;
}
div.tabs #tabsnav li{
display: inline;
}
I'm new to tabs, so if anyone could throw me any hints as to how to make them show up so that only one tab is visible at a time, it would be greatly appreciated.
I believe you will need to use the :target selector in your CSS http://www.sitepoint.com/css3-tabs-using-target-selector/
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;}
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; }