|
CSS - Can You Adjust The Line Spacing On A Hard Or Soft Return In Text Content?
If 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;
}
Similar TutorialsIs 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. 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;
}
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. 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. 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'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 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? well, as title....... I tried put wrap=soft into a textarea like this : Code: <textarea name="textBody" class="textarea" wrap=soft style="width: 455px; height: 250px"></textarea> and the textarea class is like this : Code: .textarea {
border: 1px solid #336699;
color: #336699;
background-color: #CEDBE9;
}
but it doesn't work in Mozilla 1.6...... could anybody help me to find out the solution? 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. 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 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 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? 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. 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. I update the website of a local gaming center and I recently redesigned it. I am not a CSS expert and now that I have integrated it into to site, the background will not fill the screen on larger monitor sizes. When you scroll down to the bottom of the page it turns leaves a large white space at the bottom of the screen. There is also an odd white border around the site. The css can be found in the source code. The site is nextlevelchardon.com i am trying to do something like: <h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that? I'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. Hello, more issues(!) I'm using "text-decoration: line-through" to cross out retail prices - catalogue style. The trouble is, when the effect is used with certain numbers like "8" and "3", the numbers become unreadable and it looks like we're charging more than the retail price on some products. My boss likes the effect, so I need to find out how to raise the height of the line-through. Does anyone know how I can do this, or any other methods (such as border control) that will be more effective. Many thanks! |
|||||||