zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kein Tabellen-Missbrauch sondern CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2006, 15:03
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 140
Marco D. befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2006, 15:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 140
Marco D. befindet sich auf einem aufstrebenden Ast
Standard

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' />&nbsp;<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' />&nbsp;<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&amp;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-->
Ja ich weiß, es ist grausam. Und wie soll man das jetzt mit den divs anstellen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2006, 15:49
o_anonym
Gast
 
Beiträge: n/a
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2006, 15:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 140
Marco D. befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Ole Staack
in reinem HTML semantisch sinnvoll aufschreiben.
Was meinst du damit?
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2006, 15:54
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard divs

Hi,
stimmt, Divitis ist so würg wie Tabellitis. Aber es geht auch viel einfacher. Für Dich wäre so in Etwa folgender Aufbau richtig (nur body aufgeführt):
Code:
<body>
    <div class="header">
        ....
    </div>

    <div class="main">
        ...
    </div>

    <div class="sidebar">
        ....
    </div>
</body>
In den header div kommen dann navigation und Banner. Die Navigation sollte in eine Liste, das Banner wahrscheinlich in einen h1. Positioniert werden die dann per css.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.08.2006, 15:56
o_anonym
Gast
 
Beiträge: n/a
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 16.08.2006, 15:59
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 140
Marco D. befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 16.08.2006, 16:05
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Marco D.
Der Banner ist eine Grafik, warum h1 dafür?
Nun, darauf hat eigentlich Ole Staak perfekt geantwortet. Ich gehe davon aus, daß dieses Banner die Überschrift der Seite ist.
Zitat:
Zitat von Marco D.
@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?
Kommt drauf an, was Du da hast. Hör einfach auf, in Kästen zu denken, und verwende das Markup so, wie es gedacht ist. Also verwende Überschriften (h1 bis h6), Paragraphen, Listen, blockquote, und was Du sonst noch brauchst. Mach Dir erstmal überhaupt keinen Kopp drum, wie das nachher aussehen soll, sondern mach Dir anfangs ausschließlich Gedanken darüber, was die Bedeutung der einzelnen Bestandteile ist.
Mit Zitat antworten
  #9 (permalink)  
Alt 16.08.2006, 16:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 140
Marco D. befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.08.2006, 16:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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".
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:13 Uhr.