mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 28.04.2024 09:04 Benutzername: Passwort: Auto-Login

Thema: CSS: Div-Verschachtelungen und floaterei vom 18.07.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Div-Verschachtelungen und floaterei
Seite: Zurück  1, 2
Autor Nachricht
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.07.2012 13:33
Titel

Antworten mit Zitat Zum Seitenanfang

@ Karl: Meinst du? Ich habe zb. dem body die Hintergrundgrafik gegeben und der wrapper begrenzt ja auf 960 Px, fand das schon sinnvoll, sonst wäre der Hintergrund ja nur 960 Pixel breit. Oder habe ich da nen Denkfehler?
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Mi 18.07.2012 13:59
Titel

Antworten mit Zitat Zum Seitenanfang

Alles was du mit dem Wrapper machen kannst, kannst du auch mit dem body machen. Dafür braucht es kein zusätzliches Element.

Gruß
Karl
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Do 19.07.2012 07:04
Titel

Antworten mit Zitat Zum Seitenanfang

Hier mal ein kleiner Ansatz ... bedank dich bei meiner Tochter die meinte um 3 Uhr sei die Nacht zu Ende *zwinker*

Gruß
Karl

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
   body   {
   margin: 0 auto 50px;
   max-width: 960px;
   min-width: 800px;
  }

   #logo {
    float: left;
    width: 200px;
    background: #eee;
  }
 
  #main   {
     margin-left: 220px;
    background: #eee;
  }
 
  nav  {
     background: #ddd;
  }
 
  aside {
    float: right;
    background: #ccc;
    width: 330px;
  }
 
   #content {
     background: #bbb;
     margin-right: 350px;
   }
   
   footer  {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: #aaa;
   }
</style>
</head>
<body>
  <section id="logo">
    &nbsp;
  </section>
  <div id="main">
    <nav>
      &nbsp;
    </nav>
    <aside>
      &nbsp;
    </aside>
    <section id="content">
      &nbsp;
    </section>
  </div>
  <footer>
    &nbsp;
  </footer>
</body>
</html>
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Do 19.07.2012 09:05
Titel

Antworten mit Zitat Zum Seitenanfang

Den <body> als umschließendes Element zu nutzen hab ich irgendwie noch nie gesehen *Huch*
Habe völlig ausser Acht gelassen, dass es auch nur ein Kind des <html> Elements ist ... Gefällt mich!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Do 19.07.2012 10:01
Titel

Antworten mit Zitat Zum Seitenanfang

Google geht in seinem HTML/CSS-Styleguide sogar noch weiter. Btw. sind sämtliche Google Styleguides (C++, Objective C, Python, HTML/CSS, JavaScript) sehr lesenswert.

Gruß
Karl
  View user's profile Private Nachricht senden
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 23.07.2012 13:41
Titel

Antworten mit Zitat Zum Seitenanfang

@ Karl: Danke!

Hatte freitag Urlaub, ich sehe es mir mal gleich an.

Und jaaa meine Tochter meint das auch öfter mal Lächel
  View user's profile Private Nachricht senden
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 23.07.2012 14:16
Titel

Antworten mit Zitat Zum Seitenanfang

@ Carl: So vielen Dank eben mal reingesehen und die Hälfte ist geschafft Lächel

Mein Problem ist, ich hätte jetzt gerne <aside> unten rechts an der OberKante des Footer und rechts am Browserfenster ausgerichtet und soll aber trotzdem den content verdrängen, der max 705 px breit werden darf.

So aber mit älterer Formatierung hatte ich das auch schon...

Vielleicht bin ich aber auch nur einfach zu blöd.?
  View user's profile Private Nachricht senden
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 23.07.2012 14:22
Titel

Antworten mit Zitat Zum Seitenanfang

Habe das jetzt mal versucht so hlabwegs umzubiegen und das kam dabei raus:

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
   body   {
   margin: 0 auto 200px;
   max-width: 960px;
   min-width: 800px;
  }

   #logo {
    float: left;
    width: 200px;
    background: ##0F0;
  }
 
  #main   {
    margin-left: 220px;
    background: #FF0;
   margin-top:30px;
  }
 
  nav  {
     background: #9F0;
    margin-top:107px;
  }
 
  aside {
    float: right;
    background: #696;
    min-width: 390px;
   min-height: 350px;
   background-image:url(bilder/schaefer-schley-startseite.png);
   position:absolute;
   bottom:200px;
   right:0px;
   background-repeat:no-repeat;
  }
 
   #content {
     background: #0FF;
     margin-right: 350px;
    max-width: 705px;
   }
   
   footer  {
     position: fixed;
     bottom: 0px;
     left: 0;
     right: 0;
     background: #F00;
    height:200px;
   }
   
   a:link.logolink {
      float:left;
   height: 183px;
   width: 195px;
   margin-top: 30px;
   background-image:url(bilder/logo.gif);
   background-repeat:none;
}
   
   
</style>

</head>



<body>

  <section id="logo">
    <a href="index.html" class="logolink"></a>
  </section>
 
  <div id="main">
  das ist der main-Container
 
    <nav>
      &nbsp;<br>
      &nbsp;&nbsp;&nbsp;&nbsp;Hüür die Navi<br>
      &nbsp;
    </nav>
   
    <aside>
      &nbsp;
    </aside>
   
    <section id="content">
      Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)<br>Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)
      Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)
      Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)<br>Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)<br>Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)<br>Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)<br>Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)<br>Hier steht der Content drin, hier steht der Content drin, oleole, hier steht der Content drin. :)
    </section>
   
  </div>
 
  <footer>
    &nbsp;
  </footer>
</body>
</html>



das geht jetzt so in etwa in die Richtung wie es sein soll, wenn sich der Content jetzt noch auf volle Breite des main erweitern könnte, wenn genug Platz in der Breite wäre.

Ist das verständlich?
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.