|
CSS - Getting The Wrapped Text Without Any Line Spacing
I'm not that familiar with css yet...so this might be a stupid question.
I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code:
#primary_navigation {
background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
width:960px;
height:200px;
margin-top:20px;
font-size:0.75em;
clear:both;
}
#primary_navigation ul {
list-style:none;
margin-left:-20px;
height:110px;
}
#primary_navigation ul li {
line-height:2.0em;
margin-right:5px;
}
Similar TutorialsIf I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text. How would I add it to my stylesheet code in this example: Code: .bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align:right;
font-weight: none;
background-color: #ffffff;
line-height:1.5;
letter-spacing:-0.02em;
}
Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents. eg. A B I want the distance from A to B to be either greater or smaller. Can you also control the space between letters? eg. AB I want the spacing between A to B further or closer. Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing. Thanks for taking the time to read my question. I have a tree menu on my page www.pierced.ca/pierced-events.htm that has long text in it. I have wrapped the text so that the page does not stretch and look bad. I am wondering how to move the wrapped text to the right so that it does not write over the dotted line. I would also like to extend the dotted line downward (I guess that would be another image) Thanks for your help. Brad CSS file: .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; white-space: normal; } .dtree img { border: 0px; vertical-align: middle; } .dtree a { color: #999999; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { white-space: normal; padding: 1px 2px 1px 2px; } .dtree a.node:hover, .dtree a.nodeSel:hover { color: #333; text-decoration: underline; } .dtree a.nodeSel { background-color: #c0d2ec; } .dtree .clip { overflow: hidden; } This is what i want and it just doesn't work: Quote: TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT IMG TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT Hmm hopefully you get what i'm saying cause it really looks bad here so i have something like this: Code: <p>text ...... <div .. ><img...>/<div> text text </p> The text loses the formatting... Thanks. I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Hi I have a classic CSS:- ul.none { FONT-SIZE: 70%; line-height: 10pt; COLOR: #000000; list-style-position: intside; list-style-type: none; font-family: Verdana, Arial, Helvetica, sans-serif; position:relative; width:150px; padding:10px; text-align:center; BACKGROUND-COLOR: #EDF5F5; border: 1px solid #0000000; } AND THE HTML:- <ul class="none"> <li>NEWS 1</li> <li>NEWS 2</li> <li>NEWS 3</li> <li>NEWS 4</li> <li>NEWS 5</li> </ul> I want to have a larger gap between each <li> item, without using a <p> or a <br>? Line height or spacing does not work, it spaces out everything. E.g if the text in the <li> is longer than a line it makes this line higher, which means it looks well daft if you see what i mean. because everything is so spaced out. Margin and Padding do not work for what i wish to achieve. Could anyone Help please. Hi, I am having difficulty with the line-spacing on several pages of this website. One can be seen on this page the line spacing is not correct (it overlaps). The spacing should be like the home page and I haven't specified line spacing anywhere in the CSS. Also, some of the main headings on pages do not left align...they are in tables. Sometimes they are centered and sometimes they are just indented a little. I am trying to fix someone else's work and it's proving to be difficult. I'm trying out coding a skin for IPB, and there's an odd gap beneath all my footer tables/body elements. I've attached an image so you can see what I mean as it's all hosted on my PC. Code:
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding: 0px;" bgcolor="#363636">
<tr height="30">
<td style="background: url(style_images/tmp/cat_foot_bg.gif);" height="25">
<img src="style_images/tmp/cat_foot_far_left.gif" alt="" />
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);">
<img src="style_images/tmp/cat_foot_left.gif" alt="" />
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);" width="100%">
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);">
<img src="style_images/tmp/cat_foot_right.gif" alt="" />
</td>
<td style="background: url(style_images/tmp/cat_foot_bg.gif);">
<img src="style_images/tmp/cat_foot_far_right.gif" alt="" />
</td>
</tr>
</table>
<!-- End Footer table -->
<!-- End Category -->
<br />
<!-- Begin new forum -->
<div style="display:none" id="fc_7">
<!-- Begin Header table -->
<table width="100%" style="background-image:url(style_images/tmp/cat_top_bg.gif)" border="0" cellpadding="0" cellspacing="0">
<tr width="100%">
<td height="32" width="8" align="left">
<img src="style_images/tmp/cat_top_far_left.gif" width="8" height="32" alt=" " border="0" />
</td>
<td height="32" width="103" align="left" valign="top">
<img src="style_images/tmp/cat_top_left.gif" width="95" height="32" alt=" " border="0" />
</td>
<td width="100%" style="background-image:url(style_images/tmp/cat_top_bg.gif)" align="left">
<div align="left" class="desc"><strong><a href="http://localhost/forums/index.php?showforum=7">Yahoo ****</a></strong></div>
</td>
<td style="background-image:url(style_images/tmp/cat_top_bg.gif)" valign="top">
<a href="javascript:togglecategory(7, 0);"><img src="style_images/tmp/cat_top_right.gif" alt=" " border="0" /></a>
</td>
<td style="background-image:url(style_images/tmp/cat_top_bg.gif)">
<img src="style_images/tmp/cat_top_far_right.gif" alt="" />
</td>
</tr>
</table>
<--! End Header table -->
</div>
The <br /> is what I added today....it has no effect if I remove it. The first table is what the bottom of the "row" would be, it's the bottom of the category in the screenshot. I assume it's CSS as my header image has the same spacing between my content, and my content has the same between my footer. There is no CSS for the html or body. In Firefox, it renders great, but IE has that white spacing... I'd be grateful for any help as this has baffled me for the past few days alone hey guys i'm having a problem with CSS line spacing. firefox is displaying correctly of course, and IE is scrunching the lines closer. here is an example (firefox on the right, IE on the left): here is the CSS: Code: #galleriesTextContainer
{
height: 130px;
margin: 0px;
padding: 0px;
margin-left: 8px;
line-height: 8pt;
}
.galleriesText
{
margin: 0px;
padding: 0px;
color: white;
font-family: Arial, Verdana, Sans Serif;
font-size: 11px;
}
Code: <div id="galleriesTextContainer"> <span class="galleriesText">dolphy day 2005 (132 images)<br />dolphy day 2004 (101 images)<br />buffalo wild wings (47 images)<br />lemoyne 2005 (425 images)<br />lemoyne 2004 (28 images)<br />lemoyne 2003 (147 images)<br />syracuse nationals 2004 (43 images)<br />nyc / jersey 2005 (245 images)<br />minutes monte (29 images)<br />my truck (67 images)<br />phil's t-type (70 images) </span> </div> I dont understand the purpose of Browser that behave differently from each other. Couldn't the browser makers just make it result consistently? This is my code to make my line spacing bigger or padding. I try to do other style changes and it also has the same problems. In Firefox, doing it this way works but in IE, nothing happens. Code: h1 {
font-size: 10px;
font-weight:bold;
line-height:50px;
padding:10px 10px 10px 10px;
}
Code: h1 {
font-size: 10px;
font-weight:bold;
padding:10px 10px 10px 10px;
}
Then on my web page I put this in on the text I want to customise. Code: <h1>Sample Text</h1> h1 text is inside my little div box. Am I doing this wrong to achieve what I want? Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following. I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell. But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below: |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other. I am presently new at CSS, and I need help with this little problem. Basically, I am creating a design and on Photoshop I have the following.. jerrytavares[dot]com/phpform/ex1.gif Then when I convert it into HTML i have this.. jerrytavares[dot]com/phpform/ex2.gif Now I need help spacing out the checkmark/rss image from the text. What is the best and easiest way to do this with CSS? Thanks, Peter Hi, I want to show the contents of a textarea as normal text in a preview block with all the text spacing intact. Name: ABC Age: 22 Place: World Somehow the spacing of the text is not displayed as in the textarea. How can this be done. Thanks My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np thanks. Hey, all. Just wondering if anyone knows of a proper way to get rid of vertical space between text fields in a form. IE seems to like to have 2px in there, where other browsers will give me the desired 0px. For example:
Code: <input type='text' value='test' style='margin:0px; display:block;'> <input type='text' value='bottom' style='margin:0px; display:block;'> Gives me 2px of space between the 2 fields, but only in Internet Explorer.. Any thoughts? Is there a way to decrease a default spacing between bullet and text in <ul>? Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines. Hello, this is my first attempt at a website and first attempt at using CSS as well. With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently. For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at http://www.onlinecasinoboss.com/new_page_1.htm The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout. Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF. Please help, and thanks for anyone that takes the time to help a newbie web designer out. The HTML (the div is colored for convenience) 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" xml:lang="en" lang="en">
<head><title>afdad</title></head>
<style>
div {
background: red;
}
</style>
<body>
<div><img src="lilo.gif" /></div>
</body>
</html>
As shown by IE6.0/Win As shown by Firefox/Win and Opera/Win Notice how a small sliver of the div appears just under the image when viewed in FF or Opera. I actually prefer IE in this case. What causes this extra gap and how do I get rid of it? i've tried variations of inline/block display, and anything else i could think of...i want an orange border around the L and R divs, but all i get is a 2px border with no content, and the L and R floated on top of the border...plz shed some light on what i'm doing wrong Code: <style type="text/css">
div { background: #E7E7E7; border:1px solid #CCCCCC; }
div#l { float:left; }
div#r { float:right; }
</style>
</head>
<body>
<div style="margin:auto;width:1000px;text-align:center;border:2px solid ORANGE">
<div id="l">
L
</div>
<div id="r">
R
</div>
</div>
</body>
|
|||||||