I have a problem in my div elements I can not show them in one line:
<div>
<table>
<tr>
<td>hellow world</td>
</tr>
</table>
<ul>
<li>hi world</li>
</ul>
</div>
the table shown above the the ul and I want the tow elements to shown in one line next to each other.
I tried to use:
div
{
display:inline;
}
or :
div
{
display:block;
}
But it did not work . any body can help me on this??
If you want to show the table and the ul side by side, those are the two elements you should target, not the container they happen to be in.
If they are the same height, simply writing
table {float:left; margin-right:40px}
will do the trick. (You will need the margin, because lists also work with margins to show the bullets, and the bullet would end up inside the table if you didn't provide for that.)
See fiddle
If the table is higher, you will also have to clear the float afterwards, else subsequent content may also end up to the right of the table:
div::after {content:''; display:block; clear:both}
See updated fiddle
Float your content:
div
{
float: left;
}
You can apply display:inline-block, but the key is making sure you apply it to the correct elements...
table, ul
{
display:inline-block;
}
Here is a working example
you can just use table,ul{display: inline-block;} demo
Try this
<div>
<table style="float: left;">
<tr>
<td width="100">
hellow world
</td>
</tr>
</table> <ul>
<li>hi world</li>
</ul>
</div>
Related
so basically this is my layout. 3 row div (header content and footer)
what i want to do is emulate inside the content div a table format so i can display info as such
picture1 detail1
picture2 detail2
picture3 detail3
there are at least 10 rows of such info. doesn't have to be picture but can also be text
picture div will be about 150px while detail will be the rest. for the sake of example lets say 600px wrapper
i tried a few setups but it didn't come out the way i desired. in a table this would be a cinch but i would like a pure css table-less layout
something i tried but doesn't come out into columns
HTML
picture
item 1 goes here
picture2
item2 goes here
CSS
.itemwrapper{width:600px;}
picture{width:150px;float:left;}
item{width:450px;float:left;}
.clear {clear:both;}
please tell me how i can do this. jsfiddle example here - http://jsfiddle.net/4qvz220b/1/
table would be as simple as
<table width="500">
<tr>
<td width="150">picture1</td>
<td width="450">item1 goes here</td>
</tr>
<tr>
<td>
<td width="150">picture2</td>
<td width="450">item2 goes here</td>
</tr>
</table>
can someone point me in the right direction, i don't know much about css except what i can do through trial and error. the solution must be cross browser compatible css with no js or hacks etc.
please note that this is not to layout the entire page but just a two column content inside another div. if a unordered list can be used instead somehow, please let me know.
You almost got the structure right. You just need to use the right properties...
With css you can build the actual table structure using the display properties, as you have:
display: table
display: table-row
display: table-cell
And other, such as header and footer, if you use the right syntax.
So a basic example (without any style customization) would be something like:
FIDDLE LINK
<div class="mainwrapper">
<div class="itemwrapper">
<div class="picture">picture</div>
<div class="item">item 1 goes here</div>
</div>
<div class="itemwrapper">
<div class="picture">picture2</div>
<div class="item">item2 goes here</div>
</div>
</div>
css:
.mainwrapper {
display: table;
}
.itemwrapper {
display: table-row;
}
.picture, .item {
display: table-cell;
}
So, Im currently trying to do this:
<table class ="tablez">
<tr>
<th>Table Title </th>
</tr>
<tr>
<td>
<a tabindex="0" class="clickable">Click Me!</a>
<div id="showedClickable">
<p>This is showed when Click Me! is clicked.</p>
</div><!--EO showedClickable -->
</td>
</tr>
</table>
Heres the class
#showedClickable {
position:absolute;
display:none;
width:auto;
height:auto;
}
Heres what happens when you click.
a.clickable:focus + #showedClickable {
display:block;
}
It works fine on chrome on a laptop but when I try this on a mobile(iPhone) this doesn't work....What's the issue here?? How can I work around this,solve this?
Thank you for your time!
I had simillar trouble to this. The problem is that the iPhone doesn't redraw siblings based on events in CSS.
Try nesting your elements like this and using a child selector rather than a sibling selector. It is also generally more semantic as the item you click is often a heading for what is shown.
Oddly enough the iPad supports hover as a click event,
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
li:hover ul {display: block;}
I am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables
I'm attempting to create a complex div structure using CSS.
I want it to be made up of four columns. On the left is just a list of images. On the right is the complex div structure that I can't figure out a way to create. There should be two large vertical boxes containing various details. In-between these vertical boxes are any number of horizontal boxes.
My problem is that I cannot work out how to create this div structure in a way that 'scales', i.e. there could be any number of horizontal boxes between the two vertical boxes.
This is the div structure I was attempting to use:
<div class="result">
<div class="detail_1">
<p>Detail 1</p>
</div>
<div class="details">
<p>Details</p>
</div>
<div class="details">
<p>Details</p>
</div>
<div class="detail_2">
<p>Detail 2</p>
</div>
</div>
Any help would be greatly appreciated!
EDIT: I have fixed this problem by just using tables. Thanks for the replies.
Update 2
Your question is: How to make the price & flight_number div the same height as the parent div (container)..
1) Use the technique described here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
2) update your CSS so that the flight number and the price are vertical aligned in the middle of their div.
I think that mine HTML structure is better then yours because it's more clear and easier to work with.
So based on my HTML structure: The parent container (flight_info) is stretchend as long as the content inside (the table with the rows will be the longest). the div's flight_number and price are also the total height of the parent container thanks of the technique described in step 1 above. The extra CSS (step 2) will align the price and flight number nicely in the middle.
OLD
<ul id="flights">
<li>
<ul class="images">
<li><img src="img1" alt="your image" /></li>
<li><img src="img2" alt="your image 2" /></li>
</ul>
<div class="flight_info" id="flight_EK49">
<div class="flight_number">
EK49
</div>
<table>
<thead>
<th>date</th>
<th>from</th>
<th>to</th>
</thead>
<tbody>
<tr>
<td>1/1/2013</td>
<td>departure airfield</td>
<td>destination airfield</td>
</tr>
...
</tbody>
</table>
<div class="price">
€999,99
</div>
</div>
</li>
// duplicate the above for a new flight..
</ul>
And for the CSS style (you must do the rest on your own because this is just an example. I didn't test any of the code):
<style>
#flights .images {
float: left;
width: 250px;
}
.flight_info {
float: left;
width: 700px;
}
.flight_info .flight_number,
.flight_info .price {
float: left;
width: 150px;
}
.flight_info .price {
float: right;
}
.flight_info table {
float: left;
width: 400px;
}
</style>
I think you will get the idea.
EDIT 1
Changed all the position absolutes to floats because it easier with the li's automatic heights.
I also added the leg images of the flight as well, but as I mentioned, you have to do the rest yourself ;)
Have been using a simple CSS only tooltip.
Working Example
css:
.tip
{
position:relative;
}
.tip span.tooltip
{
display:none;
background:#ff5112;
border:1px solid #9C0;
}
.tip:hover span.tooltip
{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center
}
html:
<span class="tip">
<table><tr>
<td>Working Tip</td><span class="tooltip">Tip</span>
</tr></table>
</span>
Not working example:
html:
<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>
And a Live example
Your problem is the table element - you cannot have a span that wraps <td>. Get rid of the table and everything will work.
I don't see your tooltip css class, try adding one
table within a span is not allowed, try fixing that
I think that maybe I see your question but since the question is omitted, I'll take a shot. The second example is mal-formatted if you really wanted something to that extent it should be more like:
<span class="tip">
<table>
<tr>
<td>Working Tip</td>
</tr>
</table>
<span class="tooltip">Tip</span>
</span>
If you are going to wrap the entire table the "tip" should be after the table tag.
<span class="tooltip"> needs to go inside of <td class="tip"> for your current CSS to work as expected...
<table><tr>
<td class="tip">
Working Tip
<span class="tooltip">Tip</span>
</td>
</tr></table>
The solution that worked for me:
<table><tr><td>
<a href="blah.php" class="tip">
Blah Blah Text
<span class="tooltip">Blah Blah Tip</span>
</a>
</td></tr></table>
But this looks really bad with css turned off, so the way to go will be using the title attribute and then adding mootools or such libs on the top.
Thank you guys.