br or span?

Hello,

As a beginning designer/coder (etc.) I'm currently working on a table-less layout at our clan forums.
Currently working on forumhome_forumbit_level2_post I'm not really sure what would be best to do..

What do you think would be best

HTML Code:

<span class="smallfont">blahblahblah</span>
<span class="smallfont">blahblahblah</span>

or

HTML Code:

<div class="smallfont">blahblahblah<br />
blahblahblah</div>

?
Edit:

Also, when working with classes, do you prefer to keep vb’s default names? (smallfont, tborder, alt1, etc.) or do your prefer to change them to something which makes more sense?

it really depends on what's going in it.

spans are inline elements. If you want a hard linebreak, you will have to add display: block; to those.

Thanks, I wasn't aware of that.
I'm not really sure if it would be best in this situation, but I do see the possibilities with it.

if it's two logical lines of seperate text, the best thing would probably be

<div>
<p></p>
<p></p>
</div>

Thanks again

Like you say, since it isn’t part of any content I try to avoid <p> as much as possible,
and went for <div> (span wasn't suited after all)

HTML Code:

<div class="tborder" style="padding:0px 1px 1px 1px">
    <div class="alt1" style="padding:5px" id="f$forum[forumid]">
        <img class="fstatusicon" src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
        <div class="forum" style="margin:0px 0px 0px 35px">
            <h3><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></h3>
            <if condition="$show['browsers']"><div class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</div></if>
            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
            <div class="smallfont" style="margin-top:3px">Threads: $forum[threadcount] - Posts: $forum[replycount]</div>
            <div class="smallfont" style="margin-top:3px">$forum[lastpostinfo]</div>
            <if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
            <if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><ul class="subforum">$forum[subforums]</ul><br class="clear" /></div></if>
        </div>
    </div>
</div>
$childforumbits

I'm sure it isn't really that optimized, but I'm learning by the hour

avoid using "style" as much as possible.

make a class and reference it that way

I agree with Brian , using inline style is not good. Do it like this

Code:

.pad1 { padding:0px 1px 1px 1px; }
.pad5 { padding: 5px; }
.marb35 { margin: 0 0 0 35px; }

HTML Code:

<div class="tborder pad1">
    <div class="alt1 pad5" id="f$forum[forumid]">
        <img class="fstatusicon" src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
        <div class="forum marb35">
            <h3><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a></h3>
            <if condition="$show['browsers']"><div class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</div></if>
            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
            <div class="smallfont" style="margin-top:3px">Threads: $forum[threadcount] - Posts: $forum[replycount]</div>
            <div class="smallfont" style="margin-top:3px">$forum[lastpostinfo]</div>
            <if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
            <if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><ul class="subforum">$forum[subforums]</ul><br class="clear" /></div></if>
        </div>
    </div>
</div>

Also , you may want to use p instead of all that div you used for desciption etc.. If you need any help , check http://depkac.com source

forumhome_forumbit_level1_nopost

HTML Code:

<div class="cat-top_lft1"></div><div class="cat-top_rht1"></div><div class="cat-top_x1">
	<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
	<h2><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a></h2>
	<if condition="$show['forumdescription']"><span class="smallfont">: $forum[description]</span></if>
	<if condition="$show['subforums']"><div class="smallfont"><ul class="subforum">$forum[subforums]</ul><br class="clear" /></div></if>
</div>
<if condition="$childforumbits">
	<div id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
		$childforumbits
	</div>
</if>
<div class="cat-btm_x"><div class="cat-btm_lft"></div><div class="cat-btm_rht"></div></div>
<br />

forumhome_forumbit_level2_post

HTML Code:

<div id="forumbit" id="f$forum[forumid]">
	<div id="fstatusicon">
		<img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
	</div>
	<div id="forum">
		<h3>
			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
			<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
		</h3>
		<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
		<div class="forumbit_stats smallfont">$vbphrase[threads]: $forum[threadcount] - $vbphrase[posts]: $forum[replycount]</div>
		<div class="forumbit_stats smallfont">$forum[lastpostinfo]</div>
		<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]" rel="nofollow">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
		<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><ul class="subforum">$forum[subforums]</ul><br class="clear" /></div></if>
	</div>
</div>
$childforumbits

HTML Code:

#forumbit {
background-color:#161616;
border-color:#111111;
border-style:solid;
border-width:0 1px 1px;
overflow:hidden;
width:485px;
}
#fstatusicon {
background-color:#161616;
border-right:445px solid #171717;
float:left;
margin-right:-445px;
padding:8px 5px 5px;
width:30px;
}
#forum {
background-color:#171717;
border-left:1px solid #111111;
float:left;
padding:5px;
width:434px;
}
.forumbit_stats {
margin-top:3px;
}
.forumbit_stats {
margin-top:3px;
}

Thank you.
I’ve decided to remove .tborder, as it could be easily accomplished using .alt.
Even though I’m learning new definitions by the hour by now I can say I understand what I’m actually doing

About Depkaç, like Ayyas it’s a real inspiration to me, both by code and design. Highly impressive!

Also I like the way how you enhanced the way dropdown menus are show, and therefore excluded editing the js files.
Even though my boards are small, some months ago I’ve decided to use a more prominent rating system as well, which has definitely lead me to more interactivity between our members.

What would be the English translation of Depkaç if I may ask?

Thanks again, both.

Depkaç doesnt have an exact translation to English. Its more like digg dugg , two opposite words. Dep - push up , Kaç - escape . I was planning to use this domain as a digg format site but then decided to use it on ayyaş as the name change on ayyaş has been longly planned.

Originally Posted by briansol

avoid using "style" as much as possible.

make a class and reference it that way

I'm trying to learn about this as well. Can you tell me why it is considered good to avoid using "style"? Thanks, brian.

Not sure of another reason, but this is my take.

<div class="newclassnew">

is better for SE's because it gets to content faster

<div style="background-color:#FFFFF; color:#000000; padding-left:15px; padding-right:15px;">

Again, this might not be the reason, but makes sense to me.

There's many advantages to using classes/ids/dom element selectors VS inline style.

• css files (linked) are cached by the browser. less page load weight, less download time (page 2 on), less bandwidth usage = less total cost of ownership
• less on-page markup. better code to content ratio for SEO purposes
• cleaner html code. easier to maintain
• changing the style later is MUCH easier if its all in one place instead of inline everywhere
• inline style over-rides css file styles and can cause some bugs that are tough to pick out when you have 2 sets of style attributes in 2 separate areas
• remote style brings in the development model: separation of code, content, and UI. In larger projects this is critical as most often, it's 3 separate teams working on it.
• Can address multiple elements at once with one call, ie
  
  Code:

  #main #wrap div { border: 1px solid #333; }

  will effect EVERY div in #wrap in #main that is not otherwise over-ridden with a border instead of having to put a border on EVERY single div in there. The same holds true for classing. It's better to use a generic element by its reference point (document heirarchy) if you can instead of just making a class on it, especially if it is to be reused.

HOWEVER

There are 3 instances when using inline style is the preferred method:

• html emails. you don't want to hit a server or put links in an email body. Plus, many clients (mainly webmail) will not render <style> RULES </style> tags to preseve their webpage's structure. You see problems from this a lot on ebay auctions...
• when you don't know the source container. ie, if you made a widget and released it to the public, you have no idea where a user may put it, what container its in, or if they used a class name that you also used which will cause conflicts.
• when you need to manipulate the DOM with ECMAscript (most commonly, javascript) for example, you have a notice of some sort that you want to show/hide onclick. you need a blank style (or a default of display: inline/block/etc)

Code:

<scipt type="text/javascript">
function showit() {
if (document.getElementById("mydiv").style.display == "none") {
document.getElementById("mydiv").style.display == "block";
}
else
{
document.getElementById("mydiv").style.display == "none"
}
}
</script>



<div id="mydiv" style="display: block;">blah blah blah <a href="#" onclick="showit(); return false;">click to hide</a></div>

without the inline style on mydiv, the javascript in certain browsers can't 'find' the DOM selector to change the style to something else in the first place. It will end up retuning NULL which will not match 'none' or 'block' as given in the example.



So, there you go You're now a master of css

Ten CSS tricks you may not know

Code:

http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml