Umbrechen verhindern

[heinetz]

Hallo Forum,

ich krieg's nicht hin ;(

<div id="wrapper">  
 <div id="inner">  
  <a class="link" href="#"></a>  
  <a class="link" href="#"></a>  
  <a class="link" href="#"></a>  
 </div>  
</div>

#wrapper{  
width: 200px;  
overflow: hidden;  
}  
  
.link{  
width: 100px;  
}

Dieser Code führt bei mir dazu, dass nach dem zweiten Link umgebrochen wird und der 3. Link in der nächsten Zeile beginnt. Genau dieses Umbrechen möche ich verhindern. Das kriege ich bisher nur hin, indem ich #inner eine feste Breite von mindestens 300px gebe. Wie geht das anders?

danke für Tipps und

beste gruesse,
heinetz

[Matthias Apsel]

Om nah hoo pez nyeetz, heinetz!

Dieser Code führt bei mir dazu, dass nach dem zweiten Link umgebrochen wird und der 3. Link in der nächsten Zeile beginnt. Genau dieses Umbrechen möche ich verhindern. Das kriege ich bisher nur hin, indem ich #inner eine feste Breite von mindestens 300px gebe. Wie geht das anders?

Ja klar, stellt sich allerdings die Frage, wozu zwei umgebende Elemente notwendig sind. Eins davon klingt für mich auf jeden Fall nach nav. Warum gibst du eine feste Breite vor, wenn die Inhalte breiter sein sollen? Abgesehen davon, dass die Breitenangabe für inline-Elemente ignoriert wird. a.link scheint mir auch so ziemlich sinnfrei zu sein, was soll denn ein a-Element anderes sein, als ein Link?

display: inline-block in Verbindung mit white-space: nowrap wäre eine Lösung, die aber dazu führt, dass es nicht erreichbare Links gibt.

Matthias

[henetz]

Om nah hoo pez nyeetz, heinetz!

Dieser Code führt bei mir dazu, dass nach dem zweiten Link umgebrochen wird und der 3. Link in der nächsten Zeile beginnt. Genau dieses Umbrechen möche ich verhindern. Das kriege ich bisher nur hin, indem ich #inner eine feste Breite von mindestens 300px gebe. Wie geht das anders?

Ja klar, stellt sich allerdings die Frage, wozu zwei umgebende Elemente notwendig sind. Eins davon klingt für mich auf jeden Fall nach nav. Warum gibst du eine feste Breite vor, wenn die Inhalte breiter sein sollen? Abgesehen davon, dass die Breitenangabe für inline-Elemente ignoriert wird. a.link scheint mir auch so ziemlich sinnfrei zu sein, was soll denn ein a-Element anderes sein, als ein Link?

Das ganze wird der Pager für eine jQ-Slideshow. Der Pager besteht aus verlinkten Thumbnails ('<a class="link">'). Die Slideshow hat eine feste Breite, der Pager soll die selbe Breite haben ('#wrapper{width:300px}'). Da alle Thumbnails nebeneinander breiter sind, würden sie normalerweise umbrechen. Statt dessen sollen aber alle nebeneinander dargestellt werden, die durch die Angabe ('#wrapper{overflow: hidden;}') nicht sichtbaren werden dann mit jQ in's Sichtfeld gescrollt.

display: inline-block in Verbindung mit white-space: nowrap wäre eine Lösung, die aber dazu führt, dass es nicht erreichbare Links gibt.

Ja, genau das hatte ich auch gedacht. Die a-Elemente haben die Eigenschaft display:block. Das hatte ich nur nicht explizit erwähnt.

martin

[Matthias Apsel]

Om nah hoo pez nyeetz, henetz!

display: inline-block in Verbindung mit white-space: nowrap wäre eine Lösung, die aber dazu führt, dass es nicht erreichbare Links gibt.

Ja, genau das hatte ich auch gedacht. Die a-Elemente haben die Eigenschaft display:block. Das hatte ich nur nicht explizit erwähnt.

und? funktioniert?

Matthias

[heinetz]

Om nah hoo pez nyeetz, henetz!

display: inline-block in Verbindung mit white-space: nowrap wäre eine Lösung, die aber dazu führt, dass es nicht erreichbare Links gibt.

Ja, genau das hatte ich auch gedacht. Die a-Elemente haben die Eigenschaft display:block. Das hatte ich nur nicht explizit erwähnt.

und? funktioniert?

leider nein ;(

[Matthias Apsel]

Om nah hoo pez nyeetz, heinetz!

#inner {  
  overflow: hidden;  
  white-space: nowrap;  
}  
  
.link {  
  display: inline-block;  
}

Dann darfst du natürlich auch keinen white-space haben, also nicht

<div id="inner">  
  <a href="#">Linktext</a>  
  <a href="#">Linktext</a>  
  <a href="#">Linktext</a>  
</div>

sondern

<div id="inner">  
  <a href="#">Linktext</a><a href="#">Linktext</a><a href="#">Linktext</a>  
</div>

oder beispielsweise auch den white-space innerhalb der Tags notieren

<div id="inner">  
   <a href="#">Linktext</a  
  ><a href="#">Linktext</a  
  ><a href="#">Linktext</a>  
</div>

Matthias

[heinetz]

danke, ich hab den Fehler schon gefunden. Die a-Elemente hatten noch ein float:left.