mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 00:04 Benutzername: Passwort: Auto-Login

Thema: div-Tags anstatt Frames... aber wie? *snief* vom 16.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> div-Tags anstatt Frames... aber wie? *snief*
Seite: 1, 2  Weiter
Autor Nachricht
Partychopper
Threadersteller

Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht: Männlich
Verfasst Di 16.10.2007 22:54
Titel

div-Tags anstatt Frames... aber wie? *snief*

Antworten mit Zitat Zum Seitenanfang

Wie wohl unschwer schon an dem Titel meines Threads zu erkennen ist bin ich im Nonprint-Bereich noch blutiger Anfänger.
Ich möchte mir eine Website erstellen, die 800px Breit und horizontal zentriert ist.
Die Navi steht oben quer mit width:800px und height:75px. Darunter (bündig mit der Navi) steht auf der linken Seite eine Spalte mit 135px Breite und 360px Höhe.
Rechts neben dieser Spalte ergibt sich eine weitere Spalte für den Inhalt mit 665px Breite (800px-135px).

Soweit, so gut...
Nach meinen ersten Posts hier im Forum wurde mir dringend von Frames und reinem Tabellenaufbau abgeraten und empfohlen, dies in CSS zu realisieren.
Naja und jetzt sitz ich da und komm nich mehr weiter * Keine Ahnung... * (siehe unten).

Kann mir da mal jemand weiterhelfen? Das wär echt dufte *zwinker*
Hier mal das Puzzle... * Ich geb auf... *

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#navi {
width:800px;
height:75px;
margin-top:50px;
text-align:center;
border-bottom:1px solid black;
}

#kontextnavi {
float:left;
width:135px;
height:360px;
}

#inhalt {
width:665px;
height:360px;
margin-top:125px;
}

.table {
width:800px;
height:75px;
text-align:center;
}

body {
   background-image: url(../Bilder/hg.gif);
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('../Buttons/angebot_over.gif','../Buttons/ueberuns_over.gif','../Buttons/kontakt_over.gif','../Buttons/impressum_over.gif')">

<table>
<tr>
    <td style="width:20%;"></td>
    <td>
    <div id="navi">
  <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2"><img src="../Buttons/logo.gif" alt="Logo" width="152" height="75" /></td>
    <td height="47" colspan="5" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
  <tr>
    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('angebot','','../Buttons/angebot_over.gif',1)"><img src="../Buttons/angebot_out.gif" name="angebot" width="105" height="28" border="0" id="angebot" /></a></td>
    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ueberuns','','../Buttons/ueberuns_over.gif',1)"><img src="../Buttons/ueberuns_out.gif" name="ueberuns" width="112" height="28" border="0" id="ueberuns" /></a></td>
    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kontakt','','../Buttons/kontakt_over.gif',1)"><img src="../Buttons/kontakt_out.gif" name="kontakt" width="105" height="28" border="0" id="kontakt" /></a></td>
    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impressum','','../Buttons/impressum_over.gif',1)"><img src="../Buttons/impressum_out.gif" name="impressum" width="129" height="28" border="0" id="impressum" /></a></td>
    <td width="197" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>

</div>
</td>
    <td style="width:20%;"></td>
</tr>
<tr>
<td style="width:20%;"></td>
<td>
<div id="kontextnavi">
<table class="table" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#33CCFF">
<tr>
<td> bla bla bla </td>
</tr>
</table>
</div>
</td>
<td>
<div id="inhalt">
<table class="table" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF0066">
<tr>
<td> bla bla bla </td>
</tr>
</table>
</div>
</td>
<td style="width:20%;"></td>
</tr>
</table>

</body>
</html>


Zuletzt bearbeitet von Partychopper am Di 16.10.2007 23:34, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: Männlich
Verfasst Mi 17.10.2007 06:41
Titel

Antworten mit Zitat Zum Seitenanfang

Vergiss erst mal die Tabelle und stell die divs nicht IN eine Tabelle.

Musterlayouts wie deines gibt es zb. direkt bei css4you.de.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Ulmo

Dabei seit: 29.03.2007
Ort: Nürnberg
Alter: -
Geschlecht: Männlich
Verfasst Mi 17.10.2007 16:43
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<body>
<div id="navi">
</div>
<div id="navi-kontext">
</div>
<div id="inhalt">
</div>
</body>


Das reicht um deinen Code zu ersetzen *zwinker* Positionierung und Aussehen und wirklich fast alles stellst du dann via CSS und die entsprechenden Klassen ein..

Sehr interessant für Einsteiger: http://de.selfhtml.org/css/layouts/index.htm
  View user's profile Private Nachricht senden
escaPe

Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht: Männlich
Verfasst Mi 17.10.2007 16:56
Titel

Antworten mit Zitat Zum Seitenanfang

setz deine einzelnen divs in einen "main" div...
anstatt in eine tabelle

#container {
width:800px;
height:435px;
margin-left:auto;
margin-right:auto;
padding:0px;
}

margin left und right lässt dein main div in der mitte schweben *zwinker*


<div id="container">
<div id="navi">
</div>
<div id="kontextnavi">
</div>
<div id="inhalt">
</div>
</div>


Zuletzt bearbeitet von escaPe am Mi 17.10.2007 16:59, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Partychopper
Threadersteller

Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht: Männlich
Verfasst Do 18.10.2007 09:12
Titel

Antworten mit Zitat Zum Seitenanfang

Ich danke euch schonmal für die Vorschläge!
Ich werde also meinen Aufbau nochmal von Grund auf anders gestalten mit Div-Containern, wie ihr es empfehlt...
Dazu muss ich erst nochmal schauen, dass ich das hinbekomme, dass sich die Kontextnavi und der Inhalt schön nebeneinander "umfloaten" und dabei schön zentriert unter der Navi stehen.

Ich sehe ihr ratet mir alle dringend davon ab, Tabellen in einem <div> zu verwenden.
Wenn ich aber in der Navi oben zwei Zeilen, 6 Spalten benötige, wobei ich auch mehrere Zellen miteinander verbinden möchte, gibt es da überhaupt ne Alternative zur Tabelle? (Ich vermute mal die gibt es natürlich...) Sollte ich dann jede Tabellenzelle durch einen <div> ersetzen? Oder ist eine Tabelle da nicht wesentlich einfacher umzusetzen? Und wäre es eine solch unsaubere Lösung, dass ich davon dringend absehen sollte, oder ist das eher eine Geschmacksfrage oder eine Philosophiefrage? *zwinker*

Ich befürchte ich entfache hier etwas, was im Forum schon oft dikutiert wurde. In diesem Falle würde ich mich aber freuen, wenn ihr auf die speziellen Fragen Bezug nehmen könntet... Lächel


Zuletzt bearbeitet von Partychopper am Do 18.10.2007 09:15, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
escaPe

Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht: Männlich
Verfasst Do 18.10.2007 09:31
Titel

Antworten mit Zitat Zum Seitenanfang

es ist ok wenn du eine tabelle in ein div packst aber nicht andersherum *zwinker*

dabei immer beachten das die tabelle nicht größer ist als der container selbst.
ansonsten immer schön:
overflow: hidden;

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#navi {
width:800px;
height:75px;
margin-top:50px;
text-align:center;
background-color:#888888;
border-bottom:1px solid black;
}

#kontextnavi {
float:left;
width:135px;
height:360px;
background-color:#444444;
}

#inhalt {
width:665px;
height:360px;
background-color:#666666;
float:left;
}

#container {
width:800px;
height:500px;
margin-left:auto;
margin-right:auto;
}

</style>

</head>
<body>

<div id="container">
    <div id="navi">
    </div>
    <div id="kontextnavi">
    </div>
    <div id="inhalt">
    </div>
</div>

</body>
</html>


hier nochmal die Version wie sie 100% läuft


Zuletzt bearbeitet von escaPe am Do 18.10.2007 09:39, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Partychopper
Threadersteller

Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht: Männlich
Verfasst Do 18.10.2007 12:58
Titel

Antworten mit Zitat Zum Seitenanfang

@ escaPe: Danke dir! Das werd ich heute Abend direkt mal ausprobieren... *Thumbs up!*
Wenn´s nicht klappt, lass ich von mir hören Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Partychopper
Threadersteller

Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht: Männlich
Verfasst Do 18.10.2007 20:26
Titel

Antworten mit Zitat Zum Seitenanfang

Yaaaaaay! Es hat gefunzt! * huduwudu! *
Ein wahnsinnig einfacher Aufbau und dennoch so wie es sein soll...
langsam fang ich an CSS zu mögen *Thumbs up!*

Die Sache ist jetzt nur die, dass ich das ganz gerne auch lückenlos verstehen würde.
Daher stellen sich mir folgende Fragen:

    1. Sobald ich den Div´s nicht noch die Eigenschaft float zuweise, was sie gleichzeitig auch in ein Blockelement umwandelt, so lange wird
    jedes Div lückenlos in eine neue Zeile geschrieben? Wenn ja, wieso habe ich dann bei diesem Beispiel zwischen den Boxes weiße Lücken?
    Stellt der mir nen Standard-margin ein, so lange ich diesen nicht definiere?

    Code:

    #blau {
    width:500px;
    height:200px;
    text-align:center;
    background-color:#0000FF;
    }

    #rot {
    width:150px;
    height:200px;
    text-align:center;
    background-color:#FF0000;
    }
    </style>

    </head>

    <body>
    <div id="rot">
       <h1> die rote Box </h1>
    </div>
    <div id="blau">
       <h1> die blaue Box </h1>
    </div>

    </body>
    </html>


    2. In dem Beispiel das "escaPe" mir gegeben hat, müsste da die Inhaltsbox korrekterweise eigentlich nicht float:right haben?
    Aber dadurch, dass diese von dem übergeordneten Div-Container in Ihrer Position beschränkt wird ist es in diesem Falle egal,
    hauptsache es ist ein float-Wert definiert, das den Inhalt in ein Blockelement wandelt und somit nicht in die nächste Zeile umbricht?


Zuletzt bearbeitet von Partychopper am Do 18.10.2007 20:30, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [Frames] Linkfarben ändern in zwei Frames gleichzeitig
frames in frames scrollen
Div Tags Nachteile
Meta Tags
PHP Tags ersetzen
TH Tags in Dreamweaver MX
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.