Sponsored Links |
|
|||
Dynamische Grafik
So eine Website kenn ich zwar nicht, aber vielleicht hilft Dir dass:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ * {margin:0; padding:0;} #wrap {width:80%; margin:40px auto;} .picbox {max-width:1000px; max-height:74px; padding:0; margin:0;} .picbox img {width:100%; border:0;} /*]]>*/ </style> </head><body> <div id="wrap"><div class="picbox"><img src="http://tiny.cc/2jbcp" alt="x" /></div></div> </body></html> Geändert von Mister Blue Sky (25.11.2010 um 14:31 Uhr) |
Sponsored Links |
|
||||
@Mister Blue Sky
Danke für Deine Mühe. Die Herausforderungen liegen in diversen Merkmalen: * keine Größen in px * mit den Markern (den vertikalen Schnirpseln der Grafik) genau die Mitte eines Menüeintrags und der linken Spalte treffen * Bild nicht als img, sondern per "background-image" (CSS), da es nicht zum Inhalt gehört element:after { content: url("bild.png"); display: block; } scheidet aus, weil man dem Bild keine Breite zuweisen kann. element { background-image: url("bild.png"); background-position:bottom; background-repeat:no-repeat; } scheidet aus demselben Grund aus. Weiterhin kann man ein Hintergrundbild nicht unterhalb eines Inhaltes platzieren, wenn von dem Element die Höhe nicht bekannt ist. * Ideal von der Struktur wäre es, wenn Haupt-Nav und Detail-Nav in einer einzigen verschachtelten Liste stehen. Ich werde bei Gelegenheit mal bosseln. Hätte ja sein können, dass sich jemand an eine Seite mit so einer Darstellung erinnert. Ich selber schätze eine solche Linie als Visualisierung der Zugehörigkeit der Detail-Nav zu einem einzigen Haupt-Nav-Eintrag. Bei folgendem Code ist mir nicht klar, warum Text und Bild nicht absolut synchron skalieren: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div { font-family: monospace; } img { width: 30em; height: 3em; } </style> </head> <body> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br /> <img src="http://tiny.cc/2jbcp" /></div> </body> </html>
__________________
Geändert von AndreasB (25.11.2010 um 16:26 Uhr) |
|
|||
Firefox Einstellung: Schriftarten
Tipp: Kurzversion {font:normal 16px "courier new", sans-serif;}
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ div.txt {font:normal 16px "courier new", sans-serif; width:60em; text-align:center;} div.img {} img {width:30em; height:3em;} /*]]>*/ </style> </head><body> <div class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div> <div class="img"><img src="http://tiny.cc/2jbcp" alt="x" /></div> </body></html> Geändert von Mister Blue Sky (25.11.2010 um 17:37 Uhr) Grund: Die Begründung: "Gecko Rendering Engine benötigt mehr Code" ... war natürlich Blödsinn |
|
||||
Zitat:
Funktioniert erwartungsgemäß auch mit div.txt {font-family: monospace; width:60em; text-align:center;} Angaben zum font-style und zur Größe sind überflüssig sind, da "normal" und "1em" die Default-Werte des Browser sind. Eine Breitenangabe des div.text sollte sich nicht auf den Breitenverbrauch des Inhaltes auswirken. Geschweige denn auf das nachfolgenden Nachbarelement. Besonders erstaunlich finde ich, dass sich "text-align:center" auswirkt. Wie auch immer: Die ursprüngliche Idee lässt sich, wie es aussieht, nicht umsetzen. Denn wer will schon eine Festbreitenschrift in der Navi.
__________________
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 16:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |