|
|||
Kein Tabellen-Missbrauch sondern CSS
Ich will jetzt nicht mehr Tabellen-Missbrauch betreiben, sondern CSS für das Layout benutzen. Nur meine Frage: Ich habe z.B. links den Hauptbereich mit dem Inhalt der Seite, rechts eine Sidebar und über diesen beiden Dingen eine Tabelle mit Banner und Navigationsmenü:
---------------------------------------------------------- Navigation + Banner --------------------------------------------------------- Hauptbereich | Sidebar | | | Das sind mehrere verschachtelte Tabellen ineinander und ich sehe schon gar nicht mehr durch. Nur wenn ich jetzt für jede td ein div benutze habe ich doch im Grunde dasselbe. Hunderte divs. Oder wie muss man das mit den divs anstellen? Ich kann mir das Konzept mit CSS nicht vorstellen. |
Sponsored Links |
|
|||
So sieht meine Seite bis jetzt aus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Runge-Gymnasium Wolgast</title> <link rel='stylesheet' type='text/css' href='style.css'> <script language="JavaScript1.2" src="navibar.js"></script> <script>itemOnColor = "#ADC8F3"; itemOffColor = "whitesmoke"; fontOnColor = "black"; fontOffColor = "black"; itemHeight = 20; imageSpace = 12; nextMenuX = 24; nextMenuY = 0; key = new Image(); key.src="images/kie.gif"; exit = new Image(); exit.src="images/exit1.gif"; next = new Image(); next.src="images/next.gif"; song = new Image(); song.src="images/song.gif"; function loaded(){ ready = 0;kapitel1= addSubMenu("","","","","1");kapitel11 = kapitel1.addSubMenu("Home","window.location.href ='/?mode=home';","",137); kapitel12 = kapitel1.addSubMenu("News","window.location.href ='/?mode=news';","",137); kapitel13 = kapitel1.addSubMenu("Termine","window.location.href ='/?mode=meetings';","",137); kapitel14 = kapitel1.addSubMenu("Vertretungsplan","window.location.href ='/?mode=agency_flat';","",137); kapitel2= addSubMenu("","","","","8");kapitel21 = kapitel2.addSubMenu("Website","window.location.href ='/?mode=website';","",137); kapitel211 = kapitel21.addSubMenu("Entwickerblog","window.location.href ='/?mode=blog';","",137); kapitel212 = kapitel21.addSubMenu("Bug-Reports","window.location.href ='/?mode=bugs';","",137); kapitel213 = kapitel21.addSubMenu("FAQ","window.location.href ='/?mode=faq';","",137); kapitel22 = kapitel2.addSubMenu("Schulgeschichte","window.location.href ='/?mode=history';","",137); kapitel23 = kapitel2.addSubMenu("Über Runge","window.location.href ='/?mode=runge';","",137); kapitel24 = kapitel2.addSubMenu("Schulgebäude","window.location.href ='/?mode=buildings';","",137); kapitel25 = kapitel2.addSubMenu("Förderverein","window.location.href ='/?mode=funding';","",137); kapitel26 = kapitel2.addSubMenu("Traditionen","window.location.href ='/?mode=traditions';","",137); kapitel27 = kapitel2.addSubMenu("Comenius","window.location.href ='/?mode=comenius';","",137); kapitel3= addSubMenu("","","","","19");kapitel31 = kapitel3.addSubMenu("Schulverwaltung","window.location.href ='/?mode=management';","",137); kapitel32 = kapitel3.addSubMenu("Klassenleiter","window.location.href ='/?mode=leaders';","",137); kapitel33 = kapitel3.addSubMenu("Kollegium","window.location.href ='/?mode=staff';","",137); kapitel4= addSubMenu("","","","","23");kapitel41 = kapitel4.addSubMenu("Projekte","window.location.href ='/?mode=projects';","",137); kapitel42 = kapitel4.addSubMenu("Praktika","window.location.href ='/?mode=internships';","",137); kapitel43 = kapitel4.addSubMenu("Klassen","window.location.href ='/?mode=forms';","",137); kapitel44 = kapitel4.addSubMenu("Schülervertretungen","window.location.href ='/?mode=agency';","",137); kapitel5= addSubMenu("","","","","28");kapitel6= addSubMenu("","","","","29");ready = 1; } </script> </head> <body onload="loaded()" style=''> <script language='Javascript'> function ToggleBigTD(topic) { //wenn geschlossen if (document.getElementById(topic).style.display=='none') { document.getElementById(topic).style.display=''; document.getElementById(topic+'_arrow').src='images/homepage/arrow_down.jpg'; document.getElementById(topic+'_arrow').alt='Zuklappen'; } //wenn offen else { document.getElementById(topic).style.display='none'; document.getElementById(topic+'_arrow').src='images/homepage/arrow_right.jpg'; document.getElementById(topic+'_arrow').alt='Aufklappen'; } } function ToggleSmallTD(topic,id) { //wenn geschlossen if (document.getElementById(topic+id).style.display=='none') { document.getElementById(topic+id).style.display=''; document.getElementById(topic+id+'_img').src='images/minus.gif'; document.getElementById(topic+id+'_img').alt='Zuklappen'; //wenn offen } else { document.getElementById(topic+id).style.display='none'; document.getElementById(topic+id+'_img').src='images/plus.gif'; document.getElementById(topic+id+'_img').alt='Aufklappen'; } } </script> <!-- Hier beginnt die Tabelle, die die Ordnung hält--> <table align='center' height='100%' border='0' cellpadding='0' cellspacing='0' style="table-layout: fixed"> <tr> <td style="background:url('images/banner_oben.jpg')" width='732px' height='143px'> </td> </tr> <tr> <td style="background:url('images/banner_unten.jpg')" width='732px' height='26px'> <table border='0' style='border-collapse: collapse' cellpadding='0' cellspacing='0'> <tr> <td align="left" width="15px"></td> <td width="100" height="17" id="1" class="Menu"> <a class="Menu" style="cursor: pointer"><strong>Aktuelles</strong></a></td><td width="100" height="17" id="8" class="Menu"> <a class="Menu" style="cursor: pointer"><strong>Schule</strong></a></td><td width="100" height="17" id="19" class="Menu"> <a class="Menu" style="cursor: pointer"><strong>Lehrer</strong></a></td><td width="100" height="17" id="23" class="Menu"> <a class="Menu" style="cursor: pointer"><strong>Schüler</strong></a></td><td width="100" height="17" id="28" class="Menu"> <a class="Menu" style="cursor: pointer"><strong>Forum</strong></a></td><td width="100" height="17" id="29" class="Menu"> <a class="Menu" style="cursor: pointer"><strong>Impressum</strong></a></td> </tr> </table> </td> </tr> <tr> <!-- Hier beginnt der Seiteninhalt--> <td valign='top'> <!-- Eine neue Tabelle, um den Seiteninhalt besser anordnen zu können--> <table height='100%' style='background-color: white' cellspacing='0' cellpadding='0'> <tr> <!-- die linke Seite der Startseite mit dem Inhalt--> <td align='center' valign='top' width='500px'> <!-- innerhalb der linken Seite der MainPage--> <table width='490px'> <!-- die erste Überschrift--> <!-- innerhalb der linken Seite der MainPage--> <table width='490px'> <!-- die erste Überschrift--> <tr> <!-- Zeile frei, da sonst direkt unter Menüleiste--> <br /> <!-- die obere Leiste mit Pfeil und Titel--> <td height='20px' style='background:url("images/homepage/headline_background_open.jpg");'> <img style='cursor: pointer' src='images/homepage/arrow_down.jpg' id='news_arrow' alt='Zuklappen' onclick='ToggleBigTD("news")' /> <span style='color:#0088E4; font-weight:bold'>News</span> </td> </tr> <tr> <!-- der Inhalt--> <td id='news' valign='top' style='background:url("images/homepage/content_background.jpg");' cellpadding='4'> <!-- zur besseren Ausrichtung des Inhalts gibts hier noch ne Tabelle--> <table width='100%'> <tr> <!-- hier der News-Titel; beim Klick öffnet sich der Inhalt per JS--> <td> <a href='javascript: ToggleSmallTD("news","1")'><img id='news1_img' src='images/plus.gif' alt='Aufklappen' /> <span class='blue'>Klasse 10/2 feiert Abschlussparty</span></a> </td> </tr> <tr> <!-- die td für den Inhalt der News--> <td id='news1' style='display: none'> <!-- zur besseren Ausrichtung des News-Inhaltes gibts nochmal eine Tabelle--> <table> <tr> <td> <span class='blue'>Am 25.04.2008 feiert 10/2 Abschlussparty, da Martin Müller erst dann seine Prüfung geschafft haben wird.</span> </td> </tr> </table> </td> </tr> <tr> <!-- hier der News-Titel; beim Klick öffnet sich der Inhalt per JS--> <td> <a href='javascript: ToggleSmallTD("news","2")'><img id='news2_img' src='images/plus.gif' alt='Aufklappen' /> <span class='blue'>Der Nikolaus kommt</span></a> </td> </tr> <tr> <!-- die td für den Inhalt der News--> <td id='news2' style='display: none'> <!-- zur besseren Ausrichtung des News-Inhaltes gibts nochmal eine Tabelle--> <table> <tr> <td> <span class='blue'>Der Nikolaus kommt bald. Putzt alle fleissig eure Schuhe xD</span> </td> </tr> </table> </td> </tr> <tr> <td> <br /> <a href='/?mode=news&lang=de'><span class='blue'>Alle News anzeigen</span></a> </td> </tr> </table> </td> </tr> <tr> <!--die untere Begrenzung mit einer grauen Linie--> <td height='1px' style='background:url("images/homepage/content_background_bottom.jpg")'></td> </table> </td> </tr> <!-- die erste Überschrift--> <tr> <!-- Zeile frei, da sonst direkt unter Menüleiste--> <br /> <!-- die obere Leiste mit Pfeil und Titel--> <td height='20px' style='background:url("images/homepage/headline_background_open.jpg");'> <img style='cursor: pointer' src='images/homepage/arrow_down.jpg' id='news_arrow' alt='Zuklappen' onclick='ToggleBigTD("news")' /> <span style='color:#0088E4; font-weight:bold'>Projekte</span> </td> </tr> <tr> <!-- der Inhalt--> <td id='news' valign='top' style='background:url("images/homepage/content_background.jpg");' cellpadding='4'> <!-- zur besseren Ausrichtung des Inhalts gibts hier noch ne Tabelle--> |
Sponsored Links |
|
|||
Das ist eine ziemlich allgemeine Frage. Du solltest Deine Inhalte erstmal komplett ohne CSS, also in reinem HTML semantisch sinnvoll aufschreiben. Dann erst fängst Du mit CSS an.
Du musst Dich vor allem von dem Tabellendenken befreien. Da musste alle in eine Tabellenzelle, aber nicht alles muss in eine div. Les' Dich erstmal richtig in CSS ein. Wie gesagt, erst den Inhalt in semantisches und valides HTML und erst dann Gedanken um das Design machen. |
|
|||
Du schreibst Überschriften in <h1>, <h2> usw., Absätze in <p>, Listen in <ul> usw., benutzt also HTML-Elemente genau dafür, wofür sie vorgesehen sind. Wie diese dargestellt werden ist erstmal egal, darum kümmest Du Dich erst hinterher per Stylesheet.
Bei CSS gibt es dann mehr als nur div. Du kannst Überschriften auch direkt Eigenschaften zuweisen usw. |
|
|||
Der Banner ist eine Grafik, warum h1 dafür?
@Siegfried: Sieht einfach aus, aber: Auf der Hauptseite ('main') sollen verschiedene 'Kästen' erscheinen. Es waren ursprünglich mal td's. Was soll ich denn dafür nehmen, außer divs? |
|
||||
Zitat:
Zitat:
|
|
|||
Habe mir ein weißes A4-Blatt genommen und den groben Aufbau skizziert:
Banner -> h1 (ist eigentlich eine Grafik) darunter Navi-Menü --> ul darunter nebeneinander, wobei der Hauptbereich breiter ist als die Sidebar: Hauptbereich --> div rechts daneben: Sidebar --> div Im Hauptbereich mehrere Listen untereinander (News etc.) --> ul Wie soll ich nun weiter verfahren? |
Sponsored Links |
|
|||
das erstellst Du in einem validen HTML-Dokument. Pack besipieltext mit rein, damit kein Element leer ist. Wenn das alles da ist und der Validator nicht meckert, kommt das CSS. Für Nebeneienander stehende Container brauchst Du float. Siehe FAQ oder www.css4you.de unter "Wie fange ich an".
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Clearfix / CSS Reset / CSS Hacks 2016 | Elma | CSS | 7 | 14.08.2016 03:12 |
Problem mit CSS ohne Tabellen | omega2k | CSS | 20 | 19.01.2010 13:11 |
CSS Tabellen und Barrierefrei | |SONY| | CSS | 16 | 01.05.2007 17:43 |
CSS in verschachtelten Tabellen! | Fichte | CSS | 1 | 20.10.2006 16:57 |
CSS Tabellen | Tobbe | CSS | 8 | 04.09.2006 17:54 |