zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wirklich CSS oder doch lieber eine Tabelle?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.02.2007, 08:13
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Frage Wirklich CSS oder doch lieber eine Tabelle?

Hallo und guten Morgen zusammen!

Folgendes Menü möchte ich gerne, im oberen Bereich einer Seite, abbilden:



Wobei die Bild-Felder natürlich mit unterschiedlichen Bildern und die Text-Felder mit Menüpunkten gefüllt werden sollen.
Da der Entwurf ja aussieht, wie eine Tabelle, würde es naheliegen, hierfür auch eine Tabelle zu verwenden, oder?

Wenn ich das ganze nun in CSS gestalte, muss ich dann für jedes Bild-Feld und für jedes Text-Feld ein DIV anlegen und jedes DIV absolut positionieren?

Hat vielleicht jemand schon etwas ähnliches gesehen oder gemacht und kann mir auf die Sprünge helfen?

Allerbesten Dank und viele Grüsse, Mark
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.02.2007, 08:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von quarki69 Beitrag anzeigen
Da der Entwurf ja aussieht, wie eine Tabelle, würde es naheliegen, hierfür auch eine Tabelle zu verwenden, oder?
Nein!
Die Wahl eines HTML-Elements hat *nichts* mit dem Aussehen zu tun.
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

Zitat:
Wenn ich das ganze nun in CSS gestalte, muss ich dann für jedes Bild-Feld und für jedes Text-Feld ein DIV anlegen und jedes DIV absolut positionieren?
Nein.
Eine Navigation gehört in eine Liste.
Nebeneinander setzen mit float.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.02.2007, 08:34
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von quarki69 Beitrag anzeigen
Hallo und guten Morgen zusammen!

Da der Entwurf ja aussieht, wie eine Tabelle, würde es naheliegen, hierfür auch eine Tabelle zu verwenden, oder?

Warum sieht das wie eine Tabelle aus? Tabellen haben viele viele Zeilen auf denen Sportwettenergebnisse stehen oder Bilanzdaten. Sehe ich bei Dir nicht.


Wenn ich das ganze nun in CSS gestalte, muss ich dann für jedes Bild-Feld und für jedes Text-Feld ein DIV anlegen und jedes DIV absolut positionieren?

Nein.

Hat vielleicht jemand schon etwas ähnliches gesehen oder gemacht und kann mir auf die Sprünge helfen?

Ja und nein und ja.

Allerbesten Dank und viele Grüsse, Mark
Beschreib doch mal die weiteren Anforderungen die das Menü erfüllen soll.
Fix oder skalierbar, Transparenzen, klappt was aus und und...

Solange denke mal über eine ungeordnete Liste nach, die gefloatete li's mit fixer höhe und Breite hat, darin liegend a's mit einem halbtransparenten gif oder png als Hintergrundbild.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #4 (permalink)  
Alt 16.02.2007, 08:50
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Cool

Guten Morgen fricca und andir!

Wow! Vielen dank für die prompte Resonanz! macht mir Hoffnung, dass ich heute noch richtig was schaffen könnte!

Die "Texte", also Menüpunkte sollen anklickbar sein, ebenso die Bilder. Natürlich sollen die Texte nicht im Bild stehen, also Text und Bild werden getrennt; ich werde die Menüpunkte also als Liste abbilden und die Bilder auch?

Achso, sehe gerade, die Bilder kommen auch in die LIs

Aber kann ich denn den Listenpunkten feste Grössen geben? Mit Block, oder wie? Ja, ich glaube, das habe ich schonmal gesehen.
Werd's gleich mal ausprobieren...

Effekte oder Aufklappkrams wird es keinen geben, bis auf vielleicht einen hover, so dass sich der Text der Menüpunkte verändert...

(Aaaarghl, auf meinem IBM-Notebook sind garkeine spitzen Klammern, was ist denn das??? Egal, gehört hier nicht hin...)

Naja, und das Menü soll Fix sein, wie der Rest der Seite auch...

Allerbesten Dank und viele Grüsse, Mark
Mit Zitat antworten
  #5 (permalink)  
Alt 16.02.2007, 08:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von quarki69 Beitrag anzeigen
ich werde die Menüpunkte also als Liste abbilden und die Bilder auch?
Wenn die Bilder keine inhaltliche Relevanz haben, dann sind das Hintergrundbilder.
Mit Zitat antworten
  #6 (permalink)  
Alt 16.02.2007, 09:04
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Wenn Du die li's floatest, bekommen Sie automatisch die Formatierung display:block und du kannst sie größenmäßig stylen. Wenn auch die Bilder "anklickbar" sein sollen, style die a's innerhalb der li's mit width und height 100%, vorher natürlich display:block.
Die Bilder können als Hintergrund trotzdem im li verbleiben, a wird mit tranparentem Background drübergelegt und es sieht so aus, also ob...

Für den Text wird innerhalb des a's ein span angelegt, der entsprechend formatiert werden muss.

Tip: Erstelle Dir erst einmal ein einfaches Menü mit diesen Vorgaben. Wenn das funktioniert kann man sich an die Umsetzung der konkreten Aufgabe machen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 16.02.2007, 09:12
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Daumen hoch

Hallo zusammen!

Werde mich heute mal daran setzen. Da wir einen "Brauchtumstag" freinehmen konnten, habe ich den ganzen Tag Zeit!
Wenn es euch interessiert, werde ich euch das Ergebniss später mal zeigen.

Aber warscheinlich habe ich vorher noch Fragen...
Mit Zitat antworten
  #8 (permalink)  
Alt 22.02.2007, 20:34
Benutzerbild von quarki69
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2007
Beiträge: 102
quarki69 befindet sich auf einem aufstrebenden Ast
Frage

Huhu, liest mich hier unten noch jemand?

Habe noch eine Frage; wenn ich das oben gezeigte Menü, bzw. den oben gezeigten Header nu abbilden möchte; mache ich das dann so, das ich das "Tolle Logo" als "Header" definiere, nachh Links floate und dann die erste Liste, mit den Menüpunkten gelb und rot, daneben packe? Die zweite Liste floate ich dann darunter; aber wie bekomme ich es hin, dass die kleine Liste wirklich oben steht und die zweite darunter?

Mein HTML sieht bisweilen so aus; wobei es um die oberen beiden Listen geht, die in den farbigen Feldern (später Bilder) abgebildet werden sollen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Autowerkstatt Entenhausen</title>
    	<link rel="stylesheet" type="text/css" href="therapie.css" />
  </head>

<body id="index">

<div id="header">

	<h1>Autowerkstatt Entenhausen</h1>	
		<p>Donald Duck - Gustaf Ganz</p>
	<p>Post Straße 10 - 45885 Entenhausen</p>
	<p>Tel. 0 22 11 - 3 55 56</p>
	<p>Fax. 0 22 44 - 56 67 38</p>
	
	<ul id=top>
		<li><a href="#">Home</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>
	
	<ul id=main>
		<li><a href="#">Autowerkstatt</a></li>
		<li><a href="#">Schraubenwechsel</a></li>
		<li><a href="#">Ausbeulen</a></li>
		<li><a href="#">Lackieren</a></li>
		<li><a href="#">Waschen</a></li>
		<li><a href="#">Trocknen</a></li>
		<li><a href="#">Putzen</a></li>
	</ul>

</div>

	<h2>Was ist der Unterschied zwischen Autowerkstatt und Garage?</h2>
	
	<p>Ganz einfach: Es gibt keinen, es sind zwei Namen für eine EInrichtung!
			International gibt es schon lange Autowerkstätten. Nur in Deutschland (alte 
			BRD ) war die Berufsbezeichnung „Mechaniker`` per Gesetz festgelegt, 
			da auch die Ausbildung zum KFZ-Mechaniker per Gesetz geregelt ist. 
			1994 wurde das „Gesetz über die Berufe in der Landschaft ( Masseur -
			und Raketenfahrer – MZhg )“ geändert.<br />
			Eine Anmerkung: <br />
			Tankstellen gibt es auch nur in Deutschland. Nun heißen auch in Deutschland 
			Backwaren Mandelhörnchen und betreiben lustige Umgebung.
			Nicht verwechseln sollte man das ganze mit Schreibtischlampen. Bei der 
			Schreibtischlampe handelt es sich um eine passive Maßnahme, die 
			keinerlei Eigenaktivität vom Wurstbrot verlangt.
			In Deutschland gibt es folgendes: <br />
			Der lustige Astronaut ist ausgebildet zur Anwendung der Schreibmaschine und der 
			physikalischen Gesetzgebung. Die Ausbildung zum Taucher beinhaltet ausschließlich 
			Maßnahmen der veralteten Ansicht und ein wenig Bewegungsmangel. </p>
	
	<h2>Getränkeliste</h2>
	
			<h3>Für nähere Informationen klicken Sie bitte auf den jeweiligen Begriff:</h3>

	<ul id=sub>
		<li><a href="#">Bier</a></li>
		<li><a href="#">Saft</a></li>
		<li><a href="#">Blaubeerquatschimatschi</a></li>
		<li><a href="#">Kinderpunsch</a></li>
		<li><a href="#">Bohnensuppe</a></li>
		<li><a href="#">Malermeister/BGM</a></li>
		<li><a href="#">MC Hammer</a></li>
		<li><a href="#">Elektro Trinkspachtel</a></li>
		<li><a href="#">Skorbut Bremser</a></li>
		<li><a href="#">Manuelle Tee-Tasse</a></li>
		<li><a href="#">Lager Beer</a></li>
		<li><a href="#">Familien Becher</a></li>
		<li><a href="#">Ultraschall Limonade</a></li>
	</ul>

</body>
</html>
Mein CSS sieht bisher so aus:

Code:
* {
		margin:0;
		padding:0;
		}

	html, body {
		height:100%;
		}
		
	body {
		font-family: Helvetica, Arial, sans-serif;
		}
	#header {
		float: left;
		width:100%;
		background:yellow; 
		}
	#header ul {
		margin:0;
		padding:0;
		list-style:none;
		}
	#header li {
		float:left;
		margin:0;
		padding:0;
		}
Meine Idee wäre nun, in dem Header nur das <h1> Tag und die <p> tags darunter abzubilden, welche später unsichtbar sein sollen und das Logo, bzw. eine Art Visitenkarte darstellen sollen. Rechts daneben die kleine Liste und darunter die Liste mit den sieben Punkten.

Nur, wie bekomme ich die zweite Liste dazu, darunter zu bleiben?

Allerbesten Dank an allem, die sich bis hierher durchgerungen haben! Viele Grüsse, Mark
Mit Zitat antworten
  #9 (permalink)  
Alt 22.02.2007, 22:13
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

So ganz auf die Schnelle ginge es so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Autowerkstatt Entenhausen</title>
    <style type="text/css">
<!--
* {
		margin:0;
		padding:0;
		}

	html, body {
		height:100%;
		}
		
	body {
		font-family: Helvetica, Arial, sans-serif;
		}
	#header {
		float: left;
        width:100%;
		background:yellow; 
		}
	#header ul {
		margin:0;
		padding:0;
		list-style:none;
		}
	#header li {
		float:right;
		width: 135px;
		height: 100px;
		border: 1px solid grey;
		margin:0;
		padding:0;
		}
		#header #top {
		float: right;
		width: 450px;
		}
		#header #main {
		clear: right;
		}
		#header p.info {
		float: left;
		width: 400px;
		}
        -->
</style>	
</head>

<body id="index">

<div id="header">
 <p class="info">Autowerkstatt Entenhausen</p>
	<ul id=top>
		<li><a href="#">Home</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>
	
	<ul id=main>
		<li><a href="#">Autowerkstatt</a></li>
		<li><a href="#">Schraubenwechsel</a></li>
		<li><a href="#">Ausbeulen</a></li>
		<li><a href="#">Lackieren</a></li>
		<li><a href="#">Waschen</a></li>
		<li><a href="#">Trocknen</a></li>
		<li><a href="#">Putzen</a></li>
	</ul>

</div>

	<h2>Was ist der Unterschied zwischen Autowerkstatt und Garage?</h2>
	
	<p>Ganz einfach: Es gibt keinen, es sind zwei Namen für eine EInrichtung!
			International gibt es schon lange Autowerkstätten. Nur in Deutschland (alte 
			BRD ) war die Berufsbezeichnung „Mechaniker`` per Gesetz festgelegt, 
			da auch die Ausbildung zum KFZ-Mechaniker per Gesetz geregelt ist. 
			1994 wurde das „Gesetz über die Berufe in der Landschaft ( Masseur -
			und Raketenfahrer – MZhg )“ geändert.<br />
			Eine Anmerkung: <br />
			Tankstellen gibt es auch nur in Deutschland. Nun heißen auch in Deutschland 
			Backwaren Mandelhörnchen und betreiben lustige Umgebung.
			Nicht verwechseln sollte man das ganze mit Schreibtischlampen. Bei der 
			Schreibtischlampe handelt es sich um eine passive Maßnahme, die 
			keinerlei Eigenaktivität vom Wurstbrot verlangt.
			In Deutschland gibt es folgendes: <br />
			Der lustige Astronaut ist ausgebildet zur Anwendung der Schreibmaschine und der 
			physikalischen Gesetzgebung. Die Ausbildung zum Taucher beinhaltet ausschließlich 
			Maßnahmen der veralteten Ansicht und ein wenig Bewegungsmangel. </p>
	
	<h2>Getränkeliste</h2>
	
			<h3>Für nähere Informationen klicken Sie bitte auf den jeweiligen Begriff:</h3>

	<ul id=sub>
		<li><a href="#">Bier</a></li>
		<li><a href="#">Saft</a></li>
		<li><a href="#">Blaubeerquatschimatschi</a></li>
		<li><a href="#">Kinderpunsch</a></li>
		<li><a href="#">Bohnensuppe</a></li>
		<li><a href="#">Malermeister/BGM</a></li>
		<li><a href="#">MC Hammer</a></li>
		<li><a href="#">Elektro Trinkspachtel</a></li>
		<li><a href="#">Skorbut Bremser</a></li>
		<li><a href="#">Manuelle Tee-Tasse</a></li>
		<li><a href="#">Lager Beer</a></li>
		<li><a href="#">Familien Becher</a></li>
		<li><a href="#">Ultraschall Limonade</a></li>
	</ul>

</body>
</html>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
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
Tabelle via CSS oliwol CSS 9 19.02.2007 22:12
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04
Problem CSS mit Tabelle und ID pc-woelfin CSS 1 27.09.2005 00:56
[MySQL] ab wann lieber eine neue Tabelle verwenden The Doc Serveradministration und serverseitige Scripte 19 23.04.2005 18:21
Tabelle komplett als css Deejoy CSS 2 06.07.2004 20:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:21 Uhr.