I need to put three different lists side by side: an unordered list, an ordered list, and a description list
I have tried a ton of different things but so far no float inline or inline block is working, unless i am doing it wrong and someone would like to explain the correct way to use these. The way I tried it was
#schedule {
}
#schedule ul {
list-style-type: none;
display: inline-block;
}
#schedule ol {
list-style-type: none;
display: inline-block;
}
#schedule dl {
list-style-type: none;
display: inline-block;
}
as the css for
<aside id="schedule">
<h2>Favourite Teachers</h2>
<ul>
<li>Steve Sutherland</li>
<li>Steve Sutherland</li>
<li>Steve Sutherland</li>
</ul>
<h2>Favourite Classes</h2>
<ol>
<li>Web Programming</li>
<li>Tim's</li>
<li>The Den</li>
</ol>
<h2>Favourite lessons</h2>
<dl>
<dt>First Webpage</dt>
<dd>Got me hooked</dd>
<dt>Images and videos</dt>
<dd>Endless joke possibilites</dd>
</dl>
</aside>
Wrap them in div and float the div's.
<div class="first">
<ul>...</ul>
</div>
<div class="second">
<ol>...</ol>
</div>
<div class="third">
<dl>...</dl>
</div>
In CSS :
.first, .second, .third{
float: left;
margin-right: 50px;
}
Fiddle : http://jsfiddle.net/cmmabu8n/
Related
I am stuck at it for very long time and googling did not helped me much. I am generating ul(s) dynamically, their count may also very according to number of items found from db.
Here's what its looking like:
The code:
CSS:
#container{
align-content: center;
}
ul{
display:inline-flex;
padding: 5px;
}
pug:
div(id="container")
each item in items_list
ul
a(href=somelink)
div(class="image")
//- a(href=url)
img(src="/images.link", alt="", height="120px", width="160px", class="dp")
p(id="title") Title:- #{item.title}
p(id="stuff") stuff:- #{item.stuff}
I have tried align-content, justify content, etc. Also I am not giving a property like margin-left or something as number of uls will vary. (I want them to get displayed in a horizontal manner.)
First think you missed li tag which need to list after ul
I am not sure which you want but i guess you want this. This is simple demo code
#container {
align-content: center;
}
ul {
padding: 5px;
}
li {
list-style: none;
}
a {
float: right;
}
div {
float: left;
}
p {
float: left;
margin-left: 20px;
}
<div id="container">
<ul>
<li>
<a href="#">
<div>
<p id="title">Test Code title1</p>
<p id="stuff">Test Code stuff1</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<p id="title">Test Code title2</p>
<p id="stuff">Test Code stuff2</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<p id="title">Test Code title3</p>
<p id="stuff">Test Code stuff3</p>
</div>
</a>
</li>
</ul>
</div>
I'm trying to adapt this jsfiddle to work without radio button since I cannot use any <form> related tags, and neither javascript!
I "transformed" the <input type='radio'> into <a> tags, and transform the :checked pseudo class into :target
as you can see in this CodePen.
but it does not work :-(
And also solution I used to show first Tab is not usable
Can suggest what's wrong?
Thanks
Joe
Alright, using the :target pseudo-class we can achieve this.
EDIT: I added a wrapper div so you can use position absolute on the panels. This allows you to have the first panel open and switch between them.
.wrapper {
position: relative;
}
.tab-container {
display: none;
position: absolute;
top: 0;
left: 0;
background: red;
}
.tab-container:first-child { display: block }
:target { display: block }
/* just for demo */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1rem;
}
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="wrapper">
<div id="tab-1-container" class="tab-container">
Tab 1 content
</div>
<div id="tab-2-container" class="tab-container">
Tab 2 content
</div>
<div id="tab-3-container" class="tab-container">
Tab 3 content
</div>
</div>
I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!
li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>
I'm trying to position two elements within an li list next to eachother on the right side to get the result:
Some text.................A...B Unfortunatelly the ordering drives me crazy.
Here's the html code:
<ul class="list">
<li>some text
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!
.list li{
background-color:#282828;
color:#ffffff;
font-size:20px;
text-transform:uppercase;
padding-left:5px;
}
.list small.a {
display:inline;
float:right;
}
.list small.b {
display:inline;
float:right;
}
So, I aim to have:
some tex.....................A...B
but for instance it looks like:
some text....................B...A
See example here --> http://jsfiddle.net/LKVdE/
Thanks upfront for any tip!
Here is the solution: http://jsfiddle.net/surendraVsingh/LKVdE/1/
CSS
.list small.a {
background-color: #000000;
display: inline;
}
.list small.b {
background-color: #ff0000;
display: inline;
}
.list li span{
display: inline-block;
float: right;
}
HTML
<ul class="list">
<li>Brennwert kJ / kcal
<span>
<small class="a">1109kJ / 261kcal</small>
<small class="b">455kJ / 107kcal</small>
</span>
</li>
</ul>
A and B should be put in a right floating container:
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
.floatright {
float:right;
}
And
<li>some text
<div class="floatright">
<small class="a">A</small>
<small class="b">B</small>
</div>
</li>
Why does this happen, because first style is applied to a which moves it to to the right, whatever next appears in the markup must now follow a from the right that's why you see BA instead of AB
Markup changes: Include the text inside a span and add float:left to it
<ul class="list">
<li><span class="text">some text</span>
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
Css changes, remove float:right from a and b and add float:left to text
.text{float:left;}
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
Working fiddle: http://jsfiddle.net/LKVdE/8/
I have the following structure in some HTML:
<ul class="li_inline">
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
</ul>
With the CSS like this:
.li_inline li
{
display: inline;
}
.li_block li
{
display: block;
}
What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).
Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?
Thanks,
James
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
This worked for me:
<html>
<head>
<style type="text/css">
ul.outer{}
ul.outer > li{
float: left;
}
ul.outer > li > ul > li{
display: block;
}
</style>
</head>
<body>
<ul class="outer">
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>
You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.
.li_inline > li {
display: inline;
}
.li_inline > li > ul {
float: left;
}
http://jsfiddle.net/fzBnG/
.li_inline li {
display: inline-block;
float: left;
}
.li_block li {
display: block;
clear:both;
}
First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.
The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.
Once again, thanks for your help everyone.
James