Martin Klinkmüller: browser schreddert hp beim zoomen

Moin,

wenn ich in einem beliebigen browser auf die allerkleinsten Stufen zoome (Strg -) oder/und ich auf Grund simulierter Fehlerszenarien bullets nicht anzeigen lasse, dann rutscht die box-right1 unter die box-middle-1 und schreddert den ganzen Rest der homepage.

Die aktuelle index.htm meiner hp (incl. css-Teil im Qt.) besteht aus:

(1) head-box/div
box/div-leftl box/div-middle1 box/div-right1
box/div-left2 box/div-middle2 box/div-right2
...
box/div-left9 box/div-middle9 box/div-right9
footer-box

(2) herum ist eine "page"-box/div, um alles zu zentrieren.

Gerne würde ich euch screenshots zur Ansicht des Problemes hinzufügen, habe diese Funktion hier leider nicht gefunden. Wer mir dennoch helfen kann und mag, dem sende ich die zwei Bilder gern per email zu.

Mit friedlichen Gruessen
Martin Kl.

  1. Om nah hoo pez nyeetz, Martin Klinkmüller!

    Ich würde das als Rundungsfehler abtun, weil die Pixel immer kleiner werden und der Browser feststellt, dass die Boxen nicht mehr nebeneinander passen.

    Abhilfe schafft ein nicht so festzementiertes Layout. Beispielsweise könnte deine erste Zeile so aussehen

    <div>
      <div id="left1"></div>
      <div id="right2"></div>
    </div>

    Links und rechts sind übrigens bescheuerte Klassen- bzw. ID-bezeichner. Wodurch unterscheiden sich left1 und left5 von der Gestaltung? Gar nicht!

    Deshalb reichen Klassen, beispielsweise "de" und "en", aber auch darauf lässt sich verzichten.

    Mein Markup sähe vielleicht so aus

    <ul> <!-- es gibt beliebig viele solcher Zeilen -->  
      <li>  
        <div war früher id=links></div><div war früher id=rechts></div> <!-- Es gilt, whitespace zu vermeiden -->  
        Hier kommt der Text rein, der in der Mitte steht.  
      </li>  
    </ul>
    

    Das dazu passende CSS

    li {padding: 0 367px; /* ganz viel Platz links und rechts */  
        text-align: center;  
        clear: both; } /* sollen wieder in einer neuen Zeile beginnen */  
    ul div {float: right;} /* alle div-Elemente nach rechts */  
    ul div:first-child {float: left;} /* die ersten nach links */
    

    ungetestet, aber damit würde ich beginnen

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Moin Matthias,

      danke für Deine schnelle Antwort.

      Sie soll es aussehen:
      SOLL

      Und so sieht es dann beim Kleinst-Zoomen aus:
      IST

      Kannst Du mir bitte mehr Informationen zu den Klassen geben. Gern auch per email, falls es für die anderen Benutzer zu banal ist. Meine Überlegung war nämlich, dass ich halt 29+1 Boxen an unterschiedlichen Positionen benötige und ich sie deshalb eindeutig benennen muss.

      Wo genau liegt da mein Missverständnis?
      Schaust Du Dir bitte auch meinen Quelltext kurz an?

      Mit friedlichen Gruessen
      Martin Kl.

      1. Om nah hoo pez nyeetz, Martin Klinkmüller!

        Kannst Du mir bitte mehr Informationen zu den Klassen geben. Gern auch per email, falls es für die anderen Benutzer zu banal ist. Meine Überlegung war nämlich, dass ich halt 29+1 Boxen an unterschiedlichen Positionen benötige und ich sie deshalb eindeutig benennen muss.

        Du brauchst, wie ich schrieb, nicht eine einzige Klasse. Die Positionen sind ja abhängig von der Position des Vorgängers.

        Schaust Du Dir bitte auch meinen Quelltext kurz an?

        Habe ich getan und davon ausgehend meinen Vorschlag unterbreitet. Wenn du dich damit beschäftigen möchtest, beginne beispielsweise im SELFHTML-Wiki.

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Ja, ich beginne zu verstehen ... ich probier's gleich aus und melde mich nachher wieder ...

          By the way, wie stelle ich eigentlich sicher, dass hier nicht jemand anderes
          bei "Dein Name oder Nickname:" und "Deine E-Mail (optional):" meine Daten eingibt? Bei Zweifeln zwecks Authentizität bitte email an mich!

          1. Om nah hoo pez nyeetz, Martin Klinkmüller!

            By the way, wie stelle ich eigentlich sicher, dass hier nicht jemand anderes
            bei "Dein Name oder Nickname:" und "Deine E-Mail (optional):" meine Daten eingibt?

            melde dich an und verwende "diesen Benutzernamen schützen" so hast du etwas mehr Sicherheit, aber jeder kann eine beliebige E-Mail-Adresse dort eintragen.

            Bei Zweifeln zwecks Authentizität bitte email an mich!

            Kann es sein, dass du unter Paranoia leidest? ;-)
            Matthias

            --
            1/z ist kein Blatt Papier.

            1. @markup: Also es würde so aussehen:
              test1
              ... was net so ganz meinen Vorstellungen entspricht.

              @markup: Was ich an dem Angebot von Matthias gleichzeitig toll finde, ist, dass es meinen Quelltext extrem verschlankt. Deshalb werde ich davon ausgehend weiter tüffteln und "entklassifizieren". Vor allem hast Du Recht, dass ich ja nicht links1 bis linksn usw. benötige. Ich wollte mir halt offen halten, die divs individuell regenbogenfarbig zu gestallten. ;-)

              @Paranoia: Ich bin kein ausgebildeter klinischer Psychologe, um o. g. Frage bzgl. des Verfolgungswahnes fachlich korreckt beantworten zu können. Aber ich beschäftige mich mit der Erforschung von Strukturen und deren Grenzen. Meine Frage zu dem fraud-Potential ist daher eher kaufmännisch-philosophisch aufzufassen.

              @Registrierung: Der Benutzername darf zur Zeit nur 15 Zeichen lang sein, so dass die Option des Schutzes meines vollständigen Namens entfällt. Ich gehe davon aus, dass wie oben angesprochen meine "Handschrift" und mein Verweis auf die Möglichkeit der verifizierenden Anfrage per email ausreichend Schutz bieten.

              1. Om nah hoo pez nyeetz, Martin Klinkmüller!

                @markup: Was ich an dem Angebot von Matthias gleichzeitig toll finde, ist, dass es meinen Quelltext extrem verschlankt. Deshalb werde ich davon ausgehend weiter tüffteln und "entklassifizieren". Vor allem hast Du Recht, dass ich ja nicht links1 bis linksn usw. benötige.

                genau.

                Viel sinnvoller als die Fotos sind online-Beispiele. Da kann man nämlich auch umherprobieren.

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Schön, dass ihr euch eure Fragen selbst beantwortet. ^^
                  Da hab' ich weniger Arbeit und mach' gleich mal mit,
                  denn die bisher am passensden erscheinende Antwort auf meine Frage ist:

                  div.clearboth {  
                  	clear: both;  
                  	font-size: 0px;  
                  	line-height: 0px;  
                  }  
                  

                  und
                  <div class="clearboth">&nbsp;</div>

                  zwischen die Dreierreihen. Matthias sein Angebot ist aber noch schlankerer, daher werde ich auch an seinem Vorschlag weiterbauen.

                  Gefunden/Quelle: http://www.tutorials.de/css/198764-mehrere-div-boxen-mit-fester-breite-nebeneinander-darstellen.html

                  1. Haja, fast, denn es klappt bei Safari 5.0.2 (7533.18.5) und jetzt auch bei Firefox 6.0.2, welche kleinerer zoomen kann als Erstgenannter. Aber der Internet Explorer 8.0.6001.18072 kann nooooch kleiner zoomen. *uff*

                    Die größer als Originalgröße-Zoomstufen funktionieren in akzeptablen Maßen bei allen drei genannten browsern. *kopfschüttel*

                    Ist schon a Nerd-Prob, was ich hier habe, wa? Denn wer von den browser-usern kennt schon Strg + sowie Strg - und wieviele davon benutzen es auch, ne.

                    1. Irgendwo bei selfhtml stand:
                      "Versuchen Sie bitte nicht, die Struktur eines Tabellen-Layouts mit ineinander verschachtelten Seite div-Elementen nachzubauen. Sie können jedem Block-Element die erforderlichen CSS-Eigenschaften Seite float, Seite width und Seite margin zuweisen und benötigen div-Tags lediglich zur Gruppierung von Elementen."

                      Daher habe ich die vorherige Version mit den "div"s in eine Version ohne eine Version ohne "div"s mit <ul>+<li> ersetzt.

                      Jetzt hab' ich zwar eine logisch und semantisch annähernd korrekte Version. Der Fehler bleibt dennoch bestehen beim IE auf kleinster Zoomstufe. Ich gehe jetzt mal dem Rundungsfehler nach, welchen Matthias ansprach.

                      1. 	<style type="text/css">  
                        

                        body {
                        background-color: #FFFFFF;
                        background:url(goto/bg_body.gif);
                        font-size: 100.01%;
                        font-family: Helvetica,Arial,sans-serif;
                        margin: 0;
                        border: 2px;
                        padding: 1em 0;
                        text-align: center;
                          }

                        span.hle {  
                        letter-spacing:0.3em;  
                        }  
                        
                        
                        span.mid {  
                        color:#FFFF00;  
                        }  
                        
                        
                        div#page {  
                          
                        border: 0px;  
                        margin: 0 auto;  
                        padding: 0.5em;  
                        text-align: left;  
                        width: 760px;  
                        }  
                        
                        
                        div#head {  
                        	float: left;  
                        	border: 0px;  
                        	margin: 2px 2px 2px 2px;  
                        	padding: 2px 2px 2px 2px;  
                        	text-align: center;  
                        	width: 740px;  
                        }  
                        
                        
                        div#de {  
                        	background-color: #FFFFFF;  
                        	float: left;  
                        	border: 2px dotted #FF0000;  
                        	margin: 2px 2px 2px 2px;  
                        	padding: 2px 2px 2px 2px;  
                        	text-align: center;  
                        	width: 320px;  
                        }  
                        div#en {  
                        	background-color: #FFFFFF;  
                        	float: left;  
                        	border: 2px dotted #008000;  
                        	margin: 2px 2px 2px 2px;  
                        	padding: 2px 2px 2px 2px;  
                        	text-align: center;  
                        	width: 320px;  
                        }  
                        div#middle {  
                        	background-color: #0000FF;  
                        	float: left;  
                        	border: 2px dotted #0000FF;  
                        	margin: 2px 2px 2px 2px;  
                        	padding: 2px 2px 2px 2px;  
                        	text-align: center;  
                        	width: 70px;  
                        }  
                        
                        
                        div.clearboth {  
                        	clear: both;  
                        	font-size: 0px;  
                        	line-height: 0px;  
                        }  
                        
                        div#footer {  
                        	border: 0px;  
                        	clear: left;  
                        	margin: 2px 2px 2px 2px;  
                        	padding: 2px 2px 2px 2px;  
                        	text-align: center;  
                        	width: 740px;  
                        }  
                        
                        
                        	</style>  
                        
                        </head>  
                        
                        <body>  
                        
                        
                        	<div id="page">  
                        
                        	  
                        	<div id="head">  
                        		<p><a href="http://www.martinkl.eu"><img src="http://www.martinkl.eu/goto/banner.gif" alt="banner"></a></p>  
                        	</div>  
                        
                        
                        	<div>  
                        	<div id="de">  
                        		<h2><img src="http://www.martinkl.eu/goto/bulletre.gif" alt="red bullet"> <span class="hle">aktuell</span><img src="http://www.martinkl.eu/goto/bulletre.gif" alt="red bullet"></h2>  
                        		<p>Zuagroasda mog Arbat mit Quaddir anhin M&uuml;nchen.</p>  
                        		<p>(aktualisiert: 2012-02-23)</p>  
                        	</div>  
                        
                        	<div id="middle">  
                        		<p><span class="mid">TOP</span></p>  
                        		<h2><span class="mid">I</span></h2>  
                        		<p><span class="mid">(1/9)</span></p>  
                        	</div>  
                        
                        	<div id="en">  
                        		<h2><img src="http://www.martinkl.eu/goto/bulletgr.gif" alt="green bullet"> <span class="hle">current</span><img src="http://www.martinkl.eu/goto/bulletgr.gif" alt="green bullet"></h2>  
                        		<p>Seeking job with living quarters in t. area of Munich.</p>  
                        		<p>(updated: 2012-02-23)</p>  
                        	</div>  
                        
                        
                        <div class="clearboth">&nbsp;</div>  
                        
                        1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd">

                          <html>

                          <head>
                          
                          	<title>martinkl.eu | Die offizielle Martin Klinkmüller homepage</title>
                          
                          	<meta name="description" content="Es ist die offizielle Martin Klinkmüller homepage. Wer bist du? Was willst du? Erfahre es hier! - It's the official Martin Klinkmüller homepage. Who are you? What do you want? Learn more about here!">
                          	<meta name="author" content="Martin Klinkmüller">
                          	<meta name="keywords" lang="de" content="Martin, Klinkmüller, Philosophie, Lebenshilfe, Wer, bist, du, Was, willst, du, tabulariummeum">
                          	<meta name="date" content="2012-02-26T08:09:13+01:00">
                          	<meta name="robots" content="index">
                          	<meta name="robots" content="all">
                          	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
                          	<meta http-equiv="Content-Style-Type" content="text/css">
                          	<meta http-equiv="expires" content="0">
                          	<meta http-equiv="content-language" content="de, en">
                          	<meta name="generator" CONTENT="editor">
                          
                          
                          	<style type="text/css">
                          
                          
                          		body {
                          		background-color: #FFFFFF;
                          		background:url(goto/bg_body.gif);
                          		font-size: 100.01%;
                          		font-family: Helvetica,Arial,sans-serif;
                          		margin: 0;
                          		border: 2px;
                          		padding: 1em 0;
                          		text-align: center;
                          		}
                          
                          
                          		span.hle {
                          		letter-spacing:0.3em;
                          		}
                          
                          
                          		span.mid {
                          		color:#FFFF00;
                          		}
                          
                          
                          		div#page {
                          		background:url(goto/bg_page.png);	
                          		border: 0px;
                          		margin: 0 auto;
                          		padding: 0.5em;
                          		text-align: left;
                          		width: 760px;
                          		}
                          
                          
                          		ul {
                          		border: 0px;
                          		height: 12em;
                          		margin: 2px 2px 2px 2px;
                          		padding: 2px 2px 2px 2px;
                          		list-style-type: none;
                          		clear: both;
                          		}
                          
                          
                          		li.de {
                          		background-color: white;
                          		border: 2px dotted #FF0000;
                          		float: left;
                          		height: 11em;
                          		width: 42%;
                          		margin: 2px 2px 2px 2px;
                          		padding: 2px 2px 2px 2px;
                          		text-align: center;
                          		}
                          
                          
                          		li.en {
                          		background-color: white;
                          		border: 2px dotted #008000;
                          		float: left;
                          		height: 11em;
                          		width: 42%;
                          		margin: 2px 2px 2px 2px;
                          		padding: 2px 2px 2px 2px;
                          		text-align: center;
                          		}
                          
                          
                          		li.mid {
                          		background-color: #0000FF;
                          		border: 2px solid #0000FF;
                          		float: left;
                          		height: 11em;
                          		width: 10%;
                          		margin: 2px 2px 2px 2px;
                          		padding: 2px 2px 2px 2px;
                          		text-align: center;
                          		}
                          
                          
                          		li h2 {
                          		text-align: center;
                          		}
                          
                          		li p {
                          		text-align: center;
                          		}
                          
                          
                          	</style>
                          
                          </head>
                          
                          <body>
                          
                          
                          	<div id="page">
                          
                          	
                          		<ul>
                          			<li>
                          				<p><a href="http://www.martinkl.eu"><img src="http://www.martinkl.eu/goto/banner.gif" alt="banner"></a></p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><img src="http://www.martinkl.eu/goto/bulletre.gif" alt="red bullet"> <span class="hle">aktuell</span><img src="http://www.martinkl.eu/goto/bulletre.gif" alt="red bullet"></h2>
                          				<p>Zuagroasda mog Arbat mit Quaddir anhin M&uuml;nchen.</p>
                          				<p>(aktualisiert: 2012-02-26)</p>
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">I</span></h2>
                          				<p><span class="mid">(1/9)</span></p>
                          			</li>
                          			<li class="en">
                          				<h2><img src="http://www.martinkl.eu/goto/bulletgr.gif" alt="green bullet"> <span class="hle">current</span><img src="http://www.martinkl.eu/goto/bulletgr.gif" alt="green bullet"></h2>
                          				<p>Seeking job with living quarters in t. area of Munich.</p>
                          				<p>(updated: 2012-02-26)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">Lebenslauf</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/mkeuvita.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~1,05 MB)</p>
                          
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">II</span></h2>
                          				<p><span class="mid">(2/9)</span></p>
                          
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">curriculum vitae</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/mkeuvita.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~1,05 MB)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">Hauptbuch &bull;</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/buchbd13.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~2,92 MB)</p>
                          
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">III</span></h2>
                          				<p><span class="mid">(3/9)</span></p>
                          
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">main book &bull;</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/buchbd13.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~2,92 MB)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">Hauptbuch &bull;&bull;</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/buchbd23.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~21,9 MB)</p>
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">IV</span></h2>
                          				<p><span class="mid">(4/9)</span></p>
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">main book &bull;&bull;</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/buchbd23.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~21,9 MB)</p>
                          
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">Hauptbuch &bull;&bull;&bull;</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/buchbd33.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~5,05 MB)</p>
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">V</span></h2>
                          				<p><span class="mid">(5/9)</span></p>
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">main book &bull;&bull;&bull;</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/buchbd33.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~5,05 MB)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">shuttle</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/shuttle/shuttle.htm"><b>hier</b></a> klicken.</p>
                          				<p>(HTM Datei, ~0,01 MB)</p>
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">VI</span></h2>
                          				<p><span class="mid">(6/9)</span></p>
                          
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">shuttle</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/shuttle/shuttle.htm"><b>here</b></a>.</p>
                          				<p>(HTM file, ~0,01 MB)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">Klavier</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/piano.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~3,23 MB)</p>
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">VII</span></h2>
                          				<p><span class="mid">(7/9)</span></p>
                          	
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">piano</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/piano.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~3,23 MB)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">BeZAUBERN</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/bezaubern.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~1,00 MB)</p>
                          
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">VIII</span></h2>
                          				<p><span class="mid">(8/9)</span></p>
                          
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">spellbind</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/bezaubern.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~1,00 MB)</p>
                          
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li class="de">
                          				<h2><span class="hle">Kontakt</span></h2>
                          				<p>Bitte <a href="http://www.martinkl.eu/kontakt.pdf"><b>hier</b></a> klicken.</p>
                          				<p>(PDF Datei, ~0,29 MB)</p>
                          
                          			</li>
                          			<li class="mid">
                          				<p><span class="mid">TOP</span></p>
                          				<h2><span class="mid">IX</span></h2>
                          				<p><span class="mid">(9/9)</span></p>
                          			</li>
                          			<li class="en">
                          				<h2><span class="hle">contact</span></h2>
                          				<p>Please, click <a href="http://www.martinkl.eu/contact.pdf"><b>here</b></a>.</p>
                          				<p>(PDF file, ~0,29 MB)</p>
                          			</li>
                          		</ul>
                          
                          
                          		<ul>
                          			<li>
                          				<p>2002 - 2012</p>
                          			</li>
                          		</ul>
                          
                          
                          	</div>
                          
                          
                          </body>
                          

                          </html>

                          1. Om nah hoo pez nyeetz, Martin Klinkmüller!

                            Es ist weder nötig, komplette Quelltexte noch Screenshots zu posten, wenn wie in deinem Fall ein online-Beispiel zur Verefügung steht.

                            Noch mal:

                            * die ul umfasst _alle_ Zeilen.
                            * Jede Zeile ist ein li.

                            Innerhalb des li

                            <li>  
                              <div class="de"> <!-- Klassen benötigst du nur für IE < 7 -->  
                                <h2>...</h2>  
                                <p><a>....  
                              </div><div> <!-- whitespace vermeiden -->  
                                <h2>...  
                                <p><a>...  
                              </div>  
                              Text der in der Mitte steht  
                            </li>
                            

                            Dazu dann meine vorgeschlagenen CSS-Formatierungen.

                            Matthias

                            --
                            1/z ist kein Blatt Papier.

                            1. Wie aus selfhtml zitiert, sollen div's nicht an der von Dir angeregten Stelle stehen. Sie dienen eher als container, in dem wie in meinem Fall der Banner, die Liste und ein <p> reingepackt/gruppiert werden.

                              Des Weiteren soll lt. der selfhtml Vorgaben der <body> Text so angeordnet werden, wie die logische Reihenfolge ist und wie der logische Zusammenhang ist. Denn wenn z. B. das css in einer externen Datei ist und diese nicht geladen werden kann, dann muss der ungestaltete Text dennoch Sinn ergeben.

                              Deswegen habe ich mich für neun mal:

                                
                              <ul>  
                                
                              <li class="de">  
                              <h2>..</h2>  
                              <p>..</p>  
                              <p>..</p>  
                              </li>  
                                
                              <li class="mid">  
                              <p><span class="mid">..</span></p>  
                              <h2><span class="mid">..</span></h2>  
                              <p><span class="mid">..</span></p>  
                              </li>  
                                
                              <li class="en">  
                              <h2>..</h2>  
                              <p>..</p>  
                              <p>..</p>  
                              </li>  
                              </ul>  
                              
                              

                              entschieden und poste den Quelltext quasi als Änderungshistorie, da ich die Änderungen nicht archiviere und unsere Unterhaltung für andere Nutzerinnen und Nutzer nachvollziehbar bleibe.

                              li de und li en haben eine prozentuale width. li mid hat keine width, so dass sie als Puffer dient. So klappt es jetzt auch auf der kleinsten Zoomstufe des IE. Alles bleibt da, wo es zu erscheinen angedacht ist. Leider steht nun der Text von li mid nicht mehr mittig zwischen li de und li en, weil li mid nur so breit ist, wie der darin enthaltene Text.

                              Final benötige ich also eine Lösung, wie li mid den gesamten auf der jeweiligen Zoomstufe zur Verfügung stehenden Platz zwischen dem links floatenden und dem rechts floatendem li von sich ausnutzt.

                              1. Hallo? Ist da jemand? Gibt's hier niemand mehr in diesem Forum? Kennt sich keiner mit uls und lis aus? Ihr DIVd wohl alle, wa? Ihr seid ja verschachtelt! ;-)

                                Haja, ich fänd's schön, wenn man dem li mid eine dynamische Breite ( = den auf der jeweiligen Zoomstufe im jeweiligen browser zur Verfügung stehenden Platz) vom browser selbst zuweisen lassen könnte (width: auto; funktioniert nicht). Oder ist es möglich dem li mid zu erlauben sich unter das li en schieben zu dürfen?

                                Ansonsten klappt es jetzt auf allen Zoomstufen und in den auf meinem client installierten browsern, nur das die li mid halt nur so gross wie ihr jeweiliger Text ist und der "Lei-d/t-text" nun nicht mehr mittig zwischen li de und li en erscheint.

                            2. @@Matthias Apsel:

                              nuqneH

                              <div class="de"> <!-- Klassen benötigst du nur für IE < 7 -->

                              Denn andere Browser verstehen[1] die :lang()-Pseudoklasse. Die Textsprache sollte man sowieso[2] angeben[3]:

                              <div lang="de">

                              Qapla'

                              [1] Übersetzung in Arbeit
                              [2] Übersetzung in Arbeit
                              [3] Übersetzung in Arbeit

                              --
                              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                              (Mark Twain)
                              1. Grüße dich, Gunnar,

                                Denn andere Browser verstehen[1] die :lang()-Pseudoklasse.

                                <div lang="de">

                                IE7 verstünde (wie andere Browser) auch [lang=de], da er die Attributselektoren versteht.

                                Gruß.

                  2. Om nah hoo pez nyeetz, Martin Klinkmüller!

                    div.clearboth {
                    clear: both;
                    font-size: 0px;
                    line-height: 0px;
                    }

                    und
                    <div class="clearboth">&nbsp;</div>

                    Schrieb ich nicht, dass du (für moderne Browser) keine Klassen benötigst?

                    Das clearing kann jeweils das erste div-Element innerhalb eines Listen-Elements übernehmen.

                    Matthias

                    --
                    1/z ist kein Blatt Papier.

                    1. Schrieb ich nicht, dass du (für moderne Browser) keine Klassen benötigst?

                      .. bin ja dabei Dein Angebot umzusetzen, ist ja erstmal nur ein workaround ..

                  3. schlankerer, daher werde ich auch an seinem Vorschlag weiterbauen.

                    schlanke, schlankerer, am schlankerersten?

                    Gruß
                    Kalk

              2. Hallo,

                @Registrierung: Der Benutzername darf zur Zeit nur 15 Zeichen lang sein, so dass die Option des Schutzes meines vollständigen Namens entfällt.

                das stimmt so nicht. Du verwechselst anscheinend den Benutzernamen, der für die Anmeldung verwendet wird (und den außer dir und den Admins niemand kennt), und den öffentlich angezeigten Nick. Das sind zwei verschiedene Paar Stiefel.

                Der Benutzername muss sowieso eindeutig sein - es können nicht zwei Teilnehmer mit demselben Benutzernamen registriert sein. Dafür sind 15 Zeichen IMHO auch genug.

                Der "Anzeigename" (ich sag's mal so salopp) kann meines Wissens sehr lang sein - und das ist der Name, der auf Wunsch geschützt wird.

                Ich gehe davon aus, dass wie oben angesprochen meine "Handschrift" und mein Verweis auf die Möglichkeit der verifizierenden Anfrage per email ausreichend Schutz bieten.

                Mag sein. Ich verstehe aber ebensowenig wie Matthias, warum dir das so wichtig ist.

                Ciao,
                 Martin

                PS: Wenn einer der Moderatoren einen Namensmissbrauch feststellt, wie ich ihn im anderen Posting beschrieben habe, löschen wir den Beitrag in der Regel - gerade um Ärger wegen Rufschädigung und ähnlichen Unannehmlichkeiten zu vermeiden.

                --
                TEAM: Toll, Ein Anderer Macht's.
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          2. Hallo,

            By the way, wie stelle ich eigentlich sicher, dass hier nicht jemand anderes bei "Dein Name oder Nickname:" und "Deine E-Mail (optional):" meine Daten eingibt?

            indem du dich als Benutzer anmeldest (freiwillig, geht ja auch ohne), dann kannst du deinen gewählten und registrierten Nickname schützen. Dann kann kein anderer diesen Namen verwenden.

            Wir haben damit aber in letzter Zeit etwas Probleme - es gibt den einen oder anderen technisch versierten Störenfried, der die Tatsache ausnutzt, dass z.B. das griechische oder kyrillische Alphabet Zeichen enthält, die genauso aussehen wie unsere lateinischen Buchstaben (z.B. sieht der griechische Großbuchstabe Tau genauso aus wie unser T). So kann man leider das System - und die Nutzer - überlisten, bis jemand Verdacht schöpft und ganz genau aufpasst.

            Bei Zweifeln zwecks Authentizität bitte email an mich!

            Naja, wenn ein Teilnehmer hier schon längere Zeit dabei ist, erkennt man ihn oft an seiner "Handschrift", so dass man Fälschungen in diesem Fall oft erkennt oder zumindest vermutet. Bei neuen Teilnehmern, die man noch nicht so gut kennt, ist das natürlich problematisch.

            So long,
             Martin

            --
            Dieser Satz wurde in mühsamer Kleinstarbeit aus einzelnen Wörtern zusammengesetzt.
              (Hopsel)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. @@Martin Klinkmüller:

    nuqneH

    Beachte Cheatahs letzten Satz.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)