|
CSS - Help With Mixed Left And Right Align In Table Data
Hi all,
We have a table layout we're experiencing some issues with on users that have smaller screens. Below is a simple 1 row example of elements contained in our div tables Code:
<div class="tracks-result-page" style="">
<div class="track-element">
<input class="track-select-checkbox" type="checkbox"><h4 class="track-name">Track</h4><span class="created-date">23-Jul-2008 17:13</span><span class="duration">47m</span><a href="#" class="view-button">view</a><a href="/viewtrack" class="edit-button">edit</a><a href="#" class="details-button">show details</a><input value="d5f173a2-b35e-4489-b468-33a05b1e4997" class="track-id" type="hidden">
</div>
<div class="track-element">
....more elements
</div>
</div>
Basically, I have 800 px to fit this data in from our site template. What's happening is on smaller resolutions, the 3 anchor tags aren't fitting in 800 px due to large font size vs table width, and the anchor elements are wrapping around. I have a lot of white space after the description, and currently have a fixed width on that div. What I need is to right align everything from the "created-date" class to the end of the element, then left align the "track-select-checkbox" and the "track-name" elements. I'm having a really tough time doing this for some reason. I can't use "float:right;" on the elements that need right aligned. If I do, they all appear in reverse order! Any help would be greatly appreciated. thanks, Todd Similar TutorialsI have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? I used a form generator online that utilizes CSS and PHP. I am very comfortable with programming; but, I have never used CSS. I tried tweaking everything I could and no luck changing the CSS to left-align the entire form. I thought they used padding; but, I can't figure out where. Also, I removed the CSS to make sure the alignment wasn't part of the HTML - it is definitely embedded in the CSS as the form left-aligned (just not as attractive). Here is the CSS - apologies for the length. As you will undoubtedly see, this is my first post and I am not sure of your protocols for posting code. body { background:#fffff; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:small; margin:8px 0 16px; text-align:left; } #form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; width:640px; } #top { display:block; height:10px; margin:10px auto 0; width:650px; } #footer { width:640px; clear:both; color:#999999; text-align:left; width:640px; padding-bottom: 15px; font-size: 85%; } #footer a{ color:#999999; text-decoration: none; border-bottom: 1px dotted #999999; } #bottom { display:block; height:10px; margin:0 auto; width:650px; } form.appnitro { margin:0px 0px 0; padding:0 0 20px; } There is much more CSS; but, I believe the issue is isolated to this section. Hi everyone, I just have this pain with aligning the whole red thing to left of the page browser (cause it just keeps hanging on the center) - you can check my homepage below - you will see the problem - what should I do to move the whole thing to left? Thank you in advance. I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan Can't get flash anim to line up with left hand margin in IE. FF & Op fine. It's about 15px indented in IE. Don't have anything online - extract of code below... Anything obvious? Many thanks: <div id="movie_position"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" id="Movie1" width="500" height="328" > <param name="movie" value="Movie1.swf"> <param name="wmode" value="transparent"> <param name="bgcolor" value="#FFFFFF"> <param name="quality" value="high"> <param name="allowscriptaccess" value="samedomain"> <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="Movie1" width="500" height="350" src="Movie1.swf" bgcolor="#FFFFFF" quality="high" swliveconnect="true" allowscriptaccess="samedomain" wmode="transparent"> <noembed> </noembed> </embed> </object> </div> AND THE RELEVANT CSS: #container { margin:0 auto; width: 760px; text-align:left; } body { margin:0px; padding:0px; text-align: center; background-color :#FFF; font-family: verdana, arial, sans-serif; color: #000; line-height: 16pt; } h1 { font-family: verdana, arial, sans-serif; color: #7DA1E7; font-size: 15pt; text-align: justify; } h2 { font-family: verdana, arial, sans-serif; color: #7DA1E7; font-size: 24pt; text-align: justify; padding: 20 0 0 0; } #movie_position { position: relative; left: 0; } When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey My Page I want the horizontal nav bar to be centered (I'm using <li> now for my nav bars instead of a bunch of <div> tags, and what do ya know... it IS easier ), and whenever I Try and validate the CSS on that page, I am getting an error. Here's an example. Quote: URI : file://localhost/layout.html * Line: 19 Parse error - Unrecognized : <html> <head> <title>Flotilla 31-9</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #top { border-style: dotted; margin-left: auto; margin-right: auto; width: 594px; height: 95px; } The page validated as XHTMl but the CSS won't. Whatever I move into the top of the CSS declaration seems to be "wrong"... no matter which I move to the top. Help on figuring what it's saying is appreciated. I am trying to get the nav bar centered and I figured making my CSS valid couldnt' hurt... Hi all - can anyone tell me why the table in the first <li> will not / is not aligning with the top? It seems to be starting at line 2 within the <li> and I can't figure out why!?!?!?? Code: <ol style="border: 1px solid green;"> <li> <table cellpadding="0" cellspacing="0" border="1" style="width: 100%; border: 1px solid red; height: 10px;"> <tr> <td style="width: 70%;"> </td> <td style="width: 30%;"> </td> </tr> </table> </li> <li>Second row of text.</li> <li>Third row of text.</li> </ol> regan Hello Dev Shed, I am having a problem aligning my tables inside thier respective column div's to the center. Here is the css sheet in question. Code: body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background:#FFF;
margin:0;
padding:0;
}
td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
#container {
margin-top:0px;
padding-top:0px;
width:1024px;
margin-left:auto;
margin-right:auto;
background:#FFF;
}
#header {
width:1024px;
height:100px;
background:url(../images/headerbg.jpg);
text-align:right;
color:#bce9c3;
font-weight:bold;
}
#header h1 {
color:#FFF;
margin:0;
padding:0;
font-size:xx-large;
padding-top:10px;
padding-right:5px;
}
#header p {
margin:0;
padding:0;
padding-right:5px;
}
#content {
width:1024px;
background:#a3e1ad;
}
#leftcol {
padding-top:10px;
float:left;
width:512px;
background-color:#a3e1ad;
text-align:center;
}
#rightcol {
padding-top:10px;
float:left;
width:512px;
background-color:#a3e1ad;
text-align:center;
}
#content table {
border-width:4px;
border-spacing:0px;
border-style:solid;
border-color:#168cf7;
border-collapse:collapse;
}
#content td.title {
background-color:#FFF;
}
#content td.title p {
color:#168cf7;
font-weight:Bold;
text-align:Center;
}
Even though both leftcol and rightcol have text-align set to center, they're still both aligning to the left. Any help would greatly be apprieciated. Thanks in advance. Is it not possible to do the following? What is the correct way of aligning a cell if not? PHP Code: TD.theader { background-color: #D0D0D0; border: 1px solid #000000; padding:5px; horizontal-align: right; } What is the equivalent of <table align="center"> in CSS. I'm moving my page from HTML 4.01 to XHTML 1.0 and the ALIGN attribute of TABLE is not supported in XHTML 1.0. Any help is greatly appreciated. how do i center align table on page with CSS? I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work. For example, this does not work: Code: td.centercell {
text-align: center;
}
<table>
<tr>
<td class="centercell">Hi!</td>
<tr>
</table>
But this does: Code: <table>
<tr>
<td style="text-align:center;">Hi!</td>
<tr>
</table>
I'd rather not have to put inline styles on every single cell I need centered, as this is most of them. What's going on? Hello, I was hoping somebody can help me. I have been playing around with the problem, but I can't seem to figure it out. It is regarding my navbar not aligning properly in firefox. If you view this section of my site . com/musicians/ In IE it looks as it should, however in firefox it's way off on the right. I am using 2 stylesheets for this page; . com/wp-content/themes/WP-Genius/style-music.css . com/musicians/skins/Nova/Nova.css If anybody can provide me some insight on how to fix this, that would be greatly appreciated Thanks! I have a css layout I'm working, that is all divs (my first time doing this without tables). My page consists of all divs, and then the body is a table for displaying date from a database. My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down. If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table. I hope that makes sense. CSS Tags -- Just a portion of them: Code:
body {
margin: 0px 0px 0px 0px;
background-color: #E7F1FD;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {
background-color: #E7F1FD;
border: 2px solid #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 165px;
}
/*Footer */
#left_footer {
background-image:url(images/bar_header2.jpg);
width:100%;
height:36px;
position:absolute;
bottom: 0px;
}
My DIVS (partial): Code: <!-- START BODY --> <div id="pwdb_body"> <table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1> <tr> <td>...table data...</td> </tr> </table> </div> <div id="left_footer"><img src="images/index_02.gif"/></div> I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow. Hi everyone, I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..) Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here PICTUREHERE PICTUREHERE So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens: Code: PICTUREHERE PICTUREHERE PICTUREHERE The text goes here, but when it's longer PICTUREHERE PICTUREHERE the remainder comes here I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell: Code: PICTUREHERE The text goes here, but when it's longer PICTUREHERE the remainder comes here PICTUREHERE PICTUREHERE PICTUREHERE Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face) Thank you in advance Andy Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? |
|||||||