zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit vertical-align

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.05.2017, 13:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 26
crane befindet sich auf einem aufstrebenden Ast
Standard Probleme mit vertical-align

Hallo,

ich habe folgenden CSS code für den Header:
Code:
#header {
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%; 
  height:115px; 
  overflow:hidden; 
  background:#53829d;
  
}
und Folgenden Css code für die links:
Code:
#header a{
padding: 17px;
vertical-align: middle;
}
der html code:
Code:
<div id="header">
<img class="logo" src="https://xhtmlforum.de/../bilder/logo.png" style="padding-left:25px">>/img>
<a href="news.htm">News</a>
<a href="info.htm">Über Mich</a>
<a href="craniosacral.htm">Craniosacral</a>
<a href="links.htm">Links</a>
<a href="kontakt.htm">Kontakt</a>
</div>
Ich möchte das Bild und die Links in die Mitte bezogen auf die Höhe des Headers platzieren. Bei mir werden die aber immer ganz unten vom Header platziert.
Was könnte ich anders machen damit die in der Mitte platziert werden.
Ich möchte

Vielen Dank

Geändert von crane (11.05.2017 um 14:06 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.05.2017, 14:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Da gibt es viele Möglichkeiten.

Du könntest dem Header unten und oben padding geben (wodurch dann auch die Höhe des Headers zustande kommt).

Die modernste Lösung dafür wäre aber flexbox. Einfach mal googlen.

Oder was auch noch ginge:
Du tust das Logo und die Links in einen gemeinsamen Container den du absolut positionierst, z.B.

Code:
#header .innner {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
Bei der letzten Lösung wäre das ganze auch horizontal zentriert, was du bei Bedarf aber ändern kannst.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.05.2017, 14:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
Oder was auch noch ginge:
Du tust das Logo und die Links in einen gemeinsamen Container den du absolut positionierst, z.B.
Das ist meiner Meinung nach einer der schlechtesten Hinweise, auch wenn der ursprüngliche header schon absolut positioniert wurde.
Das soll nur verwendet werden, wenn dir (crane) egal ist, wie die Seite auf Smartphones/Tablets aussieht. Vielleicht passt die Anzeige dort dann ja zufällig, wenn nicht dann kann ich dir jetzt schon sagen, was die Antwort sein wird, wenn du eine Frage hast: "Entferne die absolute positionierung"
Eventuell ist es ja auch nur eine Übungsseite nur für dich um einmal die absoluten Grundlagen zu erlernen, aber selbst dann solltest du es wenn gleich ordentlich lernen.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.05.2017, 14:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Ich habe ja geschrieben welche Lösung am modernsten/schönsten wäre^^ allerdings weiß ich nicht ob Anfänger mit flexbox oder anderen Lösungen besser klar kommen.

Es gab bei mir aber schon Situationen wo ich Flexbox nicht verwenden konnte, weil ich keine Möglichkeit hatte das vorgegebene Markup zu ändern. Und dank Media Queries gibt es bei anderen Geräten keine Probleme.

Aber ja, am besten versucht er es erstmal mit Flexbox

Hier mal ein ausführlicher Guide zu dem Thema:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Und hier findest du ein direktes Beispiel zum Zentrieren mit flexbox, falls dir der andere Artikel zu lang ist:

https://css-tricks.com/centering-css-complete-guide/
Mit Zitat antworten
  #5 (permalink)  
Alt 11.05.2017, 15:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Als praktisches Beispiel könnte auf dieses HTML

Code:
   <header id="pageheader" class="pageheader">
      <figure>
         <img class="logo" src="https://www.w3.org/html/logo/img/mark-only-icon.png">
      </figure>
      <nav id="navigation" class="navigation">
         <a href="news.htm">News</a>
         <a href="info.htm">Über Mich</a>
         <a href="craniosacral.htm">Craniosacral</a>
         <a href="links.htm">Links</a>
         <a href="kontakt.htm">Kontakt</a>
      </nav>
   </header>
das folgende CSS angewandt werden:

Code:
      .pageheader {
         background-color: #53829d;
         display: flex;
         justify-content: space-between;
         align-items: center;
      }
      .pageheader img {
         display: block;
         max-width: 80px;
         border: 0;
      }
      .navigation {
         display: flex;
         flex-wrap: wrap;
      }
      .navigation a {
         padding: 0.8rem 1rem 0.8rem 1rem;
      }
Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 11.05.2017, 17:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 26
crane befindet sich auf einem aufstrebenden Ast
Standard Rechts/Links

Bis jetzt erst mal vielen Dank für die vielen Antoworten.
Wie kann ich es noch zustande bringen das ich bei bedarf die Links auf der rechten Seite habe und die Grafik auf der linken Seite. Sonst soll alles wie bis jetzt bleiben.

Danke
Mit Zitat antworten
  #7 (permalink)  
Alt 12.05.2017, 10:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Kommt darauf an wie du es nun umgesetzt hast. Am besten zeigst du uns deinen Code.

Eventuell sind float: left und float: right deine Lösung.
Mit Zitat antworten
  #8 (permalink)  
Alt 13.05.2017, 03:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Wie kann ich es noch zustande bringen das ich bei bedarf die Links auf der rechten Seite habe und die Grafik auf der linken Seite. Sonst soll alles wie bis jetzt bleiben.
Das ist bei meiner Lösung doch der Fall. Logo auf der linken Seite, Navigation auf der rechten.

Mit der Flexbox-Anweisung "order" kannst du das ändern.

Bei meinem gezeigten HTML / CSS kannst du dem CSS zum Beispiel einfach

Code:
      .pageheader figure {
         order: 1;
      }
hinzufügen.

Gruss

MrMurphy

Geändert von MrMurphy (13.05.2017 um 03:52 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
div, vertical-align

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
Google chrome und Firefox Probleme Footer bleibt nicht unten css_newbie CSS 17 17.09.2016 20:31
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 15:57
Probleme mit Text-Layout per vertical margin white57 CSS 8 09.10.2007 18:19
IE: Probleme mit ul-Menü Ares CSS 4 18.10.2006 12:42
Vertical Align im DIV Tag (FLOAT) Tino Schneider CSS 2 29.09.2004 14:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:11 Uhr.