CSS Menü nicht Bündig mit dem Banner

BigO · 25. April 2011

Hallo zusammen,
habe ein kleines Problem.
Bin gerade dabei eine Website zu überarbeiten.
Daher wollte ich ein 2tes Menü auf der rechten Seite einbauen.
Hier die aktuelle Seite

Das Problem ist, dass ich den ###Inhalt### nicht verkleinern kann.
Hier mal der CSS - Code

Code:

body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin-top:0%; margin-right:0%; margin-bottom:0%; margin-left:0%; padding-top:0%; padding-right:0%; padding-bottom:0%; padding-left:0%;  line-height: 100%;  background-color: transparent; background-position: top left; background-repeat: repeat; display: block;}
img {  border:0;}
table.layout { width:100%; }
table.layout td.randlinks { width:12px; height:20px; }
table.layout td.navspalte {
	background-color: #001689;
	width: 198px;
	height: 20px;
	color: #CECECE;
}
table.layout td.navspalterecht {
	background-color: #001689;
	width: 198px;
	height: 20px;
	color: #000;
}


table.layout td.navvor { background-color:#001689; border-bottom:solid 1px #001272; height:20px;
	right: 1px;
}
table.identitaet { width:100%; }
table.identitaet td.thema { border-bottom:solid 1px #6288BE; width:360px; height:78px; }
table.identitaet td.logo {	background-color:#003399; border-bottom:solid 1px #6288BE; width:100%; height:78px; text-align:right; padding-right: 5px; }
.breadcrumb { font-size:10px; color:#FFFFFF; background-color:#003399; padding-top:3px; padding-bottom:2px; padding-left:20px; }
.breadcrumb a { text-decoration:none; color:#FFFFFF; }
.breadcrumb a:hover { text-decoration:underline; }
.service { font-size:10px; color:#000000; padding-right:12px; width:100%; height:20px; text-align:right;  line-height: 100%;}
.service a { text-decoration:none; color:#000000; }
.service a:hover { text-decoration:underline; color:#000000; }
.content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding-top:20px; padding-right:12px; padding-left:20px; width:100%;       }
.contentspalte { font-size:12px; padding-right:20px; padding-bottom:20px; width:150px;  margin-left: 15px;  margin-top: 15px;  padding-left: 15px;  padding-top: 15px;     }
.contentspalte h1 { font-style:normal; font-size:14px; color:#000000; margin-top:0px; margin-bottom:13px; }
.contentrechts { padding-right:20px; padding-bottom:20px; width:100%;  margin-left: 15px;  margin-top: 15px;  padding-left: 15px;  padding-top: 15px;     }
.contentrechts h1 { font-style:normal; font-size:14px; color:#000000; margin-top:0px; margin-bottom:13px; }
table.contentarea { font-size:12px; width:100%; }
table.contentarea td.rechts { width:170px; }
table p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}

table {
	/* [disabled]font-family:Verdana, Arial, Helvetica, sans-serif; */
	font-size:12px;
}

.tx-guestbook-list-header { background-color: #003399; color: #FFFFFF; font-weight:bold; font-size:12;width:400}
.tx-guestbook-form-inputfield-med { border-style: solid; border-width: 1pt; border-color:#003399; font-size:14px; color:#333333; width:100px; }

.tx-guestbook-form-inputfield-big { border-style: solid; border-width: 1pt; border-color:#003399; font-size:14px; color:#333333; width:150px; }

.tx-guestbook-form-textarea { border-style: solid; border-width: 1pt; border-color:#003399; font-size:14px; color:#333333; width:250px; }

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>THW Bornheim</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="oos_style.css" />
</head>

<body>

<!-- ###DOKUMENT### begin -->

<table width="100%"  border="0" cellspacing="0" cellpadding="0" class="layout">
  <tr>
    <td width="196">&nbsp;</td>
    <!-- SERVICE-LINKS START -->
    <td class="service">###MENU_OBEN###</td>
    <!-- SERVICE-LINKS ENDE --> 
  </tr>
  <tr>
    <td class="navspalte">###OV_LOGO###</td>
    <td class="logo"><!-- IDENTITAETSBEREICH START -->
      
      <table cellspacing="0" cellpadding="0" border="0" class="identitaet">
        <tr> 
          <!-- <td class="thema"><img src="fileadmin/images/blau.jpg" width="360" height="78" alt="Helfer im Einsatz" /></td>-->
          <td class="thema">###THW_TRAILER###</td>
          <td class="logo">###THW_LOGO###</td>
        </tr>
      </table>
      
      <!-- IDENTITAETSBEREICH ENDE -->
  </tr>
  <tr>
    <td class="navvor"><img src="fileadmin/images/blackblue.gif" alt="" width="1" height="20" /></td>
    <!-- BREADCRUMB-NAVIGATION START -->
    <td class="breadcrumb">###KLICKPFAD### </td>
    <!-- BREADCRUMB-NAVIGATION ENDE --> 
  </tr>
  <tr>
    <td valign="top" class="navspalte">###MENU_LINKS###<br>
      <br>
      <br>
      ###COUNTER###<br>
      <br>
      ###LETZTEAENDERUNG###<br>
      <br></td>
    <td class="contentspalte" width="50">###INHALT###</td>
    <td valign="top" class="navspalte">###MENU_RECHTSS###<br></td>
  </tr>
</table>

<!-- ###DOKUMENT### end -->

</body>
</html>

Hab schon einiges ausprobiert jedoch es nie geschafft das Logo weiter zu verschieben oder aber den Inhalt kleiner zumachen, sodass es wieder auf einer Ebene ist.
Ziel ist den Bereich des Logos mit dem Menü bündig zu bekommen wie es auch links im Menü ist.

Gruß
BigO

EDIT:
Habe auch versucht den Bereich des Menüs, den Inhalt und das rechte Menü mit CSS und ohne Tabellen darzustellen, ging jedoch leider nicht.
Wenn jemand eine Idee zur Umsetzung durch div und css hätte wäre ich dafür auch offen. Im Vordergrund steht jedoch erstmal die Umsetzung durch Tabellen

Engelsen · 25. April 2011

Ich schau mal.

Dauert aber nen kurzen Moment

Mugen · 25. April 2011

Zuersteinmal wechselst du mittendrin von 2 Spalten auf 3.
Die einfachste Lösung wäre also bei den ersten Reihen der jeweils 2ten Spalte ein colspan="2" zu geben.

Mr. Snoot · 25. April 2011

Meinst du so?

Dann braucht's ein colspan="2".

nbzklr · 25. April 2011

Hey!
Dein Problem ist, dass du die ganze Zeit nur 2 Spalten benutzt und jetzt eine 3 hinten dran gesetzt hast. Ist ja klar, dass diese dann absteht.
Die Lösung hast du eigentlich schon, mach es wie in der 2. Spalte und füge eine weitere Tabelle ein. Dort bekommt dann eine Spalte den Inhalt und die andere das Menü.
So wie hier die Vorlage:

Code:

  <tr>
    <td class="navspalte"></td>
    <td class="logo"><!-- hier die 2. tabelle -->
      
      <table cellspacing="0" cellpadding="0" border="0" class="">
        <tr> 
          <td class="thema">Inhalt</td>
          <td class="logo">menü</td>
        </tr>
      </table> 
    </td>
     
      <!-- 2. tabelle ende-->
  </tr>

Edit: oder mit colspan...

BigO · 25. April 2011

Ein Traum

Danke schon mal ja genau so war es gemeint.

Hab da noch eine Frage.
Wie kann man eine Art Slideshow erstellen?
Sprich ich klicke auf ein Bild Bsp in einer Galerie.
Dann wird das Bild groß bzw größer und der hintergrund verdunkelt sich ein wenig.
Hat jemand eine Idee?

Mr. Snoot · 25. April 2011

Google mal nach javascript lightbox: http://www.huddletogether.com/projects/lightbox2/

Mugen · 25. April 2011

JQuery Lightbox ist hier das Stichwort.

Guck z.B. mal hier: http://www.grafiker.de/kreativ-news/06102010/die-15-besten-jquery-lightbox-skripte

BigO · 25. April 2011

Coole Sache vielen Dank an alle Helfer
Wünsche euch noch einen schönen rest Ostermontag

Suche

CSS Menü nicht Bündig mit dem Banner

BigO

Lt. Junior Grade

Engelsen

Commander

Mugen

Cadet 4th Year

Mr. Snoot

Gast

nbzklr

Ensign

BigO

Lt. Junior Grade

Mr. Snoot

Gast

Mugen

Cadet 4th Year

BigO

Lt. Junior Grade

Ähnliche Themen