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
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
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"> </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
Zuletzt bearbeitet: