|
CSS - Padding On Text But Not Images?
Seems a simple question, but how do I add padding to text within a box but not affect the images?
in my columns I have little 'features' but I have a title above each image and some description text below. What's the simplest way to code it so all the text has side padding, but not the image? Similar TutorialsHi! How does padding and margin on text and images behave? And on other inline elements? Didn't get it to work in IE6. Thank you I am trying to get away from tables to get images in a formatted manor. I have a div with a id giving each padding and margin element (left right, top, bottom) that sets them to 0px. How can put a couple of images together (<img src="" /><img src="" />) in a div (or span) without having whitespace between them? - Thanks for the help - K Resolved. Shoddy layout from a so called web developer . ========================================= Hi. Could anyone advise me on the following issue: The following URL, links to a page with an image (boat) in the second content column. The image is 200px wide and the column is 235px wide with a left and right padding of 15px. Bluestone development The column is controled by the following style: td.datacolumntwo { padding: 0px 15px 10px 15px; } The issue I have is that the image causes the column padding to kick out. I have used hspace (out of curiosity) settings to no avail. I get the padding levels back only by cutting the width of the image to nearly a quarter. Any advice would be much appreciated. Eddie Hi All, I am trying to fix a problem with IE 6. In Firefox everything lines up correctly. in IE6 the images in the gallery on the left side of the page and the full size image have 5px of padding underneath. I cannot get this to disappear no matter what I've tried. Any ideas? Top shots l:andy p:andy Here is some code of the thumbnails.. This will probably look like a mess since I am programming on a huge monitor.. But anyway. Code:
<div id="pagebody">
<?php include 'mainmenu.html' ?>
<div id="contentpane">
<div id="content_port">
<div id="port_menu">
<span id="gallerymenu1">
<span id="submenu1" class= "submenu" > <a class="portmenu" href="#" id = "portmenulink1" onClick="changeCategory(1);return false;"> --Wedding--</a> </span>
<span id="submenu2" class ="submenu"> <a class="portmenu" href="#" id = "portmenulink2" onClick="changeCategory(2);return false;" > --Promotional--</a> </span>
</span>
</div>
<span id="thumb">
<div id="thumb1div" class = "thumb">
<img src="images/blank.gif" title = "1 <?php echo "$title"; ?> 1" alt = "<?php echo "1 $alt"; ?> 2" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(1);"
width = "<?php echo $thumb_width; ?>" name = "thumb1" id = "thumb1">
<input type="hidden" id="t1" value="">
</div>
<div id="thumb2div" class = "thumb">
<img src="images/blank.gif" title = "2 <?php echo "$title"; ?> 2" alt = "2 <?php echo "$alt"; ?> 4" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(2);"
width = "<?php echo $thumb_width; ?>" name = "thumb2" id = "thumb2">
<input type="hidden" id="t2" value="">
</div>
Okay, another simple problem, but every solution I find on the internet does not work. I need to add padding to a <p> element, so I have this in my CSS: Code: .p{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-color:#000000;
float: left;
margin-left:5px;
padding: 5px;
}
any help is appreciated. -S What is the CSS property for valign-center for the vspace-like padding for the text? Firstly, excuse my title, I couldn't think of a better way to put it . Now to the problem. In my layout I have a floated object, and text that flows around it, I can pad the text away from this floated object by using margins on the floated object. But I have created a class for <p> that I want to be padded further, and if I add padding-left to p.quote (the class) it makes no difference because the padding is simply going behind the float... As rubbish as that explanation was, I expect someone will pick up on what I'm going on about. How can I have some text indented (padded) further away from the float than other ? Thanks in advance. 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 Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <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"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? I would like the align text next to the image and have it flow from the top down. Not adjacent then underneath it. HTML Source CSS Source Once you view the html file, I think you get a better picture of what I'm talking about. Hi! I've a problem that I've been trying to solve for a couple of hours now... on my test-site testsite You can se my horisontal menu not turning up alright, The four images (house, ball, discussion and about) won't be in line with eachother... When I select the text and images in Firefox, I can easily see that there is something wrong... Can somebody please give me a push in the right direction? BR I'm trying to create a layout (internal to a page - in the content area) that looks like this image image image image text text text text without using tables. This works great using floats but I want the entire block of images/ text centered in the container. Currently this is just left justified which looks really bad my code Code: <div align="center"> To view the site plan, please click the image below. </div> <br> <div align="center"> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1"> <img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br> Bahia Mar </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2"> <img src="siteplan/images/ecbs_01.gif"></a><br> Pier 66 </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3"> <img src="siteplan/images/ecbs_01.gif"></a><br> Convention Center </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4"> <img src="siteplan/images/ecbs_01.gif"></a><br> Sailfish Pavilion </div> </div> lfloat just specifies float:left i am pretty new to web development, and i have a big problem which i cant seem to find a solution to.. i want to type on top of an image on my web page... the image is placed in a table and the table (the whole tag from <table> to </table> including image) has been relatively placed on the page using div tag. so how do i get around typing something ON TOP OF the image ??? for eg... on the ibm dot com homepage, on the header, on the right side, the text "united states" is placed on top of an image... i want to achieve a similar effect. please help me.. please. and any recommendation for good positioning tutorials ? i mean, the only way i am able to make text appear over images is by making a new table seperately, and using div tags and set the position as absolute, and setting the z axis to auto which lets me move the table around anywhere on the page (even on top of images) in dreamweaver... isnt there any better way of doing it ? and im sorry if this post belongs to some other area, i think his problem is css related.. im sorry ima complete noob first time on any web development forum. here is my code Code:
<div class="abovefooter">
<table width="906" height="108" border="0">
<tr>
<td><img src="images/above_footer.jpg" width="906" height="108" /></td>
</tr>
</table>
</div>
<div class="above">
<p>News Forums extreme</p>
<p> </p>
</div>
and here is the "above" and "abovefooter" css code: Code:
.above {
position: absolute;
z-index: auto;
height: 100px;
width: 930px;
left: 13px;
top: 432px;
right: auto;
bottom: auto;
}
.abovefooter {
position: relative;
z-index: auto;
height: auto;
width: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
}
I'm trying to position some things inside a DIV. Here's the basic layout: What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong. Image One is easy, but the text and Image Two I just don't seem to grasping. I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there. Should the text block and Image Two be within a separate DIV? Example: three rows of four pictures each. Code: <center> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <p> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <p> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> </center> But what if I want to put text below each image? Code: <center> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <p> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <p> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah </center> We lose our rows and tidy appearance. So, put them all in divs, right? Code: <center> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <p> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <p> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> </center> Great, text below image but the rows are completely gone. If I try to use float then the positioning gets scrambled from the other text and headings on the page. Is there a way to handle this? I want multiple rows of four pictures each, with text below each image. Thanks. I put a fairly large image and centered it using. Code: background: #484747 url(img/main.png) fixed; background-repeat: no-repeat; background-position: center; That put it exactly in the center in all browsers (that I have). So working great so far. I then want to load a button on top of that image (like just a button) that says "Enter" So I make a button and I go through everything until I choose absolute and giving it percents to be exactly where I want it. I refresh the page and boom its there, I move the webbrowser height, use a different browser and its broken badly. What do people recommend using? Like relative and padding or what? Since what I'm using right now only works for my setup. Hello... My name is Matt and I'm looking for some help with what could be simple CSS coding. I designed an image using Adobe Photoshop and I plan on uploading it to my website. What I want to try do is make this image after I upload it, to a like certain table. I wasnt sure what the terminology would be for this. I want my image to be the text area instead of using a large textarea code I want the image to be the text area where the text will scroll up and down within the image. I dont want my image to be the background. specifically I need the image itself to be the scrolling text area. Can anyone help me out with this coding? Or steer me in the right direction of terminology for this? I'd appreciate it... Thanks I'm working on something in PHP, which will be pulling articles from a database. I want to be able to place images on the page in the same exact spot for every article, and have the text wrap around the images regardless of where paragraphs begin and end. Is there anyway to do this with CSS? (I could do something where the person writing up the article enters a paragraph, and the image that goes with that paragraph, and do that multiple times, but I'm really hoping to just have a form where the person enters the article text in one block, and uploads the 3-4 images, and doesn't have to do anything more complicated than that, and then when the article is output on the page, it just plops the four images on the page where I say they should always be, and the text just wraps around that. Hope that makes sense.) Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas Hi, I want to create a page where users can advertise using templates overlaid with their own text. Many of these templates are cascaded forming a montage effect (left to right, top to bottom). I figured this could be done using CSS or PHP. Here is the CSS version..... User enters data in form (subsequently stored in database) User chooses background image (80px by 80px) CSS used to style the text with the chosen image as a background.....in a sized container. I know this can be done and have achieved it with varying levels of success, but am unsure as to the best method. Q1 - What would be the best tag or container to use? The text will be used as a link and must display text when 'hovered' over. Should the text be inside <a>, <li>, <div>, etc etc. I don't know which is best for this purpose. I know the <acronym> tag can be used for 'hover' text, but besides misusing a tag, it's not supported in Opera (so far as I can see) and is displayed differently in firefox/IE. Q2 - What is the best method of displaying additional text (in multiple browsers) on 'hovering' the link; could I use a 'hidden' div (which is set visible on hover) rather than a tag property, and if so, how could I make it work for links at the edge of the screen (will the layer appear offscreen)? Not sure how to do this? Thanks for your time, all responses greatly appreciated. Duncan |
|||||||