zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text unten bei gelfoateten divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.10.2014, 14:34
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard Text unten bei gelfoateten divs

Hallo ins Forum,

ich habe zwei <div> Elemente. Im linken ist ein Logo im rechten eine <ul> Navigation.
HTML-Code:
<header>
<div id="header_innen" class="clearfix">
  <div id="logo">
    <h1>
      <img class="logo" width="350" height="116" border="0" title="Fliesen Geib - Fliesenleger Meisterbetrieb" alt="Fliesen Geib - Fliesenleger Meisterbetrieb" src="fileadmin/resources/public/img/headerLogo.png">
    </h1>
  </div>
  
  <nav>
    <p>
      <ul id="navMain" class="navMain">
          <li class="active"> ... Link 1 .... </li>
          <li class="active"> ... Link 2 .... </li>
          <li class="active"> ... Link 3 .... </li>
          <li class="active"> ... Link 4 .... </li>
      </ul>
  </nav>
</div>
</header>

<div id="content">
  Hier die Seiteninhalte
</div>
Das CSS sieht vereinfacht erst Mal so aus:
Code:
#logo {
    float: left;
    width: 30%;
}
nav {
    float: right;
    width: 70%;
}
Es gibt keine festen Höhen, einzig das Logo hat die Maße BxH 350x200. Nun klebt die Navigation in der natürlich oben. Wie kriegt man die <ul> nach unten? Sie soll am nochfolgenden <div id="content"> "aufsitzen". Mit festen Pixeln will ich nicht arbeiten, da Bild im Logobereich sich beim verkleinern des Bildschirms entsprechend anpasst.

Danke für n Tipp und Gruß
mimii
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.10.2014, 15:46
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Mit „vertical-align“ kannst Du die Ausrichtung von #logo und #navMain steuern.
Dafür müssten sie, in Deinem Fall (feste Breiten), als Inline-Block-Elemente formatiert werden (display: inline-block).
„vertical-align“ wirkt auch bei Tabellen-Zellen. Dein Header als eine CSS-Tabelle zu formatieren, ginge also auch.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.10.2014, 15:58
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke für die Antwort. Die CSS-Variante mit display: table bwz. display:table-cell habe ich wieder entfernt, da ich in den einigen Browsern (Opera, Safari, Chrome) und bei mobile Devices massive Probleme damit hatte. Das Logo wurde gar nicht mehr angezeigt. Daher jetzt meine Umstellung auf gefloatete divs.

Mit festen Breiten meinst du statt der 30% - 70% dann Pixelangaben? Das wird sich nicht machen lassen, da das gesamte Layout ausschließlich auf Prozentangaben basiert.

Viele Grüße
mimii
Mit Zitat antworten
  #4 (permalink)  
Alt 10.10.2014, 16:06
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von mimii Beitrag anzeigen
Mit festen Breiten meinst du statt der 30% - 70% dann Pixelangaben?
Nein, ungünstig ausgedrückt.
Wobei, aus meiner Sicht Prozent-Breiten, auch feste Breiten sind.

Gemeint habe ich, dass die Elementen Breiten haben. Sonst hätte man sie auch mit „display: inline“ formatieren können.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 10.10.2014, 21:00
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Hallo nochmals,

also ich habe mit vertical-align und inline-block experiementiert - ohne Erfolg
Hier hab' ich mal n fiddle erstellt, mit dem groben Layout. Was ich erreichen will, ist dass die Navigation auf dem grauen content aufsitzt.

Danke für Eure Hilfe und Gruß
mimii
Mit Zitat antworten
  #6 (permalink)  
Alt 10.10.2014, 21:58
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Du muss natürlich die Floats raus nehmen, wenn Du #logo und #navMain mit „display: inline-block“ formatierst.
Float macht jedes Element zum Block-Elementen. Da nutzt Dir kein „display: inline-block“ - der „display: block“ durch den Float ist stärker.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 10.10.2014, 22:46
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

hmmmmm,

irgendwie ist es nicht das was ich will. Die das Logo und die Nav sollten eigenlich nebeneinander und nicht untereinander platziert sein. Testcase hier hier

.... und Danke für die Hilfe
Mit Zitat antworten
  #8 (permalink)  
Alt 10.10.2014, 23:26
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Bei der Berechnung der Breiten (40% + 60%) kommen die Leerräume dazu (Inline-Elementen, Zeilen-Block).
Entweder reduzierst Du die Breiten ein wenig, oder sorgst dafür, dass die Leerräume nicht in die Berechnung mit einbezogen werden.
Letzteres könntest Du in etwa so machen:
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>mimii :: xhtmlforum.de</title>
<style>
* {
  margin:0;
  padding:0;
}
header,
#content {
  width: 90%;
  margin: 0 auto;
}
header {
 white-space: nowrap;
}
#logo {
  display: inline-block;
  width: 40%;
}
nav {
  display: inline-block;
  width: 60%;
  text-align: right;
  vertical-align: bottom;
}
nav ul {
  display: inline;
  white-space: normal;
}
nav li {
  background-color: #abc123;
  display: inline;
  margin-left: 2%;
  padding: 2% 4%;
}
#content {
  background-color: #696978;
  padding: 5%;
}
</style>
<header>
  <div id="logo">
    <h1><img src="http://placehold.it/250x100" alt="logo" /></h1>
  </div>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </nav>
</header>
<div id="content">
  <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. </p>
</div>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2014, 00:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

die aktuelle Technik um solche Probleme zu lösen ist Flexbox:

HTML5: mimii - Header Layout

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2014, 13:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

oder die alte Technik mit position: absolute;
Edit fiddle - JSFiddle

HTML-Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
   <title>Testseite</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
* { margin: 0; padding: 0; }
html {
    font-family: Verdana, sans-serif;
    font-size: 120%;
}
body {
    margin: 2% auto;
    width: 96%;
}
header { 
    background: yellow; 
    position: relative; 
}
header:after { 
    content: " ";
    display: block;
    clear: both;
}
header figure {
    background: orange;
    float: left;
    width: 30%;
}
header figure img {
    max-width: 100%;
    vertical-align: bottom;
}
header nav { 
    position: absolute;
    left: 30%;
    bottom: 0;
    width: 70%;   
}
header nav ul { 
    border-top: 1px solid #000;
}
header nav ul:after { 
    content: " ";
    display: block;
    clear: both;
}
header nav ul li {
    background: lime;
    list-style: none;
    float: right;
    margin-left: 2%;
    padding: 2% 4%;
}
p {
    background: #696978;
    padding: 5%;
}
   @media only screen and (max-width: 570px) {
header, header nav { 
    position: static; 
}
header figure {
    float: none;
    width: 100%;
}  
header nav { 
    left: 0;
    bottom: 0;
    width: 100%;   
}
header nav ul li {
    border-bottom: 1px solid #000;
    float: none;
    margin-left: 0;
}
}
</style>

</head>	
<body>

<header>
   <figure>
      <img src="http://www.placehold.it/250x200" alt="Fliesen Geib - Fliesenleger Meisterbetrieb">
   </figure>
   <nav>
     <ul>
        <li>Link 1 ... </li>
        <li>Link 2 ... </li>
        <li>Link 3 ... </li>
     </ul>
  </nav>
</header>

<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. </p>
	
</body>	
</html>
________________
MfG Roland
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
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 01:24
Webseite in IE/MAXTHON ok, in Firefox zerissen Midnight CSS 50 21.02.2006 11:34
Bild im Container mittig positionieren... 18inch CSS 5 09.07.2005 15:48


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