40 users online (0 members and 40 guests)  

Thread: CSS and <br>


  Results 1 to 13 of 13
  1. #1
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    CSS and <br>

    How does one write "<br><br><br><br>" into a CSS Stylesheet
    or how does one leave several lines between texts or images?

    I tried =

    <style>
    b { <br>,<br>,<br>,<br>; }
    </style>
    <b>
    but it didn't work.
    Glenvern

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: CSS and <br>


    Hi there Glenvern,

    you should get into the habit of using margin rather than the hit-and-miss method of the br element. :
    Here is a basic example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    body {
        margin:10px;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
    }
        
    #top_div {
        width:250px;
        padding:10px;
        background-color:#fee;
        margin-right:auto;
        margin-bottom:100px;
        margin-left:auto;
     }
    
    #middle_div {
        width:250px;
        padding:10px;
        background-color:#efe;
        margin-right:auto;
        margin-bottom:60px;
        margin-left:auto;
     }
    
    #bottom_div {
        width:250px;
        padding:10px;
        background-color:#eef;
        margin-right:auto;
        margin-bottom:20px;
        margin-left:auto;
     }
    
    div span {
        font-weight:bold;
     }
    -->
    </style>
    
    </head>
    <body>
    
    <div id="top_div">
    This div has margin-right:auto, <span>margin-bottom:100px</span> and margin-left:auto
    </div>
    
    <div id="middle_div">
    This div has margin-right:auto, <span>margin-bottom:60px</span> and margin-left:auto
    </div>
    
    <div id="bottom_div">
    This div has margin-right:auto, <span>margin-bottom:20px</span> and margin-left:auto
    </div>
    
    </body>
    </html>
    
    Further reading:-


  3. #3
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: CSS and <br>

    Thanx Coothead - works fine..
    Glenvern

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: CSS and <br>

    Hi there Glenvern,

    I forgot to mention that you should consider the br element as it is meant to be - a line break..
    Also if you just wish to set the spacing between the actual lines of text then use line-height.

    Further reading:-


  5. #5
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: CSS and <br>

    Thanks, that looks to be a nice way to do it, but I visited the
    w3school link and it shows the instruction but it doesn't show
    how or where to put it.. An example would be handy please.

    I am looking at this code and I am thinking this is going to
    make all line heights the same which is not what I am looking
    for. I only want this line height difference to occur only once on the page..
    Can the line-height be used for just one instance of extended line spacing and leave the rest of the page as normal.?
    Glenvern

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: CSS and <br>


    Hi there Glenvern,

    have a look at this example, it may help...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #container {
        width:450px;
        border:3px double #000;
        margin:auto;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:14px;
        text-align:jusify;
     }
    #container p {
        margin:10px;
     }
    #container p span{
        line-height:40px;
        color:#963;
     }
    -->
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum.<br /> 
    <span>Curabitur sodales, elit vel molestie hendrerit, elit odio</span> <br />
    rhoncus tellus, nec gravida enim urna id velit.
    Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </p>
    </div>
    
    </body>
    </html>

  7. #7
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: CSS and <br>

    Couldn't get any of that to work for me (probably because I don't know what I'm doing)
    Here's the URL of a page which might explain my problem.

    http://vernswebsite.co.uk.web1000.com/lineheight.htm

    If you don't want to persue this I'm quite happy with my HTML but as they say it's not PC and you must use CSS..
    Glenvern

  8. #8
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: CSS and <br>

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>line-height.htm</title>
    	<style type="text/css">
    		h1 { color: red; font-size: 28pt; }
    		img { border: 1px solid yellow; margin: 0 0 2em 0; }
    		.txt { color: blue; font-size: 12pt; margin: 0 0 5em 0; }
    		.caption { color: green; font-size: 10pt; margin: 0 0 1em 0; }
    		.pad { color: black; margin: 0 0 3em 0; }
    	</style>
    </head>
    
    <body background="3.jpg" link=blue vlink=blue alink=blue>
    
    <center>
    
    
    <h1>This is the header size 28pt followed by one [br].</h1>
    
    <p class="txt">This is the next line size 12pt and a different color and followed by five [br][br][br][br][br's].</p>
    <img src="santaguitar.gif">
    <p class="caption">An image with two [br's] and this caption with one [br]</p>
    
    <p class="pad">three [br][br][br's] And a change of color</p>
    
    <p>How do I put all these different (line-height) (font changes) (color change) functions</p>
    
    <p>into CSS on one page so eliminating all those [br's].?</p>
    <p>Your example appears to make the all the text the same size and color.</p>
    <p>I can change the fonts and colors with [span] it's just the line-heights that are a problem.</p>
    
    </center>
    </body>
    </html>
    That's not exactly it, but it's produces similar output to the one on your page, and illustrates the classing of the <p> tag to force the margins & font size/colours.
    margin takes 1-4 values, I've used 4 - top/right/bottom/left.
    Any questions, post back, I'll keep an eye on it.
    I'm sure Coothead can do this more succinctly, but that's my bash

  9. #9
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: CSS and <br>

    That hit the spot Deadmeat, it all becomes clear now - thank you.
    Glenvern

  10. #10
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: CSS and <br>

    I forgot to say that I used 'em' as the unit, as I figured that a <br /> should be 1 line (i.e. character height) deep.
    If you want a fixed layout, you can use px instead.

  11. #11
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: CSS and <br>

    My problem now is how to get the line spacing to work
    before a line of text not after.

    (My first line of text needs to be 5 or more line spaces down from the top of the screen)

    <style>
    .br5 { margin: 0 0 5em 0; }
    </style

    <p class="br5">I wrote the instruction with text in the line and it worked ok.<p>

    <p class="br5"></p>

    When I tried it without text it does not give me any line spaces.!!
    Glenvern

  12. #12
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: CSS and <br>

    The margin values are:
    top right bottom left
    so if you use
    { margin: 5em 0 0 0; } you will get the 5 lines above
    { margin: 5em 0 5em 0; } will give 5 lines above and below.
    If I remember correctly, the shorthand for this is { margin 5em 0; } but if you do it longhand it's easier to change them independently later if required.
    Ther is a way to use an empty class to create space, but I can't remember what - you could always use <p class="br5">&nbsp;</p> if you want to keep it as above, though.

  13. #13
    Glenvern's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Norfolk, UK.
    Posts
    112

    Re: CSS and <br>

    Excellent, problem solved. Thanx for all..

    Glenvern...
    Glenvern



Tags for this Thread