Listen Menue Problem

Muckel

Guten Abend,

in folgendem div

Code

#menue {
  position:absolute;
  top:110px;
  left:280;
  right:0;
  background:transparent;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  height:35px; 
  text-align:center;
}

Alles anzeigen

habe ich dieses Listen menue:

Code

/*die Menues */
#menue ul{
        list-style:none;
        text-align:center;
        height:32px;
}
#menue li{
        float:left;
}
#menue li a{
        display:block;
        width:100px;
        height:30px;
        line-height:30px;
        background:/*#999999*/transparent;
        color:#000000;
        text-decoration:none;
        font-weight:bold;
        font-size:15px;
        border: 1px solid #000000;
}
#menue li a:hover, li#active a{
        background:#eaeaea;
        color:#000000;
}

Alles anzeigen

Das Funktioniert so weit auch - lediglich möchte ich die entstandenen blöcke (=Listenpunkte) mittig in dem div anordnen - zurzeit sind sie links an geordnet. Wie kann ich das Problem lösen?

Gruß und Danke
Muckel

Edit: Ich würde auch gerne wissen, ob ich in dem div welches ein display block hat auch etwas in der Höhe zentrieren kann - geht das?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

die a mit display block kannst Du mit padding-top und padding-bottom vertical zentrieren, line-height hilft dabei auch

Listenpunkte zentriert

ul margin: 0 auto und eine Breite geben,

könnte funktionieren

lg

Muckel

Guten Abend,

es hat funktioniert:

Code

/*Kopfmenue*/
#headmenue ul{
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  height:35px; /*Höhe*/
  margin: 0 auto;
  width:800px;
}


#headmenue li{
  float:left;
  border-left: 1px solid #000000; /*Rahmen*/
  border-right: 1px solid #000000; /*Rahmen*/
}


#headmenue li a{
  display:block; /*Art der Anzeige*/
  width:100px; /*Breite*/
  height:35px; /*Höhe*/
  line-height:35px; /*Zeilen Höhe*/
  background:#cccccc; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:15px; /*Schrift Größe*/
  /*border-left: 1px solid #000000;
  border-right: 1px solid #000000;*/
}


#headmenue li a:hover, li#active a{
  background:#dedede;
  color:#000000;
}

Alles anzeigen

Die Breite im ul muss aber größer sein, als die Gesamtbreite der einzelnen Punkte. Wählt man sie kleiner, so baut sich das ganze nach untenhin auf. Mit einer Prozent angabe hat es bei mir und dem Firefox leider nicht funktioniert.

Gruß Muckel

Muckel

Allerdings hat sich jetzt noch ein Problem ergeben. Und zwar habe ich in meinem footer auch ein Listenmenue eingebaut, ebenfalls zentriert:

HTML

<div id="footer">
  <ul>
    <li><a href="#">Drucken</a></li>
    <li><a href="#">PDF-erstellen</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">Anmelden</a></li>
  </ul>
  <p>Hier steht dann Text</p>
</div>

Code

#footer {
  position:absolute;
  left:200px;/*Abstand*/
  right:200px;/*Abstand*/
  bottom:0;/*Abstand*/
  margin:o;/*Außenabstand*/
  padding:0;/*Innenabstand*/
  height:30px;
  line-height:15px;
  border-top: 1px solid #000000;
  overflow:hidden;/*Scralbalken*/
  background-color:#cccccc; /*Hintergrundfarbe*/
}




/*Fußmenue*/
#footer ul{
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  margin: 0 auto;
  width:800px;
}


#footer li{
  float:left;
  border-left: 1px solid #000000; /*Rahmen*/
  border-right: 1px solid #000000; /*Rahmen*/
  border-bottom: 1px solid #000000; /*Rahmen*/
}


#footer li a{
  display:block; /*Art der Anzeige*/
  width:100px; /*Breite*/
  line-height:15px; /*Zeilen Höhe*/
  background:#cccccc; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:12px; /*Schrift Größe*/
}


#footer li a:hover, li#active a{
  background:#dedede;
  color:#000000;
}


#footer p {color: #000000; font-size:12px; text-align:center; text-decoration:none; display:block; float:left;}

Alles anzeigen

Ich möchte gerne einen Zeilenumbruch bei dem Absatz haben. Das geschieht aber nicht - kann mir jemand sagen wieso?

Gruß und Danke
Muckel

Muckel

Ein weiteres Problem habe ich noch, wo ich zurzeit noch keine Lösung für finde. Und zwar habe ich den Titel eines Artikels, der folgende Eigenschaften hat:

Code

color: #000000; margin-top: 10px; text-align:left; font-size:30px; text-decoration:none; border:none;

Daneben möchte ich gerne das Datum, Uhrzeit und den Verfasser haben. Das Absatzformat hat folgende Werte:

Code

color: #000000; font-size:15px; text-align:right; font-style:italic; font-weight:bold; text-decoration:none; margin-bottom: 10px; border-bottom: 1px solid #000000;

Und es besteht aus zwei Zeilen.

Wie gesagt möchte ich das genau Neben einander haben. Praktisch als ob man diese Tabelle benutzt:

HTML

<table>
  <tr>
    <td>Überschrift</td>
    <td>Datum <br />Autor</td>
  </tr>
</table>

Doch wegen der kopierbarkeit der Texte und deren weiteren verarbeitung, würde ich ungerne eine Tabelle nutzen. Kann ich irgendwie die Überschrift (h-Tag) und den Absatz (p-Tag) so eingrenzen, dass das funktioniert?

Mittels display:block und float:left; konnte ich das schonmal so konfigurieren, dass das mit dem Autor und der Zeit rechts steht und die Überschrift links. Jedoch nicht genau neben einander. Bei mir schaut es Momentan so aus:

Code

#content h1 {color: #000000; margin-top: 10px; text-align:left; font-size:30px; text-decoration:none; border:none;}
#content h2 {color: #000000; margin-top: 10px; text-align:left; font-size:25px; text-decoration:none; border:none;}
#content h3 {color: #000000; margin-top: 10px; text-align:left; font-size:20px; text-decoration:none; border:none;}
#content h4 {color: #000000; margin-top: 10px; text-align:left; font-size:18px; text-decoration:none; border:none;}
#content h5 {color: #000000; margin-top: 10px; text-align:left; font-size:16px; text-decoration:none; border:none;}
#content h6 {color: #000000; margin-top: 10px; text-align:left; font-size:12px; text-decoration:none; border:none;}


.ueberschrift {display:block; float:lef;}


.sub {display:block; color: #000000; font-size:15px; text-align:right; font-style:italic; font-weight:bold; text-decoration:none; margin-bottom: 10px; border-bottom: 1px solid #000000;}

Alles anzeigen

und der html-teil:

HTML

<h1 class="ueberschrift">Test Beitrag</h1>
<p class="sub">Geschrieben am xx.xx.xxxx um xx:xx Uhr<br />verfasst von Autor.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="foot">Tags, Kommentare usw</p>

Hoffe ihr könnt mir helfen ~ ist erst mein dritter Versuch, ein Design zu erstellen.

Gruß Muckel

Monika

soviele Fragen --bin doch ne ältere Frau .....:-D

Zitat

Ich möchte gerne einen Zeilenumbruch bei dem Absatz haben. Das geschieht aber nicht - kann mir jemand sagen wieso?

Du floatest die Liste,also musst du das float mit clear:both beim footer p wieder aufheben , selbst wenn Du den auch floatest

Überschrift und p tag

Titel und Uhrzeit etc...

setze alles zwischen die h ohne p aber vor Uhrzeit etc gib
<span class="time"> und dies kannst Du dann anders gestalten

lg

Muckel

Was würde ich nur ohne dich machen?! Vielen Dank für deine Antwort und Hilfe!

Doch leider ist mir das mit dem span Befehl noch nicht so ganz klar. Muss das dann so aussehen:

HTML

<h1 class="ueberschrift">Test Beitrag<span class="time">Geschrieben am xx.xx.xxxx um xx:xx Uhr<br />verfasst von Autor.</span></h1>

und im css schaut es so aus:

Code

#content h1 {color: #000000; margin-top: 10px; text-align:left; font-size:30px; text-decoration:none; border:none;}


.ueberschrift {display:block; float:lef;}


.time {display:block; color: #000000; font-size:15px; text-align:right; font-style:italic; font-weight:bold; text-decoration:none; margin-bottom: 10px; border-bottom: 1px solid #000000;}

Doch leider besteht auch da das selbe Problem wie mit dem p-Tag.

Gruß Muckel

Monika

:)

span ist ein inline Element und erzeugt deshalb keinen Zeilenumbruch, außer man schafft es ihm mit display:block an,

nimm dies beim span raus und es muss klappen, außer der Text ist zu lang für eine Zeile

lg

Muckel

Guten Abend,

ja, der span wird neben der Überschrift angeziegt: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist. Jedoch wollte ich da ja einen "Zeilenumbruch" haben. Jedoch sollte jener so sein, das die zwei Zeilen (gemeinsam) genauso hoch sind wie die Überschrift. Sprich wenn man es mit einer Tabelle löst, würde es ja klappen: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist. schaut im code so aus:

Code

<table style="border-collapse:collapse;">
  <tr>
    <td width="70%" style="border: solid 1px #000000;"><h1>Überschrift</h1></td>
    <td width="30%" style="border: solid 1px #000000;">die Time geschichte<br />Autor</td>
  </tr>
</table>

Hoffe ich kann mich grade noch verständlich aus drücken.

Monika

ah !

ok

jetzt kapiere

also alles wieder zurück,

die Überschrift unter h2 oder sonstwohin ;)

die Zeit und das andere in ein div diesem div gibst Du eine Breite, ausprobieren ab wann es zwei Zeilen sind, nicht mit br arbeiten,

zuerst wird das div unter dem h2 sein ist egal...es geht mal um die Breite

danach gibts du dem h2 der Überschrift eine Breite und floatest nach links mit display:inline dazu -für so manchen Browser wichtig

danach gibts du der Einfachheit halber über beides ein div class="halterung..

;)

also

div class halterung

h2
div mit time etc

die floaterei musst du auflösen entweder mit der div halterung oder mit einem

HTML

<br style="clear:both" />

vor dem Ende des div halterung

naja ich hoff ich habe es gut erklärt

gibt auch andere Möglichkeiten, aber Du musst ja nicht gleich masterclasschefguru fahren ...;)

lg

Muckel

Vielen Dank für deine Antwort. Hatte das mit dem div am Anfang auch probiert, habe aber nicht an die breite gedacht. Teste das morgen früh (hm...nachm Schlafen) aus - denke mal, das es klappen wird. Vielen Dank!

Gruß Muckel

Muckel

Guten Morgen,

es hat fast so funktioniert, wie Du es gesagt hast. Allerdings habe ich die Überschrift jetzt auch in ein div gepackt und jenes div dann so gestaltet, das es wie die Überschrift ausschaut. Für die jenigen, die das vielleicht auch brauchen:

HTML

<div class="halterung">
  <div class="ueberschrift">Test Beitrag</div>
  <div class="sub">Geschrieben am xx.xx.xxxx um xx:xx Uhr von Autor.</div>
  <br style="clear:both" />
</div>

und der CSS Teil schaut so aus:

Code

.halterung {
  margin-top:10px;
  margin-left:0;
  margin-right:0;
  margin-bottom:40px;
}


.ueberschrift {
  position:absolute;
  display:block;
  left:0;
  text-align:left;
  font-size:30px;
  text-decoration:underline;
}


.sub {
  position:absolute;
  display:block;
  float:right;
  right:0;
  width:220px;
  line-height:15px;
  font-size:15px;
  text-align:right;
  font-style:italic;
  font-weight:bold;
  text-decoration:none;
}

Alles anzeigen

Das Ergebnis schaut dann so aus: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Allerdings habe ich noch ein Problem mit meinem verschachtelten Listen Menue:

HTML

<ul>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a>
      <ul class="submenue">
                <li><a href="#">Test 2.1</a></li>
                <li><a href="#">Test 2.2</a></li>
            </ul></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a>
      <ul class="submenue">
                <li><a href="#">Test 4.1</a></li>
                <li><a href="#">Test 4.2</a></li>
            </ul></li>
    <li><a href="#">Test 5</a></li>
    <li><a href="#">Test 6</a></li>
  </ul>

Alles anzeigen

der CSS Teil:

Code

/*Menue Sidebar*/
#right ul {
    width:140px;
  list-style:none;
  text-align:right;
  margin-top:0;
  margin-left:15px;
  margin-right:5px;
  margin-bottom:0;
}


#right  li a {
    height: 22px;
    line-height: 22px;
    text-align: left;
    border: 1px solid #999999;
    background:#cccccc;
    display:block;
    color: #000000;
    text-decoration:none;
    
}


#right  li a:hover {
    background:#eaeaea;
}




ul.submenue {
  width:100px;  
  list-style:none;
  text-align:right;
}


.submenue li a {
    height: 22px;
    line-height: 22px;
    text-align: left;
    /*border-bottom: 1px solid #999999;*/
    background:#dddddd;
    color: #000000;
    text-decoration:none;
    
}


.submenue li a:hover {
    background:#eaeaea;
}

Alles anzeigen

Auf dem Bild: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist. ist ja zu sehen, dass es einrückungen gibt. Die einrückungen auf der linken Seite sind gewollt. Rechts sollte es keine geben und da sollte das Menue auch am div Rand sein. Ich finde allerdings meinen Fehler nicht.

Danke für deine Hilfe!
Gruß und einen schönen Sonntag
Muckel

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Listen Menue Problem

Jetzt mitmachen!