Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Layout: Von Tabelle zu DIV-Container

Antwort erstellen

Layout: Von Tabelle zu DIV-Container

Beitragvon Cappaja » 24.05.2006, 16:45

hallo!

ich habe versucht mein layout aus tabellen in CSS umzuschreiben, sprich in div-container zu stecken, jedoch offenbaren sich einige probleme in der browserkompatibilität und der ausrichtung. das hauptproblem besteht darin das ich ein fenster zentriert habe wo ich unter dem logo den bereich in 2 spalten teile. jedoch verschiebt es mir die spalten jeweils ganz nach links und ganz nach rechts!
ich habe ettliche foren durchstöbert und nichts spezielles gefunden... überall geht man bei der teilung in 2 spalten (also 2 div-container nebeneinander) davon aus das es über die gesamte browserbreite geht. ich jedoch will alles in einem zentrierten fenster zusammenhalten, sodass es wie in meinem tabellenbeispiel ausschaut.

ich hoffe jemand kann mir bei dem echt schwerwiegendem problem weiterhelfen, damit es so wie in diesem "table-format" ausschaut. wie gesagt das problem liegt nur bei der teilung der beiden div-container die nebeneinander angeordnet un zentriert sein sollen!

<table border="1" width="700" height="525" align="center">
<tr>
<th width="700" height="130" colspan="2">logo</th>
</tr>
<tr>
<td width="700" height="20" colspan="2">menue</td>
</tr>
<tr>
<td width="500" height="315">content</td>
<td width="200" height="315">picture</td>
</tr>
<tr>
<td width="700" height="60" colspan="2">advertising</td>
</tr>
</table>

mein völlig verschobener CSS-code kann ich auch noch dazu liefern:

#divglobal {
text-align: center;
}

#divid1 {
text-align: left;
margin: 0 auto;
width: 700;
height: 150;
border-style: solid;
border-width: 1px;
}

#divid2 {
margin: 0 auto;
text-align: left;
float: left;
width: 500;
height: 375;
border-style: dashed;
border-width: 1px;
}

#divid3 {
margin: 0 auto;
text-align: left;
float: right;
width: 200;
height: 375;
border-style: dashed;
border-width: 1px;
}

und der dazugehörige html-code:

<div id="divglobal">
<div id="divid1">container 1</div>
<div id="divid2">container 2</div>
<div id="divid3">container 3</div>
</div>


mfg Cappaja
Cappaja
neu hier
 
Beiträge: 4
Registriert: 24.05.2006, 16:26
Nach oben

Beitragvon skittles » 24.05.2006, 17:49

Spiel dich doch mal
damit

Ist lustig und man lernt ein wenig damit umzugehen!

oder probiers mal damit
Code: Alles auswählen
#divid3 {
margin: 0 auto;
text-align: left;
float: left;
clear: right;
width: 200;
height: 375;
border-style: dashed;
border-width: 1px;
}


Aber spiel dich mal mit dem layout creator
damit kann man dein Layout in 3 minuten nachbauen!
skittles
ist häufig da
 
Beiträge: 176
Registriert: 27.03.2006, 13:49
Wohnort: Wien
Nach oben

Beitragvon Laus » 24.05.2006, 18:30

Hallo Cappaja
Habe deinen Code mal etwas verändert
Code: Alles auswählen
<!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 content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
  <title></title>
  <style type="text/css">
<!--
*{margin:0; Padding:0;}
#divglobal {
text-align: center;
margin: 0 auto;
width: 700px;
}
#divid1 {
text-align: left;
width: 700px;
height: 150px;
border-style: solid;
border-width: 1px;
}
#divid2 {
text-align: left;
float: left;
width: 500px;
height: 375px;
border-style: dashed;
border-width: 1px;
}
#divid3 {
text-align: left;
float: right;
width: 195px;
height: 375px;
border-style: dashed;
border-width: 1px;
}
#divid4 {
clear:both;
text-align: left;
width: 700px;
height: 50px;
border-style: solid;
border-width: 1px;
}
-->
  </style>
</head>
<body>
<div id="divglobal">
<div id="divid1">container 1</div>
<div id="divid2">container 2</div>
<div id="divid3">container 3</div>
<div id="divid4">container 4</div>
</div>
<br />
</body>
</html>

damit hast du das Aussehen wie bei den Tabellen.
Die Navigation kannst du dann am besten über eine Liste die du entsprechend formatierst einfügen.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon Cappaja » 24.05.2006, 19:01

skittles hat geschrieben:Spiel dich doch mal
damit

Ist lustig und man lernt ein wenig damit umzugehen!

Aber spiel dich mal mit dem layout creator
damit kann man dein Layout in 3 minuten nachbauen!


danke für den link! habs eben mal ausprobiert aber selbst da springen mir die spalten untereinander...
aber der link war schonmal sehr hilfreich ;)
Cappaja
neu hier
 
Beiträge: 4
Registriert: 24.05.2006, 16:26
Nach oben

Beitragvon Cappaja » 24.05.2006, 19:08

Laus hat geschrieben:Hallo Cappaja
Habe deinen Code mal etwas verändert

damit hast du das Aussehen wie bei den Tabellen.
Die Navigation kannst du dann am besten über eine Liste die du entsprechend formatierst einfügen.

Gruß Xaver


hey xaver!
danke für den überarbeiteten code! der knackpunkt war die sache mit dem clear:both; befehl! damit kam ich der sache schon näher jedoch hatte ich nach wie vor die verschiebung der spalten untereinander statt nebeneinander (nur bei mozilla) es lag jetzt allerdings an der dicke des rahmens!

jetzt hab ich nur noch das problem das der schlecht umgängliche internet explorer mir das layout wieder nach links oben an den ursrung schiebt.
dieses * {margin:0; padding:0;} ist doch ein universalattribut, ich glaube dadurch wird es im IE nicht zentriert angezeigt oder täusche ich mich da?

aber soweit schonmal vielen dank, das ganze schaut schon wesentlich besser aus!!!

Code: Alles auswählen
* {
   margin: 0;
   padding: 0;
}

body, html {
   background: #001122;
   color: #000;
   font: 400 11px/14px verdana, arial, helvetica, sans-serif;
   scrollbar-face-color: #001122;
   scrollbar-track-color: #001122;
   scrollbar-arrow-color: #667788;
   scrollbar-base-color: #000000;
   scrollbar-shadow-color : #667788;
   scrollbar-3dlight-color: #000000;
   scrollbar-darkshadow-color: #000000;
   scrollbar-highlight-color: #000000;
   color: #FFF;
}

#divglobal {
   text-align: center;
   margin: 0 auto;
   width: 700px;
}

#divid1 {
   text-align: left;
   width: 700px;
   height: 150px;
}

#divid2 {
   margin: 0 auto;
   text-align: left;
   float: left;
   width: 500;
   height: 315;   
}

#divid3 {
   margin: 0 auto;
   text-align: left;
   float: right;
   width: 200;
   height: 315;   
}

#divid4 {
   clear: both;
   text-align: left;
   width: 700px;
   height: 60px;
   border-style: solid;
   border-width: 1px;
}
Cappaja
neu hier
 
Beiträge: 4
Registriert: 24.05.2006, 16:26
Nach oben

Beitragvon Laus » 24.05.2006, 20:42

Welchen Doctype benutzt du?
Bei Korrektem Doctype wird die Seite auch im IE zentriert.
Nur ohne DT oder wenn vor der DT Angabe noch etwas steht dann schaltet der IE in den Quirks Modus und stellt die Seite nicht mehr korrekt dar.

Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon Cappaja » 30.08.2006, 17:01

ich benutze gar keinen doctype doch selbst wenn ich diesen benutze:

Code: Alles auswählen
!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"


bleibt mein layout im internet explorer 6 links ausgerichtet statt zentriert.
hab nun echt alles versucht und bekomms dennoch nicht hin :(
Cappaja
neu hier
 
Beiträge: 4
Registriert: 24.05.2006, 16:26
Nach oben

Beitragvon Laus » 30.08.2006, 17:40

Wenn du einen Docktype der den IE in den Full Standart Modus schaltet verwendest, dann wird alles korrekt angezeigt. Wenn du HTML4.1 verwenden willst dann nimm diesen
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Falls es damit wieder nicht klappen sollte dann poste doch mal deinen vollständigen Code.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Layout: Von Tabelle zu DIV-Container"

Zurück zu: Fragen zur Homepage

Wer ist online?

Mitglieder in diesem Forum: Google [Bot] und 1 Gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de