mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:21 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: 1, 2  Weiter
Autor Nachricht
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.07.2012 09:07
Titel

CSS: Div-Verschachtelungen und floaterei

Antworten mit Zitat Zum Seitenanfang

Hi zusammen, ich habe aktuell ein Problem beim Aufbau einer Seite mit einem für mich gerade unlösbaren Problem.

Und zwar geht es um den unten zu sehenden Aufbau. Den an sich habe ich auch so hinbekommen, aber ich hätte gerne dass das Div "Contentbild" sich immer am rechten Brwoserrand ausrichtet (hinbekommen) und sich unten am Footer andockt, aber auch den Content je nach Bildschirmgröße verkleinert.

Könnte mir jemand sagen wie ich wo verschachteln und floaten muss und wo position relative und wo position absolute sein muss?

Habe bisher alles so hinbekommen, nur das Contenbild-Div habe ich absolut am rechten und unteren Browserrand ausrichten lassen und dann wieder um die Höhe des Footers nach oben geschoben. Bei gr0ßen Auflösungen funzt das auch wunderbar, aber bei 1024x768 steht das Contentbild dann leider einfach in der Luft, weil der Footer nicht zu sehen ist und dann die Referenz des Browserfensters genommen wird...

Für einen Tipp, wäre ich wirklich dankbar...



Irgendwie kann ich gerade kein bild einbinden? Daher hier die url zum Bild

Aufbau


Zuletzt bearbeitet von Aerendil am Mi 18.07.2012 09:11, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mi 18.07.2012 09:12
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für das Bild, HTML u. CSS Code wäre jedoch Hilfreicher.
Vielleicht ist das ein Tipp: Wer floatet muss auch clearen
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.07.2012 09:26
Titel

Antworten mit Zitat Zum Seitenanfang

Hier das CSS

Code:
@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }

 html,body {
 height:100%;
 }


body {
   margin: 0px;
   padding: 0px;
   /* background-color: #999; */
   font-family:Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   background-image:url(../bilder/verlauf_stripe.jpg);
   background-repeat:repeat-x;
   background-position:bottom;
   
   /*background-color: #CCC;*/
}

.wrapper {
   width: 960px;
   /*background-color: #CCC; */
   margin:0 auto -80px;
   position:relative;
   min-height:100%;
    height:auto !important;
    height:100%;
   
   /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
}


.navicontainer {
   float:right;
   width: 705px;
   height: 90px;
   margin-top: 107px;
   /* background-color:#6F0; */
   background-image:url(../bilder/line.gif);
   background-repeat:repeat-x;
   background-position:0 24px;
}

.content {
   max-width: 705px;
   /*height: 530px;*/
   float: right;
   background-color:#0FF;
   position: relative;
   padding:0px 0px 0px 0px;
}   

.content-startseite {
   max-width: 705px;
   height: 530px;
   float: right;
   /*background-color:#3366FF;*/
   background-image:url(../bilder/schaefer-schley-startseite.png);
   background-position:bottom right;
   background-repeat:no-repeat;

}

.content-bild {
   min-width: 321px;
   min-height: 350px;
   float: right;
   position:absolute;
   bottom:80px;
   right:0;
   background-color:#3366FF;
   background-image:url(../bilder/schaefer-schley-startseite.png);
   background-position:bottom right;
   background-repeat:no-repeat;
}


/* ~~ Fußzeile ~~ */
.footer {
   background: #9b0f05;
   height:80px;
    line-height:80px;
    margin:0 auto;
   
   /*padding-top: 5px;
   padding-bottom: 20px;*/
   position: relative;/* Hiermit erhält IE6 die Eigenschaft hasLayout, damit die clear-Anweisung korrekt ausgeführt wird. */
   clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
}



/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
   float: right;
   margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
   float: left;
   margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}


.clearfix {
                    display:inline-block;
            }


/* ~~ Kein Rahmen um Bilder und Links in Firefox ~~ */
a img {
    border: none;
    outline: none;
}
a, a:active, a:focus {
    border: none;
    outline: none;
}



/* normale Textlinks */

a:link.textlink {
   color: #9b0f05;
   text-decoration:none;
   font-weight: normal;
}
a:visited.textlink {
   text-decoration: none;
}
a:hover.textlink, a:active.textlink, a:focus.textlink {
   text-decoration: none;
   font-weight: bold;
}

h3 {
   font-size: 1.1em;
   color: #9b0f05;
   font-weight: bold;
}

a:link.logolink {
   float:left;
   height: 183px;
   width: 195px;
   margin-top: 30px;
   background-image:url(../bilder/logo.gif);
   background-repeat:none;
}


und hier das html-markup:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Schäfer &amp; Schley | Baugesellschaft</title>


<link href="script/stylomat2.css" rel="stylesheet" type="text/css" />
<link href="script/navi.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="script/jquery.js"></script>
   
   <script type="text/javascript">
   // <![CDATA[
      var timeout    = 500;
      var closetimer = 0;
      var ddmenuitem = 0;
      
      function ddmenu_open(){
         ddmenu_canceltimer();
            ddmenu_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
      }
      
      function ddmenu_close(){
         if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
      }
      
      function ddmenu_timer(){
         closetimer = window.setTimeout(ddmenu_close, timeout);
      }
      
      function ddmenu_canceltimer(){ 
         if(closetimer){ 
            window.clearTimeout(closetimer);
              closetimer = null;
      }}
      
      $(document).ready(function(){ 
         $('#ddmenu > li').bind('mouseover', ddmenu_open)
          $('#ddmenu > li').bind('mousedown',  ddmenu_timer)
      });
      
      document.onclick = ddmenu_close;
   // ]]> 
   </script>



</head>


<body>

<div class="wrapper">
   
    <!-- Logo -->
    <div><a href="index.html" class="logolink"></a></div>
   
   
     <!-- Navi-Div -->
    <div class="navicontainer">
   
    <ul id="ddmenu">
     
            <li><a href="index.html" target="_self" class="Navi1">Startseite</a></li>
               
            <li><a href="#" target="_self" class="Navi1">Unternehmen</a>
               <ul>
                  <li><a href="#" target="_self" class="Navi2">Unterpunkt 1</a></li>
                        <li><a href="#" target="_self" class="Navi2">Unterpunkt 2</a></li>
                        <li><a href="#" target="_self" class="Navi2">Unterpunkt 3</a></li>
               </ul>
            </li>
               
            <li><a href="leistungen.html" target="_self" class="Navi1">Leistungen</a>
               <ul>
                  <li><a href="#">Unterpunkt 1</a></li>
                        <li><a href="#">Unterpunkt 2</a></li>
                        <li><a href="#">Unterpunkt 3</a></li>   
               </ul>
            </li>
               
                <li><a href="#" target="_self" class="Navi1">Projekte/Referenzen</a>
               <ul>
                  <li><a href="#">Unterpunkt 1</a></li>
                  <li><a href="#">Unterpunkt 2</a></li>
                  <li><a href="#">Unterpunkt 3</a></li>
               </ul>
            </li>
               
                <li><a href="#" target="_self" class="Navi1">Stellenangebote</a></li>
               
            <li><a href="#" target="_self" class="Navi1">Kontakt</a></li>
               
         </ul>
   
    </div>
   
    <!-- Contentbereich -->
  <div class="content">
    <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h3><br />
    Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula<br /> eget dolor. </p>
    <p>&nbsp;</p>
    <p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient </p>
    <p>montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
    <p>pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </p>
    <p>justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam felis </p>
    <p>eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus </p>
    <p>elementum semper nisi. Aenean vulputate eleifend tellus. Aenean</p>
    <p> leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam</p>
    <p> lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus </p>
    <p>viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean</p>
    <p> imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper </p>
    <p>ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
    <!-- Abschluß-Float-Verschachtelung --></p>
  </div>
  <div class="clearfloat"></div>


 <!-- END Wrapper -->
</div>   
          <div class="content-bild"></div>     
    <!-- Footer -->
<div class="footer">footer</div>         



   

</body>
</html>
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Mi 18.07.2012 10:50
Titel

Antworten mit Zitat Zum Seitenanfang

Ohje, du solltest mit der Struktur vielleicht nochmals von Vorne anfangen.
Ich hätte die Webseite in 2 Bereiche geteilt (eigentlich 3).

Code:

<div id="wrapper" class="clearfix">
   <div id="logo"> <!-- diesen container float:left; -->
      <a href></a>
   </div>
   <div id="section" class="clearfix"> <!-- diesen container float:right; -->
      <ul id="navi"></ul>
      <div class="clearfix">
         <div id="content"></div> <!-- diesen container float:left; -->
         <div id="contentbild"></div> <!-- diesen container float:right; -->
      </div>
   </div>
</div>
<div id="footer"></div>

Und hier hast du mal ein anständiges clearfix
Code:
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;overflow:visible;}


Zuletzt bearbeitet von SimonDerDude am Mi 18.07.2012 10:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.07.2012 11:16
Titel

Antworten mit Zitat Zum Seitenanfang

Naja da ich das schon vermutet habe (Neuanfang)

hatte ich auch zuerst ohne Code gepostet und wollte ja wissen,
wie Ihr/du da ran gehen würdet...

Vielen Dank für deine Hilfe, ich schau mal ob ich durchsteige.
  View user's profile Private Nachricht senden
Karlarsch

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

Antworten mit Zitat Zum Seitenanfang

Es hat ja schon was von einer kleinen Div-Suppe. Ein paar Dinge die mir dazu einfallen:


- Der Wrapper ist über, das kann auch der body
- HTML5 nebst der neuen Elemente nutzen
- moderne clearfixes nutzen

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

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.07.2012 11:54
Titel

Antworten mit Zitat Zum Seitenanfang

So, mal getestet. Also wie gesagt nochmals vielen Dank.

AAABer mein Problem ist, die section liegt im wrapper. In der Section liegen die Navi, Content und Contentbild.
sage ich jetzt dem wrapper, dass er horizontal zerntriert ist und nur 960Px breit, kommt das Bild trotzdem nie weiter nach rechts, als die section das zulässt. Der Footer (außerhalb des wrapper) ist so breit wie der gesamte Body.

Das Contentbild soll aber rechts am body und an Kante des Footer stehen, wenn der Brwoser aber kleiner von der Breite ist,
soll das Contentbild trotzdem den Content verkleinern können.

Also Navi und Content sollen horizontal zerntiert sein und max 960 PX breit. Ist mehr Platz in der Breite vorhanden,
soll das Contenbild außerhalb der 960 Breite sein - rechts am Browserrand.

Entweder stehe ich auf dem Schlauch, bin zu doof oder es geht nicht, keine Ahnung, bin nur leider schon genervt und verzweifelt...

Ich stell die Seite mal nachher so wie sie ist online, dann versteht man es evtl besser.?
  View user's profile Private Nachricht senden
Aerendil
Threadersteller

Dabei seit: 28.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.07.2012 12:32
Titel

Antworten mit Zitat Zum Seitenanfang

So ich habe es mal online gestellt, vielleicht ist dann die Problematik etwas besser
verständlich...

Dummy-Website

Wer also Ideen hat, oder mir es so erklären kann, dass ich es verstehe - wäre das echt toll.
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.