Zeilenproblem

[Rainer G]

Mit diesen Zeilen bringe ich mein Banner und die horizontale Navigation zu Papier ... äh Pardon zum Web.

Code: Select all

<img src="./brb/banner/buntereisebilder_banner.jpg" border="0"><div style="width:100%; height:20px; background-image:url(brb/clips/verlaufsbalken.jpg); border: 0px;
padding 0px 0px 0px 0px; text-align:center; vertical-align: middle">
{NAV_ROW}
</div>

Packe ich den DIV-Tag nicht gemeinsam mit dem IMG-Tag in eine Zeile, so erscheint eine kleine Leerzeile (a Pixel hoch?). Wie kann ich das verhindern, ohne darauf zu verzichten, die Darstellung im Editor auf zwei Zeilen zu verteilen?

[flip-flop]

Hallo,

von welchem Browser sprichst du?

Und was ist das

./brb......

Knut

[Jensensen]

width:100%;
kannste vergessen und abhaken - macht der browser sowieso!


height:20px;

auch nicht vorteilhaft:

wenn der user die SCHRIFTGRÖSSE anpasst/ändert knallt dir die 20px Zeile weg...

also lieber mit padding arbeiten und wenn Du alles doch so lässt dann ergänze für Deine NAV zeile auch einen STYLE für den FONT mit absoluter (nicht skalierbarer) Grösse:

bspw. font: 10px Verdana, sans-serif;

BTW:

sinn und zweck von CSS ist u.a. die dateigrösse zu minimieren, geringerer traffic, schnellere ladezeiten und darstellungszeiten im browser. warum also nicht externalisieren wie folgt

HTML:
<div class="MyNavRow">{NAV_ROW} </div


CSS inne frontend.css oder so...

.MyNavRow {
width:100%;
height:20px;
padding: 0px 0px 0px 0px;
font: 10px Verdana, sans-serif;
text-align:center;
vertical-align: middle;
background: url(../brb/clips/verlaufsbalken.jpg) no-repeat top left;
}

fertich.
und schon haste den sch... aus der seite raus....

greetz

[Rainer G]

Hallo,

von welchem Browser sprichst du?

Und was ist das

./brb......

Knut

Hups der Punkt ist rein gerutscht.

Sollte eigentlich nur ein Beispiel sein.

Zur Browserfrage!

Dr IE7 macht es anscheinend nur falsch. Im Firefox sieht das alle prima aus. Habe es gerade mal so umgestellt:
http://www.buntereisebilder.de/index.php

Unter dem Banner ist ein schmaler Spalt. Aber wohl nur im IE (IE7?)! Habe es erst jetzt bemerkt, da ich angefangen habe, dass Tabellen-Desgin langsam aber sicher zu entfermen.

[Jensensen]

Hi Rainer,

vett viele tolle bilder. Machste die selber bzw. fährst Du selber zu den Locations??? [Neid]

Warum quetschst du die top navi row auf 20px???
Nur weil das verlaufsbild 20px hoch ist???

M.M. nach ist der Verlauf ohnehin kaum/nur schwach erkennbar.

...da ich angefangen habe, dass Tabellen-Desgin langsam aber sicher zu entfermen...

TIPP: Löse dich von den fixen TABELLEN BREITEN UND HÖHEN!!

Mach das BG-Bild für die Navi einfach größer (in der höhe und in der Breite).
Dein Table ist 920px breit - verlaufsbalken.jpg nur 750x20 ??
Die Navi-Zeile geht aber über die gesamte Zeile.

Mach das Hintergrundbild doch 1000x70px (oder so) und legs dahinter.
Mit nem schönen Verlauf wirkt das dann weitaus besser.

Gib der Navi-Zeile mehr "Luft":
padding: 5px 0px;

Damit kannste Dir auch gleich das
vertical-align: middle;
schenken.

Weil, dann macht der browser die Navi-Zeile so gross/hoch wie nötig, hat genug bild (in der höhe) für den BG und bei entsprechender FONT-Größe und dem padding bottom/top 5px (bspw. siehe oben) steht der text mittig in der NAV_ROW


Greetz

[Rainer G]

Ja, die Bilder sind alle selber gemacht!

Ich bin noch sehr am experimentieren - Design und so und auch schon mit phpWCMS ein wenig aus der Übung gekommen, mich quasi wieder anlermen muss.

[flip-flop]

Unter dem Banner ist ein schmaler Spalt. Aber wohl nur im IE (IE7?)! .....

Ist vermutlich auch in deinem Fall ein Fehler im IE7 (wihitespace-bug).
Entweder du baust die ganze Sache anders auf z.b. so wie von Jensensen vorgeschlagen oder du lebst damit. (Also mit dem "Ich schreibe alles in eine Zeile ohne ein Leerzeichen dazwischen").
Es gibt noch Tricks wie position: oder padding: oder widt\h: , das ist aber jeweils ganz speziell einzusetzen.
Du müsstest dazu diverse Foren durchkramen um diesen Fehler zu umschiffen.

Knut

[pico]

Hallo

nicht sooo wichtig, aber das solltest Du dir jetzt mit XHTML gleich angewöhnen

schlecht - TAG's immer klein schreiben und 'Single'-TAG's mit /> beenden

Code: Select all

<META name="country" content="Deutschland">
<META name="language" content="de">
<META name="coverage" content="worldwide">
<META name="robots" content="index, follow">
<META name="revisit-after" content="15 days">
<META name="pragma" content="no-cache">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.3)">

besser

Code: Select all

<meta name="country" content="Deutschland" />
<meta name="language" content="de" />
...

aus

Code: Select all

<script language="javascript">

wird jetzt

Code: Select all

<script type="text/javascript">

und <img... will jetzt auch ein /> am Ende - immer auch ein Leerzeichen vor /> !!

was das Lauyout angeht, weg von den Tabellen - das geht mit DIV's viel eleganter und wenn das Layout irgendwann nicht mehr gefällt, brauchts nur ein neus Stylesheet

so als gute Einführung in das ganze -> http://www.yaml.de da sind auch die ganzen Fallstricke der Browser beschrieben und wie man sie umschifft.