I've added padding and margin to the li's themselves, but it spaces them out too far. I'm trying to figure why the longer chapters won't just push the bottom li down a line and keep on going.
Here is the test page.
This is my HTML:
<div id="sidebar">
<h2> Contents </h2>
<div id="accordion">
<h3>Part 1: Food the Skin</h3>
<div>
<ul id="partOne" class="toc">
<li><h3>01:</h3>The Use of Fire</li>
<li><h3>02:</h3>Downsides to Using Heat</li>
<li><h3>03:</h3>Altered Protein</li>
<li><h3>04:</h3>Protein Digestion</li>
<li><h3>05:</h3>Protein in the Skin</li>
<li><h3>06:</h3>Decomposition of Redundant Protein</li>
<li><h3>07:</h3>Protein & Water</li>
<li><h3>08:</h3>Swollen Skin,Cellulite & Treatments</li>
<li><h3>09:</h3>Dry Skin</li>
<li><h3>10:</h3>How to Rid </li>
<br/>
<li><h3>11:</h3>Cellulite</li>
<li><h3>12:</h3>Visibility of Fat Cells </li>
<li><h3>13:</h3>Cellulite & Skin Tone</li>
<li><h3>14:</h3>Cellulite & Treatments</li>
<br/>
<li><h3>15:</h3>Acne: In Short</li>
<li><h3>16:</h3>Acne & Hygiene</li>
<li><h3>17:</h3>Acne & Hormones</li>
<li><h3>18:</h3>Acne & Peeling </li>
<li><h3>19:</h3>How to Eliminate Acne, Cellulite & Treatments</li>
<li><h3>20:</h3>What Type of Acne</li>
<li><h3>21:</h3>Susceptibility to Acne</li>
<li><h3>22:</h3>Menstruation & Acne</li>
<li><h3>23:</h3>Acne & Diet-results, Cellulite & Treatments</li>
</ul>
</div>
<h3>Part 2: Nutrients & Toxins</h3>
<div>Second content</div>
<h3>Part 3: The Diet</h3>
<div>Second content</div>
<h3>Part 4: Losing Weight Naturally & Lastingly</h3>
<div>Second content</div>
</div>
</div>
Here is my CSS:
#accordion{
margin: 10px;
}
#accordion h3{
font-size:16px;
}
#accordion h3 a{
}
#accordion h3 a:hover{
}
.toc{
list-style:none;
font-size: 14px;
}
.toc li{
width: 220px;
height:18px;
}
#accordion div > ul{
padding: 10px 0 0 0;
}
#partOne h3{
float:left;
width: 25px;
padding: 0 3px 0 0;
font-weight:normal;
}
#partOne a{
color: blue;
text-decoration:none;
}
#partOne a:hover{
text-decoration: underline;
}
Can't get this problem solved after a couple of hours!
Remove the height property from the .toc li style declaration:
.toc li {
width: 220px;
}
DEMO
If you'd like to set the line height of the lis, use line-height CSS property. Also, consider replacing & with &, reference HTML Entities.
I'm not real sure what you're trying to do, but why not use an ordered list instead so you don't need to manually type the parts?
It's doing that because you are fixing the height of the LIs, if you remove the height you will also have to "contain" or "clear" the floated H3s. One way to do that is to set the LIs overflow property.
.toc li {
width: 220px;
overflow:hidden;
}
http://www.quirksmode.org/css/clearing.html
(Also I'm pretty sure putting those BRs in the UL where you have is not valid HTML)
Related
I am having trouble positioning a border in a div id. The border doesn't follow the text within the div.
My HTML looks like this:
<div id="menu-left-top">
<ul class="menu-left-top">
<li>Kategorier</li>
</div>
<div id="menu-left">
<ul class="menu-left">
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</div>
And this is my CSS:
#menu-left-top {
width:195px;
height:1em;
margin-top:5px;
border-top-style:solid;
border-width:thin;
border-color: #999;
}
ul.menu-left-top {
list-style-type: none;
height:1em;
}
ul.menu-left-top li{
}
ul.menu-left-top li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light";
}
ul.menu-left-top li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}
#menu-left {
width:195px;
max-height:4em;
margin-top:5px;
border-top-style:solid;
border-bottom-style:solid;
border-width:thin;
border-color: #999;
}
ul.menu-left {
list-style-type: none;
}
ul.menu-left li{
}
ul.menu-left li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light";
}
ul.menu-left li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}
You can see the result here. It's the navigation to the left that is my current problem. As you can see, the div floating right also has faults, but I don't know if it has anything to do with my initial problem?
No issue buddy, but for this also we dont need to separate the first menu item from others,
check these,
your html code will be like this :
<div id="menu-left">
<ul class="menu-left">
<li class="first">Kategorier</li>
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li class="last">Design</li>
</ul>
</div>
if you want it like this
then you can use this css :
.first { border:#000 solid; }
.last{ border-bottom:#000 solid; }
and if you want it like this then you can use this :
.first { border-top:#000 solid; }
.last { border-bottom:#000 solid; }
you can use this for this
.first { border-top:#000 solid;
border-bottom:#000 solid; }
.last{ border-bottom:#000 solid; }
Remove the max-height property of the menu-left div.
there is a max-height? remove max-height:4em; or you can make it height:auto;
You have not closed your ul tags in this way , as you start any html tag also you have to end the html tag, this is for most of the m\html tags, so this is the main fault here, firstly you need to close your ul's ,
<div id="menu-left-top">
<ul class="menu-left-top">
<li>Kategorier</li>
</ul>
</div>
<div id="menu-left">
<ul class="menu-left">
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</ul>
</div>
And the massive border around your list elements are coming due to
border-top-style:solid;
border-bottom-style:solid;
this is not a proper way to bordering, you can use as border:2px soild #00000; , and for more on this kindly update your layout here, just give me a blueprint of how you want to make it look, then i will help you in formatting these. Cheers. and use height:auto also
Use html format like this , as we do not need to differ the top menu, we can achieve this via this thing :
use this html code :
<div id="menu-left">
<ul class="menu-left">
<li class="first">Kategorier</li>
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</ul>
</div>
and then the css changes are as :
.first { border-top:#000 solid; }
ul.menu-left li{
border-bottom:#000 solid;
}
this will make something like this, and border styles you can change according to you, if any queries then feel free to ask,
I have a pure CSS collapsable div which is based on someone else's code who uses the :target psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/
<div class="FAQ">
+
-
<div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
<div class="list">
<p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
</div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.FAQ {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
height:auto;
margin:0;
float: left;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
/*style the (+) and (-) */
.hide, .show {
width: 30px;
height: 30px;
border-radius: 30px;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 #666;
text-align: center;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
background: #cccbbb;
opacity: .95;
margin-right: 0;
float: left;
margin-bottom: 25px;
}
.hide:hover, .show:hover {
color: #eee;
text-shadow: 0 0 1px #666;
text-decoration: none;
box-shadow: 0 0 4px #222 inset;
opacity: 1;
margin-bottom: 25px;
}
.list p{
height:auto;
margin:0;
}
.question {
float: left;
height: auto;
width: 90%;
line-height: 20px;
padding-left: 20px;
margin-bottom: 25px;
font-style: italic;
}
Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.
I've made an example here:
<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>
Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.
Using <summary> and <details>
Using <summary> and <details> elements is the simplest but see browser support as current IE is not supporting it. You can polyfill though (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.
/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}
<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>
See also how to style the <details> element (HTML5 Doctor) (little bit tricky).
Pure CSS3
The :target selector has a pretty good browser support, and it can be used to make a single collapsible element within the frame.
.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}
<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
#gbtimmon's answer is great, but way, way too complicated. I've simplified his code as much as I could.
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}
Show
Hide
<div id="answer"><p>Answer</p></div>
You just need to iterate the anchors in the two links.
+
-
See this jsfiddle http://jsfiddle.net/eJX8z/
I also added some margin to the FAQ call to improve the format.
Or a super simple version with barely any css :)
<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
</style>
<div class="faq">
<ul>
<li>Question 1
<div id="question1">Answer 1 </div>
</li>
<li>Question 2
<div id="question2">Answer 2 </div>
</li>
<li>Question 3
<div id="question3">Answer 3 </div>
</li>
<li>Question 4
<div id="question4">Answer 4 </div>
</li>
<li>Question 5
<div id="question5">Answer 5 </div>
</li>
<li>Question 6
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
http://jsfiddle.net/ionko22/4sKD3/
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/
I know there are several posts about this but none of the solutions are working for me. With that said, my containing div will not grow with my content. I know why this is happening, because it is 'float'ing but even when I use 'clear' it will not expand with the parent div. I've tried using using clear in nearly every element below with no success. Any help would be greatly appreciated.
View Image of problem:
For a live example please visit, http://thehopcompany.com/index.php?id=49
---------------CSS----------------
.product {
width:775px;
margin:0;
padding:0;
margin-top:75px;
margin-left:-8px;
}
.product ol{
margin:0px;
}
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:100px;
color:#000;
}
.product-column-left{
float:left;
width:100px;
height:100px;
}
.product-column-right{
float:left;
width:120px;
border-left:1px solid #ccc;
height:100px;
text-align:center;
}
.product-column-center{
float:left;
width:470px;
min-height:100px;
padding-right:15px;
padding-left:15px;
text-align:left;
padding-bottom:30px;
display:block;
}
.product h2{
font-size:18px;
margin-bottom:5px;
margin-top:0;
}
.product .text-underline{
text-decoration:underline;
}
.description-text{
font-size:12px;
color: #000;
}
.clear{
clear:both;
}
--------------------------HTML--------------------------
<li style="list-style:none;">
<div style="width:750px;" >
<div class="product-column-left">
<img align="left" style="border:0;" src="images/hop-pellets.png" width="100" height="100" />
</div>
<div class="product-column-center" >
<h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2>
<div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
</div>
<div class="product-column-right">
<h2>$0.00</h2>
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
</li>
</ol>
</div>
Try to add overflow hidden to the parent li
.product li {
....
overflow: hidden;
/*height: 100px;*/
}
The problem with overflow:hidden is it will hide overflowing elements if you have them in your layout. So by using clearfix which is i suppose the best practice you can acheive it like below.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Then, basically you just need to add the class in your container elements. More about Clearfix
<li class="clearfix">
<div style="float: left;">
<div class="content">Big content</div>
</div>
</li>
FIDDLE DEMO
Adding a clearfix should solve your problem:
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
Add the above div at the very end of your container div (i think after product-column-right) and just before your closing li tag. That should ensure that the div spans the content.
Your product.li style has a height of 100px, so that's going to constrain the box no matter what. Remove that setting (or change it to height:auto) and then add an empty clear div just before the closing li tag and you should be fine.
So your CSS definition would change to:
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:auto;
color:#000;
}
And then the relevant HTML:
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
<div style="clear:both"></div>
</li>
</ol>
</div>
I was using overflow: for a while with much success - but I had a few problems and decided to go back to this clear fix. If you have any problems - check it out.
http://css-tricks.com/snippets/css/clear-fix/
Trying to get these list headings to line up correctly, but I can't figure out the justification to get it to line up. Trying to style it like the second one but those bold tags are pushing it down a line.
<div class="block">
<ul class="toc partThree">
<li><b>39:</b>Maintaining This Diet</li>
<br/>
<li><b class="parts">Part 3A:</b><a class="partslink" href="#"> About Fruit Consumption</a></li>
<li><b>40:</b>Ideal Fruit-combinations</li>
<li><b>41:</b>Fruits To Go</li>
<li><b>42:</b>Salads & Shakes</li>
<li><b>43:</b>Fruits In General</li>
<li><b>44:</b>About Consuming Nuts</li>
<br/>
<li><b class="parts">Part 3B:</b><a class="partslink" href="#"> About Consuming Animal Food</a></li>
<li><b>45:</b>About Fresh Raw Fish</li>
<li><b>46:</b>About Fresh Raw Egg Yolk</li>
<br/>
<li><b class="parts">Part 3C:</b><a class="partslink" href="#"> The Most Important Section of This book</a></li>
<li><b>47:</b>Remember That...</li>
<li><b>48:</b>The Rules</li>
<li><b>49:</b>The Obstacles</li>
<li><b>50:</b>Cravings</li>
<li><b>51:</b>Traps</li>
<li><b>52:</b>How To Pick Munch-foods</li>
<li><b>53:</b>Protein Contents</li>
<li><b>54:</b>Single Munch-food Items</li>
<li><b>55:</b>Munch-food Meals</li>
</ul>
</div>
Here is the CSS:
.toc{
list-style:none;
font-size: 15px;
}
.toc li{
margin:0 0 0 10px;
width: 220px;
overflow:hidden;
font-size:13px;
font-family:Arial;
}
.toc b{
float:left;
padding: 0 4px 0 0;
font-weight:bold;
}
.toc a{
float:left;
width:191px;
padding:0 0 0 0px;
color: black;
text-decoration:none;
}
.toc a:hover{
color: rgba(0,0,0,.8);
text-decoration: underline;
}
b.parts{
}
a.partslink{
}
http://jsfiddle.net/QbUvD/
Made some adjustments, particularly removing floats. This is assuming you don't use the suggestion above of the counter-reset (although with that you'd have to restructure a lot of your HTML it seems).
the trick I used here is to add a padding-left to the li's that are title (add a class .title) then using a negative text-indent to wrap back the first line, but allow the second one to keep the padding. The only downside here is the need for a manual width on the padding/indent values, but it achieves the look you want.