selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Text in div-Tag zentrieren ohne Tabelle

Autor: bb_lernt
Datum: 22.02.2014 15:29:13

Hallo zusammen,

ich bin sowohl Neuling in HTML als auch im Nutzen von Foren. Habt also bitte Nachsicht, kann sein, dass ich nicht alles richtig mache ;-)

Hier nun mein Problem:
Habe meine Seite mit div-Tags aufgebaut
  header
  navi1
  navi2
  inhalt
  fuss
Nun sollen in den Bereichen navi1 und navi2 die Navigationstexte sowohl horizontal als auch vertikal zentriert erscheinen. Klappt aber nicht. Der Text liegt etwas unterhalb des Bereichs.
Hier der dazugehörige Code:
HTML:
<br clear="all" />
<div id="navi01">
  <ul id="navigation1">
<li style="display:inline"><a href="../Seite/nosotros.html">Nosotros</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">Restaurante</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">Hostel</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">Actividades</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">Fotos</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">Contacto</a> </li>
  </ul>
</div>
<br clear="all" />
<!-- TemplateBeginEditable name="navi02" -->
<div id="navi02">
  <ul id="navigation2">
<li style="display:inline"><a href="../Seite/equipo.html"> el equipo</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">la cooparativa</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">los patronacadores</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">nuestros amigos</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">&nbsp;</a> </li>
<li style="display:inline"><a href="../Seite/iniciar.html">&nbsp;</a> </li>
  </ul>
</div>
<br clear="all" />


CSS:
ul#navigation1  li a{
width: 998px;
text-transform:uppercase;
text-decoration:none;
color: #336633;
padding-right:70px;
}
ul#navigation1  a:hover {
color: #0000FF;
text-decoration: none;
}
ul#navigation2  li a{
width: 998px;
text-transform:uppercase;
text-decoration:none;
color: #ffffff;
padding-right:90px;
}
ul#navigation2 li a:hover {
color: #CC6600;
text-decoration: none;
}

#navi01 {
width: 998px;
height:10px;
background-color:#FFFFFF;
padding:15px;
}
#navi02 {
width:998px;
height:10px;
padding:5px;
}
wenn ich nun in #navi01 und #navi02 den Wert height auf auto setze funktioniert das ganze, aber die Navigationsleiste ist viel zu hoch, das will ich so nicht. Hat jemand ne Idee, die mich weiterbringt?
Gruß bb_lernt hoffenlich was neues ;-)


Re: Text in div-Tag zentrieren ohne Tabelle

Autor: gaby
Datum: 22.02.2014 19:43:40

> Nun sollen in den Bereichen navi1 und navi2 die
> Navigationstexte sowohl horizontal als auch
> vertikal zentriert erscheinen.


Hallo,

>  <ul id="navigation1">
>      <li style="display:inline"><a href="equipo.html">Nosotros</a> </li>
>      <li style="display:inline"><a href="iniciar.html">Restaurante</a> </li>
>      <li style="display:inline"><a href="iniciar.html">Hostel</a> </li>
>      <li style="display:inline"><a href="iniciar.html">Actividades</a> </li>
>      <li style="display:inline"><a href="iniciar.html">Fotos</a> </li>
>      <li style="display:inline"><a href="iniciar.html">Contacto</a> </li>
>  </ul>

Die Style-Angaben bitte nicht ins markup schreiben, sondern ins Stylesheet:
also so:

#navigation1 li {
    display: inline;
}

<ul id="navigation1">
    <li><a href="equipo.html">Nosotros</a> </li>
    <li><a href="iniciar.html">Restaurante</a> </li>
    <li><a href="iniciar.html">Hostel</a> </li>
    usw ...
</ul>
  
---

> ul#navigation1  li a{
>     width: 998px;
>     text-transform:uppercase;
>     text-decoration:none;
>     color: #336633;
>     padding-right:70px;
> }

Eine Breitenangabe ist überflüssig, die wird bei Inline-Elementen eh nicht beachtet.
Besser ist es auch, das 'padding-right' zu löschen, und stattdessen im Selektor #navigation1 li { ... } 'margin-right' zu deklarieren.
  
---
  
> #navi01 {
>     width: 998px;
>     max-height:10px;
>     background-color:#FFFFFF;
>     padding:15px;
> }

lösche das 'max-height' und passe das 'padding' entsprechend an, dann sind die Linktexte vertikal zentriert.


Grüße
gaby



Re: Text in div-Tag zentrieren ohne Tabelle

Autor: T.Jung
Datum: 24.02.2014 11:27:02

Hallo,

aufgrund von Zeitmangel habe ich mir das Problem jetzt nicht genau angeguckt.
Aber hier ist ein guter (leider englischer) Artikel über diverse Methoden, in CSS vertikal zu zentrieren:
http://www.vanseodesign.com/css/vertical-centering/
Wenn ich mir Deine Website so ansehe, würde ich es zuerst mit der in diesem Text genannten »Line-Height Method« probieren. (Aber ich habe, s.o., jetzt nicht überprüfen können, ob da irgendwas gegen spricht.)

Eine weitere Methode, die aber nur in neueren Browsern funktioniert, ist hier (diesmal auf Deutsch) dargestellt:
http://picomol.de/2014/01/19/css-vertikal-zentrieren-unkompliziert/


HTH,
Tobias Jung



Re: Text in div-Tag zentrieren ohne Tabelle

Autor: gaby
Datum: 27.02.2014 10:35:17

> Gruß bb_lernt hoffenlich was neues ;-)

bb_lernt es hoffentlich noch, wenigstens eine kurze Rückmeldung zu geben, ob die Tips geholfen haben. ...