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
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;
}
I have the following HTML:
<div class="wall" >
<table>
<tr>
<div class="tbr01"><th>Content</th></div>
<div class="tbr02"><th>User</th></div>
<div class="tbr03"><th>Published</th></div>
</tr>
</table>
</div>
How do i adjust the width of the th div.tbr01
This is what i've tried in my css file: but i am doing something wrong?
div.wall table tr div.tbr01 th {
width: 100px;
}
Regards,
Thijs
Your HTML is invalid.
You cannot have a <div> as a child of a <tr> or a parent of <th>.
Browsers will perform error recovery in various different ways and often give you a DOM that isn't like you expect (e.g. by moving all the div elements outside the table).
Get rid of the div elements and apply your styles directly to the table cells.
seems it doesn't like the div... apply the class to the th or use
div.wall table tr th {
width: 300px;
}
OR
<div class="wall" >
<table>
<tr>
<th class="tbr01">Content</th>
<th class="tbr02">User</th>
<th class="tbr03">Published</th>
</tr>
</table>
</div>
div.wall table tr th.tbr01 {
width: 300px;
}
I have some div, inside of which has a couple of tables as below
<div id="div1">
<div id="div2">
<div id="div3">
<table id="table1"><tr><td></td></tr></table>
<table id="table2">
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
</table>
</div>
</div>
</div>
When table2 has lot of rows, am using overflow in css to show the horizontal scroll bars. This scrollbars I am applying to div2, so when we scroll, table1 also scrolls down. How to make sure that table1 is always fixed, that is, it does not scroll down?
Thanks a lot
css
table {max-height: 200px;}
tbody {
height: 180px;
overflow:auto;
}
html
<table id="table2">
<tbody>
<tr></td></td></td></td></tr>
<tr></td></td></td></td></tr>
<tbody>
</table>
For more in depth explanation, see: http://www.imaputz.com/cssStuff/bigFourVersion.html
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.
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }