|
CSS - Vertical Alignment In Tableless Design Cells
I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default.
How do you solve this problem?. Obviously I look for a simple CSS style to manage this need. Thanks! Similar TutorialsHi all, After using silktide.com to test my site's score, the report suggested that I remake the site using CSS to make it tableless. The site i am remaking is www.verdicts.co.uk So far ive remade the interface which you can see he www.verdicts.co.uk/verdicts_css Problem is, i have absolutely NO clue how i would go about making much more complex table replication using CSS. For example, the "popular review catagories" as seen on the www.verdicts.co.uk homepage. ...Or the product listing pages like this one: http://www.verdicts.co.uk/items/663/items.html or how about the reviews tables as seen he http://www.verdicts.co.uk/reviews/1140/1140.html What i am asking, is: Should i try and find a way to recreate these tables with CSS, or is the only way to do this, with *some* use of tables? Silktide.com's checker says make the site "tableless" - so i am guessing it's saying not to use a single table?! Thanks Mat. I've been designing web pages for 7 years now, using layout tables. I realize that it's time to let go with them now. Do you recommend any good book about this? I've red Ben Henick's article on Alistapart (http://alistapart.com/articles/12lessonsCSSandstandards). Do you know if he has written any books about the topic too? A website generally has a header/footerand then a left column and main column. The left column contains links and the main column contains the content. Years ago I saw a design that was validated and used CSS to achieve a tableless design that actually had the main column content BEFORE the left column links in the sourcecode, but on the site itself, it was like a normal site (left column was on the left and main content was on the right or center). Does this achieve better search engine results by having the main content first in the eyes of the search engines, but in reality, to the people, the left links actually shows up first. Also, can someone provide a link to this or show some coding on what you have seen done to achieve this? hi guys I've begun trying so I finally can leave <tables> I've started trying with a little opensource template, and now want to be how much correct I am... The following image shows the original design, also with the layers division I've created I'd like to know if I'm going ok with this initial design, or which would you modify, and so on. Then I'll follow up the thread with the code, so I can see if I learned correctly Thanks a lot in advance, Does anyone know how to do the following without tables - I need to align some text to the left, some in the center, and some on the right, all on the same line: E.g. Code: ---------------------------------- LEFT CENTER RIGHT ----------------------------------- I messed around with float, but the text to be aligned to the right always appears on the line below. Thank you for any help you may provide Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code: Code: <td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td> Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance. Hi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox: Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> Hi guys, I'm still a beginner at CSS and I have run into a problem... In my footer, I want all the text to be aligned vertically and horizontally in the middle. eg. ------------------div-------------------- ............. text text text text text ------------------div-------------------- Can you please show me what text I would need to put in the #footer? My footer is 900px wide and 120px high. I am adding more than one line of text. If there's any more info u need from me to solve this problem then please ask. Any help will be great. Thank you very much Hi, I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content. Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean. This is driving me mad. Any help appreciated!! I'm creating a tabbed menu system to navigate my site, which is in a three column layout wrapped in the centre fluid wrapper. Due to the way I'm doing the menu I need to vertically align the menu to the bottom of the DIV it is in. The menu is an unordered list with the styling stripped out and replaced so that the items are arranged horizontally. Yet no matter what I do they either align to the top or the centre, worse while searching for an answer I only seem to be able to find people who want centring. Code wise: html4strict Code: Original - html4strict Code <body> <div id="wrapper"> <div id="left"></div> <div id="centre" class="index"></div> <div id="nav"> <ul id="tabnav"> <li><a href="index.php" class="index">Contents</a></li> <li><a href="wip.php" class="wip">In Progress</a></li> <li><a href="c-shorts.php" class="shorts">Short Stories</a></li> <li><a href="fan-fics.php" class="fanfics">Fan Fics</a></li> <li><a href="contact.php" class="contact">Contact</a></li> <li><a href="info.php" class="info">Information</a></li> </ul> </div> </div> </body>
CSS: css Code: Original - css Code #wrapper { background-color:transparent; position:absolute; left:4em; top:1em; bottom:4em; right:4em; min-height:50em; z-index:1; } #left { background-image:url(/fiction/images/left-spiral.png); background-repeat:repeat-y; background-position:right 4px; background-color:transparent; position:absolute; left:0em; top:0em; width:2em; height:100%; z-index:2; } #centre { background-image:url(/fiction/images/right-spiral.png); background-position:0px 4px; background-repeat:repeat-y; background-color:#FCFFC4; position:absolute; left:2em; right:3em; top:0px; height:100%; z-index:4; } /* --- Navigation Elements --- */ #nav { background-color:#FCFFC4; -moz-transform: rotate(90deg); -moz-transform-origin: top left; position:absolute; right:-50em; top:0em; height:3em; min-width:50em; z-index:3; } #nav ul#tabnav { list-style-type:none; margin:0; padding-left:40px; height:2em; } #nav ul#tabnav li { font-variant:small-caps; float:left; /* height:21px; */ background-color:transparent; } #nav ul#tabnav a:link, #nav ul#tabnav a:visited { display:block; color:#000; background-color:#FCFFC4; text-decoration:none; margin-right:12px; padding:3px 6px 2px 6px; /* T R B L */ -moz-border-radius:10px 10px 0 0; /* TL TR BR BL */ } #nav ul#tabnav a:hover { /* background-color:#900; */ color:#666; }
(Not sure how much of that is needed to answer the question.) (Oh and many of the design elements colors etc are still in that due to testing stuff not because I actually need them.) Which is how do I get that dang thing aligned to the bottom/side of that box? I have what I think is an easy question for you guys. I have an absolute positioned element and I gave it a height of 100px. I want to know how to make it so that any text that I enter goes to the bottom of this element. By default, the text appears at the top left. I tried vertical-align with all of its values, but none of them worked. The only way I could get it to appear the way I wanted was to use line-height. Using line-height I am able to get the text where I want it, but it doesn't seem like this is the way it should be done. Is there a way in which you don't have to specify a specific line-height value to get the where you want and it make it so all text appears at the bottom instead of the top? Here is what it looks like, and the CSS is below. Thanks. Code:
<html><head><title>test</title>
<style type="text/css">
body {
background-color: white;
}
#top {
position: absolute;
left: 20%;
right: 20%;
top: 2.5%;
height: 100px;
color: white;
background-color: rgb(20%,20%,20%);
border: 2px solid red;
line-height: 180px;
}
</style>
<body>
<div id="top">
this is a test
</div>
</body>
</html>
Hello all. Suppose I have the following: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* footer styles */
#footer { clear: both; }
#footer ul {
width: 544px;
list-style-type: none;
display: block;
} /* end #footer ul */
#footer ul li {
float: left;
background-color: #003366;
} /* end #footer ul li */
</style>
</head>
<body>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><img src="images/foot_nav2.gif" alt="" id="footer_image" /></li>
</ul>
</div>
</body>
</html>
Now suppose that the image is 50px high. What I would like is to get the links to align at the bottom of the instead instead of at the top. I tried a vertical-align: bottom but that didn't seem to help the situation any. Hi, there. Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF : #full-image { float: right; width: 380px; height: 380px; text-align: center; line-height: 0px; background-color: #F0F5F7; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #full-image img { margin-top: expression(( 380 - this.height ) / 2); } That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance. ok the page is http://v2.seductionslingerie.biz/ and the top buttons (home, etc...) will not change their bg color on hover and the text inside the div will not valign to the bottom. please help! here is the html/css code below CSS: Code: div.top_buttons {
background-image:url(../images/top_button_bg.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-color:#660000;
border:1px #660000 solid;
height:50px;
vertical-align:bottom;
padding:2px;
color:#FF99FF;
font-family:"BankGothic Lt BT", Verdana, Arial;
font-family:14px;
font-weight:bold;
cursor:hand;
cursor:pointer;
}
div.top_buttons:hover {
background-color:#950000;
color:#F5F1F2;
}
HTML: Code: <div class="top_buttons">HOME</div> Any and all help is much appreviated! So I have a calendar that I created in PHP and I'm displaying it in a table and I'm having trouble aligning the title and the two image arrows that go on either side of it. I'm trying to align everything vertically in the middle of the row and it seems that in Firefox, the Title is lower than the two arrows, but in Chrome and IE it seems to be right in the middle where it should. How do I solve this? Code: <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cal_left_arrow">
<img src="/images/left_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $prevYear; ?>, <?php echo $prevMonth; ?>);" />
</td>
<td class="cal_title" colspan="5" valign="middle">
<?php echo date('F', mktime(0,0,0,$month,1,$year)).' '.$year; ?>
</td>
<td class="cal_right_arrow">
<img src="/images/right_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $nextYear; ?>, <?php echo $nextMonth; ?>);" />
</td>
</tr>
Code:
#event_calendar {
margin-top:50px;
margin-bottom:20px;
float:left;
height:auto;
width:245px;
}
.calHeaderDays {
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #3F4C6B;
text-align:center;
height: 20px;
width:245px;
color: white;
overflow:visible;
/*border: 1px solid #3F4C6B;*/
}
.cal_title {
text-align: center;
font: bold 16px Arial, Helvetica, sans-serif;
color: #C79810;
height:40px;
vertical-align:middle;
}
.cal_left_arrow {
text-align:right;
height:40px;
vertical-align:middle;
}
.cal_right_arrow {
text-align:left;
height:40px;
vertical-align:middle;
}
table {
width: 245px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
border-collapse: collapse;
}
table img {
cursor: pointer;
cursor: hand;
}
.calToday {
height: 28px;
vertical-align: middle;
background-color: #3F4C6B;
color: #fff;
font-weight:bold;
text-align:center;
font-size: 10px;
}
.slDay {
height: 28px;
font-size: 10px;
width: 14%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
text-align:center;
}
Hi there, I've been reading up on creating CSS designs with "vertical rythym" but the tutorials i have read seem to conflict in their message and so im struggling to understand how to do it. Tutorial One The tutorial above, uses a line-height of 18 px no matter what size of text is used. In the tutorial, a heading has had its font-size property set to 20 px but only has an 18 px line height. Tutorial two Meanwhile, the tutorial above uses different line-height settings according to the size of the text being used. In the tutorial, a heading has had its font-size set to 24px and so the line-height has been set to 36px to accomodate this fact. I'd just like to understand vertical rythym a bit better but im struggling to understand it because tutorials around the web are giving different explanations of its use. (a) Can anyone help me understand this concept better? (b) Which tutorial is more correct in its explanation (if any)? Cheers look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Guys.... I am newbie in CSS tableless design and I wanna build a website w/o tables..... JUST CSS... Well, I have been working hard on this but I can make it work... Here is the design that I wanna build... and here is the code that I have so far... PLEASE... some CSS GURU answer this puzzle... Thanks.. [code] /* CSS Document */ body { margin: 0; padding: 0; font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif; color: #7c7c7c; text-align: center; background-color: transparent; background-image: url(images/background.jpg); background-position: center top; } #container-main { margin: 0px auto; padding: 0; width: 648px; border: none; text-align: left; background-position: bottom; } #container-top { margin: 0px auto; padding: 0; width: 648px; border: none; text-align: left; background-position: bottom; } #left { width: 20px; background-image: url(images/l-shadow.jpg); float: left; height: 543px; } #main { border: none; background-image: url(images/header.jpg); float: left; width: 598px; height: 67px; } #right { width: 30px; background-image: url(images/r-shadow.jpg); height: 543px; float: right; } /* #container { position:absolute; left:0px; top:0px; width:100%; height:100%; background-image:url(images/background.jpg); } */ #e-mail-templ-final2-01_ { position:absolute; left:0px; top:0px; width:81px; height:600px; } #top_ { position:relative; top:0px; width:648px; height:57px; background-image: url(images/top.jpg); } #background_ { position:absolute; left:729px; top:0px; width:243px; height:600px; } #e-mail-templ-final2-04_ { position:absolute; left:81px; top:57px; width:20px; height:90px; } #header_ { position:relative; top:57px; width:598px; height:67px; background-image: url(images/header.jpg); } #e-mail-templ-final2-06_ { position:absolute; left:699px; top:57px; width:30px; height:90px; } #red-bar_ { float: left; width: 598px; height: 17px; background-color: #990000; border-top-width: medium; border-right-width: 0px; border-bottom-width: medium; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; text-align: center; } #l-shadow_ { position:absolute; left:81px; top:57px; width:20px; height:542px; background-image: url(images/l-shadow.jpg); } #title-content_ { left:139px; top:143px; width:452px; height:33px; background-image: url(images/title-content.jpg); float: left; } #ncaa_ { height:67px; background-image: url(images/ncaa.jpg); float: right; width: 146px; } #r-shadow_ { position:absolute; left:699px; top:56px; width:30px; height:544px; background-image: url(images/r-shadow.jpg); } #e-mail-templ-final2-12_ { position:absolute; left:81px; top:154px; width:20px; height:446px; } #e-mail-templ-final2-13_ { position:absolute; left:699px; top:156px; width:30px; height:444px; } #content_ { left:101px; top:180px; width:452px; height:349px; background-color: #FFFFFF; float: left; } #e-mail-templ-final2-15_ { position:absolute; left:553px; top:214px; width:146px; height:1px; } #big-pix-golf_ { left:553px; top:215px; width:146px; height:265px; background-image: url(images/big-pix-golf.jpg); float: right; } #facilities_ { left:553px; top:480px; width:146px; height:16px; float: right; background-image: url(images/facilities.jpg); } #facilities-pix_ { left:553px; top:496px; width:146px; height:51px; float: right; background-image: url(images/facilities-pix.jpg); } #e-mail-templ-final2-19_ { position:absolute; left:101px; top:529px; width:156px; height:18px; } #bottom-shadow_ { left:101px; top:529px; width:452px; height:18px; background-image: url(images/bottom_shadow.jpg); float: left; } #e-mail-templ-final2-21_ { position:absolute; left:262px; top:529px; width:291px; height:71px; } #e-mail-templ-final2-22_ { position:absolute; left:101px; top:547px; width:19px; height:53px; } #lu-seal-bottom_ { position:absolute; left:186px; top:365px; width:137px; height:53px; } #bottom-backg_ { left:101px; top:547px; width:598px; height:53px; background-image: url(images/bottom-backg.jpg); float: left; } #e-mail-templ-final2-25_ { position:absolute; left:553px; top:547px; width:47px; height:53px; } #apply-now_ { position:absolute; left:434px; top:390px; width:86px; height:53px; } #e-mail-templ-final2-27_ { position:absolute; left:686px; top:547px; width:13px; height:53px; } |
|||||||