|
CSS - Positioning Text By The Side Of Image
Hi,
I have a table cell where I have to place an image and title (centered) by the side of it. I am using the following code but does not work the way I wanted. <table> <tr> <td> <img src="graphics/gifs/spotlight_xlr.gif"> Title </td> </tr> </table> The "Title" text is getting displayed by the side of the image but to the bottom. I want the Text to be centered around the image. Both the IMG and Text should be part of the same TD tag. I know with CSS it is possible. Please help. Thanks, VMRao Similar Tutorialshey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right... here is the code i am currently using for it Code:
#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}
i have had various ideas but none have worked,,,,this is the latest... any ideas?? thanks RF Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! hey all, i'm trying to figure out how to position text in an h1 tag that uses a background image, without adding extra markup. i just need it 15px from the left of the image, and 10px from the top. here's the css for the h1 tag: Code:
h1 {
height:50px;
width:100%;
background:white url(images/h1_background.gif) no-repeat left;
margin-top:12px;
color:white;
font-size:11pt;
}
and the html is just; Code: <h1>welcome</h1> thanks! Hi Guys, Ive not been doing the CSS stuff too long as I used to use tables all the time for this stuff. Im ultimately trying to get 3 news articles for eg on a homepage with a mini image to the left of the text which wraps around it. The text sometimes is not going to be the size of the image so the next article needs to drop to the next line underneath. It isnt though and its listing in a diagonal line instead. Any one got any tips. Code: <div id="m1"> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p><img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" />Latest shinanigans on the money savings scene today are... just gonna pack this out to see if the image does eventually fit in at all which would be nice because it should work! But who knows eh? :D Its just an interesting topic to look into la de dah de dah!</p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> </div> Ive tried a few things like putting div's around each specific article see if i could somehow force it to a new line but it isnt working. The img tags ive moved about. Im using float left on them. Any one any suggestions? Im really stumped and close to hitting the monitor If it helps I could pm the url to you if you think u can help. Thanks guys. Im hoping this is a relatively easy problem as most sites layout like this just I can't get it to do it! hehe! Hey, started Css few days ago and I can't find to place two Div's togther side by side. Code: <html>
<head>
<style>
.container {border: 1px dotted #000000;
width:auto;
height:auto;
margin:0px 250px 0px 250px;
}
.headerbox {border: 1px dotted #000000;
width:450px;
height:75px;
margin: 0px 300px 0px 0px;}
.loginbox {
border: 1px dotted #000000;
width:45px;
height:75px;
margin: 0px 0px 0px 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Css test site</title>
</head>
<body>
<div class="container">
<div class="headerbox">
<a href="/"><img src="/header.jpg" width="450" height="75" border="0"></a>
</div>
<div class="loginbox">
</div>
</div>
</body>
</html>
given the following structu #container { width:775px; margin:0px auto; background-color:#fff; border-left:2px solid #424242; border-right:2px solid #424242; border-bottom:2px solid #424242; border-top:2px solid #424242; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #nav { padding:0px; height:100px; background-color:#4E7395; background-image:url(nav.jpg); background-repeat:no-repeat; background-position:top left; } #masthead { padding:0px; height:200px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#E6E6E6; border-bottom:4px solid #4e7395; } #leftnav { float: left; width: 375px; margin-left:0px; padding:0px; background-color:transparent; } #rightnav { clear:right; float: right; width:392px; margin-right:0px; padding:0px; background-color:transparent; } Would it be possible to put text paragraphs side by side inside the rightnav <div> Floating the text in that manner, it would appear that there were two mini-columns, instead of just the one. Is that possible? thanks a million jon Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... Thanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad Using percentages so I can leverage .css when the page is printed. so... I have div with a background image. the image has a round off top-right corner. when i increase the percentage size, id like the width to grow from left to right so that the top right of the background image is always in view...no matter how wide or narrow the width of the div. Is this possible? This is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? http://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/style/styleDefault.css As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there. the CSS for the page border on the left is as follows: #wrap { background: url("../images/ilumosPageFadeLeft.jpg") repeat-y; padding-left: 25px; width: 750px; } (the wrap div contains all of the page's content) How can I make the image extend to the bottom of the page? Thanks Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn. I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it. Code:
html:
<div id="contentColumn">
<div class="inside">
<!-- middle column content begin -->
<p class="blocktext">
<?php mosLoadModules( 'banner', -1 ); ?>
</p>
<div id="users">
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div id="users">
<?php mosLoadModules ( 'user2' ); ?>
</div>
<p>
<div id="nofloat">
<?php mosLoadModules ( 'top' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
css:
/*top users */
#users {
float:left;
width: 300px;
}
#nofloat {
float: none;
}
So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same. My question is what can I do to make this content show after the side by side div's and not beside it in both browsers? You can see what I mean by looking at this test site in both IE 6 and FireFox. http://www.wii-volution.com/testbed/ Thanks for any help you guys can give me! Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> Hi. I'm a design student working on a website for my boss, and I've come across a problem and was wondering if someone could help me out. It might be a simple fix, but I can't seem to figure it out. I have a body wrapper div (subtitle, body text, etc) on the left that's approx. 705 px wide and a vertical navigation bar div on the right that's about 240 px wide. I've tried floating the body wrapper left and the navigation buttons right, but one always ends up sitting below the end of the other. When I use the "clear right" or "clear left" commands, it doesn't help. Any ideas what I could do to get them to line up on the top? I want them to sit next to one another. Thank you very much for any ideas! Britta Hi Guys, I'm working on a form, and for the life of me, I can't get these divs to sit side by side. You can see the test page at www.details.at/search_test.cfm It's a small form with a few fields and selects I want each element to sit side by side in a single row. Here is the code. I thought display:inline; would do the trick, but it's not working. Code: <style>
#control_panel
{
padding:0 0 1em 2em;
width:600px;
float:left;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.input
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
label
{
text-align: left;
display: block;
}
div.search_cell
{
display: inline;
}
</style>
<div id="control_panel">
<form action="http://test.at" METHOD="post">
<div class="search_cell">
<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200">
<label for="search_box"><span class="smalltext">search</span></label>
</div>
<div class="search_cell">
<select class="input" name="range">
<option value="50">50</option>
<option value="Any">Any</option>
<option value="1" >1</option>
</select>
<label for="search_box"><span class="smalltext">within</span></label>
</div>
<div class="search_cell">
<select class="input" name="range_measure">
<option value="Miles">Miles</option>
<option value="kilometers">Kilometers</option>
</select>
<label for="search_box"><span class="smalltext">range</span></label>
</div>
<div class="search_cell">
<span class="smalltext">of</span>
</div>
<div class="search_cell">
<INPUT class="input" value="" type="Text" name="location" size="10">
<label for="location"><span class="smalltext">city & state or postal</span></label>
</div>
<div class="search_cell">
<INPUT class="input" type="submit" name="Submit" value="Go">
</div>
</form>
</div>
</div>
Hey, I'm not entirely sure why this is happening, you can see it here and the css So I'm not really new to CSS or HTML though I might as well be considering the last time I did anything in either that had much substance was a class back in high school, about 6 years ago. This is what I want... DIV1 --------------- DIV2 --------------- DIV 3 2 would be in the center with 1 and 3 floating left and right respectively. Instead I'm getting this... DIV1 --- DIV2 ----------------------------------------- DIV 3 or DIV1 DIV2 DIV3 ...I hope you guys get the idea. I'm having trouble figuring it out. My ext CSS sheet, if you care to look, is he http:// livingway.110mb. com/mainstyle.css the frame in question, he http:// livingway.110mb. com/main.htm I'm hoping it'll let you all look at them. It's nothing professional yet because I'm only trying to give an update idea to our "webmaster". Anywho, let me know what I'm doing wrong. My brain hurts right now. Hello, I have a problem that is making me crazy! I have a simple page with some news on it. Every news is a <div> and contains two floating blocks: Image(floating left) and the text(also floating left). These blocks must stay side by side and NOT one over the other. The width of the news <div> can be 500-550px max for layout reasons. If the text is longer than the space available Firefox moves the entire text block under the image, while IE resize correctly the text block. I have tried to apply diplay:inline; to both blocks with no effect. Here is the test page Link (I have limited the width to 500px to simulate the real layout.) CSS: Code:
.news {
float: left;
clear:left;
margin: 0 0 1em 0;
width: 100%;
}
.img_hl {
float:left;
margin-right: 10px;
}
.newstext {
padding-top: 1em;
float:left;
}
Please help me!! -- Bye Redhawk I'm working on a site which has a header and footer div, and in the main section in between, it has a narrow left div and main content to the right. I've got the overall width centered at 90%, and I want the left div to be 250px wide, and then the right main content div to be the remaining width of the 90%. I also want to make sure it doesn't resize below about 600px when the screen is resized. Am I better off setting a fixed width of the overall width instead of a percentage? That way I can make the page about 800px wide, left pane 250px, and main content 550px? Any other thoughts? Thanks. |
|||||||