 CSS Newbie |
  |
| Derrick Pullen |
 Jan 16 2007, 10:53 AM
Post
#1
|
|
Newbie  Group: Members Posts: 16 Joined: 9-January 07 Member No.: 1,509  |
Hey everybody, I really enjoy this site and all the help that is available here!!! I am new to CSS and have made only a basic page. I hate tables, but for our page that I am setting up for the radio station that I work for that seems like the best thing for it. I know there is a way to make a CSS for this. You will see how much trouble i'm having with this page and tables when you take a look here:
http://www.sikestonfirstmedia.org/testpage.htm When I add the menu items on the left, and try to edit text in the middle, all heck breaks loose. Thanks for the help and input! |
  |
 
|
| Darin McGrew |
Jan 16 2007, 11:45 AM
Post
#2
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
In what way is "all heck" breaking loose?
|
|
|
|
| Derrick Pullen |
Jan 16 2007, 11:53 AM
Post
#3
|
|
Newbie Group: Members Posts: 16 Joined: 9-January 07 Member No.: 1,509 |
On the menu to the left, anytime I type anything of length in the middle section (the white section) the table on the left expands as well. leaving the spaces like the one between "wake up with whoopi" and "magic music". Is that possible to fix?
|
|
|
|
| Darin McGrew |
Jan 16 2007, 12:15 PM
Post
#4
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Turn on the borders to your layout table and you'll see what's going on.
You need to simplify your layout table. For example, put your entire left-side menu in a single TD, rather than putting each entry in its own row in the master grid. |
|
|
|
| Derrick Pullen |
Jan 16 2007, 12:25 PM
Post
#5
|
|
Newbie Group: Members Posts: 16 Joined: 9-January 07 Member No.: 1,509 |
I turned the borders on, take a look if you don't mind.
Here is the html from the page, it looks like it reads across, where would i need to edit to make all of the options under one <td>? I entered several times on the white part and it keeps breaking the table up. <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">wake up with whoopi</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="476" height="57" bgcolor="#FFFFFF" colspan="4" rowspan="3" style="border-style: solid; border-width: 2" bordercolor="#666666"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#6A6B7D"> <p align="center"> <script src="http://netwx.accuweather.com/netweatherV2.asp?zipcode=63801&lang=eng&size=5&theme=1&metric=0"></script><br /></td> <p align="center"> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">magic music</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C" align="center" valign="top"> <p align="center"> <img border="0" src="http://www.sikestonfirstmedia.org/magic/navbottom.gif" width="125" height="6"></td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D" align="center" valign="top"> <p align="left"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">meet the magic staff</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C" align="center" valign="top"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">photo gallery</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C"> </td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C" align="right" valign="top"> <img border="0" src="http://www.sikestonfirstmedia.org/magic/tab-underboxes.gif" width="159" height="16"></td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">concerts</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C" align="left" valign="bottom"> <img border="0" src="http://www.sikestonfirstmedia.org/magic/tab-underboxesTOP.gif" width="159" height="16"></td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">events</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="476" height="57" bgcolor="#FFFFFF" colspan="4" rowspan="3" style="border-style: solid; border-width: 2" bordercolor="#666666"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">weather</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">community</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">wedding planner</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C"> </td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C" align="right" valign="top"> <img border="0" src="http://www.sikestonfirstmedia.org/magic/tab-underboxes.gif" width="159" height="16"></td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">animal house</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C"> </td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">advertise</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C"> </td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">careers</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C"> </td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">contact us</font></td> <td width="7" height="19" bgcolor="#7F8A9C"> </td> <td width="156" height="19" bgcolor="#7F8A9C"> </td> <td width="82" height="19" bgcolor="#7F8A9C"> </td> <td width="53" height="19" bgcolor="#7F8A9C"> </td> <td width="185" height="19" bgcolor="#7F8A9C"> </td> <td width="8" height="19" bgcolor="#7F8A9C"> </td> <td width="125" height="19" bgcolor="#7F8A9C"> </td> <td width="6" height="19" bgcolor="#7F8A9C"> </td> </tr> <tr> <td width="6" height="19" bgcolor="#7F8A9C"> </td> <td width="124" height="19" bgcolor="#6A6B7D"> <font face="Tahoma" style="font-size: 9pt" color="#FFFFFF">home</font></td> |
|
|
|
| Darin McGrew |
Jan 16 2007, 04:00 PM
Post
#6
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
For starters, you could replace the whole mess with a much simpler table, something like:
CODE <table><tr> <td><!-- "on the air" and everything below it --></td> <td><!-- the main content boxes --></td> <td><!-- "weather" and everything below it --></td> </tr></table> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 06:26 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC