...

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



duderdude2
02-25-2005, 07:09 PM
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?

whizard
02-25-2005, 07:26 PM
you might be able to add this to your CSS


br.small_break
{
line-height:4pt; /*or whatever size you want*/
}

Then you just use this


<br class="small_break" />

in your code whenever you want the small break, and the br tag without the class will function normally

Dan

channy
02-25-2005, 07:27 PM
You may be able to use the css atribute line-height to adjust the size of the <br>

W3Schools line-height info (http://www.w3schools.com/css/pr_dim_line-height.asp)

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... :(

bazz
02-25-2005, 07:32 PM
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

duderdude2
02-25-2005, 08:13 PM
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.

duderdude2
02-25-2005, 09:14 PM
Ignore this please.

duderdude2
02-25-2005, 10:04 PM
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.

rmedek
02-25-2005, 10:09 PM
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:


<h3>Article title</h3>
<p>Here is the text of the article</p>

and then the css:


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...

channy
02-25-2005, 10:10 PM
I coudn't find where you defined the class spacer in any of your style sheets, that might be the problem....

duderdude2
02-25-2005, 10:11 PM
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"?

duderdude2
02-25-2005, 10:12 PM
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 ;)

channy
02-25-2005, 10:14 PM
No problemo :) that's the joy of having firefox web dev plugins :thumbsup:

rmedek
02-25-2005, 10:19 PM
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!

http://codingforums.com/showthread.php?t=53165

:)

duderdude2
02-26-2005, 06:52 PM
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,

bazz
02-26-2005, 08:24 PM
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.



<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).


#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?)



<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

duderdude2
02-26-2005, 09:01 PM
Awesome, thanks for the suggestions Buzz.

chilipie
02-27-2005, 02:50 PM
Awesome, thanks for the suggestions Buzz.
LMAO :D .

bazz
02-27-2005, 07:03 PM
me too :D

duderdude2
02-28-2005, 03:46 AM
Haha, sorry about that, I swear I saw Buzz. Damn Toy Story ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum