zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Grafik an Elementhöhe anpassen / Element an Seitenhöhe anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.01.2012, 12:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2009
Beiträge: 16
DasGrussel befindet sich auf einem aufstrebenden Ast
Standard Grafik an Elementhöhe anpassen / Element an Seitenhöhe anpassen

Einen schönen guten Tag!

Ich arbeite schon seit einiger Zeit an einer Website und bekomme die folgenden Probleme einfach nicht in den Griff. Hier erstmal der Link zur Testversion:
Aktuelle Version

Was passieren soll
  • Der weiße "Glow" soll hinter dem Text (+ ein bisschen Fläche außenrum) liegen und sich an die Textlänge anpassen.
  • Die Leisten links und rechts (die gepunkteten) sollen bis nach unten bis zum Ende der Seite gehen
  • Das Ganze soll auf allen gängigen Browsern (Firefox auf Mac und PC ab 3.6, Google Chrome, IE ab 7) funktionieren und in etwa gleich aussehen


Aktueller Stand
  • Habe den "Glow" per CSS3 umgesetzt, was auf Chrome und Firefox problemlos funktioniert. Auf dem IE wird dieser Code ignoriert.
  • Ich hatte es davor mit einer skalierten weichen Weißfläche als Grafikdatei probiert - das funktionierte auf allen Browsern, aber ich habe es nicht geschafft, dass die Grafik automatisch skaliert wurde - ich musste es für jede Seite einzeln anpassen. Das sah dann so aus: Alte Version mit Grafik statt CSS3
  • Ich habe keine Ahnung, wie ich die gepunkteten Leisten links und rechts immer automatisch bis zum unteren Ende der Seite verlängern kann

Ich danke euch schon mal, weiß gerade echt nicht weiter.

Viele Grüße und einen guten Start in die Woche,
DasGrussel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.01.2012, 13:00
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hallo auch,

IE9 kann vieles nicht. Falls Du den Effekt beibehalten willst und es skalierbar sein soll, verzichte auf die Verwendung von CSS3 und weise deine Grafik, ggf. angepasst, dem div fliesstext als vertikal wiederholende Hintergrundgrafik zu.
Der Effekt ist dann immer so groß wie das div, welches durch den Text aufgespannt wird.

Damit der Effekt über den Textbereich hinausreicht, muss das div breiter sein als der reine Textbereich. Verwende daher die semantisch korrekten Absatztags p für deinen Fließtext und verpasse dem p seitliche margins in gewünschter Breite.

Deine Pünktchenleiste solltest Du ebenfalls anders umsetzen. Vielleicht hilft Dir dieser Thread mit einer ähnlichen Aufgabenstellung:

http://xhtmlforum.de/66614-rahmen-mi...erstellen.html
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.01.2012, 13:38
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

BTW: das ganze gehört doch unter CSS
Mit Zitat antworten
  #4 (permalink)  
Alt 17.01.2012, 13:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2009
Beiträge: 16
DasGrussel befindet sich auf einem aufstrebenden Ast
Standard

Hallo andir,

danke erstmal für deine Antwort.

Wenn ich das Bild als eine wiederholende Hintergrundgrafik anlege, dann wird es im Endeffekt doch nicht weich oben und unten sein, oder?
Also, wenn ich eine weiße Fläche mit einer weichen Kante als Grafik habe, dann wird es an den Enden der Grafik doch zwei aneinanderliegende weiche Kanten geben, die dann ein unruhiges Hintergrundmuster ergeben.

Gibt es keine Möglichkeit, die Grafik in der Höhe so zu skalieren, dass sie immer so hoch ist wie der Textrahmen?

Den Link schau ich mir jetzt mal an, danke.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.01.2012, 13:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2009
Beiträge: 16
DasGrussel befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
BTW: das ganze gehört doch unter CSS
Hatte auch überlegt, aber da es sich ja um ein gesamtes Seitenkonstrukt dreht, dachte ich, es kommt doch eher bei Sitecheck rein. Aber wenn es bei CSS besser passt, kann es ein Moderator auch gerne verschieben.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.01.2012, 00:31
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von DasGrussel Beitrag anzeigen
Hallo andir,

danke erstmal für deine Antwort.



Gibt es keine Möglichkeit, die Grafik in der Höhe so zu skalieren, dass sie immer so hoch ist wie der Textrahmen?

Den Link schau ich mir jetzt mal an, danke.
Wenn es nicht um einfachste Aufgabenstellungen geht, wirst Du den gleichen grafischen Eindruck eher selten auf allen gängigen Browsersystemen erzielen können.

Es ist freilich nicht notwendig, überall das gleich Aussehende zu haben. In deinem Fall wird der Glow ja auch vom Vorhandensein des Textes beeinflusst (CSS3) . Diesen Effekt wirst Du allenfalls mit separat generierten Grafiken erzielen können.

Als Alternative böte sich an, für den IE eine "abgeschwächte" Version zu erstellen, die den Eindruck in etwa erhält, z.B. durch eine Hintergrundgrafik. Nicht die konkrete Umsetzung ist entscheidend, sondern der dadurch hervorgerufene Eindruck oder die Stimmung.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 19.01.2012, 09:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.09.2009
Beiträge: 16
DasGrussel befindet sich auf einem aufstrebenden Ast
Standard

Habe es jetzt tatsächlich hiermit geschafft (wusste gar nicht, dass Microsoft für den IE solche Dinge bereitstellt...):

Code:
#box2 {
background-color: #d8edf9;
width: 500px;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50', MakeShadow='false', ShadowOpacity='0.75', enabled='true');
margin-top: 0px;
}
Und was die Sache mit den Pünktchen am Rand angeht, ist mir die simpelste Lösung gar nicht eingefallen - ich habe einfach ein DIV erstellt mit der Hintergrundgrafik der sich wiederholenden Punkte am Rand, in dem (aus anderen Gründen) wiederum ein DIV liegt in dem wiederum der Text liegt - Problem gelöst, Pünktchen gehen immer bis zum unteren Rand.

Vielen Dank für eure Links und Tipps!

Wünsche allen schonmal im Voraus ein schönes Wochenende!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
element an footer 'festbinden' bei dynamischer seitenhöhe keinplan CSS 2 12.08.2010 02:49
Grafik soll vertikal repeaten bis zum nächsten div Element goerte CSS 1 21.01.2010 17:34
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) NEOX Offtopic 10 17.07.2008 18:11
Grafik soll sich der Größe eines übergeordneten Feldes automatisch anpassen! VariouStyles CSS 1 30.08.2007 12:17
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:12 Uhr.