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/
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;
}
Please take a look at this FIDDLE. I've overwritten .ui-corner-all with {border-bottom-right-radius:0px;border-bottom-left-radius:0px;} to remove the bottom radius corners of the top blue header, but it is also affecting the bottom of the tabs as well, where I want to add a thick border bottom line with radius corners. Kind of like this:
Any idea to add a different class for the tab bottom?
HTML:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
The theme I'm using is Redmond.
The line I've added:
.ui-corner-all {border-bottom-right-radius:0px;border-bottom-left-radius:0px;}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
The above code removes the rounded corner from the bottom of the top blue nav alone.
.ui-corner-all is common throughout the tabs that's why its affecting both.
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 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;}