zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS für Tabellenlayout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.12.2010, 09:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.12.2010
Beiträge: 5
CasparKrog befindet sich auf einem aufstrebenden Ast
Standard CSS für Tabellenlayout

Hallo,

ich möchte gerne ein Tabellenstruktur mit Div gestallten. (siehe Bild)

Die div-Struktur sieht momentan bei mir so aus:

HTML-Code:
<div id="msg">
   <div id="msghead">Thema geschrieben am ...<div>
   <div id="msgbody">
      <div id="profil">
        Userprofil
      </div>
      <div id="txt">
         Text
      </div>
   </div>
</div>
Ich schaffe es leider nicht dazu das passende CSS zu schreiben.
Kann mir da jemand helfen?
Angehängte Grafiken
Dateityp: png Unbenannt.png (4,1 KB, 11x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.12.2010, 09:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

PHP-Code:
<div id="msg" style="float:left; width:610px; min-height:350px; border:1px solid red;">
   <
div id="msghead" style="float:left; width:600px; min-height:40px; border:1px solid blue;">Thema geschrieben am ...<div>
   <
div id="msgbody" style="float:left; width:600px; min-height:300px; border:1px solid green;">
      <
div id="profil" style="float:left; width:70px; min-height:280px; border:1px solid black;">
        
Userprofil
      
</div>
      <
div id="txt" style="float:left; width:520px; min-height:280px; border:1px solid black;">
         
Text
      
</div>
   </
div>
</
div
Grober Entwurf.

Müsstest nur noch alles anpassen und die stylesheets deine Bedürfnissen anpassen bzw deinen ids zuordnen und auslagern etc....

Solltest dich mit floats befasse.
Für den ie müsstest du das min- weglassen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.12.2010, 10:08
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hier mal eine vereinfachte Version:
HTML-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" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
      Test
    </title>
    <style type="text/css">
/* <![CDATA[ */
    * {margin: 0;padding: 0;}
    body {color: #000;font: 100%/1.3 Arial, sans-serif;}
    #msg {width: 500px;border: 1px solid #000;}
    h3 {font-weight: bold;border-bottom: 1px solid #c7c7c7;padding: 5px;}
    #profil {float: left;width: 160px;padding: 5px;}
    #txt {float: left;width: 310px;border-left: 1px solid #c7c7c7;padding: 5px;}
    .clear {clear: both;}
    /* ]]> */
    </style>
  </head>
  <body>
    <div id="msg">
      <h3>
        Thema geschrieben am ...
      </h3>
      <div id="profil">
        Userprofil
      </div>
      <div id="txt">
        Text Text Text<br />
        Text Text Text
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>
Semantisch wäre vielleicht auch eine Definitionsliste angebracht.
Kommt halt auf den Kontext zur Seite an.

Gruß Manfred
Mit Zitat antworten
  #4 (permalink)  
Alt 15.12.2010, 10:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

@manfred *Angeber*

Musstest du das gleich so genau machen ?
Er soll ja schließlich auch was machen
Mit Zitat antworten
  #5 (permalink)  
Alt 15.12.2010, 10:23
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Jeden Tag eine gute Tat...

Manfred
Mit Zitat antworten
  #6 (permalink)  
Alt 15.12.2010, 10:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.12.2010
Beiträge: 5
CasparKrog befindet sich auf einem aufstrebenden Ast
Standard

@nils_1309: Danke, das war genau das, was ich gesucht habe. Finde die Lösung passt besser als die von Manfred. Hatte gestern schon den ganzen tag mit float:left und float:richt rumgespielt und es einfach nicht hinbekommen. Danke dir.

@Manfred62: Danke auch dir, aber mit clear:both zerschießt es mir immer das Layout.

@beide: Danke. Und das von Nils hat mir ja auch gereicht, da ich nur den Stubser in die richtige Richtung brauchte.
Nettes Forum. Super!
Mit Zitat antworten
  #7 (permalink)  
Alt 15.12.2010, 10:37
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von CasparKrog Beitrag anzeigen
@Manfred62: Danke auch dir, aber mit clear:both zerschießt es mir immer das Layout.
In o.g Beispiel bestimmt nicht! Wenn du an anderer Stelle clearst, brauchst diesen div clear nicht. Du musst das natürlich im Zusammenhang zu deinem Code beachten. Nicht einfach per copy und paste einsetzen.

Gruß Manfred
Mit Zitat antworten
  #8 (permalink)  
Alt 15.12.2010, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.12.2010
Beiträge: 5
CasparKrog befindet sich auf einem aufstrebenden Ast
Standard

Aber wenn der Code von Nils doch funktioniert!?
Sollte ich lieber deinen verwenden? Wenn ja, aus welche Gründen?
Mit Zitat antworten
  #9 (permalink)  
Alt 15.12.2010, 10:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Ist das nicht schön zu lesen @ Manfred ?

Das von Manfred geht auch sogar weniger "Ballast". Dort müsstest du nur es zu deinem anpassen.

Kannst also beide verwenden.

Geändert von Muamicus (15.12.2010 um 10:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.12.2010, 10:47
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von CasparKrog Beitrag anzeigen
...Wenn ja, aus welche Gründen?
Semantik? Weniger Code?
Aber egal, wenns so läuft wie du willst ist es ok.
Es weiss ja auch keiner, was du da erstellst.

Gruß Manfred
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
IE 6 erkennt seine CSS Datei nicht Perelina (X)HTML 4 07.08.2009 18:56
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39
Vier Spalten Tabellenlayout umsetz. - Spaltenhöhe angleichen Dr. Love CSS 6 18.07.2005 19:36
Tabellenlayout in CSS umwandeln Skamander CSS 5 21.06.2005 21:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:59 Uhr.