Need a little help with CSS... [Archive]

View Full Version : Need a little help with CSS...

HMBeaty

03-16-2011, 09:22 AM

Ok, so I'm getting back into the swing of things from being away from vBulletin for quite awhile, and playing around with making a new mod/page at the moment, however from my present point, I can't figure out how to make it 2 columns. It took me several hours just to get where you see in the picture lol. Where the line is with the arrows is where I'm trying to split it at, so I would have text on both sides of that line. Now, in vBulletin 3.x, I know it was as simple as something like this...
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr valign="top">
<td class="alt1" nowrap="nowrap">
TEXT HERE
</td>
<td class="alt2" width="100%">
MORE TEXT HERE
</td>
</tr>
</table>
But if I use that, I can't seem to keep all my nice borders and whatnot shown in the picture.

And here's my current CSS....
@charset "UTF-8";
/* CSS Document */

.usmlsablock {
margin-bottom:1em;
}

.usmlsatext {
border-bottom:solid 1px {vb:stylevar light_border.borderColor};
}

.usmlsablock .blockbody {
border-left:{vb:stylevar tabslight_border};
border-right:{vb:stylevar tabslight_border};
border-bottom:{vb:stylevar tabslight_border};
}

.usmlsashadow {
-moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
}
So....any advice would be greatly appreciated!

Boofo

03-16-2011, 09:31 AM

AFAIK, you can't make columns with CSS. I had to revert to using tables and TDs to accomplish that.

HMBeaty

03-16-2011, 09:58 AM

It must be possible to do without tables and tds as I haven't found either in the template for the picture below....unless I'm mistaken and it's being called somehow from somewhere. But basically, I'm trying to achieve this.....or at least I hope this is set up the same way....

Boofo

03-16-2011, 10:17 AM

You may be right. Take a look at the forumrules template and see how they are using CSS to accomplish that.

EDIT: I remember why I couldn't do it that way now. I needed to have the right side line up to the left when the left side line length changed. I have to use a tables and TDs to accomplish that as the forumrules way wouldn't do it like I needed it to.

HMBeaty

03-16-2011, 10:37 AM

Ok, now my next question, is there a way to do that and keep all the properties shown in the first image? (the outside border, the shadow, etc)

Boofo

03-16-2011, 10:40 AM

Do you mean with the CSS on the forumrules way? I have no idea, sorry.

HMBeaty

03-16-2011, 10:49 AM

I mean using tables and tds and also keeping the shadow and borders shown in the 1st image

Boofo

03-16-2011, 10:59 AM

I would think you would be able to do that just fine, although I have not tried it yet. Others have been adding shadows to tables in vb 3 so I'm sure it can be done.

HMBeaty

03-16-2011, 07:47 PM

I've done it!!! Looks good, but I'm sure the code could be cleaned up a little more. ALMOST back in the swing of things, but lots more to learn again :(

Boofo

03-16-2011, 09:05 PM

Care you share how you did it?

HMBeaty

03-16-2011, 09:12 PM

Sure...
<div class="block usmlsablock usmlsashadow">
<h2 class="blockhead">Title</h2>
<div class="blockbody">
<table id="usml_table2" width="100%">
<tr>
<td nowrap="nowrap">
<div class="blockrow restore usmlsatext">
TEXT 1
</div>
</td>
</tr>
<tr>
<td nowrap="nowrap">
<div class="blockrow restore usmlsatext">
TEXT 2
</div>
</td>
</tr>
</table>
</div>
</div>

Boofo

03-16-2011, 09:53 PM

Okay, and what CSS goes with that?

HMBeaty

03-16-2011, 10:01 PM

Erm....that's constantly being changed at the moment lol. Trying to fine tune things :)

--------------- Added 1300316493 at 1300316493 ---------------

EDIT: I'll post an update later tonight or possibly tomorrow

Boofo

03-16-2011, 10:16 PM

You can also PM me if that would be easier. I might try to use what you end up with for my events mod on my site, if that is okay. ;)

HMBeaty

03-16-2011, 10:17 PM

Scratch that....I'll go ahead and post what I have so far in terms of CSS and the template....

Template:
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
<title>{vb:raw pagetitle} - {vb:raw vboptions.bbtitle}</title>
{vb:cssfile staff_app.css}
{vb:raw headinclude}
{vb:raw headinclude_bottom}
</head>
<body>

{vb:raw header}

{vb:raw navbar}

<div id="pagetitle">
<h1>{vb:raw pagetitle}</h1>
</div>

<div class="block usmlsa_block usmlsa_shadow">
<h2 class="blockhead">{vb:rawphrase usml_staffapp_application}</h2>
<div class="blockbody">
<table id="memberlist_table" width="100%">
<tr valign="top">
<td colspan="2">
<div class="blockrow restore usmlsa_welcome">
<p>Welcome {vb:raw bbuserinfo.musername}!</p>
<p>{vb:raw vboptions.usml_staffapp_welcome}</p>
<p>Thank you!<br />{vb:raw vboptions.bbtitle}</p>
</div>
</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" width="50%">
<div class="blockrow restore usmlsa_posradio">
{vb:phrase usml_staffapp_position}
</div>
</td>
<td nowrap="nowrap" width="50%">
<div class="blockrow restore usmlsa_posradio">
<vb:if condition="$vboptions['usml_postitionapplying_mod_onoff'] == '1'">
<input type="radio" name="position_applying" value="Moderator" /> {vb:phrase usml_staffapp_mod}<br />
</vb:if>
<vb:if condition="$vboptions['usml_postitionapplying_smod_onoff'] == '1'">
<input type="radio" name="position_applying" value="Super Moderator" /> {vb:phrase usml_staffapp_smod}<br />
</vb:if>
<vb:if condition="$vboptions['usml_postitionapplying_admin_onoff'] == '1'">
<input type="radio" name="position_applying" value="Administrator" /> {vb:phrase usml_staffapp_admin}
</vb:if>

</div>
</td>
</tr>
<tr valign="top">
<td class="blocksubhead" colspan="2">
<b>Personal Information</b>
</td>
</tr>
<tr valign="top">
<td nowrap="nowrap" width="50%">
<div class="blockrow restore usmlsa_singletext">
{vb:phrase usml_staffapp_username}
</div>
</td>
<td nowrap="nowrap" width="50%">
<div class="blockrow restore usmlsa_singletext">
<input type="text" class="primary textbox" name="username" maxlength="256" value="{vb:raw bbuserinfo.username}" readonly />
</div>
</td>
</tr>
</table>
</div>
</div>

{vb:raw footer}
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */

.usmlsa_block {
margin-bottom:1em;
}

.usmlsa_welcome {
border-bottom:solid 1px {vb:stylevar light_border.borderColor};
height:105px;
}

.usmlsa_posradio {
border-bottom:solid 1px {vb:stylevar light_border.borderColor};
height:50px;
}

.usmlsa_otherradio {
border-bottom:solid 1px {vb:stylevar light_border.borderColor};
height:50px;
}

.usmlsa_singletext {
border-bottom:solid 1px {vb:stylevar light_border.borderColor};
height:25px;
}

.usmlsa_multitext {
border-bottom:solid 1px {vb:stylevar light_border.borderColor};
height:50px;
}

.usmlsa_block .blockbody {
border-left:{vb:stylevar tabslight_border};
border-right:{vb:stylevar tabslight_border};
border-bottom:{vb:stylevar tabslight_border};
}

.usmlsa_shadow {
-moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
}

Still a lot of work to be done :)

HMBeaty

03-16-2011, 10:56 PM

Ok, any reason why this no longer works in custom templates?
<div class="smallfont">
Did that change to something different?

--------------- Added 1300320096 at 1300320096 ---------------

Hmm....nevermind....apparently this has to be added to the css as well even for new pages....
.smallfont {
font-size: {vb:stylevar small_fontSize};
}

Boofo

03-16-2011, 11:22 PM

I'd be interested in it after you get it all tweaked and done. ;)