Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there a way to create a space, like with <BR>, but smaller?

    I want to create a line break in my text, but the <BR> command is too big. Is there a way in CSS to dictate how large of a break I want? However, I only want to apply it to certain parts of the page, but not the whole thing.

    How can I do this?
    Last edited by duderdude2; 02-25-2005 at 07:27 PM.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    you might be able to add this to your CSS

    Code:
    br.small_break
    {
    line-height:4pt; /*or whatever size you want*/
    }
    Then you just use this

    Code:
    <br class="small_break" />
    in your code whenever you want the small break, and the br tag without the class will function normally

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    line-height

    You may be able to use the css atribute line-height to adjust the size of the <br>

    W3Schools line-height info

    I'm not entirely certain it can be used on a <br>, and unfortunately I'm at work so don't have time to test...

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    You could put your blocks of text into <p> tags and assign them a class like this

    p.nameofclass {
    padding : 5px 25px;
    }

    That will assign your paras a gap of 5px at the top and bottom which of course, you can change by resetting the value to something else. if you dont want ti to apply to all paras, then assign the others either no class or a different one.

    If you are trying to control a specific para within a bock of text, then put it all in a div. put each para in a <p> tag and in addition, give the special one a class like this
    <div id="textblock">
    <p> first para</p>
    <p> second para</p>
    <p class="specialpara"></p>
    <p>lastpara</p>

    Then your css would be like this:

    #textblock p {
    font : attributes
    padding : 25px;
    }

    #textblock p.specialpara {
    padding : 5px
    }

    I havent tested that but you should get the general idea. I think you'll find that all para in the div will follow the rules of p and only the special para will take the rules for p.specialpara. (I might have got that last bit wrong and if so, the rules for each will be separate completely).

    bazz
    Last edited by bazz; 02-25-2005 at 07:38 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    whizard, I tried your method but couldn't get it to work.

    This is the page I was testing it on (inside the first box on the left, I inserted the code inbetween the bolded headline and the rest of the description):
    http://www.gamexplain.com/videos/starfoxassault.shtml

    Maybe I did something wrong? Thanks regardless. I'll try the other methods as well.

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ignore this please.
    Last edited by duderdude2; 02-25-2005 at 10:02 PM.

  • #7
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bazz, I tried your suggestion, but I can't get it to work, no doubt because I'm an idiot.

    Here's the page I'm trying it on:
    http://www.gamexplain.com/videos/starfoxassault.shtml

    See the gap between the bolded portion and the rest of the text in the left box? That's where I put the code.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You can't style <br /> tags. I forget where it is, but there's a thread on here somewhere that explains it.

    As far as the code... ahem... AUUUGHHGUHURGLE. Dude, you have many many div tags in there. Try marking up things semantically, and then you'll have no problem adjusting things like space between elements.

    The bits you are having trouble with could be marked up like so:
    Code:
    <h3>Article title</h3>
    <p>Here is the text of the article</p>
    and then the css:
    Code:
    h3 {
     margin: 5px 0;
     }
    
    p {
     text-indent: 10px;
     margin: 0;
     padding-bottom: 5px;
     }
    I just made up some figures, but I hope you can see where I'm going with this one. Hope this helps...

  • #9
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I coudn't find where you defined the class spacer in any of your style sheets, that might be the problem....

  • #10
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    rmedek, Thanks for the help.

    I see what you're getting at. As I'm still heavily learning CSS, what did you mean by "marking up things semantically"?

  • #11
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by channy
    I coudn't find where you defined the class spacer in any of your style sheets, that might be the problem....
    I'll be damned, I totally forgot about to add that. Grr, thanks for catching that. Let's see if that make a difference

  • #12
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problemo that's the joy of having firefox web dev plugins

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by duderdude2
    rmedek, Thanks for the help.

    I see what you're getting at. As I'm still heavily learning CSS, what did you mean by "marking up things semantically"?
    That's a great question!

    Semantics - What does that mean?


  • #14
    New Coder
    Join Date
    Jan 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    You can't style <br /> tags. I forget where it is, but there's a thread on here somewhere that explains it.

    As far as the code... ahem... AUUUGHHGUHURGLE. Dude, you have many many div tags in there. Try marking up things semantically, and then you'll have no problem adjusting things like space between elements.
    A bit late on this, but please help fight my ignorance. While I see the advantage to marking the headline and paragraphs as you have, how would that affect my "many" Div tags? What can I do to reduce those?

    Thanks,

  • #15
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Soory I am short of time at the minute but in my break, I took a look at a specific div to try to show it working more semantically; though I am still leaing this from more knowledgable people here.

    I looked at the section with the word Katina in it, what I would call the 2nd from left, of four inline divs (even though it isn't yet coded as just four divs).

    take a look at how this would display. I only looked at it in IE6 on XP but even if wrong, it should give you the drift of how it goes.

    Code:
    <div style="position: absolute; top:110px; left:233px; width:153px; height:311px">
    <A HREF="/cart/store/addItem.asp?idProduct=3087"><img style="float:left; clear : both" SRC="/images-videos/starfoxassault/level2.jpg" border="0"></A> 
    <A HREF="/cart/store/addItem.asp?idProduct=3087"><img style="float:left; clear : both" SRC="/images-videos/description.gif" border="0"></A>
    <A HREF="/cart/store/addItem.asp?idProduct=3087"><img style="float:left; clear : both" SRC="/images-prices/125.gif" border="0"></A>
    <h2 style="clear : all" >Katina: Special Flag Locations</h2>
    <p>Discover all 5 special flag locations with this video. If you find them all in every level, "Demon Sniper" is unlocked for VS Mode!</p></div>
    Now from initial reading of your code, I would try to do it like that (ie one div with the contents positioned within). I would also suggest you consider placing your css in an external file so that future changes can be made to it which will replicate across all pages that use the style that you may change.

    something like this (btw, I use lower case just coz I am used to the concept that upper case is like shouting. I prefer the look of lowercase also).
    Code:
    #NameOfYourDiv {
    font-family: "Verdana", helvetica, sans-serif, arial;
    position: absolute;
    top:110px;
    left:233px;
    width:153px;
    height:311px
    }
      
    #NameOfYourDiv img {
    float : left;
    clear : both;
    }  
    
    #NameOfYourDiv h2 {
    clear : all;
    }
    
    #NameOfYourDiv p {
    font-size : 1em;
    color : #000000;
    }
    Oops, nearly forgot.. If you use the styles shown in the section above, you'll need to call the stylesheet like this

    <link rel="stylesheet" href="location of file" type="text/css" media="screen">

    and then the code in your page would be like this (tidier?)

    Code:
    <div id="NameOfDiv">
    <a href="/cart/store/addItem.asp?idProduct=3087">
    <img src="/images-videos/starfoxassault/level2.jpg" border="0"></a> 
    <a href="/cart/store/addItem.asp?idProduct=3087"><img src="/images-videos/description.gif" border="0"></a>
    <a href="/cart/store/addItem.asp?idProduct=3087"><img src="/images-prices/125.gif" border="0"></a>
    <h2>Katina: Special Flag Locations</h2>
    <p>Discover all 5 special flag locations with this video. If you find them all in every level, "Demon Sniper" is unlocked for VS Mode!</p>
    </div>
    It may not look much smaller a code but the css in one place now, controls the style on any page that links to that stylesheet making updates easier and errors less likely. (he said as he spent an afternoon fixing errors in his own site )

    If the main div that is shown here as NameOfYourDiv contains font style as shown, then that style will be used in all the other (child?) processes unless you specific within each, different attributes.

    hth

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •