Anzeige

tabellen nebeneinander

tabellen nebeneinander | PSD-Tutorials.de

Erstellt von boese86, 18.09.2008.

  1. boese86

    boese86 Noch nicht viel geschrieben

    Dabei seit:
    01.08.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    tabellen nebeneinander
    hallooo..
    ich habe ein bisschen Probleme mit dem coden meiner HP, und zwar grundlegende Probleme!! :)

    Code (Text):
    1.  
    2. <tr>
    3. <td colspan="7" background="Bilder/content.gif" width="999" height="635" alt="" align="left" valign="top" style="padding-top:50px; padding-left:50px">
    4. <p class="tab">Titel</p>
    5. <p class="tabn">Text</p></td>
    6. </tr>
    7.  
    wenn ihr euch den code jetzt mal so im Raum vorstellt habe ich eine Tabelle mit dem Bild content.gif als Background. In der Tabelle habe ich zwei so p's mit einem Stylesheet erstellt. diese p's sind aber (zum glück!) auf der linken seite. Was ich nun will ist, dass ich auf der gleichen höhe und rechts neben an, weitere solche p's machen will, auch wieder einen Titel und einen Text. soll dann so im news style daher kommen.

    habe auf selfhtml schon sowas in der richtung gefunden, resp. nach tabellen gesucht, im beispiel machen sie es aber mit

    Code (Text):
    1.  
    2. [FONT=Arial] <tr>
    3.     <th>Titel</th>
    4.     <th>Titel</th>
    5.   </tr>
    6. [/FONT]

    aber das verzieht und positioniert meine Grafiken völlig anders, als ich es gerne hätte...

    hilft mir jemand aus der patsche?


     
    Zuletzt bearbeitet: 18.09.2008
    #1      
  2. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Ich fasse mal zusammen:

    Du hast keine Ahnung von HTML
    Du versuchst mit Copy&Paste die richtige Lösung zu finden

    Ich würde dir empfehlen SelfHTML genauer anzuschauen und dich wenigstens mit Tabellen näher auseinander zu setzen. Ich kann mir gut vorstellen, dass du auf weitere Probleme stoßen wirst, wenn du so wenig von HTML weißt.

    Ich denke mal mit dem was du bisher gepostet hast kann man schnell am Ziel vorbeischießen wenn man dir einfach so nen Tipp gibt, da man sich nicht den Rest der Seite vorstellen kann, trotzdem will ich es versuchen, vorher dir aber erklären warum du so wie versucht nicht zum Ziel gelangtest:
    Eine Tabelle besteht aus Reihen (<tr></tr>) welche eine beliebige Anzahl an Zellen (<td></td> oder <th></th>) enthalten. In jeder Reihe müssen aber gleich viele Zellen vorhanden sein (oder du gibst mit [colspan="Zellenanzahl"] an, dass eine Zelle über mehrere Zellen der über- und untergeordneten Reihe geht).
    Du hast also eine Reihe mit genau einer Zelle, dieser einen Zelle weißt du deinen Hintergrund zu und nur dieser einen. Wenn du jetzt mit <th> eine weitere Zelle öffnest, zerreißt es dir nicht nur die Tabelle, sondern das Bild was nur in der ersten Zelle definiert ist wird in der neuen nicht mehr angezeigt.
    Wenn du also eine neue Zelle mit einbauen willst, musst du in jeder Reihe deiner Tabelle die Zellenenanzahl anpassen.
    Das ist die schwerste Methode und sicherlich nicht unbedingt die empfehlendswerteste...

    Alternativ weißt du über die Styledefinition deine Absätzen (die <p> ;)) an aneinander vorbei zu fließen (Such bei SelfHTML nach float). Damit ist es möglich zwei Absätze nebeneinander und darunter nochmal zwei Absätze nebeneinander anzeigen zu lassen. Hierbei musst du aber aufpassen, dass das mit den Größen passt und das Design (auch in anderen Browsern) nicht zerreißt...

    So viel zu viel geschrieben, ich sollte meine Antworten kürzer halten...

    Edit: Ähm Sobi, das ist falsch, das zaubert nur eine Tabelle, mit zwei Zellen untereinander...
     
    #2      
  3. boese86

    boese86 Noch nicht viel geschrieben

    Dabei seit:
    01.08.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    vielen dank mal euch beiden für die ausführlichen antworten.

    und nein, ich muss dich leider enttäuschen topgun, ich versteh die blöden tabellen nur nicht...
    Code (Text):
    1. <table>
    2. <tr>
    3. <th>je</th>
    4. <th>jo</th>
    5. <th>nei</th>
    6. </tr>
    7. </table>
    so geht's jetzt ja. ABER das Problem ist, dass ich fürs design, den Code vom Photoshop habe (ja ich weiss, den sollte man nicht verwenden, sondern alles selber einpflegen). Darum bastle ich momentan auf einem chaotischen Code noch chaotischere sachen oben drauf!

    Das beste wäre, wenn ich die ganzen gifs neu einpflegen würde, nur ist das schwer möglich, wenn man den ganzen aufbau von tabellen in HTML nicht begreift.
    oder hast du mir einen tipp nach was ich suchen soll um die navi wie im angehängten bild so überlappend dar zu stellen? (oben header unten content, mitte überlappend über beide grafiken die navi).

    übrigens, copy & paste ist nicht mein ding, jeder einzelne tag ist mit meinen 10 finger eingetippt worden!


    [​IMG]
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Enttäuscht mich nicht... Um die Tabellen vielleicht zu verstehen, könntest du dir mal ne einfache Tabelle aufmalen (2x2 Kästchen) über diese Tabelle schreibst du <table> unten drunter </table>. Vor jede Reihe schreibst du ein <tr> und hinter jede Reihe ein </tr>. An den Anfang jeder Zelle schreibst du ein <td> und an das Ende jeder Zelle ein </td>. Dazwischen schreibst du deinen Inhalt.
    Wenn du den Text so wie er dann auf deinem Blatt steht in HTML einfügst wirst du eine Tabelle erhalten wie du sie aufgemalt hast...
    Das mal so als Hilfestellung.

    Doch wenn du das nicht mit Tabellen machst ;)

    Als erstes gebe ich auch hier den Tipp: Nimm einen Stift und einen Zettel (oder Paint) und male dir das auf (dann werd vielleicht auch ich verstehen wie das mit dem überlappend aussehen soll)
    Als Anregung schau mal hier in die anderen Threads da findest du häufig solche Skizzen...

    Und wenn du mir genau erklärst wie die Seite aussehen soll oder es mir zeigst (ob an einer bestehenden oder als Skizze ist egal), können wir uns gerne nochmal unterhalten wie du das umsetzen könntest und wonach du suchen musst.
    Leider kann ich mir momentan kein konkretes Bild machen so dass ich nicht sagen kann wie du es machen könntest...
     
    #4      
  5. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    tabellen nebeneinander
    #5      
  6. chillyorker

    chillyorker Weiß_Nix

    Dabei seit:
    04.09.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Photoshop = HTML?

    Habe ich da irgendwas in Photoshop was ich bisher noch nicht kannte?

    Ich rufe morgen gleich mal bei Adobe an oder ist jemand hier so freundlich und erklärt mir, wie man mit Photoshop Webseiten programmiert?

    Bitte, daß würde mich sehr interessieren!
     
    #6      
  7. BigBilly

    BigBilly Nicht mehr ganz neu hier

    111
    Dabei seit:
    21.01.2008
    Beiträge:
    211
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    CS6, TYPO3
    Kameratyp:
    Canon EOS 600D
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Nein, Photoshop kann kein HTML erzeugen. Dass musste schon selber coden.

    Es gibt da so ein paar Voreinstellungen bei CS3 womit du eine Gallerie zusammen bauen kannst. Ist zwar ganz nett, aber nutzen würde ich es nicht :)
     
    #7      
  8. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Es gibt auch Funktionen im PS welche dir deine PSD in HTML umwandeln ... dazu musst du vorher slicen etc. ... Grundsätzlich ist aber davon abzuraten da der generierte Code veraltet und unzureichend ist.
     
    #8      
  9. boese86

    boese86 Noch nicht viel geschrieben

    Dabei seit:
    01.08.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Genau, das meinte ich mit "der code von PS"... der ist zum kotzen.

    Top Gun, ich komm glaub ich langsam auf die Sprünge:

    Code (Text):
    1.  
    2. <head>
    3. <link href="CSS/header.css" rel="stylesheet" type="text/css" />
    4. <link href="CSS/content.css" rel="stylesheet" type="text/css" />
    5. <link href="CSS/footer.css" rel="stylesheet" type="text/css" />
    6.  
    7. <style type="text/css">
    8.  a:link {color:#000000;}
    9.  a:visited {color:#000000;}
    10.  a:hover {color:#ffffff;}
    11.  </style>
    12.  
    13. </head>
    14.  
    15. <body id="body">
    16. <table align="center" height="15px" width="999">
    17. <td width="915" align="right">
    18. <a href="index.html">Kontakt</a></td>
    19.  
    20. <td width="72" align="right">
    21. <a href="index.html">Impressum</a></td>
    22. </table>    
    23.  
    24. <table align="center" height="87px" width="1024px">
    25. <td id="tdhead">    
    26. </td>
    27. </table>
    28.  
    Mit überlappen meinte ich so:
    Im geposteten Code habe ich ja eine Tabelle in welcher ein Hintergrundbild definiert ist, das siehst du jetzt aber nicht -> ID=tdhead.
    Meine Frage ist, wie ich jetzt die Navi Grafiken manuell Positionieren kann, damit die eine Hälfte der Navi Grafik über das erwähnte Hintergrund bild gelangt und die andere hälfte schaut dann noch so unten raus. weisst du jetzt wie ich meine?
    Ich hab da schon eine Idee, mit CSS kann ich doch eine Eigenschaft "Positionieren" verwenden und dann anhand von Pixel so rumprobieren, bis die Grafik die gewünschte Position erreicht. Oder hättest du eine andere Idee?
    Im Word wäre das ganz einfach, bei Grafikformatierungen kann man ja das Layout auf "passend" stellen und dann beliebig hin und her schieben.

    gruss
     
    #9      
  10. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Deine Idee ist schon richtig.

    Versuch mal deine Menupunkte nicht in eine Tabelle zu packen sondern in einen div Container, diesen kannst du dann über CSS so positionieren wie du es willst.

    Wenn du mehr Infos oder Hilfe brauchst meld dich, aber zu div und CSS solltest du bei SelfHTML eigentlich was finden...

    Edit: Warum hast du eigentlich so viele .css Dateien eingebunden?
     
    #10      
  11. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Wenn dir CSS nicht fremd ist verwende doch gleich ein div basiertes Layout.

    Bsp.:

    HTML:
    1.  
    2. ...
    3.  <div id="site">
    4.   <div id="head">
    5.   <ul id="top_nav">
    6.    <li><a href="adresse">Punkt 1</a></li>
    7.    <li><a href="adresse">Punkt 2</a></li>
    8.    <li><a href="adresse">Punkt 3</a></li>
    9.    <li><a href="adresse">Punkt 4</a></li>
    10.   </ul>
    11.   </div>
    12.   <div id="content">
    13.   <div id="left">
    14.    linke sidebar mit infos menüs etc.
    15.   </div>
    16.   <div id="middle">
    17.    der eigentliche inhalt kommt hier hinein
    18.   </div>
    19.   <div id="right">
    20.    ein rechter bereich.
    21.   </div>
    22.   </div>
    23.  </div>
    24. </body>
    25. ...
    26.  
    und die css eben ...

    HTML:
    1.  
    2. body {
    3.   background: url(bildadresse) no-repeat 0 0; /*hintergrundbild was sich nicht wiederholt*/
    4. }
    5. #site {
    6.   width: 989px; /* breite */
    7. }
    8. #head {
    9.   width: 100%;
    10.   height: hier höhe des Kopfbereichs
    11. }
    12. #top_nav {
    13.   margin: 0;
    14.   padding: 0;
    15.   list-style: none;
    16. }
    17. #top_nav li {
    18.   background: url(bildadresse) no-repeat 0 0; /* hintergrund der menüpunkte */
    19.   float: left;
    20.   width: breite der menüpunkte
    21.   height: höhe der Menüpunkte
    22.  }
    23. #left {
    24.  float: left;
    25.  width: 160px;
    26. }
    27.  
    Ganz grob ein einfaches und leicht anpassbares div Layout.
    Die top_nav kannst du über margins etc. recht einfach hin
    und her schieben.
    Den seiten hintergrund legst du in den body und kannst
    darauf die eigentlich seite (id site) auch positionieren.
     
    #11      
  12. boese86

    boese86 Noch nicht viel geschrieben

    Dabei seit:
    01.08.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    @top gun: Weil mir alle Styles in 1 CSS File ein bisschen unübersichtlich vorkamen.... :) darum.
    ich werde einfach mal rumprobieren und auf selfhtml suchen, irgendwie geht das dann schon... hehe

    @jackprince: wieso divs? bin bis jetzt nur dazu gekommen, mich mit table und td zu befassen...
     
    #12      
  13. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    tabellen nebeneinander
    AW: tabellen nebeneinander

    siehe link weiter oben ... tables sind einfach nicht das richtige element
    zum layouten von seiten.

    Tabellen sind für Tabellarische Inhalte. Wenn sie zum layouten genutzt werden
    ist die seite einfach technisch nicht auf dem richtigen stand.
     
    #13      
  14. boese86

    boese86 Noch nicht viel geschrieben

    Dabei seit:
    01.08.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Okey, werd mir den link mal ansehen, den hab ich übersehen...
     
    #14      
  15. boese86

    boese86 Noch nicht viel geschrieben

    Dabei seit:
    01.08.2008
    Beiträge:
    15
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    so, bin nun schon ein paar schritte weiter gekommen. die links und beiträge haben mir echt geholfen, danke nochmals!

    Nun stehe ich wieder mal vor einem wohl simplen problem:

    Code (Text):
    1.  
    2. <div id="navi1"><img src="gifs/home.gif" /></div>
    3.  
    die CSS dazu:
    Code (Text):
    1.  
    2.  #navi1 {
    3.     height: 41px;
    4.     width: 120px;
    5.     top: 115px;
    6.     left: 350px;
    7.     position: absolute;
    8. }
    9.  
    es zeigt mir in der Editor vorschau nicht die genau gleiche Poisition an wie im Firefox Browser. Habe ich effektiv etwas falsch gecodet oder spinnt die Editor Vorschau, resp. Firefox?
     
    #15      
  16. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    tabellen nebeneinander
    AW: tabellen nebeneinander

    Als erstes würde ich dir empfehlen die absolute Positionierung zu lassen. Denn wie du siehst führt das schnell zu falschen Ergebnissen...

    Ich denke nicht, dass einer der Browser einen Fehler hat, sondern viel mehr, dass die Höhe und/oder Breite des Editors eine andere ist als im Firefox und sich damit das ganze verschiebt... Kannst ja mal die Pixel zählen vom Rand bis zu deinem Element ;)
     
    #16      
x
×
×