Tabellen Layout

Messiahs · 13.06.2009

Hallo liebe Communety!

Ich bin gerade dabei mir eine eigene Hompage zu machen und konnte schon einiges im Bereich Css und Html an Wissen dazu gewinnen.Aber dennoch gibt es aufgaben die ich ohne eure Hilfe nicht Lösen kann.

Da ich scroll Balken sehr häslich finde umgehe ich diese einfach in dem ich einfach nur 3-5 News Pro Seite ausgebenlassen.Nach dem News immer unterschiedlich lange ausfallen kann es vorkommen das sich der Content bereich nach unten verschieben muß sonst würde ja zb die 5 News nicht mehr vollständig angezeigt werden können.

Wie ich bereits im oberen Teil angemerkt habe möchte ich keinen Scroll Balken , auch wenn dies eine einfach Lösung meines Problems währe.Mein erster versuch war einfach mit Divs zu arbeiten jedoch nur mit geringen erfolg verbunden.Daher benutze ich jetzt Tabellen das sich die Seite automatisch nach unten zieht.

Soweit funktioniert das ganze auch ohne Probleme , jedoch wenn ich einen Include mache (benutze Webspell) zerfetzt es mir die ganze Seite.Meine Frage daher ist warum passiert das nur wenn ich etwas Include?

Hier ist die Seite mit dem Inclued bsp.

Das links und rechts der Hintergrund zerstört wird ist mir klar da ich ja repeat-y angegeben habe.
Mfg Messiahs

MaedeG · 13.06.2009

AW: Tabellen Layout

Wenn du die die Tabellenangaben wie Höhe und Breite ansiehst, wirst du sehen was das problem ist!

Nicht persönlich nehmen, aber ich würde an deiner Stelle nochmals mit dem Erstellen der Seite beginnen, der Quellcode sieht ja dermassen komisch aus!

mfg: Maede

Ninimaus · 13.06.2009

AW: Tabellen Layout

Nunja ich bin jetzt nicht so der fetischist wenn es um Quellcode etc geht.

Aber ich würde gerne mal meinen Senf dazugeben.

Wieso Tabellen ? Es eignen sich "<div>"-Boxen doch viel viel besser dafür. Tabellen sich mitlerweile in Sachen Webdesign aus der Mode gekommen, fast sogar verpöhnt.

Mit Div-Boxen bist du was das spätere gestalten angeht wesentlich flexibler.

Momentan sieht die Seite ja sehr seltsam aus, oben ist relativ viel Whitspace.

Welche Scrollbalken meinst du denn ?

horzontale oder Vertikale ?

Messiahs · 13.06.2009

AW: Tabellen Layout

Ich möchte gar keinen Scroll Balken.Die Tabellen Größe schaut deswegen so eigenartig aus weil ich herum probiert habe warum es mir immer das Desing zerfetzt.

Ja ich liebe es mit Div zu arbeiten jedoch weis ich nicht wie ich das Realisieren kann das sich das Desing nach unten erweitert
.

Mfg

MaedeG · 13.06.2009

AW: Tabellen Layout

ich würde dir vorschlagen nach dem CSS-Boxenmodel vorzugehen!

z.b.

HTML:

<html>
<head>
</head>
<body>
  <div id="container">
    <div id="header">
    </div>
    <div id="menue">
    </div>
    <div id="content">
    <!--Hier kannst du dann in der CSS-Datei z.b. #content p {
padding:10px;} machen--> 
    </div>
    <div id="footer">
    <!--Hier kannst du dann in der CSS-Datei z.b. #footer {
clear:both;} machen--> 
    </div>
  </div>
</body>
</html

Wenn du nach diesem Model vorgehst, sollte sich dein Problem automatisch lösen.

mfg: Maede

Ninimaus · 13.06.2009

AW: Tabellen Layout

Was heißt denn nach unten erweitert ?

Scrollbalken wirst du nie verhindern können, denn eine HTML-Seite sieht im jedem Browser ein wenig anders aus.

Es spielen einige Faktoren mit: Bildschirmgröße , Wie groß der User das Browserfenster gewählt hat etc.

Bei kleinen Bildschirmen ( I Phone z.B. ) wirst du also einen Scrollbalken nie verhindern können.

Habe zum Schluss noch einen guten Tipp. Ich habe mir um das mit dem CSS zu lernen ein Videotraining von Video2Brain gekauft.

Das Training heißt: Little Boxes - Webseten gestalten mit CSS.

Es hat mir die Grundlagen super vermittelt und der Sprecher erklärt richtig gut !

MaedeG · 13.06.2009

AW: Tabellen Layout

Folgenden Link könnte ich dir noch empfehlen: intensivstation :: CSS Templates :: Templates

mfg: Maede

Messiahs schrieb:
@ so kann das nicht ganz funktionieren oder ? Ich brauche ja Header Conten Footer ja noch eine Div Box in der ich sage repeat-y das sich der Main Content auch grafisch richtig nach unten verschiebt ?!

Und das Video Tutorial was du angesprochen hast , ich weis nicht ob das das selbe ist was ich von Video2Brain haben , aber es handelt sich auch um Css.Es ist auf jeden fall eine grundbasis die sehr gut erklärt wird aber nun mal nicht alles wie in diesem Falle.

Mfg

MaedeG schrieb:
Dafür nutzt du einfach ein Backgroundimage! In CSS würde das z.b. so aussehen:

background-image:url(background-image.jpg);
background-repeat:repeat-y;

mfg: Maede

Messiahs schrieb:
Nun das weis ich schon , das geht aber nur wein ich einen hintergrund habe der in einer Farbe ist , nach dem ich einen Fabverlauf habe brauch ich einen zusätzlichen Div. Und der macht Faxen -.-

MaedeG schrieb:
Doch das geht auch mit einem Bild! Du nimmst das von mir oben gezeigte Boxenmodel, fügst in der CSS-Datei unter #container {background-image:url(background-image.jpg); background-repeat:repeat-y; width:1020;} ein.

Das backgroundimage kann z.B. 1020x1 sein.

Nun wird sobald Text hinzukommt auch der Background erweitert (habs selber getestet)! Und den Contentinhalt kannst du dann noch richtig anpassen.

mfg: Maede

Messiahs schrieb:
Du meinst also das ich den background einfach in Ps größer machen soll so das es dann den anschein hat das ein glatter übergang ist.Wenn ich das richtig verstanden habe Teste ich das dann gleich mal.Danke schon mal

Mfg

MaedeG schrieb:
Also die Bildbreite kann variabel sein, ich habe einfach mal 1020px genommen. Hier kannst du mal mein Beispiel ansehen
mfg: Maede

Messiahs schrieb:
Gut ich werde mich gleich mal dran machen und dir berichten ^^ Wielange biste den noch Online xD

MaedeG schrieb:
ich denk mal noch ca. 30min^^ werde aber morgen bzw. heute bestimmt nochmals reinschauen.

mfg: Maede

Messiahs schrieb:
Hmm ich muss aber dem Conten eine größe zuweisen , sonst zeigt er mir nix an

MaedeG schrieb:
Der gewählte Bereich für das Backgroundimage muss genau so breit sein wie das Backgroundimage, sonst funktioniert es nicht richtig.

mfg: Maede

Messiahs schrieb:
Habs so gemacht wie du es gesagt hats ,
Hmm ^^

MaedeG schrieb:
Nunja jetzt musst du denn einzelnen Elemente die an eine bestimmte Position müssen, eine DIV-Deklaration zuweisen und mit CSS formatieren und dann sollte es klappen. ->

mfg: Maede

Messiahs schrieb:
Würde es dir was ausmachen wenn ich da einfach das Bild mal schicke und du es mir einbaust , dann könnte ich das besser nachvollziehen -.-

MaedeG schrieb:
Kein Problem, mach nur^^

mfg: Maede

Messiahs schrieb:
Ip: jom-clan.de:8767 und das Password xP

D Ich hab das mal zusammengefügt, das hier ist ein Forum kein Messager...

icede · 13.06.2009

AW: Tabellen Layout

<div id="content"> <img src="http://botty.bo.funpic.de/webspell4.01.02/news.png" width="185" height="51" />

das ist schon gleich am Anfang was schiefgegangen... guck mal ans Ende von dem Quelltext...

cebito · 13.06.2009

AW: Tabellen Layout

WAS includest du denn? Jedesmal die ganzen Stylesheets mit? Die sollten nur einmal drin sein und zwar im head-Bereich. dann solltest du diesen schließen und den body beginnen und erst dort sollten deine Inhalte reinincludet werden.
Dann haben deine Tabellenzellen und divs immer wieder die gleichen ID's, wenn du styles mehrmals anwenden willst dann tu das mit Klassen, eine ID sollte nur einmal im Dokument vergeben sein. Zum Verständnis, dich gibts auch nur einmal hier...

Code:

<user id="Messiahs" class="PSD'ler" />
<user id="cebito" class="PSD'ler" /> <!-- usw. -->

Räum dort mal auf und dann sehen wir weiter.

kleinerOnkel · 13.06.2009

AW: Tabellen Layout

Ich glaube Dein Vorhaben wird sich so nicht realisieren lassen und wie schon gesagt wurde: Struktur und Aufräumen im Quellcode, bitte!

agielen · 13.06.2009

AW: Tabellen Layout

@

Danke für Deinen Linkverweis. Tolle Seite!

"Folgenden Link könnte ich dir noch empfehlen: intensivstation :: CSS Templates :: Templates"

esupanetz · 13.06.2009

AW: Tabellen Layout

Hi Messiahs,

das Problem könnte sich auch schon mal etwas lösen, wenn du SAUBEREN HTML-Code erstellst - ich seh weder den Header geschlossen noch den Body-Tag geöffnet.

Tabellen lass bitte weg - divs sind am Anfang zwar etwas gewöhnungsbedürftig, aber wenn man etwas Übung hat DAS Mittelchen zum Zweck

lG

Eva

xyzutschixyz · 13.06.2009

AW: Tabellen Layout

Ich hätte da eine Idee. Dazu müsste ich aber wissen, ob du das Design der Scrollbalken hässlich findest oder einfach nur das SCROLLEN. Trifft die erste Antwort zu, dann ändere einfach das Design des Scrollbalken. xD