CSS - Styling A Line To Have Centered Text And An Image Floating On The Left/right
Similar TutorialsHi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. Usiing ONLY CSS, is it possible to "justify" a block of text and have the last line centered? For example: Code: Fig. 13. Scatter diagram comparing two subspecies of Nyctimene albiventer. One individual of specimens thought to be intergrades is as large as specimens of Nyctimene a. bougainville, whereas the other three intergrades are about the same size as specimens of N. a. minor. CSS seems to only offer one or the other text-align:justify; or text-align:center; Thanks. Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html> <head> <style type="text/css"> .mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;} .image {height: 100px; width: 100px; background-color: red; float: left;} .rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;} </style> </head> <body> <div class="mainDiv"> <div class="image">test</div> <div class="rightAd">test</div> <div class="textDiv"> Text content </div> </div> </body> </html> I know this is simple i just can't figure it out for some reason.. thanks for any help. i wish to have two bits of text show as described in subject this is the code i have at present. i know that i have used a style for an image but how do i do this for text ? thanks Code: <style> img.floatRight { float: right; margin: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; } </style> left text here<b class="floatRight"> right text here</b> hi, this is my first post so go easy with me! I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...! below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment! Code: HTML <div id="header"> <p align="left"> <a href="index.php"> <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a> <ul> <li><strong><?php echo "$heading"; ?></strong></li> <li><img src="/images/login.gif" border="0"/><a href=" Login.php">Login</a></li> <li><img src="/images/register.gif" border="0"/><a href=" Register.php">Register</a></li> </ul> </div> Code: CSS #header{ vertical-align: top; text-align: right; border: solid thin #999999; margin: 0px 0px 0px 0px; background: #336699; font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif; color: #ffffff; height: 155px; } #header li { display: inline; list-style: none; padding: 40px; } #header a:link { color: #ffffff; text-decoration: none; } #header a:visited { color: #ffffff; text-decoration: none; } #header a:hover { color: #ffffff; text-decoration: none; } #header a:active { color: #ffffff; text-decoration: none; } How can i accomplish this with CSS? See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) I don't know why I'm having such a hard time with this. I'm trying to build a "message box" for an application that I'm working on. Box requirements: Fixed width Variable height (fit to content) Centered on page Floating over other elements (I don't want the rest of the elements on the page to move when the box is displayed) Must work in IE/FF/Safari Here's what I tried: css Code: Original - css Code #message_box{ border: 1px solid #AAA; background-color: #DDD; width: 400px; display: none; /* This gets changed to block by javascript */ position: absolute; top: 0px; text-align: center; margin: 20px 0px 0px 0px; padding: 20px; font-size: 12px; z-index: 20; }
That creates a box that I'm happy with, but I'm having problems figuring out how to center it on the page. Do I have to put another div element around my #message_box element? Is there a way to center it with margins? Examples would be appreciated... Also, in IE, form drop downs "bleed through" the box. The box covers up everything except <select>s. Is there any fix for that? Hi guys. I am building a website where some pages are long (and the slidebar appears) and others are short (so the slidebar doesnt appear) The problem is that the page is centered and when the slidebar appears, the page moves a bit to the left. I could set the left-margin to X pixels but then it wont work as expected with different resolutions. Is there anyway to solve this problem? Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text My site is here... css here... I have two .gif files I want to use in the header... the main one (header.gif) should be centered (as it is now)... while the other (header_spread.gif) should repeat on the left and right sides of the centered header.gif... The .gif files are transparent, so I can't use the spread as the entire background... I'd also like to refrain from making header.gif (don't care about header_spread.gif) a background or making the background of header.gif white, and have it in an <img> tag instead so I can dynamically change my header with the seasons... (though if background is the only way, I could have a header class for each season and have my script change it, so that solution would technically work too, but create a larger css file.) I need help formatting this properly... I can get the spread to work as a background for the entire div header, but that messes up the look of the center gif... Thanks Bryan hello genius people... please help this designer move more toward css after years of tables and images... I have a prob with ie 5 and 6 [not sure on 7] showing the content of a scrolling div outside of a containing frame. http://jodihelmer.com/portfolio.html and http://jodihelmer.com/journal.html the content in the scrolling frame shows up outside of the centered content. one possible fix I came up with is to increase the size of the divs at the edge and give them a background color. this seems to work. but, I also need to hide the content to thetop and left of the frame as well. is there a way to keep these divs within the centered wrapper while allowing them to expand to go to the edge of the browser window's relative size? or is there a better way to do this altogether? thanks so much. s 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 Hi, This is my code Code: <style type="text/css"> #leftcolumn { float: left; width: 10%; text-align: center; margin: 30px auto; } #rightcolumn { float: left; width: 25%; text-align: center; margin: 30px auto; } </style> <div id="leftcolumn"> <p>Left 1</p> </div> <div id="rightcolumn"> <p>Right 1</p> </div> <div id="leftcolumn"> <p>Left 2</p> </div> <div id="rightcolumn"> <p>Right 2</p> </div> I expected it to be centered and both left and right 1 and 2 to be on the same line each left and right I want to start on a new line, although currently they are both on the same line, how can I do this Thanks I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. Code: <!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> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>test</title> </head> <body> <!-- A big box to hold everything --> <div style="border-style: solid; border-color: #777777; margin-top: 10px; margin-bottom: 10px; width: 400px; padding: 0;"> <!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box --> <div style="float: left; width: 106px; height: 106px;"> <img src="test.jpg" alt="Picture of Test Image" style="display: block; width: 100px; height: 100px; border-style: solid; border-color: black; border-width: 3px; margin: 0;" /> </div> <!-- This is the text Div that holds an H3 heading Keep a 106px margin to prevent any later text from wrapping. Neither Removing the margin nor the padding HERE solves the problem only the margin-bottom in the h3 tag style seems to matter --> <div style="margin-left: 106px; padding-left: 10px; margin-right: 0; margin-bottom: 0; margin-top:0;"> <h3 style="margin-top:5px; margin-bottom: 5px; border-style: solid; margin-left: 0; margin-right: 0;">Test</h3> <!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;" leave a gap 5px gap underneath the image in IE7 but not firefox. Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly? The H3 should be WELL away from the bottom of the div with most font sizes...Also oddly enough, enclosing the parent div of the h3 in a border removes the gap under the image BUT a border around the h3 itself does NOT Why the gap? --> </div> <!-- This div stops the floating --> <div style="clear:both; margin: 0; margin-right: 0; padding: 0; width: 0; height: 0;"> </div> </div> </body> </html> Nevermind... I figured out a way to do it. And I fixed a major typo. hi, this might be a simple question: i have a "sidebar" div and a "img-content" div. I floated "sidebar" left and "img-content" right. i want them to be side-by-side. in IE6, the "img-content" div is to the right of "sidebar," but is also below it. in other browsers, they sit side-by-side (which is what i want). this must be a common problem, so before i post my code, wondering if anyone can point me to the fix/hack to get the 2 divs to sit side-by-side in IE6? thanks, tim http://zeroonedesign.com/beyond%2Dmap/www/ Take a look at it first in Firefox, and then in IE. As you can see IE seems unable to understand what display:inline means, or perhaps its interpreting the pixel values I set differently. I have tried a whole pile of different things. I've tried taking out the containing <div style="relative> and it makes no difference. I've tried setting everything static with no sizes but then it all collapses. I am THIS close to moving to a table based layout... sometimes CSS is just so frustrating. Can anyone spot something I'm just missing? Many thanks Hello I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help. What I'm trying to do All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify. NOTES The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px. I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse. Here is a print screen of the header: [IMG]URL[/IMG] Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message. The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now. CSS Code Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that. Code: #myHeader {width:auto;height:133px; background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x} #myLogo { float:left; width:10%; height:150px ; margin-left:2.22%; display:inline; background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat} #myConame { width: 15.33%; height:90px; margin-left:auto; margin-right:auto; background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat} #myBanner { float:right; width: 29.73%; height:150px; background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat} The HTML Code Code: <div id="myHeader"> <div id="myLogo"></div> <div id="myConame"></div> <div id="myBanner"></div> <div style="clear: both;"></div> <div class="menu"> <ul> <li><a href="http://shuttermaster.co">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li> <li><a href="Link">Drop 2</a></li> <li><a href="Link">Drop 3</a></li> </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]--> </li> <li><a href="#">About Me</a></li> <li><a href="#">Guestbook</a></li> </ul> </div> </div> <div style="clear: both;"></div> I hope I have been clear enough. Hoping someone can point me the right direction. Regards, and thanks.... |