float nur für ein elebemt aufheben?

leohh · 09.06.2009

AW: float nur für ein elebemt aufheben?

visuell -> Navigation Content Sidebar
markup ->

Navigation
Content
Sidebar

Dein obiges Markup macht so keinen Sinn - zumindest nicht fuer mich.
Du solltest im CSS nicht strukturelle Fehler ausbuegeln muessen, die du im Markup verbrochen hast.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
      <title>Untitled 2</title>
      <link rel="stylesheet" type="text/css" href="test2.css" />
      <!--[if IE]><style type="text/css">
         .navi li{ content: expression(this.innerHTML = this.innerHTML.substring(0, 1) == "\00BB"? this.innerHTML: "\00BB"+this.innerHTML ); }
         .clearfix { zoom: 1; }
      </style><![endif]-->
      
   </head>

   <body>
      <div id="frame" class="clearfix" ><!-- set clearifx for selfclearing -->
         <div id="navigation">
            <p class="ski"><a href="index.php">Startseite</a> | <a href="kontakt.php">Kontakt</a> | <a href="impressum.php">Impressum</a></p>
            <ul class="navi">
               <li><a href="xxx.php">xxx</a></li>
               <li class="hereur"><a href="xxx.php">xxx</a></li>

               <li><a href="xxx.php">xxx</a></li>
               <li><a href="xxx.php">xxx</a></li>
               <li><a href="xxx.php">xxx</a></li>
               <li><a href="xxx.php">xxx</a></li>
            </ul>
            <!-- endNavi -->

         </div>
         <!-- endNavigation -->

         <div id="content">
            <h1>headline</h1>
            <h2>headline 2</h2>
            <img src="bild.jpg" alt="xxx" />
            <p class="absatz">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p class="absatz clearfix">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p> <!-- ab hier soll nichts mehr floaten -->
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>        
   
            <img src="bild.jpg" alt="xxx" />
            <p class="absatz">
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p class="absatz clearfix">
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p> <!-- ab hier soll nichts mehr floaten -->
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
           
   
            <img src="bild.jpg" alt="xxx" />
            <p class="absatz">
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p class="absatz clearfix">
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p> <!-- ab hier soll nichts mehr floaten -->
                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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
               
         </div>
         <!-- endContent -->

         <div id="sidebar">
            <p class="erste_adresse">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p class="adressen">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p class="adressen">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
         
            <p class="adressen">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <p class="adressen">
               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 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            
         </div>
         <!-- endSidebar -->
            
      </div>
      <!-- endPageWrap - frame -->
      
   </body>
</html>

Im CSS eher auf relative Angaben (% oder em) weil ich hier etwas von flexiebel gelesen hab und ein clearfix kommt hinzu, damit du kein Markup fuers clearen brauchst.

HTML:

* {
    padding:0;
    margin:0;
}
body {
    width:100%;
    background:#ffffff url('body_bg.png') repeat-x;
    font: 68.8%/1.5 Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
}

#frame { 
   background: #efefef; /* clearcheck - kann entfernt werden */ 
}

#navigation{
        margin-left:1%;
        width:20%; height:597px;
        background:transparent url('navigation.png') no-repeat;
        float:left;
}

.navi {list-style: none;}
.navi li:before { content: "\00BB"; }
.navi a { margin-left: .5em; }

#content{
        padding:1em;
        float: left;
        width: 45%;
}

#content img { 
   float:right;
   width: 7.5em; height: 7.5em; 
}

#sidebar{
   width:25%;
   margin-left:1%;
   float:left;
   background:transparent url('sidebar.png') no-repeat;
   /* font-size: 1em; Inherit - braucht nicht noch mal extra deklariert werden, wenn es den 100% entspricht */
}

.absatz + .absatz + * { color: orange; } /* nur zur optischen markierung */

 .clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

Koennten noch Fluechtigkeitsfehler vorhanden sein.

Frage an die Leute die sich hier ein bisschen auskennen:
Macht es Sinn, Aufzaehlungszeichen nicht, so wie es hier im Beispiel des TEs steht, die Aufzaehlungszeichen fuer Listenelemente dynamisch, mittels CSS/Javascript ins CC einzubinden ( so wie ich es in diesem Beispiel mal noch zusaetzlich erzaenzt habe ) ?

Bei ausgeschaltetem CSS haette man so nicht mehr das Problem, dass sowohl die automatischen als auch die hardgecodeten Aufzaehlungszeichen mehr erscheinen. Gibt es hier bekannte Probleme? ( Geht sich nur um IE, der die pseudoklasse :before nicht beherrscht. )

kleinerOnkel · 09.06.2009

AW: float nur für ein elebemt aufheben?

lonelyhawk schrieb:
im prinzip ja... mit der textmenge und derzeit durchschnittlichen auflösungen. wenn man aber die texte kürzt, bzw. die auflösung erhöht, rücken die absätze untereinander ein...

hab es jetzt erstmal provisorisch mit div-boxen gelöst. aber schön ist das nicht. wenn also noch jemand nen vorschlag hat, bin ich weiterhin interessiert.

Also ich frage mich gerade im Ernst, was Du eigentlich vorhast. Nimm doch am Besten Deine html und Deine css und baue daraus ein template für ein CMS. Für mich hat es den Anschein, dass Du dynamisch Inhalte einbauen willst und nicht nur statische Seiten benötigst. Dann wäre Dir geholfen. Und extra divs für die Contentelemente finde ich keine schlechte Lösung.

lonelyhawk · 10.06.2009

AW: float nur für ein elebemt aufheben?

kleinerOnkel schrieb:
Also ich frage mich gerade im Ernst, was Du eigentlich vorhast.

eigentlich ist es ganz einfach, ich möchte ein zentriertes drei-spalten-design in dem ausschließlich die mittlere spalte von der breite her dynamisch ist.
in dieser mittleren Spalte möchte ich absetze haben <p></p> nebem denen bilder sind und absätze neben denen keine bilder sind.

mein einziger anspruch ist dabei kein überflüssigen html-code zu nutzen. d.h. im inneren der mittleren spalte sollen nur die tags genutzt werden die auch dem inhalt entsprechen, also <p></p> und <img />.

das wars. und trotz der tatsache, dass ich weder in (x)html noch in css anfänger bin, bekomme ich das nicht hin.

kleinerOnkel schrieb:
Nimm doch am Besten Deine html und Deine css und baue daraus ein template für ein CMS. Für mich hat es den Anschein, dass Du dynamisch Inhalte einbauen willst und nicht nur statische Seiten benötigst. Dann wäre Dir geholfen.
Und extra divs für die Contentelemente finde ich keine schlechte Lösung.

ich kenne kein cms, das wirklich 'sauberen' code erzeugt. (ist auf grund der notwendigen felxibilität von cms im allgemeinen auch nachvollziehbar.)

leohh schrieb:
visuell -> Navigation Content Sidebar
markup ->

* Navigation
* Content
* Sidebar

Dein obiges Markup macht so keinen Sinn - zumindest nicht fuer mich.
Du solltest im CSS nicht strukturelle Fehler ausbuegeln muessen, die du im Markup verbrochen hast.

die reihenfolge spielt im normalfall keine rolle, und da ich die navigation und die sidebar auslagere habe ich sie zusammen über den content geschrieben. sehe das nicht als fehler an. wenn alles in einer datei stehen würde wäre es vielleicht weniger übersichtlich, da stimm ich dir zu.

leohh schrieb:
HTML:

code

Im CSS eher auf relative Angaben (% oder em) weil ich hier etwas von flexiebel gelesen hab

nur die mittlere spalte soll dynamisch sein. navigation und sidebar brauche ich fix, ohne diese einschränkung wäre es leichter. wenn ich dein beispiel dahingehend ändere springt die sidebar ab einer gewissen (kleinen) auflösung nach unten. das möchte ich vermeiden.

leohh schrieb:
und ein clearfix kommt hinzu, damit du kein Markup fuers clearen brauchst.

interessant, habe ich so noch nicht gesehen

leohh · 10.06.2009

AW: float nur für ein elebemt aufheben?

Dann denk doch bitte ein bisschen um.
Wenn du nur deinen Content dynamisch brauchst, dann kannst du die anderen beiden Container absolut positionieren und die Breite der jeweilligen Container als margin fuer den Content-Bereich deklarieren ohne festen Breitenangabe, wodurch du deinen Content genau so dynamisch bekommst wie du es haben willst. Man kann sich aber auch anstellen.

Und natuerlich spielt die reihenfolge keine Rolle aber damit sie keine Rolle spielt, muesste man sein Handwerkszeug so beherrschen, dass sie keine Rolle spielt und das scheint bei dir eben nicht der Fall zu sein. Entschuldige wenn ich hier so deutlich werden muss aber wenn du mir einen auf Klugscheisser machst, dann kann ich auch anders ;P

lonelyhawk · 10.06.2009

AW: float nur für ein elebemt aufheben?

leohh schrieb:
Dann denk doch bitte ein bisschen um.
Wenn du nur deinen Content dynamisch brauchst, dann kannst du die anderen beiden Container absolut positionieren und die Breite der jeweilligen Container als margin fuer den Content-Bereich deklarieren ohne festen Breitenangabe, wodurch du deinen Content genau so dynamisch bekommst wie du es haben willst. Man kann sich aber auch anstellen.

Und natuerlich spielt die reihenfolge keine Rolle aber damit sie keine Rolle spielt, muesste man sein Handwerkszeug so beherrschen, dass sie keine Rolle spielt und das scheint bei dir eben nicht der Fall zu sein. Entschuldige wenn ich hier so deutlich werden muss aber wenn du mir einen auf Klugscheisser machst, dann kann ich auch anders ;P

es war nicht meine absicht "einen auf Klugscheisser" zu machen. ich bin/war dankbar für alle hilfen die hier gegeben wurden.

(und die 'falsche' reinfolge der divs hat mit meinem problem nicht zu tun... ;P )

auf eine absolute positionierung wollte ich eigentlich verzichten. vorerst tun es die div-container, vielleicht fällt mir ja noch etwas ein.

also nochmal vielen dank, von meiner seite aus ist hier erstmal schluß.