nicht angemeldet
Hacks für mit Stylesheets designte Website!
Moinsen,
Also so langsam hab ich Stylesheets lieben gelernt, man kann
schöne Dinge damit machen (alles pixelgenau darstellen),
was ich mitlerweile so weit raus hab, nur macht mir dieses
DÄMLICHE "floating" ständig "ein Strich durch die Rechnung"
*grrrrr* :-(
Ich habe Mozilla , Netscape und den IE zur Verfügung bei beiden
letzteren scheint alles in Ordnung nur im IE sieht alles grauenhaft
aus. Jetzt habe ich etwas vom "Tantek Hack" gehört und von einer
vereinfachten Form vom "Box Model Hack"
div ( width: 100px; )
div ( \width: 110px;
w\idth: 100px; )
Nun meine Frage an die erfahrenen unter Euch:
Welche "Hacks" verwendet ihr bei den Webseiten die ihr macht?
Welche sind absolut notwendig , wenn es das überhaut gibt ?
Und wie funzt das dann mit den Browserweichen ?
Gibt es hier jemanden , der mir das alles klar darlegen kann ?
Vielen Dank für eure Zuschriften im vorraus !
Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !
-
Moinsen,
Nachtrag:
Oder hat das mit folgendem nichts zu tun:
Wenn ich "float" bei einem Containerelement anwende das folgender-
massen aussieht, dann passiert folgendes:normal ohne float:
*************************************
* <hier *
*^+-------------------------------+ *
*h1 + *
*i1 +---------+ +-------------+ 1 *
*e1 1 box1 1 1 box2 1 1 *
*r1 1 1 1 1 1 *
* 1 +---------+ +-------------+ 1 *
* 1 1 *
* +-------------------------------+ *
* *
*************************************
^^^^^^
Bildschirmalso ein normaler übergeordneter container worin sich zwei
kleinere container befindendann passiert folgendes: die Abstände margin-left und
margin-top vom browserfensterrand zum übergeordneten container
(mit "hier" gekennzeichnet) werden viel größer sobald ich float: left;
einsetze und ich so die box2 neben der box1 kleben haben möchte.Hat das etwas damit zu tun?
Vielen Dank für eure Antworten!
Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !-
Hallo,
Hat das etwas damit zu tun?
Ohne deinen Code zu sehen? Keine Ahnung.
Grüße
ThomasPS: hübsche ASCII.
-
Moinsen,
O.K.:
--------------------------------------------------------------
<html>
<head>
<title>Heimweg</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: arial, helvetica, sans-serif;
color: #666;
background-color: #ffffcc;
background-image:url("hintergrund1.jpg");
}img {
background-color: #000;
padding: 20px 10px 20px 10px;
margin-left: 5px;
margin-top: 10px;
border:1px solid green;
}#box {
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;border:1px solid green;
width:990px;
height:555px;}
#fotobox {
float: left;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;background-color: #fff;
border:1px solid green;
width:340px;
height:500px;}
#textbox {
margin-top: 5px;
margin-left: 50px;
margin-right: 5px;
margin-bottom: 10px;background-color: #fff;
border:1px solid green;
width:340px;
height:500px;
}</style>
</head>
<body>
<div id="box">
<div id="fotobox">
<div class="img">
<img src="/fotos/portrait1.jpg" alt="Portrait">
Lorem ipsum dolor sit amet ... Lorem ipsum dolor sit amet ... Lorem ipsum dolor sit amet ... Lorem ipsum dolor sit amet ...
</div>
</div>
<div id="textbox">
Lorem ipsum dolor ...
</div></div>
</body>
</html>
--------------------------------------------------------------------Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !-
Hallo,
<html>
Verwendest du eine DOCTYPE-Angabe? Wenn ja welche? Stichwort: "doctype-switch". Die Browser reagieren da unterschiedlich.
Grüße
Thomas-
Moinsen,
ja, folgende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !-
Hallo.
ja, folgende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Lies mal hier weiter: http://www.heise.de/ix/artikel/2004/03/136/.
MfG, Thomas
-
-
-
-
-
-
Hallo,
Welche "Hacks" verwendet ihr bei den Webseiten die ihr macht?
Keine bzw. nur einen um höchstens Angaben für NS 4.x zu verbergen bzw. zu überschreiben.
Welche sind absolut notwendig , wenn es das überhaut gibt ?
Einer um höchstens Angaben für NS 4.x zu verbergen bzw. zu überschreiben.
Alles andere halte ich für "gut zu wissen", aber überflüssige und unnötige Zeitverschwendung. (es sei denn du sprichst von einigen wenigen HTML-Dateien für eine eigene Seite)Grüße
Thomas-
Moinsen,
Ja schon, welche die man halt kennen sollte! :-)
Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !
-
-
Hallo,
Also so langsam hab ich Stylesheets lieben gelernt,
man kann schöne Dinge damit machenJa.
(alles pixelgenau darstellen),
Nein, genau das kann man eben nicht schön machen, jedenfalls nicht browserübergreifend schön.
Welche "Hacks" verwendet ihr bei den Webseiten die ihr macht?
Welche sind absolut notwendig , wenn es das überhaut gibt ?Keine. Man braucht sie nicht, wenn man nicht gezwungen ist, pixelgenaue Designs umzusetzen. Die Seiten sind dann zwar nicht in allen Browsern 100% deckungsgleich, können aber in allen Browsern benutzt werden und sehen sich ähnlich genug, um Corporate Identity umzusetzen.
HTML und CSS sind _keine_ Werkzeuge für DTP und keine Bildschirmpräsenations-Werkzeuge. Für Hochglanzprospekte oder pixelgenaue Bildschirmlayouts bzw. pixelgenaue Bildschirmpräsentationen brauchst Du andere Software zur Darstellung (PDF, Flash, SVG ...).
viele Grüße
Axel
-
Hallo,
Welche "Hacks" verwendet ihr bei den Webseiten die ihr macht?
Ich habe bis jetzt zwei Hacks gebraucht:
1. Star HTML Hack.
Dieser Selektor:
* html <normalerSelektor>
wird vom IE genau so interpretiert wie <normalerSelector>2. Fehler beim Floating im IE.
Die margins von gefloateten Elementen sind im IE
doppelt so groß wie angegeben. Solchen Elementen
verpasse ich ein display:inline; und der IE
stellt die margins wieder normal da.Andere Hacks kenne ich leider nicht, muss ich mich mal informieren
(Kennt jemand eine Übersichtsseite dazu?)Gruß
Alexander Brock--
SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com-
Moinsen,
... ähm zu Deinem 2. Punkt , handelt es sich dabei um
das, was ich im Nachtrag beschrieben habe, könnte das
identisch sein?Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !-
Hallo,
... ähm zu Deinem 2. Punkt , handelt es sich dabei um
das, was ich im Nachtrag beschrieben habe, könnte das
identisch sein?Ja, das ist dieser Bug im IE, den wir beschrieben haben.
Gruß
Alexander Brock--
SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com
-
-
Hallo Alexander
Andere Hacks kenne ich leider nicht, muss ich mich mal informieren
(Kennt jemand eine Übersichtsseite dazu?)Schau dich mal hier um:
http://www.lipfert-malik.de/webdesign/tutorial/css.htmlAuf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
Moinsen,
so ein sch.... der bug ist jetzt behoben und im IE wird alles
richtig dargestellt (in mozilla aber nicht) aber irgendwie komme
ich nicht mit der positionierung der container klar.
Wie kann man das am besten lösen, siehe :http://awg.freehoster.org/websitetest8/
Irgendwie scheint das noch nicht richtig!
Aber so in etwa schwebt mir das vor.
Der Text (ganz rechts) soll nachher in diesem milchigen kasten scrollen
(oberkante bis unterkante milchiger kasten).Die box links, was jetzt weiß und wo das Foto drin ist , ist soll
auch so milchig werden, aber
ich bekomme das einfach nicht hin ein transparentes gif bild zu
erstellen ode zumindest weiß ich nicht wie ich das abspeichern soll.
Das gif-bild hat wohl dann immer einen weißen Hintergrund und irgendwie klappt das nicht (obwohl ich von anfang an ein transparenten hintergrund einstelle). Weiß da einer von euch Rat wie ich das mit
Photoshop hinbekomme??? Kann mir das einer Schritt für Schritt
erklären?*grrrr* ... einen Fehler gibt es immer noch im IE seh ich grad
siehe: http://awg.freehoster.org/websitetest8/fehltest1/wo kommt zwischen den containern der schmale rand her, eingestellt
habe ich ihn so nicht(weder pading noch margin kann es sein),
könnt ihr mir das sagen??? noch ein bug???Auf Antworten würde ich mich sehr freuen und ich bedanke mich schonmal!
Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !-
Hallo,
http://awg.freehoster.org/websitetest8/
Der Text (ganz rechts) soll nachher in diesem milchigen kasten scrollen
(oberkante bis unterkante milchiger kasten).Du hast ihn absolut positioniert, ohne anzugeben, wo er anängt.
Also fängt er am Viewport an (CSS: top:0; left:0;).
Bestimme, dass er am milchigen Kasten beginnt, so hoch wie der
milchige Kasten ist (height:x;) und dass übergroßer Inhalt
dargestellt wird (overflow:auto;)Gruß
Alexander Brock--
SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
http://emmanuel.dammerer.at/selfcode.html
Deshalb können Pinguine nicht fliegen:
Was nicht fliegt kann auch nicht abstürzen
<img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
http://againsttcpa.com-
Moinsen,
Danke , :o)
aber ist es sinnvoll so die container zu positionieren
(die Art und Weise) oder geht das einfacher und vorallem sinvoller!
Es sind ja nur diese zwei in diesem großen cont.!
(Gebt mir villeicht bitte Beispiele)
Denn ich mein , das es irgendwie "hingefpuscht" wirkt,
und das möchte ich nicht, es soll schon richtig und ordentlich
gemacht sein!Danke für den Tipp mit dem overflow! :o)
Lieben Gruss aus Münster der madmax
--
Homepages:
http://www.tassilosturm.net
http://www.heimweg.net.tf
Wer Ordnung hält ist nur zu faul zum suchen !-
Hallo,
aber ist es sinnvoll so die container zu positionieren
(die Art und Weise) oder geht das einfacher und vorallem sinvoller!^
Gehört da nicht ein Fragezeichen hin?Ich würde eine kachelbare Hintergrundgraphik für den body und eine
kachelbare milchige Hintergrundgraphik für die #textbox machen,
und die #fotobox links floaten.
2 kleine, kachelbare Hintergrundgraphiken
tun der Ladezeit bestimmt gut :-)Ein Beispiel für so ein Layout (allerdings ohne Hintergrundgraphiken)
ist einer der Design Vorschläge für die SdN[1] Seite:
http://kfgma.de/~brockal/selfforum/ISS/alexander_neu/Gruß
Alexander Brock
-
-
-
-
Auch Moinsen!
..., nur macht mir dieses DÄMLICHE "floating" ständig "ein Strich durch die Rechnung"
Dabei bietet gerade die float-Eigenschaft mit die beste browserübergreifende Umsetzung (also den geringsten Bedarf an browserspezifischen Anpassungen) für mehrspaltige Layouts!
Ich habe Mozilla , Netscape und den IE zur Verfügung ...
Opera solltest du dir vielleicht noch runterladen http://www.opera.com/download/index.dml?step=3&opsys=Windows&lng=de&platform=Windows
... nur im IE sieht alles grauenhaft aus.
Wen wunderts? Ist der IE doch zur Zeit der Browser mit der geringsten Standardkompatibilität und den meisten Fehlern (persönliche Meinung). Und das Beste daran sind die Unterschiede dabei zwischen den einzelnen Versionen (IE 5.0, 5.5, 6 Win & IE 5 Mac).
Jetzt habe ich etwas vom "Tantek Hack" gehört und von einer
vereinfachten Form vom "Box Model Hack"div ( width: 100px; )
div ( \width: 110px;
w\idth: 100px; )Mein Rat: Imho ist es unerlässlich sich damit zu beschäftigen, worin der jeweilige Bug eines Browsers liegt (was er also anders als der Standard es vorsieht tut), und wie der jeweilige Hack dieses "Fehlverhalten" vermeidet/ korrigiert. Ohne dieses grundlegende Verständnis/ Wissen wird der Einsatz von Hacks ein "Glücksspiel" bleiben.
Nun meine Frage an die erfahrenen unter Euch:
Also eigentlich nicht an mich (ich antworte aber trotzdem mal) ...
Welche "Hacks" verwendet ihr bei den Webseiten die ihr macht?
Die, die jeweils unvermeidlich 'notwendig' sind. Frei nach dem Motto "So wenig wie möglich, soviel als nötig!", bzw. "Weniger ist Mehr!". Meinen aktuellen Versuch findest du hier http://css.top-topics.com/index_pc.html. Dieser funktioniert bis jetzt bspw. in allen Browsern (Browser < Generation 5 bekommen eine 'unformartierte' Seite, also ganz ohne CSS geliefert), außer dem IE 5 Mac und kommt, bis auf einige wenige spezielle Korrekturen für IE Win, ganz ohne Hacks aus.
Welche sind absolut notwendig , wenn es das überhaut gibt ?
Das hängt u.a. vom jeweiligen Layout und den Browsern, die unterstützt werden sollen, ab.
Generell gesagt: keiner!Und wie funzt das dann mit den Browserweichen ?
Browserweichen kann man auf vielfältige Weisen realisieren. Eine Möglichkeit besteht eben darin, sie per CSS zu realisieren. Da dies ein sehr umfangreiches Kapitel ist, möchte ich dich auf http://css-discuss.incutio.com/?page=BrowserDetection und http://css-discuss.incutio.com/?page=CssHack verweisen.
Ebenfalls auf dieser Seite, unter http://css-discuss.incutio.com/?page=CssLayouts, findest du Beispiele zu allen Arten von CSS-Layouts. Eine gute Methode besteht imho darin, diese Layouts zu analysieren & zu verstehen. Danach kann man dann daran gehen, sein eigenes Layout zu basteln.
Gruß Gunther
--
Mein SelfCode: fl:( br:& va:) ls:[ fo:| rl:( n4:& ss:| de:] js:| ch:? zu:|
http://www.peter.in-berlin.de/projekte/selfcode/?code=fl%3A(+br%3A%26+va%3A)+ls%3A[+fo%3A|+rl%3A(+n4%3A%26+ss%3A|+de%3A]+js%3A|+ch%3A%3F+zu%3A|