810311
July 15, 2013, 11:27am
1
Hello Good People,
Please, take a look at this site http://yogastudio.atspace.com/
Issue: the following images get nudged down in Opera but look ok in Firefox and Chrome
<img id="mon" src="images/mon_img.png" alt="" width="113" height="113"/>
<img id="tue" src="images/tue_img.png" alt="" width="113" height="113"/>
<img id="wed" src="images/wed_img.png" alt="" width="113" height="113"/>
<img id="thu" src="images/thu_img.png" alt="" width="113" height="113"/>
<img id="fri" src="images/fri_img.png" alt="" width="113" height="113"/>
<img id="sat" src="images/sat_img.png" alt="" width="113" height="113"/>
<img id="sun" src="images/sun_img.png" alt="" width="113" height="113"/>
Any advice is appreciated
ronpat
July 15, 2013, 4:15pm
2
It breaks pretty wildly in Firefox, too, depending on the user’s font size.
relative positioning is not the best choice for positioning most objects. Between relative positioning and ems for positioning, it breaks according to the user’s font size and platform, and browser.
I suggest you reconsider your layout strategy and put each row in its own box, which in turn, are within a “calendar” container… or something like that.
810311
July 15, 2013, 8:38pm
3
thanks ronpat. should I use any positioning at all for scenario you suggest or just use padding/margin to move boxes around within container? also which length unit you suggest?
ronpat
July 15, 2013, 9:26pm
4
If each day-of-the-week were in a separate table, the day-of-the-week image could be absolutely positioned to the top left corner of the table (you cannot p:a within table-cells, of course); thereby, using px to position that image. It should be possible to align the columns vertically by giving each table table-layout:fixed and assigning widths to the columns. It’ll take some experimenting, but I believe that will work reasonably well in your fixed width layout.
Something like this:
table {
position:relative;
}
.day-image {
position:absolute:
top:-20px;
left:-20px;
}
<table>
<img class="day-image"></img>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The table would be repeated for each day-of-the-week with an image.
810311
July 16, 2013, 4:13pm
5
I guess I am doing something wrong - still breaks in Firefox when I increase font size.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Студия Sattva</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link href="css/style_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Расписание занятий</h1>
<div id="calendar">
<table class="schedule">
<img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/>
<thead class="border">
<tr>
<th scope="col" class="col1"></th>
<th scope="col" class="col2">Время</th>
<th scope="col" class="col3">Занятие</th>
<th scope="col" class="col4">Преподаватель</th>
</tr>
</thead>
<tbody>
<tr class="height">
<th scope="row"></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Пн</th>
<td class="strip">7:30 – 8:30</td>
<td class="strip">Цигун</td>
<td class="strip">Светлана по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td>9:00 – 10:30</td>
<td>Хатха-йога</td>
<td>Ольга по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td class="strip">11:00 – 12:00</td>
<td class="strip">Йога для беременных</td>
<td class="strip">Ольга по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td>12:30 – 16:30</td>
<td>Время для индивидуальных занятий йогой</td>
<td>по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td class="strip">17:00 – 18:00</td>
<td class="strip">Йога для беременных</td>
<td class="strip">Ольга по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td>18:00 – 19:00</td>
<td>Оздоровительная йога по улучшению зрения</td>
<td>Ольга </td>
</tr>
<tr>
<th scope="row"></th>
<td class="strip">19:15 – 20:45</td>
<td class="strip">Хатха-йога</td>
<td class="strip">Ольга</td>
</tr>
<tr class="height">
<th scope="row"></th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="schedule">
<img class="tue-image" src="images/tue_img.png" alt="" width="113" height="113"/>
<thead >
<tr id="border" >
<th scope="col" class="col1"></th>
<th scope="col" class="col2"></th>
<th scope="col" class="col3"></th>
<th scope="col" class="col4"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Вт</th>
<td class="strip">7:30 – 8:30</td>
<td class="strip">Цигун</td>
<td class="strip">Светлана по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td>9:00 – 10:30</td>
<td>Хатха-йога</td>
<td>Ольга по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td class="strip">11:00 – 12:00</td>
<td class="strip">Йога для беременных</td>
<td class="strip">Ольга по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td>12:30 – 16:30</td>
<td>Время для индивидуальных занятий йогой</td>
<td>по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td class="strip">17:00 – 18:00</td>
<td class="strip">Йога для беременных</td>
<td class="strip">Ольга по записи</td>
</tr>
<tr>
<th scope="row"></th>
<td>18:00 – 19:00</td>
<td>Оздоровительная йога по улучшению зрения</td>
<td>Ольга </td>
</tr>
<tr>
<th scope="row"></th>
<td class="strip">19:15 – 20:45</td>
<td class="strip">Хатха-йога</td>
<td class="strip">Ольга</td>
</tr>
</tbody>
</table>
</div><!--end calendar-->
</body>
</html>
/*start table*/
#calendar {
padding: 1em;
border: 1px dashed green;
}
table.schedule {
position: relative;
table-layout: fixed;
border-collapse:collapse;
font-family: Arial, Helvetica, sans-serif;
}
table.schedule thead tr {
color: #ef7eb2;
background: #f1fefe;
}
table.schedule thead tr th {
text-align: left;
padding: 7px 0px 7px 0px;
}
.col1 {
width: 70px;
}
.col2 {
width: 120px;
}
.col3 {
width: 450px;
}
.col4 {
width: 350px;
}
.height {
height: 17px;
}
.mon-image {
position: absolute;
top: 102px;
left: -6px;
z-index: 2;
}
.tue-image {
position: absolute;
top: 287px;
left: -6px;
z-index: 2;
}
.strip {
background: #f1fefe;
}
.border {
border-bottom: 2px solid #ef7eb2;
}
#border {
border-top: 2px solid #ef7eb2;
background-color: #fff;
}
ronpat
July 16, 2013, 4:58pm
6
Nope, you’re fine. My suggestion was a big fail. Remind me to never post without testing first
Hopefully, a better (tested) idea will follow…
810311
July 16, 2013, 6:59pm
7
No worries. We all know we all learn/learned by trial and error. Thanks for your time.
ronpat
July 16, 2013, 7:07pm
8
Not to give up! I’ve come up with a solution that works; however, I’m trying to understand {position:relative; top:-8em;} before submitting it.
You can’t have an image outside the <tr> tag but still inside the table as only table related tags are allowed directly inside the table tag. It needs to be inside a <tr> tag inside the <thead> in order for the HTML to be valid.
Once your HTML is valid it should be easier to ensure that the positioning works consistently.
810311
July 16, 2013, 8:08pm
11
did you mean something like this,felgall :
<thead class="border">
<tr>
<img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/>
<th scope="col" class="col1"></th>
<th scope="col" class="col2">Время</th>
<th scope="col" class="col3">Занятие</th>
<th scope="col" class="col4">Преподаватель</th>
</tr>
</thead>
…or like this
<thead class="border">
<tr><img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/></tr>
<tr>
<th scope="col" class="col1"></th>
<th scope="col" class="col2">Время</th>
<th scope="col" class="col3">Занятие</th>
<th scope="col" class="col4">Преподаватель</th>
</tr>
</thead>
ronpat
July 16, 2013, 8:23pm
12
This is a tested example solution to your design request… with caveats.
CSS
.border div {
position:relative;
}
#mon {
position:absolute;
top:-13px;
left:-41px;
z-index:2;
}
#tue {
position:absolute;
top:-22px;
left:-36px;
z-index:2;
}
#wed {
position:absolute;
top:-21px;
left:-33px;
z-index:2;
}
#thu {
position:absolute;
top:-20px;
left:-33px;
z-index:2;
}
#fri {
position:absolute;
top:-25px;
left:-36px;
z-index:2;
}
#sat {
position:absolute;
top:-22px;
left:-36px;
z-index:2;
}
#sun {
position:absolute;
top:-25px;
left:-36px;
z-index:2;
}
HTML
<tr class="border">
<th scope="row"><div><img id="tue" src="images/tue_img.png" alt="" width="113" height="113"/></div></th>
<td></td>
<td></td>
<td></td>
</tr>
*** The top underline does not work properly. That row is coded differently and I have not yet figured it out. ***
The plethora of {position:relative;top:negative-somethings} is poor code. It indicates a fundamental misunderstanding about postioning objects on a page. Likewise, the number of {margin-top:negative-somethings} tells the same tale.
HTML is normally coded to flow smoothly and only requires negative postioning for special purposes.
If you can apply the above example to your page, it will almost be fixed.
The images are not consistently placed within their 113x113 image, thus the slightly different offsets.
This has been tested in FF, Opera, Chrome.
Sorry about the goofy post earlier. My brain sometimes takes unexplainable holidays.
810311:
did you mean something like this,felgall :
<thead class="border">
<tr>
<img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/>
<th scope="col" class="col1"></th>
<th scope="col" class="col2">Время</th>
<th scope="col" class="col3">Занятие</th>
<th scope="col" class="col4">Преподаватель</th>
</tr>
</thead>
…or like this
<thead class="border">
<tr><img class="mon-image" src="images/mon_img.png" alt="" width="113" height="113"/></tr>
<tr>
<th scope="col" class="col1"></th>
<th scope="col" class="col2">Время</th>
<th scope="col" class="col3">Занятие</th>
<th scope="col" class="col4">Преподаватель</th>
</tr>
</thead>
No.
810311
July 18, 2013, 8:35pm
14
The plethora of {position:relative;top:negative-somethings} is poor code. It indicates a fundamental misunderstanding about postioning objects on a page. Likewise, the number of {margin-top:negative-somethings} tells the same tale.
I corrected those - it works fine now when I increase fonts. I tested FF Chrome Opera. Yes, I agree that was poor code - I guess sometimes my brain is not there. Sorry. Thanks for pointing this out for me,ronpat.
HTML is normally coded to flow smoothly and only requires negative postioning for special purposes.
Totally agree. Best way is to allow elements take their place naturally and then apply CSS. Thanks again for reminding me.
Here’s the link for the corrected version http://yogastudio.atspace.com/
Please, let me know if I need any more corrections.
810311
July 18, 2013, 8:43pm
15
I didn’t know about those restrictions. Thanks for your advice,felgall. I’ve also noticed ronpat put an image inside the div
<th scope="row"><div><img id="tue" src="images/tue_img.png" alt="" width="113" height="113"/></div></th>
why use div inside th?
ronpat
July 18, 2013, 9:37pm
16
It looks really good to me. Nicely done!
The validator says that the break tags are malformed:
<samp></br></samp> should be written <samp><br/></samp>
Related to the use of break tags… it is recommended that items be given classes, or some such targeting technique, and that margins or padding be used instead of break tags. Doing so gives you better control over the layout and eliminates unnecessary tags. Your call.
The other thing that you can do to tidy up your code a bit is to crop the transparent area out of the day-of-week images. They will end up as 51 x 52 images.
You will then be able to position all of them with just one css entry (instead of 7).
#mon,#tue,#wed,#thu,#fri,#sat,#sun {
width:51px;
height:52px;
position:absolute;
top:6px;
left:-5px;
z-index:2;
}
Of course, I would suggest replacing all of those ids with one classname.
You can download the resized images here if you wish:https://www.dropbox.com/sh/e1teog7t6o13ktt/EBO8I71rJ8
EDIT:
Cheers!
Hi 810311,
Table-cells: the empty cells can be removed, with css instead for height positioning. The <td>'s can get more line-height for better readability.
Top-borders: can be attached to the tables Tuesday/Sunday themselves.
Hidden text for the days: can stay hidden by means of absolute positioning of the day-images: above them. Tables with small height must get extra margin-bottom for compensation.
Images: can get some anti-alias.
<title>: with the town in it, visitors don’t have to guess in what town the studio is. With the word Йога in it, they don’t have to guess what kind of studio it is. Good for Google.
All together the html for a table can be:
<table class="schedule borderTop">
<tbody>
<tr>
<th scope="row" class="col1 day" rowspan="9">Вт<img src="images/tue_img-nw.png" alt="" /></th>
<td class="strip col2">8:00 – 9:00</td>
<td class="strip col3">Энергетическая йога</td>
<td class="strip col4">Ольга по записи</td>
</tr>
<tr>
<td>9:30 – 10:45</td>
<td>Постнатальная (послеродовая) йога</td>
<td>Ольга по записи</td>
</tr>
<tr>
<td class="strip">11:00 – 12:00</td>
<td class="strip">Baby – йога</td>
<td class="strip">Ольга Баранова, по записи, набор в группу</td>
</tr>
...
<tr>
<td class="strip">19:15 – 20:45</td>
<td class="strip">Комплексная йога</td>
<td class="strip">Дима</td>
</tr>
</tbody>
</table>
With the added css:
.schedule {
margin-bottom: 20px;
}
.schedule td {
line-height: 140%;
}
.borderTop {
border-top: 2px solid #EF7EB2;
}
.day {
position: relative;
vertical-align: top;
}
.day img {
position: absolute;
left: 0;
margin-top: -1px;
}
.extraBottom {
margin-bottom: 50px;
}
.bar {
margin-bottom: 10px;
}
.imgfloat {
margin-top: 15px;
}
PS: I guess the class “day” can be combined with the class “col1” (if that is not disturbing other pages).
.col2 {
width: 9em; /* was: 120px; */
}
… and the time column is expanding with growing font-scale.
810311
July 19, 2013, 9:30pm
19
ronpat:
Related to the use of break tags… it is recommended that items be given classes, or some such targeting technique, and that margins or padding be used instead of break tags. Doing so gives you better control over the layout and eliminates unnecessary tags. Your call.
Break tags are mostly used for single line breaks. Fixed.
#mon,#tue,#wed,#thu,#fri,#sat,#sun
Selector grouping. Yes, class would work too. Thanks,ronpat.
I also used your images.
810311
July 19, 2013, 9:34pm
20
Hi Francky, I like your solution too, especially this part
<th scope="row" class="col1 day" rowspan="9">Вт<img src="images/tue_img-nw.png" alt="" /></th>
It allows to reduce css to the minimum. Good job! Nicely done!
no worries. thanks.