css web of confusion 1

[csssuperman]

hi

just need t know how to do some basic settings which dont come out to be that basic for a simple scheduler table

lets say i have a dynamic table in asp.net made at run time

it is a 10 * 10 setup lets further say

i am targeting for cosmetic / heading purposes to have row 0
and row 1 with no bottom vs. top borders but left and right borders only for cells 1 thru 10. These cells represent day of week and day name for one row (ex cells 1 & 2, etc) and then the next row displays am pm (for cells 1 & 2, etc) and all I want is borders on the side and boy is it hard.

http://www.codedinamerica.com/WebVB2/WebForm1.aspx

See if you can take a look

Thanks!! css follows

'CREATE BLANK BORDERS every 2 columns
For cc = 1 To 14 Step 1
For rc = 1 To 25
t(0).Rows(rc).Cells(cc).CssClass = "DT2"
Next
Next

For cc = 2 To 14 Step 2
For rc = 0 To 25 '(ADD column lines every 2 columns)
t(0).Rows(rc).Cells(cc).CssClass = "DT1"
Next
Next

For cc = 2 To 14 Step 2
'(ADD HEADER LINES every 2 column)
t(0).Rows(1).Cells(cc).CssClass = "DT1"
Next

'COLUMN 1 LABELS
For rc = 0 To 25
t(0).Rows(rc).Cells(0).CssClass = "BWS"
Next

----------------------------------------------------------
TABLE {
BORDER:SOLID 1PX red
}
TD { border: 0px SOLID RED; padding: .5em; border-collapse :COLLAPSE; width:25; border-bottom-width :1PX;}

TD.DT1 {width:3PX; padding-RIGHT: 1px;padding-LEFT: 1px;
border-RIGHT: 1px solid ; border-right-color : LIGHTBROWN ;
}
TD.DT2 {width:3PX; padding-RIGHT: 1px;padding-LEFT: 1px;
border-RIGHT: 0px solid ; border-right-color : RED ;
border-left: 0px solid ; border-left-color : RED ;
}
TD.BWS
{width:7em; padding-RIGHT: 20px;padding-LEFT: 0px;
border-RIGHT: 1px solid ; border-right-color : BROWN ;
border-left: 1px solid ; border-left-color : BROWN;
border-bottom-width :1px;
}
TD.TW {width:1em;}

Thanks so much!!!!!

 

[BillyRayPreachersSon]

have row 0
and row 1 with no bottom vs. top borders but left and right borders only for cells 1 thru 10.

Can I just confirm that this means: You want cells 1-10 in rows 0 and 1 with left and right borders only, but all other cells / rows with no border?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[csssuperman]

Thanks for the response Dan

I have touched it up please check the site again

http://www.codedinamerica.com/WebVB2/WebForm1.aspx

Just want all border logic like it is now except do you see a little gab in the borders around cells 1 thru 10 appx

I made the border px 2 x that of normal + included then background color (white) to cause like a merger effect, but now you still see a bit of an ugly gab

thanks for any assitance!!

here is new/improved css below...

TABLE {
BORDER:SOLID 2PX red; border-top: 25px solid red ; height :auto;border-bottom:0px solid red ;}

TD { border: 0px SOLID RED; padding: .5em; border-collapse :COLLAPSE; width:25; border-bottom-width :1PX;}

TD.DT1 {width:3PX; padding-RIGHT: 1px;padding-LEFT: 1px;
border-RIGHT: 1px solid ; border-right-color : LIGHTBROWN ;
}
TD.DT2 {width:3PX; padding-RIGHT: 1px;padding-LEFT: 1px;
border-RIGHT: 0px solid ; border-right-color : RED ;
border-left: 0px solid ; border-left-color : RED ;
}
TD.BWS
{width:8em; padding-RIGHT: 20px;padding-LEFT: 0px;
border-RIGHT: 1px solid ; border-right-color : BROWN ;
border-left: 1px solid ; border-left-color : BROWN;
border-bottom-width :1px;
}
TD.la { TEXT-ALIGN:CENTER; PADDING-LEFT:35; width:5PX; border-collapse :collapse ;
}
TD.bt { TEXT-ALIGN:left; border-top:2px solid white; border-collapse :collapse;
}
TD.rb { TEXT-ALIGN:left; border-right:1px solid red;border-top:2px solid white; border-collapse :collapse;
}

-----------------------------------------------------------code for calling order

For cc = 1 To 14 Step 1
For rc = 1 To 25
t(0).Rows(rc).Cells(cc).CssClass = "DT2"
Next
Next

For cc = 2 To 14 Step 2
For rc = 0 To 25 '(ADD column lines every 2 columns)
t(0).Rows(rc).Cells(cc).CssClass = "DT1"
Next
Next

For cc = 2 To 14 Step 2
'(ADD HEADER LINES every 2 column)
t(0).Rows(1).Cells(cc).CssClass = "DT1"
Next

'COLUMN 1 LABELS
For rc = 0 To 25
t(0).Rows(rc).Cells(0).CssClass = "BWS"
Next

For cc = 11 To 14 Step 2
For rc = 1 To 25 '(ADD column lines every 2 columns)
t(0).Rows(rc).Cells(cc).CssClass = "la"
Next
Next

For cc = 0 To 14 Step 1
For rc = 1 To 1 '(kill top borders)
t(0).Rows(rc).Cells(cc).CssClass = "bt"
Next
Next

For cc = 0 To 12 Step 2
For rc = 1 To 1 '(ADD right borders)
t(0).Rows(rc).Cells(cc).CssClass = "rb"
Next
Next

 

[csssuperman]

btw Dan

Like your web site!!

You know any good sites asp.net with vb.net coding that will guve like opensource for creating a forum (like for posting threads, sorta like a discussion room)

Thx again

csssuperman

 

[johnwm]

Have a look at the site in Firefox or Mozilla if there is any chance that your users will view it that way. You may need a re-think on the whole border issue

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[ChrisHunt]

OK. Take a deep breath. And start again from the beginning...

Start by getting the table structure right. Using the colspan and rowspan attributes you can get the table laid out how you want it (temporarily set border="1" on the table to see the borders):

  <table class="calendar" cellspacing="0">
    <thead>
      <tr>
        <th class="topleft" rowspan="2" scope="col">Week of 8/1/2005</td>
        <th colspan="2" scope="col">Monday 8/1</th>
        <th colspan="2" scope="col">Tuesday 8/2</th>
        <th colspan="2" scope="col">Wednesday 8/3</th>
        <th colspan="2" scope="col">Thursday 8/4</th>
        <th colspan="2" scope="col">Friday 8/5</th>
        <th rowspan="2" scope="col">Saturday 8/1</th>
        <th rowspan="2" scope="col">Sunday 8/1</th>
      </tr>
      <tr>
        <th class="am" scope="col">AM</th>
        <th class="pm" scope="col">PM</th>
        <th class="am" scope="col">AM</th>
        <th class="pm" scope="col">PM</th>
        <th class="am" scope="col">AM</th>
        <th class="pm" scope="col">PM</th>
        <th class="am" scope="col">AM</th>
        <th class="pm" scope="col">PM</th>
        <th class="am" scope="col">AM</th>
        <th class="pm" scope="col">PM</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">7am Ed/Noon</th>
        <td class="am">HM</td>
        <td class="pm">HM</td>
        <td class="am"></td>
        <td class="pm"></td>
        <td class="am">CB</td>
        <td class="pm">CB</td>
        <td class="am"></td>
        <td class="pm">RP</td>
        <td class="am">BOW CW</td>
        <td class="pm">BOW CW</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">Gen GI/GU</th>
        <td class="am">HP JD</td>
        <td class="pm"></td>
        <td class="am">RP</td>
        <td class="pm"></td>
        <td class="am"></td>
        <td class="pm">RP</td>
        <td class="am"></td>
        <td class="pm">SS</td>
        <td class="am"></td>
        <td class="pm"></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

I've removed all the font tags, inline styles and other clutter - if you're a css superman you should be doing it right. Hint: <font> tags are CSS Kryptonite. Using <thead>, <tbody> and <th> where appropriate makes the table more accessible, and gives us hooks to hang styles on without having to add reams of classes.

Now we can add some CSS to get it looking right:

table.calendar {
   border: solid red;
   border-width: 25px 2px;
   border-collapse: collapse;
   color: black;
   font-size:11px;
   font-family:arial;
   font-weight:bold;
   margin: 0 auto;
}

table.calendar thead th {
   width: 8em;
   vertical-align: top;
   border-left: 1px solid red;
   border-right: 1px solid red;
}

table.calendar thead {
   border-bottom: 1px solid red;
}

table.calendar tbody th,
table.calendar tbody td {
   border: 1px solid red;
   text-align: center;
}

table.calendar .am {
   border-right: 0;
   width: 4em;
}

table.calendar .pm {
   border-left: 0;
   width: 4em;
}

table.calendar tbody th,
table.calendar .topleft {
   border-right: 1px solid brown;
}

I think that's how you want it - you may want to tinker with the text alignment and some of the colouring.

How you get all that into ASP is your business...


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisHunt]

PS. I think this is an improvement:

table.calendar .pm {
   border-left: 0;
   width: 4em;
   [b]background: #fee;[/b]
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[csssuperman]

Thanks Chris

Looks like Pheeennnnnnnomenal help.

Whew. Alot to work on always somethin to learn...huh? ANyway will try things out .. that th and scope tag stuff looks pretty cool...learned somethin new definitely

Well we'll give it a shot and I'll incorporate all your ideas into asp..np

I will post back any issues or email youy (if that's okay) on any major/minor issus (hehehe0

Hey thansk again sooo much & God bless!!)

Csssuperman..now to fly to his next mission...

Take care.

 

[csssuperman]

Chris

btw..Tried your code in notepad stright up/ it was beautiful..very eloquent!! yet so simple..well probably to you..at least with the coding..will recreate according to your specs

Thanks again soo much example you gave me rocked!!!

You rock and are an awesome coder

Take care and keep up the great work..really appreciate all the help!!

csssuperman

 

[Foamcow]

You rock and are an awesome coder

There's Chris' new sig, right there

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[ChrisHunt]

No worries - it's a tip: when you've got some complex CSS styling to do, always start with a flat file in notepad (or similar) before you start coding it up in asp etc. It makes it easier to see the wood from the trees.

If you do have any further queries/issues, best to deal with them here instead of by email, so that others can benefit from the answers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd