zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation Horizontal bei Zoom "Zeilenumbruch"

Antwort
Seite 1 von 2 1 2
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.11.2010, 22:28
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 27.11.2010
Beiträge: 7
Aslof befindet sich auf einem aufstrebenden Ast
Standard Navigation Horizontal bei Zoom "Zeilenumbruch"
Hey

Ich hab jetzt schon eine halbe ewigkeit gesucht und bin leider nicht fündig geworden, deshalb frag ich jetzt mal nach.

Also die Sache sieht so aus:

Ich habe mir einige Code-schnippsel für eine Browserbar auf dieser Seite hier:

CSS DropDown Menu Tutorial Page 2

zusammengesucht, da ich das Problem mit dem Zeilenumbruch beim Zoomen schon bei meiner Eigenentwicklung vorher hatte, nun hab ich da aber das gleiche Problem wie die Dame bei diesem Beispiel:

Horizontal CSS Menu Tutorial ~ Example Page 7

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Horizontal CSS Menu Tutorial ~ Example Page 7</title>
<meta name="description" content="Example 7 - CSS Horizontal DropDown &amp; Popout Menu Tutorial"></meta>
<link rel="shortcut icon" href="../../../favicon.ico" />
<link href="tanfa.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body id="www-tanfa-co-uk">
<div id="pagetop">
<a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>

<h1>CSS Drop Down Menu Tutorial Code</h1>
<h2>Page 7 - Full Working Example</h2>
<h3>&laquo; <a href="tutorial-h.html#hs7">return to tutorial</a> :: Stages 
[<a href="hs1.html" title="Horizontal Example 1">1</a>] 
[<a href="hs2.html" title="Horizontal Example 2">2</a>] 
[<a href="hs3.html" title="Horizontal Example 3">3</a>] 
[<a href="hs4.html" title="Horizontal Example 4">4</a>] 
[<a href="hs5.html" title="Horizontal Example 5">5</a>] 
[<a href="hs6.html" title="Horizontal Example 6">6</a>] 
[7]

</h3>
</div>
<!-- start menu HTML -->
<div id="menu">
<ul>
  <li><h2>CSS Drop Down Menus</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
        <ul>
          <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>

          <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>

  <li><h2>Vertical CSS Pop-Out Menu</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
      <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
        <ul>
          <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
            <ul>

              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
            </ul>

          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Horizontal Drop &amp; Pop Menu</h2>

    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
      <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
        <ul>
          <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
            <ul>
              <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>

              <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			
              <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
              <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
              <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			
              <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>

        </ul>
      </li>
    </ul>
  </li>
</ul>							
</div>
<div>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="adbreak" style="text-align: center; margin: 100px 60px; 0">
<h5>"A word from our sponsors...."</h5>
<script type="text/javascript"><!--
ch_client = "Suzy";
ch_width = 468;
ch_height = 180;
ch_non_contextual = 1;
//var ch_queries = new Array("digital cameras", "ipod mini", "sony playstation", "dell laptop");
var ch_queries = new Array("css");
var ch_selected=Math.floor((Math.random()*ch_queries.length));
ch_query = ch_queries[ch_selected];
//--></script>

<script  src="http://scripts.chitika.net/eminimalls/mm.js" type="text/javascript">
</script>
</div>
</body>
</html>
D.h. Beim Hineinzoomen, zuvielen li-Punkten oder zu kleiner Auflösung bricht das Ding einfach die Zeile um und ich hab keine Ahnung warum.

Es wäre einfach genial, wenn mir irgendjemand helfen könnte.

Mfg Aslof
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.11.2010, 02:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Ohne width oder min-width für einen Vorfahren schwindet bei kleiner werdendem Viewport halt der Platz, den die Floats zum Nebeneinanderstehen brauchen. Alternative: als CSS-Tabelle darstellen (siehe FAQ).

Übrigens: Das Markup ist ungeeignet - lauter ul stehen nebeneinander mit nur je einem li. Richtig ist eine ul.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Geändert von heiko_rs (28.11.2010 um 02:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.11.2010, 08:28
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 27.11.2010
Beiträge: 7
Aslof befindet sich auf einem aufstrebenden Ast
Standard
Es gibt also keine Möglichkeit, die Darstellung so einzurichten, dass es keinen Automatischen Zeilenumbruch gibt?
Mit Zitat antworten
  #4 (permalink)  
Alt 28.11.2010, 13:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Zitat:
Zitat von heiko_rs Beitrag anzeigen
width oder min-width für einen vorfahren
Zitat:
Zitat von heiko_rs Beitrag anzeigen
css-tabelle
. .
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 28.11.2010, 22:00
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 27.11.2010
Beiträge: 7
Aslof befindet sich auf einem aufstrebenden Ast
Standard
Darunter verstehe ich, ohne dass ich die gesamte Funktion wieder ummodeln muss, das mit width und min-width hatte keinen Erfolg

Trotzdem Danke
Mit Zitat antworten
  #6 (permalink)  
Alt 28.11.2010, 22:05
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Dann hast Du etwas falsch gemacht. Poste mal einen Link auf eine Testseite.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.11.2010, 22:24
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 27.11.2010
Beiträge: 7
Aslof befindet sich auf einem aufstrebenden Ast
Standard
So bitte schön, hab bei jedem css ein width eingefügt

Horizontal CSS Menu Tutorial ~ Example Page 7

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<title>Horizontal CSS Menu Tutorial ~ Example Page 7</title>
<meta name="description" content="Example 7 - CSS Horizontal DropDown &amp; Popout Menu Tutorial"></meta>
<link rel="shortcut icon" href="../../../favicon.ico" />
<link href="tanfa.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
width: 200px;
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
width: 200px;
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
width: 200px;
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
width: 200px;
color: #a00;
background: #fff;
}

#menu li {
width: 200px;
position: relative;}

#menu ul ul {
width: 200px;
position: absolute;
z-index: 500;
}

#menu ul ul ul {
width: 200px;
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
width: 200px;
display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
width: 200px;
display: block;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body>
<!-- start menu HTML -->
<div id="menu">
<ul>
  <li><h2>CSS Drop Down Menus</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
        <ul>
          <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>

          <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>

  <li><h2>Vertical CSS Pop-Out Menu</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
      <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
        <ul>
          <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
            <ul>

              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
            </ul>

          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Horizontal Drop &amp; Pop Menu</h2>

    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
      <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
        <ul>
          <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
            <ul>
              <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>

              <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			
              <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
              <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
              <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			
              <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>

        </ul>
      </li>
    </ul>
  </li>
</ul>							
</div>
</body>
</html>
Für Tipps bin ich immer dankbar
Mit Zitat antworten
  #8 (permalink)  
Alt 28.11.2010, 22:30
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Zitat:
Zitat von heiko_rs Beitrag anzeigen
Ohne width oder min-width für einen Vorfahren
Ideal wäre hier min-width für body.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 28.11.2010, 22:34
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 27.11.2010
Beiträge: 7
Aslof befindet sich auf einem aufstrebenden Ast
Standard
WOW Einfach Toll so eine einfache Lösung für das Problem ich dachte schon, das ich im falschen Film bin. Wieviele Semester Informatik muss man den für so geniale Tipps studiert haben ?

Vielen Dank für die Schnelle hilfe thx
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.11.2010, 22:36
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Zitat:
Zitat von Aslof Beitrag anzeigen
Wieviele Semester Informatik muss man den für so geniale Tipps studiert haben ?
Keines
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
Antwort
Seite 1 von 2 1 2

Stichwörter
css, navigation, navigationsmenü, navigationsproblem, zeilenumbruch, zeilenumbruchsfehler

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 15:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:54 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023