Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Welche Container benutzen(div,span,tabelle?!)

  1. #1
    Teeny
    Registriert seit
    20.04.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Welche Container benutzen(div,span,tabelle?!)

    hallo,
    wie kann ich nebeneinander 3 Container(also leere Platzhalter verwenden).
    Ich hab ein Bild mitgepostet,ursprünglich wurde das Layout mit Tabellen erstellt.
    Das Bild zeigt lediglich leere Felder, weiter unten hab ich versucht sowas mit ASCII zu zeichnen :P:

    Wie kann ich nun diese 3 Felder mit anderen Elementen ersetzen?
    "div" funktioniert nebeneinander nicht da immer ein Zeilenumbruch miterstellt wird und mit "span"(span war eigentlich CSSmäßig für sowas gedacht oder?) funktioniert rein gar nichts. Mit span konnte ich bis jetzt absolut noch nix anfangen

    mfg und danke für die Hilfe


    ___________________________
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |''''''''''''''''|'''''''''''''''''''''''''''''''''''|''''''''''''''''|
    |______|_____________|______|
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Meister(in)
    Registriert seit
    11.04.2007
    Ort
    Bern (CH)
    Beiträge
    341
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo Olaf,

    Ich bin zwar selber erst div-Anfänger, aber ist nicht das hier das was du suchst?
    Sojo
    We'll be right back after these commercials...


  3. #3
    Interessierte/r
    Registriert seit
    26.02.2007
    Ort
    Kiel
    Beiträge
    130
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Was spricht dagegen das Layout mit den Tabellen zu behalten?

    Ja, tut mir leid, ich weiß dass man eine Frage eigentlich nicht mit einer Gegenfrage beantwortet aber ich würde gerne was über die Gründe erfahren
    Man muss nicht verrückt sein um mit mir befreundet zu sein...
    ABER es hilft!!!

  4. #4
    Meister(in)
    Registriert seit
    11.04.2007
    Ort
    Bern (CH)
    Beiträge
    341
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Phunthom
    Was spricht dagegen das Layout mit den Tabellen zu behalten?
    - HTML-Dokumente werden schlanker
    - Barrierefreiheit
    - Style lässt sich komfortabel zentral verwalten
    We'll be right back after these commercials...


  5. #5
    Meister(in)
    Registriert seit
    27.04.2006
    Ort
    Wien
    Beiträge
    263
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ho,

    Was spricht dagegen das Layout mit den Tabellen zu behalten?
    Tabellen sind langsamer und nicht dafür geschaffen Layouts zu erstellen (klar es geht, aber man hämmert doch auch nicht mit 'ner rohrzange nur weils geht oder?) sondern Daten tabellarisch darzustellen
    Von daher ist es löblich, wenn ein "Tabellen-Mensch" auf div's umsteigen will.

    mit dem span-tag kann man inline formate (üblicherweise text oder innerhalb von p-Tags, etc.) per css formatieren. Wenn du ein <span> in ein p-Tag oder über Text legst und span nicht per css formatierst, passiert erstmal gar nichts. Der span-tag erzeugt keinen Textumbruch.

    div-container werden dazu verwendet um layouts zu erstellen. Der div-Tag erzeugt einen Container um die eingeschlossenen Inhalte & Formate (listen, absätze, etc.) und einen Zeilenumbruch.

    Wenn du ein layout wie bei dem Bild oben erstellen möchtest, brauchst du 3 div's:

    linke spalte - im quelltext das erste div bekommt "float:left;" zugewisen und sagen wir mal "width:150px;".

    rechte spalte - im quelltext das zweite div - bekommt "float:right;" und "width:150px;".

    inhalt (mittlere spalte) - im quelltext das LETZTE div - bekommt kein float, nur ein "width:600px".

    Um die drei divs könntest du noch ein viertes legen (wäre im quelltext dann das allererste, vor dem div für die linke spalte) und dem ding dann so formatieren:
    margin: 40px auto 10px auto; width:900px;

    dann wär die seite schön mittig. Das ergebnis ist dann ein dreispaltiges layout mit einer fixen breite von 900px (angaben sind richtwerte, für 1280x1024 und 1024&768 aber nahezu perfekt).

    Du hast übrigens Glück, ich hab hier noch eine kleine Vorlage von mir gefunden:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http&#58;//www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    	<title>Test Layout</title>
    	<style type="text/css">
    		*&#123;margin&#58;0;padding&#58;0;&#125;
    	</style>
    	</head>
    	<body>
    		<div style="margin&#58; 40px auto 10px auto; width&#58;900px;">
    			<div style="background-color&#58;#33FF00;">
    				header
    			</div>
    			<div style="float&#58;left; width&#58;150px; background-color&#58;#D2D2D2;">
    				<ul>
    					[*]Home
    					[*]...
    				[/list]
    			</div>
    			<div style="float&#58;right; width&#58;150px; background-color&#58;#D2D2D2;">
    				infomenü
    
    				...
    			</div>
    			<div style="background-color&#58;#EEEEEE; width&#58;600px; margin&#58;0px 150px 0px 150px;">
    				inhalt...
    				leerzeile...
    
    				leerzeile...
    
    				leerzeile...
    
    				leerzeile...
    
    				leerzeile...
    
    				leerzeile...
    
    			</div>
    			<div style="background-color&#58;#33FF00; width&#58;600px; margin&#58;0px 150px 0px 150px;">
    				evtl. Footer für Impressum, interne Verlinkung etc.
    			</div>
    		</div>
    	</body>
    </html>
    Vielleicht blickst du mit diesem konkreten (einfachen) Beispiel besser durch (es lässt sich sehr leicht so umbauen, dass du nur mehr die drei spalten hast - einfach header- und footer-div entfernen). Wenn du deine Seite mit CSS gestalltest, solltest du den CSS Quelltext allerdings in eine seperate *.css datei auslagern (schneller und einfacher handhabbar).

    Ich hoffe ich konnte damit ein bisschen helfen

    mfg
    Stefan

  6. #6
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von GreatStuff
    <span> um ein p-Tag
    Wenn du einen Span-Tag um ein P-Tag legst, hast du allerdings schon einen Fehler Produziert. Block-Elemente dürfen nicht von Inline-Elementen umschlossen werden. Genauso wenig wie du eine Ul in ein P packen darfst, oder ein a um ein Div.
    Du stülpst ja auch keinen Luftballon um nen Karton, sondern legst den Luftballon in den Karton
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

  7. #7
    Meister(in)
    Registriert seit
    27.04.2006
    Ort
    Wien
    Beiträge
    263
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    sorry so ein blödsinn ich meinte es natürlich anders rum, so (danke für den hinweis):

    Code:
    <li class="boxtitle">
    
    <span class="fett">Szene Links&#58;</span></p>
    als beispiel wie man ein span anwenden kann (obs jetzt sinnvoll ist oder nicht is fraglich), aber so wäre das valide (HTML 4.01 Transitional hab ich ausprobiert)

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    20.04.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    danke für die vielen Tipps und Hinweise!

    @Greatstuff : Hab deine Vorlage getestet... Genau sowas in der Art hab ich gesucht, allerdings sind jetzt weitere Fragen aufgetaucht und zwar gibts ja per float eben left, "middle" und right. Kann ich dann nur 3 nebeneinander haben oder auch mehrere?

    Und wie bekomm ich das dann hin dass ich mehrere divs nebeneinander habe?

    mfg [/b]

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    float middle gibt es nicht.
    Du kannst natürlich auch mehr als drei div's nebeneinander bekommen, indem du ihnen jeweils ein "float:left;" zuweist.
    Beim dreispaltigen Aufbau floatet man normalerweise die linke Spalte links und die rechte rechts. Der Mittelteil schiebt sich dann dazwischen.

  10. #10
    Teeny
    Themenstarter

    Registriert seit
    20.04.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hallo,
    also irgendwie hab ich einige Probleme und blick mich nicht ganz durch!

    Probiert mal folgenden Code aus und schaut ihn euch(ich verwende Firefox) in einem Browser an!

    Code:
    <html>
    
    <head>
    <title>Titel der Seite</title>
    </head>
    
    
    <body>
    
    <div style="width&#58;750px;">
      <div style="padding-left&#58;10px; padding-top&#58;14px; padding-right&#58;10px; background-color&#58;#FF0000; float&#58;left; width&#58;153px;">DIV links
    DIV links
    DIV links
    DIV links</div>
      <div style="padding-top&#58;14px; background-color&#58;#00FF00; float&#58;right; width&#58;172px;">DIV rechts
    DIV rechts
    DIV rechts
    DIV rechts
    DIV rechts
    DIV rechts
    DIV rechts
    </div>
      <div style="padding-left&#58;8px; padding-top&#58;14px; padding-right&#58;8px; background-color&#58;#0000FF;">DIV mitte
    DIV mitte
    DIV mitte
    DIV mitte
    DIV mitte
    DIV mitte
    DIV mitte
    DIV mitte
    </div>
    </div>
    
    </body>
    </html>

    Man sieht dass das linke und das rechte div-Tag funktionieren aber das mittlere nicht, wenn das mittlere div-Tag länger(nach unten) wird dann schiebt es sich in die anderen divs rein, ich will aber dass die 3divs alle eigenständige Container sind!

    mfg

    PS: Lasst euch nicht durch die vielen
    s verwirren, das soll nur zur Veranschaulichung dienen!

Ähnliche Themen

  1. PHP sting in html benutzen
    Von OLNET im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 26.08.2008, 20:31
  2. c# dll in c++ benutzen
    Von essi im Forum Forum für alle anderen Programmiersprachen
    Antworten: 2
    Letzter Beitrag: 03.05.2008, 22:35
  3. span/div!
    Von Rasantokelo im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 22.04.2007, 19:58
  4. span class="normalfont"
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.10.2006, 21:00
  5. HELVETICA SCHRIFTART BENUTZEN
    Von newhtml im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 19.07.2005, 10:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •