Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „tabellen nebeneinander“

boese86

Noch nicht viel geschrieben

hallooo..
ich habe ein bisschen Probleme mit dem coden meiner HP, und zwar grundlegende Probleme!! :)

Code:
<tr>
<td colspan="7" background="Bilder/content.gif" width="999" height="635" alt="" align="left" valign="top" style="padding-top:50px; padding-left:50px">
<p class="tab">Titel</p>
<p class="tabn">Text</p></td>
</tr>
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:
[FONT=Arial] <tr>
    <th>Titel</th>
    <th>Titel</th>
  </tr>
[/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:

Top_Gun

Aktives Mitglied

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...
 

boese86

Noch nicht viel geschrieben

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:
<table>
<tr>
<th>je</th>
<th>jo</th>
<th>nei</th>
</tr>
</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!
 

Top_Gun

Aktives Mitglied

AW: tabellen nebeneinander

und nein, ich muss dich leider enttäuschen topgun, ich versteh die blöden tabellen nur nicht...
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.

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.
Doch wenn du das nicht mit Tabellen machst ;)

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).
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...
 

chillyorker

Weiß_Nix

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!
 

BigBilly

Nicht mehr ganz neu hier

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!

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 :)
 

jackprince

xHTML & CSS Junkie

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.
 

boese86

Noch nicht viel geschrieben

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:
<head>
<link href="CSS/header.css" rel="stylesheet" type="text/css" />
<link href="CSS/content.css" rel="stylesheet" type="text/css" />
<link href="CSS/footer.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 a:link {color:#000000;}
 a:visited {color:#000000;}
 a:hover {color:#ffffff;}
 </style>

</head>

<body id="body">
<table align="center" height="15px" width="999">
<td width="915" align="right">
<a href="index.html">Kontakt</a></td>

<td width="72" align="right">
<a href="index.html">Impressum</a></td>
</table>    

<table align="center" height="87px" width="1024px">
<td id="tdhead">    
</td>
</table>

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
 

Top_Gun

Aktives Mitglied

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?
 

jackprince

xHTML & CSS Junkie

AW: tabellen nebeneinander

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

Bsp.:

HTML:
...
<body>
 <div id="site">
  <div id="head">
  <ul id="top_nav">
   <li><a href="adresse">Punkt 1</a></li>
   <li><a href="adresse">Punkt 2</a></li>
   <li><a href="adresse">Punkt 3</a></li>
   <li><a href="adresse">Punkt 4</a></li>
  </ul>
  </div>
  <div id="content">
  <div id="left">
   linke sidebar mit infos menüs etc.
  </div>
  <div id="middle">
   der eigentliche inhalt kommt hier hinein
  </div>
  <div id="right">
   ein rechter bereich.
  </div>
  </div>
 </div>
</body>
...

und die css eben ...

HTML:
body {
  background: url(bildadresse) no-repeat 0 0; /*hintergrundbild was sich nicht wiederholt*/
}
#site {
  width: 989px; /* breite */ 
}
#head {
  width: 100%;
  height: hier höhe des Kopfbereichs
}
#top_nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
#top_nav li {
  background: url(bildadresse) no-repeat 0 0; /* hintergrund der menüpunkte */
  float: left; 
  width: breite der menüpunkte
  height: höhe der Menüpunkte
 }
#left {
 float: left;
 width: 160px;
}

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.
 

boese86

Noch nicht viel geschrieben

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...
 

jackprince

xHTML & CSS Junkie

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.
 

boese86

Noch nicht viel geschrieben

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:
<div id="navi1"><img src="gifs/home.gif" /></div>

die CSS dazu:
Code:
 #navi1 {
    height: 41px;
    width: 120px;
    top: 115px;
    left: 350px;
    position: absolute;
}

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?
 

Top_Gun

Aktives Mitglied

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 ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
174.476
Beiträge
2.577.967
Mitglieder
65.962
Neuestes Mitglied
seppeldeluxe
Oben