problem med tekst der floater

Hej scootergrisen.

Det der sker, er at overhovedlogoholdermidten tager width efter hvor lang teksten er. (Ergo tager den det resterende plads på denne "række" i din DOM)

Du er nødt til at sætte en fast bredde på det område hvor din tekst er, eller sørge for at noget af den cutter af, evt. afhængig af screen.width (js)

Du kan også rykke din overhovedlogoholderhojre op over overhovedlogoholdermidten i din DOM - så er du sikker på at søg og dine ikoner er på samme linje, dog placerer teksten sig på en ny linje, men passer bredden, forholder den sig relativt højre-stillet i forhold til overhovedlogoholdervenstre

Ergo må du blive nødt til at skære lidt af teksten af, relativt til skærmstørrelsen, for at give brugeren den bedste oplevelse.

Jeg har prøvet at stille et muligt eksempel op for dig her - blot copy pastet fra Google Chromes udviklerværktøj:

 <div id="overhovedlogoholder">
 
          
 
             <div id="overhovedlogoholderhojre">
 
             <div style="white-space:nowrap;"><form action="scooterhjemmeside/sog.php" method="post" enctype="multipart/form-data"><div style="clear:both;"></div><div style="display:none;"><input type="hidden" name="funktion" value="sog"></div><div style="display:inline;" class="inputinline"><label for="sogetekst"><span class="labelholderleft" style="display:none;">Søg :<br></span></label><input type="text" maxlength="100" id="sogetekst" name="sogetekst" value="Søg..." size="20" class="inputtext" style="width:126px; margin-right:4px; border-radius:5px;" onfocus="if(this.value=='Søg...')this.value='';" ondrop="if(this.value=='Søg...')this.value='';" onblur="if(this.value=='')this.value='Søg...';"></div><div style="display:inline;" class="inputinline"><input type="image" name="sog_sendbilled" src="/generelt/billeder/forstorrelsesglas.png" alt="X" class="inputimage"></div></form><div style="clear:both;"></div></div>
 
          </div><div id="overhovedlogoholdervenstre">
 
             <span id="smaikoner">
                   <span title="Scootergrisen" id="aktuelikon"><a href="http://scootergrisen.dk/scooterhjemmeside/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_scootergrisen.png" alt="Scootergrisen" title="Scootergrisen" style="width:16px; height:16px;" class="funnybunny"></a></span>
                   <span title="HTMLgrisen"><a href="http://scootergrisen.dk/htmlgrisen/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_htmlgrisen.png" alt="HTMLgrisen" title="HTMLgrisen" style="width:16px; height:16px;" class="funnybunny"></a></span>
                   <span title="Forum"><a href="http://scootergrisen.dk/forum/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_forum.png" alt="Forum" title="Forum" style="width:16px; height:16px;" class="funnybunny"></a></span>
                   <span title="Tilfældig side"><a href="http://scootergrisen.dk/scooterhjemmeside/tilfeldig.php"><img src="http://scootergrisen.dk/generelt/billeder/ikon_tilfeldig.png" alt="Tilfældig side" title="Tilfældig side" style="width:16px; height:16px;" class="funnybunny"></a></span>
                   <span title="Skriv en besked til mig som laver hjemmesiden"><a href="http://scootergrisen.dk/scooterhjemmeside/kontakt.php"><img src="http://scootergrisen.dk/generelt/billeder/ikon_kontakt.png" alt="Skriv en besked til mig som laver hjemmesiden" title="Skriv en besked til mig som laver hjemmesiden" style="width:16px; height:16px;" class="funnybunny"></a></span>
             </span>
 
          </div><div id="overhovedlogoholdermidten" style="
     min-width: 900px;
     max-width: 70%;
     overflow: hidden;
 "><a href="http://scootergrisen.dk/scooterhjemmeside/altomandre.php" style="">Andre mærker - Benda Scoot - Benmal LB-852 - Cityscooter Freak - Hooper One - Listo - Pexma - RMC Zan Zara - Shineray - Stranger X-fight - Superbike XT50QT-2 - Tisong TM-300 - Veken VK-M50 - Xmotos XB31 - Xmotos XB81</a><span style="margin-left:10px; margin-right:10px; border-right:1px solid #888;"></span>Scootergrisen</div>
 
          
 
          
 
       </div>

// Ændret grundet et enkelt tomt style-tag, ingen grund til at det skulle være der.

Okay det ser bedre ud med ikoner og søgefelt på samme niveau.
Men jeg tror jeg må dropper det med at teksten skal wrappe ned på næste linie fordi det bliver ikke godt.

Så hvordan får jeg det så det bare er på samme niveau det hele og teksten bare klippes hvis den er for lang ?

Jeg har lavet en lille løsning til dig, dog er den ikke tilregnelig hvis man zoomer ind efter siden er loadet. Den udregner blot simpelt hvor lang overhovedlogoholdermidten skal være, ved at vi tager overhovedlogoholder - overhovedlogoholdervenstre - overhovedlogoholderhojre - 50 (lidt spacing). Bare en simpel javascript løsning.

Live-preview: http://nicklas.mydom.dk/scootergrisen_test.html

Source:

 <!DOCTYPE html> 
 <html>
     <head>
 <style>
 
 #overhovedlogoholder {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
 background: url(http://scootergrisen.dk/billeder/baggrund0001.png) repeat-x left center;
 border-radius: 5px;
 padding: 5px;
 overflow: hidden;
 }
 
 #overhovedlogoholderhojre {
 display: block;
 float: right;
 }
 
 #overhovedlogoholdervenstre {
 display: inline;
 float: left;
 font-family: consolas;
 font-size: medium;
 }
 
 #overhovedlogoholdermidten {
 float: left;
 display: block;
 font-size: 12pt;
 font-family: tahoma,verdana,sans-serif;
 letter-spacing: 0.1em;
 padding: 5px;
 height: 12pt;
 overflow: hidden;
 }
     
 </style>
     </head>
     <body>
     <div id="overhovedlogoholder">
  
           
  
              <div id="overhovedlogoholderhojre">
  
              <div style="white-space:nowrap;"><form action="scooterhjemmeside/sog.php" method="post" enctype="multipart/form-data"><div style="clear:both;"></div><div style="display:none;"><input type="hidden" name="funktion" value="sog"></div><div style="display:inline;" class="inputinline"><label for="sogetekst"><span class="labelholderleft" style="display:none;">Søg :<br></span></label><input type="text" maxlength="100" id="sogetekst" name="sogetekst" value="Søg..." size="20" class="inputtext" style="width:126px; margin-right:4px; border-radius:5px;" onfocus="if(this.value=='Søg...')this.value='';" ondrop="if(this.value=='Søg...')this.value='';" onblur="if(this.value=='')this.value='Søg...';"></div><div style="display:inline;" class="inputinline"><input type="image" name="sog_sendbilled" src="http://scootergrisen.dk/generelt/billeder/forstorrelsesglas.png" alt="X" class="inputimage"></div></form><div style="clear:both;"></div></div>
  
           </div><div id="overhovedlogoholdervenstre">
  
              <span id="smaikoner">
                    <span title="Scootergrisen" id="aktuelikon"><a href="http://scootergrisen.dk/scooterhjemmeside/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_scootergrisen.png" alt="Scootergrisen" title="Scootergrisen" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="HTMLgrisen"><a href="http://scootergrisen.dk/htmlgrisen/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_htmlgrisen.png" alt="HTMLgrisen" title="HTMLgrisen" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="Forum"><a href="http://scootergrisen.dk/forum/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_forum.png" alt="Forum" title="Forum" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="Tilfældig side"><a href="http://scootergrisen.dk/scooterhjemmeside/tilfeldig.php"><img src="http://scootergrisen.dk/generelt/billeder/ikon_tilfeldig.png" alt="Tilfældig side" title="Tilfældig side" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="Skriv en besked til mig som laver hjemmesiden"><a href="http://scootergrisen.dk/scooterhjemmeside/kontakt.php"><img src="http://scootergrisen.dk/generelt/billeder/ikon_kontakt.png" alt="Skriv en besked til mig som laver hjemmesiden" title="Skriv en besked til mig som laver hjemmesiden" style="width:16px; height:16px;" class="funnybunny"></a></span>
              </span>
  
           </div><div id="overhovedlogoholdermidten"><a href="http://scootergrisen.dk/scooterhjemmeside/altomandre.php" style="">Andre mærker - Benda Scoot - Benmal LB-852 - Cityscooter Freak - Hooper One - Listo - Pexma - RMC Zan Zara - Shineray - Stranger X-fight - Superbike XT50QT-2 - Tisong TM-300 - Veken VK-M50 - Xmotos XB31 - Xmotos XB81</a><span style="margin-left:10px; margin-right:10px; border-right:1px solid #888;"></span>Scootergrisen</div>
  
           
  
           
  
        </div>
         <script type="text/javascript">
             var midt = document.getElementById('overhovedlogoholdermidten');
             var venstre = document.getElementById('overhovedlogoholdervenstre');
             var hojre = document.getElementById('overhovedlogoholderhojre');
             var over = document.getElementById('overhovedlogoholder');
             midt.style.width = over.offsetWidth - venstre.offsetWidth - hojre.offsetWidth - 50 + 'px';
         </script>
     </body>
 </html>

// Rettet lille notits i min besked (bold text)

Tak det er sådan jeg nok vil have det.
Jeg nægter bare at bruge javascript til det.

Det kan gøres i CSS men jeg er bare ikke så god til det og sidder konstant og gætte mig frem til hvordan jeg skal lave det.

Det var ellers den bedste løsning jeg lige kunne finde på. Selvfølgelig kan det gøres i CSS, men her leger vi nok med max-width og procenter, og ja.. Egentlig en fin nok løsning, men vil mene at den anden gør det lidt bedre i forhold til pladsen der udnyttes.

Men alt i alt - her har du et forslag (ekstremt rodet, bare lidt redigering på det andet jeg sendte). Dog stadig samme lille bug - "float:left;" sektionen går en linje ned, når der bliver zoomet langt nok ind.

http://nicklas.mydom.dk/scootergrisen_css.html

 <!DOCTYPE html>
 <html><head>
 <style>
 #overhovedlogoholder {
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
 background: url(http://scootergrisen.dk/billeder/baggrund0001.png) repeat-x left center;
 border-radius: 5px;
 padding: 5px;
 overflow: hidden;
 }
 
 #overhovedlogoholderhojre {
 float: right;
 }
 
 #overhovedlogoholdervenstre {
 font-family: consolas;
 font-size: medium;
 float: left;
 }
 
 #overhovedlogoholdermidten {
 font-size: 12pt;
 font-family: tahoma,verdana,sans-serif;
 letter-spacing: 0.1em;
 padding: 5px;
 height: 12pt;
 overflow: hidden;
 }
     
 </style>
     </head>
     <body>
     <div id="overhovedlogoholder" style="
 ">
  
           
  
              <div style="float: right;"><div id="overhovedlogoholderhojre">
  
              <div style="white-space:nowrap;"><form action="scooterhjemmeside/sog.php" method="post" enctype="multipart/form-data"><div style="clear:both;"></div><div style="display:none;"><input type="hidden" name="funktion" value="sog"></div><div style="display:inline;" class="inputinline"><label for="sogetekst"><span class="labelholderleft" style="display:none;">Søg :<br></span></label><input type="text" maxlength="100" id="sogetekst" name="sogetekst" value="Søg..." size="20" class="inputtext" style="width:126px; margin-right:4px; border-radius:5px;" onfocus="if(this.value=='Søg...')this.value='';" ondrop="if(this.value=='Søg...')this.value='';" onblur="if(this.value=='')this.value='Søg...';"></div><div style="display:inline;" class="inputinline"><input type="image" name="sog_sendbilled" src="http://scootergrisen.dk/generelt/billeder/forstorrelsesglas.png" alt="X" class="inputimage"></div></form><div style="clear:both;"></div></div>
  
           </div></div><div style="float: left;max-width: 85%;">
 <div id="overhovedlogoholdervenstre">
  
              <span id="smaikoner">
                    <span title="Scootergrisen" id="aktuelikon"><a href="http://scootergrisen.dk/scooterhjemmeside/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_scootergrisen.png" alt="Scootergrisen" title="Scootergrisen" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="HTMLgrisen"><a href="http://scootergrisen.dk/htmlgrisen/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_htmlgrisen.png" alt="HTMLgrisen" title="HTMLgrisen" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="Forum"><a href="http://scootergrisen.dk/forum/"><img src="http://scootergrisen.dk/generelt/billeder/ikon_forum.png" alt="Forum" title="Forum" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="Tilfældig side"><a href="http://scootergrisen.dk/scooterhjemmeside/tilfeldig.php"><img src="http://scootergrisen.dk/generelt/billeder/ikon_tilfeldig.png" alt="Tilfældig side" title="Tilfældig side" style="width:16px; height:16px;" class="funnybunny"></a></span>
                    <span title="Skriv en besked til mig som laver hjemmesiden"><a href="http://scootergrisen.dk/scooterhjemmeside/kontakt.php"><img src="http://scootergrisen.dk/generelt/billeder/ikon_kontakt.png" alt="Skriv en besked til mig som laver hjemmesiden" title="Skriv en besked til mig som laver hjemmesiden" style="width:16px; height:16px;" class="funnybunny"></a></span>
              </span>
  
           </div>
 <div id="overhovedlogoholdermidten"><a href="http://scootergrisen.dk/scooterhjemmeside/altomandre.php" style="">Andre mærker - Benda Scoot - Benmal LB-852 - Cityscooter Freak - Hooper One - Listo - Pexma - RMC Zan Zara - Shineray - Stranger X-fight - Superbike XT50QT-2 - Tisong TM-300 - Veken VK-M50 - Xmotos XB31 - Xmotos XB81</a><span style="margin-left:10px; margin-right:10px; border-right:1px solid #888;"></span>Scootergrisen</div>
 </div><div style="clear: both;"></div>
  
           
  
           
  
        </div>
         
     
 </body></html>

// Tilpas det ved at ændre max-width i den div der floater left. - Hvis det ikke siger sig selv. (kun procent, ellers holder det ikke..)

Nå nu tror jeg at jeg har fundet noget jeg kan leve med.

Svært og få det altsammen perfekt som man vil.
Men tror det er så godt det kan blive nu så bliver lange tekster dog klippet af i stedet for at wrappe så man kan se det hele men jeg tror det her er det bedst jeg kan komme frem til da jeg også gerne vil have det kompakt.

Sørg Lige for at få noget wordwrap på, så der ikke bare står overskårne bogstaver.

Men det skal jo ikke wrappes til næste linie.

Sørg for en konstant højde og hide overflow, så ser brugeren det ikke.

Edit:

Skide lækkert med den text-overflow: ellipsis; du har smidt ind! Kendte jeg ikke lige til, men det ser godt ud!

Det var en anden der forslog den text-overflow.
Jeg har ellers heller aldrig brugt den.

Og man kan faktisk selv bestemme om der skal være de tre punkttummer som der er stanard eller hvad der skal være.

For eksempel text-overflow:' ***';

Angående at wrapper per ord så syntes jeg ikke det er godt specielt når der er lange ord, så syntes det er bedre at klippe i det.