zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menüleiste im Blocksatz

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.05.2010, 13:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2006
Beiträge: 7
Lotta06 befindet sich auf einem aufstrebenden Ast
Standard Menüleiste im Blocksatz

Hi,
ich habe einen Entwurf umzusetzen, der eine Menüleiste im Blocksatz vorsieht. D.h. es gibt einen Balken, der 5 Menü-Punkte enthält, Der erste sitzt linksbündig, der letzte rechtsbündig und die Zwischenräume sind alle gleich. Das ganze soll in ein CMS, sodass nach einer Änderung die Zwischenräume automatisch angepasst werden.
Ich habe schon etliches ausprobiert, aber die Zwischenräume bei unterschiedlichen Wortlängen bekomme ich nicht ausgeglichen.

Hat jemand einen Tipp wie das umzusetzen ist, bzw. ob das überhaupt geht.

Viele Grüße von
Lotta
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.05.2010, 14:01
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Was hast du denn "etliches" bisher probiert?

Nebenbei hast du das Stichwort für einen Lösungsansatz bereits selbst geliefert: Blocksatz (=text-align: justify).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.05.2010, 14:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2006
Beiträge: 7
Lotta06 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
Blocksatz (=text-align: justify).
Das Problem ist nur, dass es keinen einzeiligen Blocksatz gibt! Erst wenn die erste Zeile gefüllt ist, und das nächte Wort nicht mehr in die Zeile passt werden die Abstände vermittelt. Vorher ist allen rechtsbündig.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.05.2010, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Lotta06 Beitrag anzeigen
Das Problem ist nur, dass es keinen einzeiligen Blocksatz gibt!
Genau.
Man könnte dafür sorgen, dass immer etwas in der zweiten Zeile steht.

Wie soll man dir denn was konkretes sagen können, wenn du nicht herzeigst, worum es dir geht?
Mit Zitat antworten
  #5 (permalink)  
Alt 18.05.2010, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2006
Beiträge: 7
Lotta06 befindet sich auf einem aufstrebenden Ast
Standard

Einen Link zur Seite darf ich leider nicht posten.
Ich habe die relevanten Stellen aus CSS und HTML kopiert.

Bei der jetzigen unbefriedigenden Lösung habe ich den li Größenangaben in % gegeben, wobei die äußeren kleiner sind, da sie ja keinen Außenabstand haben.

Das ganze sollte dann soweit funktionieren, dass der Kunde die Texte ändern kann und die Abstände automatisch ausgeglichen werden.

HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title>

<style type="text/css" media="screen"> 
<!-- 

#wrapper{
	margin:35px auto 20px;
	width:945px;
}

#header {
	height: 73px;
	width: 100%;
	position: relative;
	top: 0px;
	background-color: #cccccc;
}
#logo {
	height: 73px;
	width: 92px;
	float: left;
}
#header li {
	float: left;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	display: inline; 
	text-align: center;
	width:30%;
	line-height: 16px
}

#header ul {
	padding: 29px 30px 0px 0px;
	margin:0;
	list-style-position: outside;
	list-style-type: none;
	width:753px;
	float: right;
}
.first {
	text-align: left !important;
	width:20% !important;
}
.last {
	text-align: right !important;
	width:20% !important;
}

#header a {
	color: #ffffff;
}
-- >
</style>

</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="/pfad/img_layout/head_logo.gif" alt="" height="73" width="92" name="logo" /></div>
      <ul>
        <li class="first"><a href="#">Kurz</a></li>
        <li ><a href="#">Langer Link</a></li>
        <li ><a href="#">Läääääääääängerer Link</a></li>
        <li class="last"><a href="#">Langer Link</a></li>
      </ul>

</div>

</div>
</body>
</html>
Mit Zitat antworten
  #6 (permalink)  
Alt 18.05.2010, 15:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Doctype fehlt.

Du floatest die li-Elemente, da geht kein Blocksatz. Du brauchst inline oder inline-block.
Ich habe dir bereits den Tipp gegeben, eine zweite Zeile zu erzeugen. In modernen Browsern ginge das sogar ohne Zusatzmarkup mit generated content.
Code:
#header ul:after {
    content:"Ich bin die zweite Zeile.";
    display:inline-block;
    width:100%;
    }
Mit Zitat antworten
  #7 (permalink)  
Alt 18.05.2010, 22:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2006
Beiträge: 7
Lotta06 befindet sich auf einem aufstrebenden Ast
Standard

Hi Fricca,
vielen Dank für deine Hilfe. Ich habe es jetzt hinbekommen mit der zweiten Zeile, indem ich ein List-Element angehängt habe, das ein transp. Gif enthält und so breit ist wie die Liste.
Bei den restlichen List-Elementen werden die Abstände jetzt schön vermittelt.

Einen Schönheitsfehler hat das ganze noch, wenn ein List-Element mehrere Wörter enthält, werden diese auch auseinander gezogen. Man muss ein Geschütztes Leerzeichen einfügen um das zu vermeiden.

Hast du noch einen Tipp um das zu umgehen?

Viele Grüße
Lotta


HTML-Code:
<html>
<head>
<style type="text/css" media="screen"> 
<!-- 

#wrapper{
	margin:35px auto 20px;
	width:945px;
}

#header {
	height: 73px;
	width: 100%;
	position: relative;
	top: 0px;
	background-image: url(img_layout/head_bg_nav.gif);


}
#logo {
	position: absolute;
	height: 73px;
	width: 92px;
	top: 0;
	left: 0;
}
#header li {

	padding: 0px;
	margin: 0px 0px 0px 0px;
	display: inline; /* Fix for doubled margin IE Bug */

	line-height: 16px;
	text-align: left !important;
}

#header ul {
	position: absolute;
	padding: 29px 30px 0px 0px;
	margin:0;
	list-style-position: outside;
	list-style-type: none;
	width:753px;
	text-align: justify;
	display:inline-block;
	top: 0;
	right: 0;
}
#header a {
	color: #ffffff;
}
-- >
</style>

</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="/img_layout/head_logo.gif" alt="" height="73" width="92" name="logo" /></div>
      <ul>
        <li ><a href="#">Link1 </a> </li>
        <li ><a href="#">Link2&nbsp;lang </a> </li>
        <li ><a href="#">Link3&nbsp;lääääääänger </a> </li>
        <li ><a href="#">Link4&nbsp;lang </a> </li>
        <li><img src="img_layout/spacer.gif" width="750" height="1"></li>
      </ul>

</div>

</div>
</body>
</html>
Mit Zitat antworten
  #8 (permalink)  
Alt 19.05.2010, 10:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

inline-block für die li-Elemente sollte helfen, ist aber browserübergreifend mühsamer. Wenn du die Möglichkeit hast, den Whitespace in den Links durch &nbsp; zu ersetzen, dann ist das wohl das einfachste.

Bitte: Schau dir den Code, den du postest, doch selbst mal im Browser an. Wir sehen deine (Hintergrund-)Bilder nicht!
Es fehlt noch immer ein Doctype. Nein, das ist nicht egal (Google: "Doctype Switch").
Ein Stylesheet musst du nicht auskommentieren. Aber wenn du es tust, dann achte darauf, dass die Kommentare korrekt sind. Bei meinen Tests habe ich im IE erstmal gar nichts gesehen.

Geändert von fricca (19.05.2010 um 11:05 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 20.05.2010, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2006
Beiträge: 7
Lotta06 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Bitte: Schau dir den Code, den du postest, doch selbst mal im Browser an. Wir sehen deine (Hintergrund-)Bilder nicht!
Es fehlt noch immer ein Doctype. Nein, das ist nicht egal (Google: "Doctype Switch").
Ein Stylesheet musst du nicht auskommentieren. Aber wenn du es tust, dann achte darauf, dass die Kommentare korrekt sind. Bei meinen Tests habe ich im IE erstmal gar nichts gesehen.
Sorry, da war ich beim kopieren des Codes wohl etwas schlampig und gelobe Besserung.
Ich habe jetzt noch ein "display: inline-block" zu "#header a" hinzugefügt, damit bleiben auch Links mit mehreren Wörtern zusammen.

Vielen Dank noch einmal für deine Hilfe.
Grüße Lotta
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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
Menüleiste einbinden Tim0 CSS 4 21.05.2011 14:10
suche eine bestimmte menüleiste ? ModelWizko Javascript & Ajax 15 01.10.2010 19:54
Ausrichtung in Menüleiste heho CSS 8 08.06.2010 21:29
Eigene Menüleiste keyboardY CSS 4 25.01.2010 22:06
Einstieg in Css, Einfügen einer Menüleiste Calistus CSS 3 27.07.2006 15:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:00 Uhr.