nicht angemeldet
Hier wird der CSS Nobelpreis verliehen
Guten Tag,
es ist mir ja fast schon peinlich, aber ich habe gestern bestimmt 10 Stunden damit verbracht, ein CSS Problem zu lösen, zu dem mir Wahsaga schon vorgestern versucht hat eine Lösung zu geben.
Es mag nun wirklich für den einen CSS Spezialisten lächerlich klingen, aber ich war schon dich dran das Layout auf den Bildschirm zu malen, da es einfach nicht klappt.
Also ich möchte eine Seite von Tabellen auf floating DIVs umstellen.
Habe alle Möglichen Verschachtelungen und Tipps ausprobiert:
Momentan habe ich folgendes:
#barcorner
{
float: left;
margin: 0px 0px 0px 0px;
width: 200px;
}
#greybar
{
margin: 0px 0px 10px 200px;
background-image: url(../images/bar.jpg);
background-repeat:repeat-x;
}
#logo
{
float: right;
margin: 0px 0px 0px 0px;
}
body
{
margin: 10px;
}
<div id="greybar">
<div id="barcorner"><img src="../images/edgeleft.jpg" width="200" height="52" alt="edgeleft.jpg" /></div>
<div id="logo"><img src="../languages/{$language}/img/slogan.gif" align="right" alt="slogan.gif" /></div>
</div>
Es soll mit CSS so aussehen wie mit Tabellen ober auf dieser Seite:
http://www.dentona.de/pages/news.php?lang=de
Also Logo ganz rechts umramhmt von dieser grauen Linie.
Wenn jemand denkt es sei ein Kinderspiel, könnte er mir dann freundlicherweise die Lösung geben ?
Bin am verzweifeln.
Danke vielmals.
-
Hi,
#logo
{
float: right;
margin: 0px 0px 0px 0px;
}float ohne width ist falsch.
Siehe http://www.w3.org/TR/REC-CSS2/visuren.html#floats, 2. Absatz unter 9.5
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
Hallo Andreas,
Das width Attribut ist eingefüht. Ohne Besserung des Ergebnissen.
:(#barcorner
{
float: left;
margin: 0px 0px 0px 0px;
width: 200px;
}#greybar
{
margin: 0px 0px 10px 0px;
background-image: url(../images/bar.jpg);
background-repeat:repeat-x;
width: 14px;
}#logo
{
float: right;
margin: 0px 0px 0px 0px;
width: 343px;
}Was ist sonst falsch?
Danke
-
-
Hans
Wenn du deinem greybar sagst er solle links 200px abstand haben, dann hat dein barcorner auch 200px abstand, da er sich IM greybar befindet (float hin oder her).
Dann würde ich die Anzahl div's stark reduzieren. Du benötigst keine div um ein Bild zu platzieren! Platziere es einfach.
Wieso kann das bar.gif nicht background-image vom body sein? dann könnte barcorner.gif background-image von greybar sein. Das wäre doch einfacher?
Probiers, Andre
--
Dschinni - Web in alle Richtungen
-
Hi,
also jetzt verstehe ich garnichts mehr und bin total verwirrt.
Wies braucht ich das DIV nicht.
Ergibt für mich keinen Sinn.Kannst Du mir mal die DIVs geben, so wie Du meinst?
Danke
-
Hans
Eine mögliche Lösung: Nicht auf allem getestet, aber die background-position Parameter kannst du durch anpassen des Bildes umgehen.
<style >
#greybar
{
margin: 10px 10px 10px 0px;
height: 52px;
text-align: right;
background-image: url(edgeleft.jpg);
background-repeat:no-repeat;
}#logo
{
margin: 0;
background-color:red;
}body
{
background-image: url(bar.jpg);
background-repeat:repeat-x;
background-position: 10px 51px;
margin: 0px;
}</style>
</head><body>
<div id="greybar">
<img id="logo" src="slogan.gif" width="343" height="35" alt="slogan.gif" />
</div></body>
Vielleicht hilfts ja. Andre
--
Dschinni - Web in alle Richtungen
-
Hi,
diese Lösung funktioniert leider nicht, da ich bereits ein anderes Hintergrundbild im Body habe.
Aber davon abgesehen ist das Bild Bar überhaupt nicht sichtbar, obwohl der Pfad stimmt.
Woran kann das nur liegen?Danke
-
Hans
Bei mir hat meine Lösung funktioniert. Komisch wenn es bei Dir nicht geht. Aber meine Lösung ist ja auch nur so schnell schnell programmiert. Da kann es schon noch ungereimtheiten geben.
Aber abgesehen davon: Es ist sicher mit einer CSS-Lösung machbar, keine Frage. Und wie Du siehst habe ich in html 3 Zeilen Code gebraucht. Mach das mal mit Tabellen!
Auch der Ansatz von Struppi ist völlig falsch. Er hat wohl nicht genau gelesen um was es geht. Es will ja niemand diagonale Linien mit CSS programmieren! Ausserdem ist die Separation von Inhalt und Präsentation (HTML und CSS) keine momentane Mode, sondern Standard. Es wurden nicht zum Spass alle (!) Browser umprogrammiert.
Grundsätzlich gilt aber beim Programmieren: Alles möglichst einfach gestalten. Vermeide Divitis, benutze div's nur wo wirklich nötig. Denn mit verschachtelten div's wird dein Code im gleichen Mass unübersichtlich wie mit Tabellen. Und das wollen wir ja vermeiden.
Bleib dran. Andre
--
Dschinni - Web in alle Richtungen
-
Hallo,
vielen Dank für die Tipps.
Werde Deine Tipps befolgen!!!!
Gruß
Hans
-
Auch der Ansatz von Struppi ist völlig falsch. Er hat wohl nicht genau gelesen um was es geht. Es will ja niemand diagonale Linien mit CSS programmieren! Ausserdem ist die Separation von Inhalt und Präsentation (HTML und CSS) keine momentane Mode, sondern Standard. Es wurden nicht zum Spass alle (!) Browser umprogrammiert.
Schau mal hier ins Forum, schau mal in den entprechenden Newsgroups, seit wenigen Wochen taucht die Frage "wie mache ich mein Tabellenlayout mit CSS" mehrmals Täglich auf, das ist eine Mode und Standard wäre es wenn ein beträchtlicher Teil der Internetseiten das so machen würden, was aber momentan überhaupt nicht zutrifft.
Das Problem von Hans war mir wirklich nicht so klar, da ich nur schnell über die Seite gegckt hatte und davon ausging, dass das Logo nur mit vertrackten Background positionierungen umzusetzten wäre. aber so wie es wahsaga realisiert hat ist es Klasse.
Struppi.
-
Struppi
Mode oder nicht, das muss jeder für sich entscheiden. Aber hier etwas Lektüre die die Entschcheidung erleichtern soll.
http://www.webstandards.org/about/mission/de/
Jeder kann dann seine Vor- uns Nachteile zurecht legen und sagen: OK, XHTML und CSS, das ist ok und die Möglichkeiten sind vielfältig. Oder aber: Och nein, meine Tabellenlayouts sind toll und etwas neues lernen mag ich jetzt nicht.
Aber probiers doch mal, macht Spass. Andre
--
the font-tag is considered harmful
-
Mode oder nicht, das muss jeder für sich entscheiden. Aber hier etwas Lektüre die die Entschcheidung erleichtern soll.
Irgednwie hab ich das Gefühl wir reden aneinander vorbei.
Mode ist nicht eine Entscheidung sondern, wie ich schon schrieb, eine Erscheinung die plötzlich in grosser Menge Auftritt. Und damit ist keine Wertung gemeint, sondern, dass in den letzten Wochen offensichtlich das Theman etwas mehr zur Geltung kam.Aber probiers doch mal, macht Spass. Andre
Ich versuch in meinem Umfeld seit ca. 3 Jahren die Vorteile von CSS, bzw. die Trennung von Inhalt und Design beim Weblayout, zu verbreiten.
Da ich aber selber bis immer noch an Rechnern arbeite, wo Netscape 3 installiert ist und die Hürden der Fähigkeiten von NC 4.x nur zu gut kenne, weiß ich um die Schwierigkeiten, wenn man das Design gern erhalten möchte. Wobei ich mich aber mttlerweile immer freu mit dem 3'er Browser zu surfen, da, wenn die Trennung sauber ist, man wesentlich schnellere Seiten geliefert bekommt als aufwendige Tabellenlayouts, wo der Browser dann nicht selten abschmiert oder gar nichts mehr anzeigt.
Struppi.
-
-
-
-
-
-
-
-
Es soll mit CSS so aussehen wie mit Tabellen ober auf dieser Seite:
http://www.dentona.de/pages/news.php?lang=deAlso Logo ganz rechts umramhmt von dieser grauen Linie.
Das ist kein optimale Vorraussetzung für CSS, da das was da passiert mit CSS nicht umsetzbar ist, d.h. du musst irgendwelche Workarounds basteln und ob du diese jetzt mit HTML oder CSS machst, spielt keine Rolle, da der Sinn von CSS - die Flexibilität - ja sowieso nicht mehr vorhanden ist.
Struppi.
-
Guten Tag,
Das ist kein optimale Vorraussetzung für CSS, da das was da passiert mit CSS nicht umsetzbar ist, d.h. du musst irgendwelche Workarounds basteln und ob du diese jetzt mit HTML oder CSS machst, spielt keine Rolle, da der Sinn von CSS - die Flexibilität - ja sowieso nicht mehr vorhanden ist.
Also doch besser mit einer Tabelle arbeiten? Sprich so lassen wie es nun ist?
Danke
-
Das ist kein optimale Vorraussetzung für CSS, da das was da passiert mit CSS nicht umsetzbar ist, d.h. du musst irgendwelche Workarounds basteln und ob du diese jetzt mit HTML oder CSS machst, spielt keine Rolle, da der Sinn von CSS - die Flexibilität - ja sowieso nicht mehr vorhanden ist.
Also doch besser mit einer Tabelle arbeiten? Sprich so lassen wie es nun ist?
Ja, Tabellen sind ja keine ungültigen Tags, nur weil es momentan Mode ist mit CSS zu arbeiten. Wie gesagt dein Konstrukt ist halt nicht besonders HTML/CSS freundlich. Mit HTML baust du dir eine Tabellenkonstruktion, mit CSS liese sich das so gar nicht umsetzen, da z.b. CSS keine Diagonale Linien kennt. Du könntest zwar versuchen irgendwas irgendwo hin zu positionieren, würdest dadurch aber alles unflexibler machen als bisher.
Und wie gesagt die Idee mit CSS Design vom Inhalt zu trennen wirst du so wie es momentan ist nicht hinbekommen.
Struppi.
-
-
-
hi,
Es soll mit CSS so aussehen wie mit Tabellen ober auf dieser Seite:
http://www.dentona.de/pages/news.php?lang=deAlso Logo ganz rechts umramhmt von dieser grauen Linie.
Wenn jemand denkt es sei ein Kinderspiel, könnte er mir dann freundlicherweise die Lösung geben ?
erster entwurf, habe im moment allerdings nur den IE 5.0 zum testen da:
http://www.isis.de/~wazgnuks/nobel.htm
habe hier links noch ein wenig abstand drin, so dass das hintergrundbild neben dem image nochmal durchscheint, dürfte sich aber auch noch irgendwie lösen lassen ...
gruss,
wahsaga-
Hallo,
ich weiß nicht was ich sagen soll.
Bin echt platt. Man bin ich froh, dass es doch geht.Were mir Deine Lösung nun mal zu Gemüte führen.
Es gibt doch wirklich kluge Köpfe hier.
Nochmals herzlichen Dank!!!!!!!!!
Gruß
Hans
-
-
Hallo.
Ich nehme an, dass der Verzicht auf das Setzen einer seitenweiten Hintergrundfarbe nur dem Finden weiterer Fehler dient ;-)
MfG, at