nicht angemeldet
DIV Elemente statt Tabellen
0 0 0 0 0 0 
Der Martin
0 0
DIV Elemente statt Tabellen
Hallo!
ich würde gern folgendes design statt mit frames mit css gestalten; wichtig ist mir dabei vorallem, dass nur der inhaltsbereich gescrollt wird, und der rest relativ zur fenstergröße fix positioniert wird.
http://www.unet.univie.ac.at/~a0907760/hptest2/
der erstentwurf sieht mal so aus:
http://www.unet.univie.ac.at/~a0907760/hptest/test3.htm
Eigentlich würde ich das ganze ja gern mit div lösen, dabei hab ich aber das Problem, dass ich keine Ahnung hab, wie ich mit das mit dem rand um die Inhaltsbox hinbekomme, hab's daher vorerst mal in einer Tabelle.
Ich würde jetzt gern:
1. statt einer Tabelle das ganze mit div Elementen lösen:
ich weiß zwar, dass ich jeweils die ecken mit position:fixed; auf der seite verteilen kann, hab aber keine ahnung, wie ich die restlichen elemente dazu bekomme, dass sie sich jeweils zwischen den ecken auffüllen;
2. es in der Folge dann bewerkstelligen, dass nur der Inhaltsbereich über einen scrollbalken verfügt, was ja dann eigentlich ganz leicht mit overflow gehen sollte, wenn ich erstmal statt der Tabelle lauter div elemente habe...
hier mal der Code der Datei:
<html>
<head>
<style type="text/css">
.rand_oben_mitte { background: url(rand/rand_oben_mitte.png); background-repeat:repeat-x; }
.rand_links_mitte { background: url(rand/rand_links_mitte.png); background-repeat:repeat-y; }
.rand_rechts_mitte { background: url(rand/rand_rechts_mitte.png); background-repeat:repeat-y; }
.rand_unten_mitte { background: url(rand/rand_unten_mitte.png); background-repeat:repeat-x; margin:auto; }
.hintergrund { background: url(rand/hintergrund.png); background-repeat:repeat; }
</style>
</head>
<body bgcolor="#494f5b">
<table border="0" cellspacing="0" cellpadding="0" style="height:100%; margin-left:100px; margin-top:50px; margin-right:100px; margin-bottom:100px;">
<tr>
<td><img src="rand/rand_links_oben.png" alt="logo"></td>
<td width="100%" class="rand_oben_mitte"></td>
<td><img src="rand/rand_rechts_oben.png" alt="logo"></td>
</tr>
<tr>
<td class="rand_links_mitte"></td>
<td width="100%" class="hintergrund">
test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hier soll gescrollt werden, der obere, untere und seitliche rand soll fix positioniert werden<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p align="right">test</p></td>
<td class="rand_rechts_mitte"></td>
</tr>
<tr>
<td><img src="rand/rand_links_unten.png" alt="logo"></td>
<td width="100%" class="rand_unten_mitte"></td>
<td><img src="rand/rand_rechts_unten.png" alt="logo"></td>
</tr>
</table>
</body>
</html>
-
Hallo,
ich würde gern folgendes design statt mit frames mit css gestalten; wichtig ist mir dabei vorallem, dass nur der inhaltsbereich gescrollt wird, und der rest relativ zur fenstergröße fix positioniert wird.
Würdest du verraten warum? Ich finde das immer sehr unangenehm wenn das passiert.
Ich habe dir mal ein Beispiel geschrieben wie man das Design mit richtigem HTML und CSS umsetzen sollte, allerdings erst mal ohne dass nur der Inhalt scrollt sondern die ganze Seite.
http://jeenaparadies.net/t/self/a0907760/
Da solltest du einiges draus lernen können wie man HTML und CSS schreibt und strukturiert.
Jeena
-
An dieser Stelle mal eine Fremdbedankung :) Ich finde das sehr schön, was Jeena Paradies da für den OP geschrieben hat.
Und ich muss Jeena in der Hinsicht recht geben, dass mit der Verabschiedung von Frames auch derartige Layouts verabschiedet wurden. Und wie ich finde auch zum Glück! Feststehende Menüs und untere Balken und derartiges verkleinern den Viewport des Nutzers indirekt. Es hat einen Grund warum das keiner mehr macht.
Sehr löblich in jedem Fall, dass Du von frames und Tabellen weg willst. Musst dich allerdings beeilen, mit Deinem Tippspiel :D
Cheers,
Baba-
hehe, die Tippspielseite hab ich nicht mehr vor zu bearbeiten, möchte nur bei meinem nächsten Projekt ohne frames arbeiten :)
-
-
Wow, danke! Mit sowas hätte ich nicht gerechnet, sehr aufschlussreich. da hab ich wohl einiges zu knabbern :)
bezüglich scrollen:
naja, ich find, dass es optisch halt gut ausschaut... aber ihr habt wohl recht, ist wohl wirklich nicht zeitgerecht und schrenkt den Nutzer ein.Interessant, dass man mit css nahezu ohne grafiken arbeiten kann, gefällt mir gut.
trotzdem würde ich mich interessieren, wie ich eine derartige Box auch mit Grafiken hinbekomme, wenn ich etwa den Rand geschwungen haben will oda so. Wäre nett, wenn du mir dass noch kurz zeigen könntest...
Lg und danke
Daniel
-
Hallo,
trotzdem würde ich mich interessieren, wie ich eine derartige Box auch mit Grafiken hinbekomme, wenn ich etwa den Rand geschwungen haben will oda so. Wäre nett, wenn du mir dass noch kurz zeigen könntest...
Für custom-Ränder gibt es http://www.css3.info/preview/border-image/, darüber hinaus kann man auch mit mehreren Hintergrundbildern relativ viel Spaß haben http://www.css3.info/preview/multiple-backgrounds/, allerdings funktioniert beides im IE8 nicht, aber damit kann ich meist leben und ich gebe allen normalen Browsern die schönen Ränder und dem IE8 dann einfach gerade Linien oder so.
Jeena
-
Danke, sehr aufschlussreich.
Eine Interessensfrage hätte ich noch:
Du bist ja offenbar professioneller Webdesigner. Warum setzt du auf CSS3, obwohl es offenbar größtenteils vom IE nicht unterstützt wird und der IE ja immer noch einen sehr großen Marktanteil hat. Wenn ich als Webdesigner für ein Unternehmen eine Homepage konstruiere, sollte doch denke ich oberste Prämisse sein, dass die Seite in allen Browsern gleich angezeigt wird?!LG Daniel
-
Hallo,
Wenn ich als Webdesigner für ein Unternehmen eine Homepage konstruiere, sollte doch denke ich oberste Prämisse sein, dass die Seite in allen Browsern gleich angezeigt wird?!
nein, nicht "gleich".
Sie sollte in allen gängigen Browsern ordentlich angezeigt werden. Das darf aber durchaus auch bedeuten, dass bestimmte Merkmale in älteren Browsern eben nicht mehr dargestellt werden, oder deutlich vereinfacht. Wichtig ist dabei: Die Information muss zugänglich bleiben, und es sollte einigermaßen anständig aussehen. Ausgefeilte Schmuckeffekte oder "Eyecatcher" dürfen dann aber durchaus mal auf der Strecke bleiben.
Ciao,
Martin--
Ein Patriot ist jemand, der bereit ist, sein Land gegen seine Regierung zu verteidigen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Hallo,
Du bist ja offenbar professioneller Webdesigner. Warum setzt du auf CSS3, obwohl es offenbar größtenteils vom IE nicht unterstützt wird und der IE ja immer noch einen sehr großen Marktanteil hat. Wenn ich als Webdesigner für ein Unternehmen eine Homepage konstruiere, sollte doch denke ich oberste Prämisse sein, dass die Seite in allen Browsern gleich angezeigt wird?!
Von der Idee dass es in allen Browsern gleich aussehen muss habe ich mich schon sehr lange verabschiedet, spätestens seit dem es das iPhone gibt erkennt man recht schnell dass man z.B. eine feste Breite von 950px (oder ähnliches) auf dem iPhone mit 320px Breite gar nicht sinnvoll angezeigt werden kann. Also macht man da z.b. das zwei-Spalten-Design in eine ein-Spalten-Design und schon funktioniert es.
Das gleiche gilt für ältere Browser, wenn jemand einen IE8 benutzt der keine zwei Hintergrundbilder anzeigen kann dann will er das wohl so haben. Es ist ja nicht so dass das ihn davon abhält die Webseite zu benutzen.
Das Stichwort dazu heißt "Progressive Verbesserung" oder im Englischen Progressive enhancement. Wer einen guten Browser hat profitiert von einer hübscheren Seite, wer einen schlechteren hat tut das einfach nicht, kann aber das gleiche tun.
Und den meisten Kunden ist es egal, sie gucken sich ihre eigene Webseite sowieso immer nur in einem Browser an. Wenn da jetzt z.b. das zweite Hintergrundbild nicht zu sehen ist dann merken die das nicht mal. Und wenn sie es später mal auf einem besseren Browser sehen dann freuen sie sich.
Wenn sie schon einen besseren Browser nutzen und dann später herausfinden dass das zweite Hintergrundbild im IE nicht angezeigt wird (was sehr sehr selten passiert) dann erklärt man ihnen warum und dass man versuchen kann das hinzubekommen aber dass das mindestens 8 Stunden dauern wird und man dadurch einiges an Arbeit hat die der Kunde dann bezahlen muss. Daraufhin finden die meisten dass es das nicht wert ist, und falls doch dann wird die Arbeit großzügig bezahlt dann kann man sie auch machen.
Jeena
-
[latex]Mae govannen![/latex]
Eine Interessensfrage hätte ich noch:
Du bist ja offenbar professioneller Webdesigner. Warum setzt du auf CSS3, obwohl es offenbar größtenteils vom IE nicht unterstützt wird und der IE ja immer noch einen sehr großen Marktanteil hat. Wenn ich als Webdesigner für ein Unternehmen eine Homepage konstruiere, sollte doch denke ich oberste Prämisse sein, dass die Seite in allen Browsern gleich angezeigt wird?!Falsch. Eine Webs(e)ite sollte in allen (zu berücksichtigenden) Browsern _funktionsfähig_ sein. (bedienbar, Grundfunktionen auch ohne Javascript usw usw) Das hat Priorität. Alles Andere ist Beiwerk
Wer einen alten Browser nutzt, bekommt dann bestimmte "Spielereien" wie Zier-Ränder, Gradienten, abgerundete Ecken etc. pp halt nicht zu sehen, sondern eine eher triste Seite. Diese Nutzer kennen es aber ohnehin nicht anders, es fehlt ihnen also auch nichts.
Stur lächeln und winken, Männer!
Kai, kein Web-Entwickler--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet
-
-
-
-