| Autor |
Nachricht |
Vivid
Threadersteller
Dabei seit: 19.07.2006
Ort: Frankfurt am Main
Alter: 39
Geschlecht: 
|
Verfasst Mi 19.07.2006 09:39
Titel Überlappung bei DIVs |
  |
|
Nachdem ich nun schon wie blöd gegoogelt habe, melde ich mich mal auf diesem Wege!
Es geht darum dass ich ein Design gemacht, welches nicht so ganz funktioniert. Ich habe dabei alles auf DIVs umgestellt. Hierbei ist zu erwähnen, dass ich ein großes DIV habe und darin auf der linken Seite wiederum ein DIV für die Navigation ist und auf der rechten Seite ein DIV für die Inhalte. Wenn die Navigation nun zu lang wird, überlappt sie unten.
Ich möchte jedoch, dass das äußerste DIV immer an die Größe des größeren DIVs angepasst wird. Und das funktioniert im Moment einfach noch nicht so, wie ich es gerne möchte. Es scheint so, als wäre das Navigations-DIV auf einer anderen Ebene.
Hat jemand einen Rat für mich?
So ist der Aufbau grob...
| Code: | <div>
<div>
Navigation
</div>
<div>
Main-Inhalte
</div>
<div> |
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 19.07.2006 09:42
Titel
|
|
|
| Code: | <div>
<div>
Navigation
</div>
<div>
Main-Inhalte
</div>
<br style="clear:both;" />
<div> |
Allerdings ist dass jetzt nur geraten. Es wäre schon sinnvoll wenn du auch dein CSS zeigst.
Zuletzt bearbeitet von m am Mi 19.07.2006 09:44, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
Vivid
Threadersteller
Dabei seit: 19.07.2006
Ort: Frankfurt am Main
Alter: 39
Geschlecht:
|
Verfasst Mi 19.07.2006 09:48
Titel
|
|
|
Danke für die schnelle Antwort, aber das hat leider nichts gebracht!
Soll ich mal den Code posten?
| Code: | <HTML>
<HEAD>
<TITLE>Baseballclub Friedberg Braves 1987 e.V.</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(base.css);
-->
</style>
<!-- ImageReady Preload Script (head-bg13.psd) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Button_12_over = newImage("img/Button-12_over.gif");
Button_13_over = newImage("img/Button-13_over.gif");
Button_14_over = newImage("img/Button-14_over.gif");
Button_15_over = newImage("img/Button-15_over.gif");
Button_16_over = newImage("img/Button-16_over.gif");
Button_17_over = newImage("img/Button-17_over.gif");
Button_18_over = newImage("img/Button-18_over.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();" ONLOAD="document.getElementByID('rosterdetails').style.visibility='hidden';">
<!-- Slices -->
<center>
<TABLE id="Header" CELLSPACING="0" CELLPADDING="0" style="border-left: 1px solid #000000;border-right: 1px solid #000000;">
<TR>
<TD COLSPAN=9>
<IMG SRC="img/Button-01.gif" WIDTH=745 HEIGHT=210 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="img/Button-02.gif" WIDTH=41 HEIGHT=65 ALT=""></TD>
<TD ROWSPAN=2>
<A HREF="?div=home&subnavi=home"
ONMOUSEOVER="changeImages('Button_03', 'img/Button-12_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_03', 'img/Button-03.gif'); return true;">
<IMG NAME="Button_03" SRC="img/Button-03.gif" WIDTH=52 HEIGHT=65 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<A HREF="?subnavi=teams"
ONMOUSEOVER="changeImages('Button_04', 'img/Button-13_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_04', 'img/Button-04.gif'); return true;">
<IMG NAME="Button_04" SRC="img/Button-04.gif" WIDTH=63 HEIGHT=65 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<A HREF="?subnavi=gameday"
ONMOUSEOVER="changeImages('Button_05', 'img/Button-14_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_05', 'img/Button-05.gif'); return true;">
<IMG NAME="Button_05" SRC="img/Button-05.gif" WIDTH=78 HEIGHT=65 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<A HREF="?subnavi=media"
ONMOUSEOVER="changeImages('Button_06', 'img/Button-15_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_06', 'img/Button-06.gif'); return true;">
<IMG NAME="Button_06" SRC="img/Button-06.gif" WIDTH=64 HEIGHT=65 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<A HREF="?subnavi=forum"
ONMOUSEOVER="changeImages('Button_07', 'img/Button-16_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_07', 'img/Button-07.gif'); return true;">
<IMG NAME="Button_07" SRC="img/Button-07.gif" WIDTH=67 HEIGHT=65 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<A HREF="?subnavi=info"
ONMOUSEOVER="changeImages('Button_08', 'img/Button-17_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_08', 'img/Button-08.gif'); return true;">
<IMG NAME="Button_08" SRC="img/Button-08.gif" WIDTH=55 HEIGHT=65 BORDER=0 ALT=""></A></TD>
<TD>
<A HREF="?div=impressum&subnavi=impressum"
ONMOUSEOVER="changeImages('Button_09', 'img/Button-18_over.gif'); return true;"
ONMOUSEOUT="changeImages('Button_09', 'img/Button-09.gif'); return true;">
<IMG NAME="Button_09" SRC="img/Button-09.gif" WIDTH=103 HEIGHT=64 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG SRC="img/Button-10.gif" WIDTH=222 HEIGHT=65 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="img/Button-11.gif" WIDTH=103 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE></center>
<!-- Ende der Slices -->
<div id="PageWrapper">
<div id="MainFrame">
<div class="SubNavi">
<?php
switch ($_GET['subnavi'])
{
case "teams": ?>
<table id='NaviTable' width='140' cellpadding='0' cellspacing='0'>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=herren&subnavi=teams'>Herren</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=jugend&subnavi=teams'>Jugend</a><font> ::</font></td>
</tr>
</table><?php
break;
case "media": ?>
<table id='NaviTable' width='140' cellpadding='0' cellspacing='0'>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=galerie&subnavi=media'>Galerie</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=downloads&subnavi=media'>Downloads</a><font> ::</font></td>
</tr>
</table><?php
break;
case "info": ?>
<table id='NaviTable' width='140' cellpadding='0' cellspacing='0'>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=anfahrt&subnavi=info'>Anfahrt</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=vorstand&subnavi=info'>Vorstand</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=sponsoring&subnavi=info'>Sponsoring</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=history&subnavi=info'>History</a><font> ::</font></td>
</tr>
</table><?php
break;
case "gameday": ?>
<table id='NaviTable' width='140' cellpadding='0' cellspacing='0'>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=spielplan&subnavi=gameday'>Spielplan</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=boxscore&subnavi=gameday'>Boxscore</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=tabelle&subnavi=gameday'>Tabelle</a><font> ::</font></td>
</tr>
</table><?php
break;
default:
?><table id='NaviTable' width='140' cellpadding='0' cellspacing='0'>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=teams&subnavi=home'>Home</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=teams&subnavi=teams'>Teams</a><font><font> ::</font></font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=gameday&subnavi=gameday'>Gameday</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=junioren&subnavi=media'>Media</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=junioren&subnavi=home'>Forum</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=junioren&subnavi=info'>Info</a><font> ::</font></td>
</tr>
<tr>
<td onmouseover="this.style.background = '#A4AAB3'" onmouseout="this.style.background = '#79828E'"><a href='?div=impressum&subnavi=home'>Impressum</a><font> ::</font></td>
</tr>
</table><?php
}
?><br>
<table id="werbung">
<tr>
<td> Hallo
</td>
</tr>
</table>
<br>
<table id="tabelle" cellpadding="0" cellspacing="0" >
<tr id="fett">
<td width="50%" style="text-align: left;"> Teams
</td>
<td width="10%" style="text-align: center;"> W
</td>
<td width="10%" style="text-align: center;"> L
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Da. Whippets
</td>
<td width="10%" style="text-align: center;"> 14
</td>
<td width="10%" style="text-align: center;"> 3
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Fulda
</td>
<td width="10%" style="text-align: center;"> 14
</td>
<td width="10%" style="text-align: center;"> 6
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Frankfurt
</td>
<td width="10%" style="text-align: center;"> 12
</td>
<td width="10%" style="text-align: center;"> 10
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Giessen
</td>
<td width="10%" style="text-align: center;"> 10
</td>
<td width="10%" style="text-align: center;"> 10
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Friedberg
</td>
<td width="10%" style="text-align: center;"> 9
</td>
<td width="10%" style="text-align: center;"> 9
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Dreiech
</td>
<td width="10%" style="text-align: center;"> 8
</td>
<td width="10%" style="text-align: center;"> 12
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Neu Anspach
</td>
<td width="10%" style="text-align: center;"> 7
</td>
<td width="10%" style="text-align: center;"> 11
</td>
</tr>
<tr>
<td width="50%" style="text-align: left;"> Da. Rockets
</td>
<td width="10%" style="text-align: center;"> 1
</td>
<td width="10%" style="text-align: center;"> 14
</td>
</tr>
</table>
</div>
<div id="MainPage">
<div id="ContentFrame">
<a name="Content" id="Content"></a>
<?php
switch ($_GET['div'])
{
case "Bericht":
$bid = $_GET['id'];
include ("bericht.php");
break;
case "herren":
$ID=1;
include("roster.php");
break;
case "jugend":
$ID=2;
include("roster.php");
break;
case "impressum":
include("impressum.php");
break;
case "spielplan":
include("spielplan.php");
break;
default:
include("berichte.php");
break;
}
?>
</div> <br style="clear:both;" />
</div>
</div>
<div id="Footer">
<p> Baseballclub Friedberg Braves 1987 e.V.
</p>
</div>
</div>
</div>
</BODY>
</HTML>
|
| Code: | body {
margin: 0;
padding: 0;
font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
background: url(img/bg.gif);
height: 100%;
}
.clear {
clear: both;
}
#PageWrapper {
text-align: center;
}
#MainFrame {
width: 745px;
margin: 0 auto;
background-color: #c6c6c6;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-top: 0px;
}
.Berichte td {
font-family: verdana;
font-size: 8pt;
color: #000;
}
#Werbung {
position: relative;
width: 140px;
margin: 0px 59px 0 0px;
background: #79828E;
color: #fff;
min-height: 90px;
border-bottom: 0px;
}
#Werbung td {
border-bottom: 0px;
height: 90px;
}
#tabelle{
width: 140px;
background: #79828E;
color: #fff;
border: 0px;
}
#fett {
font-weight: bold;
color: #000;
}
#tabelle td {
border-bottom: 0px;
height: 20px;
padding-left: 2px;
}
#spielplan{
width: 500px;
border: 1px solid #000000;
}
#spielplan td{
font: verdana;
font-size: 8pt;
height: 20px;
}
#ueberschrift1 {
font-weight: bold;
font-size: 11pt;
color: #660000;
}
#ueberschrift2 {
font-weight: bold;
font-size: 10pt;
color: #990000;
}
#MainPage {
text-align: left;
top: 275px;
width: 745px;
min-height: 350px;
}
.SubNavi li {
display: inline;
padding: 0 10px 0 0;
}
.SubNavi a {
text-decoration: none;
}
.SubNavi a, .SubNavi a:link, .SubNavi a:visited {
color: #fff;
}
.SubNavi #active {
color: #000;
}
.SubNavi {
position: absolute;
top: 300px;
width: 140px;
margin: 0 59px 0 0px;
color: #fff;
min-height: 20px;
}
/* #SubNavi td:hover{
background: #AEC4D9;
color: #000;
} */
.SubNavi td {
border-bottom: 1px solid #ccc;
text-align: right;
padding-right: 2px;
font: Verdana;
font-size: 8pt;
background: #79828E;
}
#Header table{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#roster{
width: 500px;
border: 1px solid #000000;
}
#roster a {
color: #660000;
text-decoration: none;
}
#roster td a:hover{
text-decoration: none;
color: #000;
}
#roster td{
font: verdana;
font-size: 8pt;
height: 20px;
}
#kopfzeile {
color: #fff;
}
#rosterdetails td{
font: verdana;
font-size: 9pt
}
#NaviTable font {
color: #fff;
font-size: 12px;
font-weight: bold;
}
#NaviTable td {
height: 25px;
}
#ContentFrame {
.clear: both;
position: relative;
margin: 0 10px 0 160px;
padding: 25px 25px 15px 0px;
}
#ContentFrame h2 {
margin: 0 0 0 0px;
height: 19px;
}
#ContentFrame h2 span {
margin: 0 0 0 0px;
display: none;
}
#ContentFrame strong {
color: #23678b;
}
#ContentFrame p {
margin: 10px 0;
line-height: 1.5em;
}
#ContentFrame a:hover, #Footer a:hover {
color: #23678b;
text-decoration: underline;
}
#ContentFrame ul {
list-style: square;
padding-left: 15px;
}
#ContentFrame li {
line-height: 1.2em;
margin: 2px 0;
}
#ContentFrame dd {
margin: 0 5px 15px 0;
}
#Footer {
text-align: center;
font-size: 10px;
color: #fff;
}
#Footer p {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
fieldset legend {
display: none;
}
.req {
color: red;
font-weight: bold;
}
fieldset .right {
float: right;
width: 45%;
margin-right: 2px;
}
fieldset .left {
float: left;
width: 45%;
}
select, textarea, input {
font-size: 11px;
background: #e1e1e1;
border-top: 1px solid #23678b;
border-right: 1px solid #23678b;
border-bottom: 1px solid #23678b;
border-left: 1px solid #23678b;
}
input[type="text"]:focus, textarea:focus {
background: #ffffff;
border-top: 1px solid #23678b;
border-right: 1px solid #23678b;
border-bottom: 1px solid #23678b;
border-left: 1px solid #23678b;
}
input#bsubmit {
background-color: #cbd6bc !important;
border-top: 1px solid #6e757f;
border-right: 1px solid #6e757f;
border-bottom: 1px solid #6e757f;
border-left: 1px solid #6e757f;
}
.ProcMessage span {
color: red;
font-weight: bold;
}
.alpha-shadow {
clear: both;
float: left;
background: transparent url(../img/shadow.gif) no-repeat bottom right;
margin: 14px 0 0;
}
.alpha-shadow div {
background: transparent url(../img/shadow2.png) no-repeat left top !important;
background: transparent url(../img/shadow2.gif) no-repeat left top;
padding: 0 7px 7px 0;
}
.alpha-shadow img {
background-color: #fff;
border: 1px solid #23678b;
padding: 4px;
margin: 0;
}
|
Zuletzt bearbeitet von Vivid am Mi 19.07.2006 09:52, insgesamt 1-mal bearbeitet
|
|
| |
|
|
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht:
|
|
| |
|
|
Vivid
Threadersteller
Dabei seit: 19.07.2006
Ort: Frankfurt am Main
Alter: 39
Geschlecht:
|
Verfasst Do 20.07.2006 00:53
Titel
|
|
|
Sorry... aber wenn im Forum PHP zu Programmierung gezählt wird, dann poste ich das da auch rein! Oder wofür soll sonst der <?php ?> stehen?? Soll ich jetzt noch ausrechnen, zu wieviel Prozent es HTML und zu wieviel es PHP ist?
Naja... lieber verschieben, anstatt Lösungsvorschläge..  Ist auch ok! Hauptsache irgendwas geschieht! 
Hat sonst niemand einen Lösungsvorschlag für mein Problemchen??
|
|
| |
|
|
ZeroFlash
Dabei seit: 11.02.2005
Ort: -
Alter: 41
Geschlecht:
|
Verfasst Do 20.07.2006 08:29
Titel
|
|
|
ohje es geht doch um dein problem und dabei handelt es sich um die gestaltung. wie du sagtest, hasst du dein design auf divs umgestellt, ergo interessiert nur dein css und das html. mal nebenbei erwähnt ist das alles sehr unübersichtlicht. kannst deinen js ja auslagern etc. und die tabellen stell ich mir grad die frage, ob die sein müssen, bläht den code immer so sinnlos auf und macht alles so unübersichtlich.
nur mal so am rande
|
|
| |
|
|
Vivid
Threadersteller
Dabei seit: 19.07.2006
Ort: Frankfurt am Main
Alter: 39
Geschlecht:
|
Verfasst Do 20.07.2006 09:54
Titel
|
|
|
Also...
bisher sieht die Page so aus:
http://www.web17.kunden.air-webhosting.de/V3.2
wenn du mir eine möglichkeit nennst, wie ich es genauso (oder besser) aussehen lasse, ohne Tabellen, dann bin ich sofort dabei!
DIVs sind eh schöner! 
|
|
| |
|
|
ZeroFlash
Dabei seit: 11.02.2005
Ort: -
Alter: 41
Geschlecht:
|
Verfasst Do 20.07.2006 11:56
Titel
|
|
|
|
sollte alles nicht das problem sein. selbst deine hover buttons kannst du mit css machen. brauchst so auf den ersten blick beurteilt keine tabellen
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
DIV Überlappung mit Transparentem Bild.
InDesign: Kontur von der Überlappung des Buchstaben entfernen
[Illustrator] - Überlappung verschiedener Pfade anpassen
Website mit divs und css
Seitenaufbau mit CSS und DIVs?
höhenangaben von divs
|
|
Willkommen auf dem Portal für Mediengestalter
