Wed, 2004-08-25 16:59
Have been getting some great help, which I really value. Thanks so much! New topic because its a new problem/question. Would greatly appreciate the help.
I have a container which is being used to hold the side title navigation. On the site I have just a bunch of links or future text links.
So something like:
HEADING
Link 1
Link 2
spacing
HEADING 2
Future link 1
Future link 2 is really long
so it goes to two lines
spacing
HEADING 3
Future Link 3
Link 3
------------------------
- The "HEADING" is a slightly larger font and is bold
- The Links are active. Just a slightly smaller font and still bold (with css rollover affects). I define their behaviour in the sidebar container tag.
- Last I have the Future Links. These are the same font size as the active links, but no bold.
Basically I'm having trouble when to use span and when to use div. I've read in several places about the differences, and how you need to know whether its inline or blockline, but I'm just not understanding the whole process. Some of my scenarious seem to fit both inline and block, so then I'm not sure whether to use span or div. Either way my line spacing will not work right except for my heading. Even with <br> tags after every link, it will only put the line height function if the text is actually extending to two lines. Even though there is no <br> tag in the middle of the link.
Meaning:
Future Link 1
Future Link 3 is
really long extend.
-----------------------------------------------
Here is a sample of my css below:
Quote:
#sidebar
{
margin: 0;
float: left;
width: 200px;
background-image:url(images/left_mid_gradient.jpg);
}
#sidebar a{
font-family: Arial, Verdana, sans-serif;
font-size: 0.8em;
font-weight: bold;
/*line-height:2.0em;*/ commented; not working right
}
.style_Header {
Font-Family:Arial, Verdana, sans-serif;
Font-Weight:bold;
font-size:0.9em;
color:#0F0F68;
line-height:1.8em;
text-align:center;
}
.style_menu_future_links{
font-family: Arial, Verdana, sans-serif;
font-size:0.8em;
line-height:1.8em;
}
I'm not trying to get anyone to discect the code. Just trying to understand how to space lines and use the correct span/ div tags. If anyone could just help me, it'd be appreciated.
Thanks,
JJ
Wed, 2004-08-25 19:07
#1
div vs span for font/line formatting
Firstly, you are probably over-complicating the issue. The difference between inline and block display properties are simple, inline meaning an element is flowing along the baseline of the text, and block meaning it takes on it's own space with with breaks above and below its start point and end point.
YOur code could benefit from using unordered lists to list the links (since, as is stated in such circumstances, your links are a list of destinations, basically).
As an example:
<h1>Heading</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
And so on with the other links. You style the list as:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
... this will remove the bullets and indentation, and leave you with a simple list with linebreaks for each link (since a <li> is a block element, and thus, breaks).
Alternatively, you could use definition lists, which would allow you to use the links in a list, and not need a <h1> tag, using the <dt> instead, as:
<dl>
<dt>Heading</dt>
<dd><a href="#">Link 1</a></dd>
<dd><a href="#">Link 2</a></dd>
</dl>
And style with:
dl,dt,dd
{
margin: 0;
padding: 0;
}
Thu, 2004-08-26 18:55
#2
div vs span for font/line formatting
However you are more or less right on divs vs spans - use divs for sectioning up the page, and span to enclose and style text.