[CSS] Etwas an ein anderes Element anheften

Dieses Thema im Forum "Webdesign" wurde erstellt von ibot, 21. April 2009 .

Schlagworte:
  1. 21. April 2009
    Etwas an ein anderes Element anheften

    Hallo zusammen,

    hier mal mein css Code

    PHP:
    body  {
             width :  700px ;
             margin :  10px auto ;
             font - family :  Andalus ;
             font - size :  18px ;
             text - align :  center ;
             color :  #ffffff;
     }
     #head, #footer {
             position :  absolute ;
             width :  700px ;
             border - left :  1px solid ;
             border - right :  1px solid ;
             background :  #c5c5c5;
             overflow :  auto ;
             padding :  5px 10px  ;
    }
     #head {
             top :  0px ;
             height :  100px ;
    }
     #footer {
             bottom :  0px ;
             height :  30px ;
    }

     #left, #content{
             position :  absolute ;
             top :  100px ;
             bottom :  40px ;
             overflow :  auto ;
             background :  #8b8b8b;
     }

     #left{
             left :  100px ;
             width :  200px ;
             padding :  10px ;
             border :  0px ;

    }
     #content {
             width :  700px ;
             padding :  10px ;
             border :  1px solid ; 
    }
    Ein Problem:
    Ich möchte das der Inhalt von #left direkt an dem Element #anschliest.

    Das will nur leider nicht so richtig.
    Wie möchte es richtig sein?
     
    + Multi-Zitat Zitieren
  3. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Es wäre super, wenn du auch deinen HTML-Code posten könntest, sonst ist es ein wenig schwierig, sich vorzustellen, was du genau meinst. Woran soll sich #left genau anschließen? In welcher Richtung? Soll es Rechts von dem Element sein oder unten drunter?

    Vom momentanen Standpunkt kann ich dir bisher nur den Tipp geben, einmal "position: relative" bei #left auszuprobieren. Ob das hilft, kann ich dir leider nicht sagen, da ich dein HTML-Gerüst nicht kenne.
     
    + Multi-Zitat Zitieren
  4. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Ja logisch hatte ich vergessen:

    PHP:
    < html >
        <     head >
            <     meta http - equiv = "Content-Type"  content = "text/html; charset=UTF-8" >
            <     link rel = "stylesheet"  type = "text/css"  href = "dvd.css" >
            <     title ></ title >
        </     head >
        <     body >
            <     div id = 'head' >
            </     div >

            <     div id = 'left' >
            </     div >

            <     div id = 'content' >
            </     div >

            <     div id = 'footer' >           
            </     div >
        </     body >
    </     html >
    Ich habe einfach nur mal die Elemente aufgerufen.

    Nun folgendes: angenommen man verkleinert den Browser und verzieht ihn (z.B. immer kleiner machen) dann wird man erkennen das eines der Elemente (mit #left aufgerufen) fest plaziert ist und irgendwann ganz hinter den anderen Elementen verschwindet.

    Das soll natürlich nicht sein. Dieses Element soll fest an dem Element #content sein und sich auch mit verschieben lassen, sodass nix verdeckt wird.

    Ich hoffe das dies einigermaßen verständlich ist^^

    Besten Dank schonmal


    P.S. position: relative; bringt leider nix
     
    + Multi-Zitat Zitieren
  5. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Ah, kein Wunder, dass sich der #content div über den #left div schiebt.

    Der #left div ist festgelegt, dass er 100px vom linken Rand entfernt positioniert wird. Dadurch, dass du margin auf auto gesetzt hast, werden alle anderen Objekte, die keine absolute Positionierung in x-Richtung haben zentriert. Jetzt hast du 2 Möglichkeiten:
    Entweder, du setzt alle anderen Container (#content, #header, #footer) auf absolute positionen, oder aber du setzt den #left div relativ zu #content. Letzteres würde dann so funktionieren:

    HTML:
    <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="dvd.css">
 <title></title>
 </head>
 <body>
 <div id='head'>
 </div>

 <div id='content'>
 <div id='left'>
 </div>
 </div>

 <div id='footer'> 
 </div>
 </body>
</html>
    Code:
    body {
 width: 700px;
 margin: 10px auto;
 font-family: Andalus;
 font-size: 18px;
 text-align: center;
 color: #ffffff;
}
#head, #footer {
 position: absolute;
 width: 700px;
 border-left: 1px solid;
 border-right: 1px solid;
 background: #c5c5c5;
 overflow: auto;
 padding: 5px 10px ;
}
#head {
 top: 0px;
 height: 100px;
}
#footer {
 bottom: 0px;
 height: 30px;
}

#content{
 position: absolute;
 top: 100px;
 bottom: 40px;
 background: #8b8b8b;
 width: 700px;
 padding: 10px;
 border: 1px solid; 
}

#left{
 margin-top: -10px;
 position: relative;
 left: -230px;
 width: 200px;
 height: 100%;
 padding: 10px;
 border: 0px;
 background: #8b8b8b;
}
    Wenn du zwischen #left und #content noch einen abstand von 1px in weiß haben willst, dann musst du bei #left "left:-231;" eintragen.
     
    + Multi-Zitat Zitieren
  6. 21. April 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Etwas an ein anderes Element anheften

    Danke erstmal.

    Leider ist das Ergebnis nicht so wie ich es mir vorgestellt habe.
    Ich habe die Felder einfach mal mit Testdaten gefüllt und das Ergebnis war:

    Bild
    {img-src: http://s8b.directupload.net/images/090421/oyhf3yo2.jpg}


    HTML:
    <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="neuerCSS.css">
 <title></title>
 </head>
 <body>
 <div id='head'>
 </div>

 <div id='content'>
 halo hallo
 head<br>
 head<br>
 head<br>
 head<br>
 head<br>
 head<br>
 head<br>
 <div id='left'>

 test test
 head<br>
 head<br>
 head<br>
 head<br>
 head<br>
 head<br>
 head<br>
 </div>
 </div>
 <div id='footer'>
 </div>
 </body>
</html>
    Naja so soll es ja nun nich sein. Irgendwie verschiebt sich das #left immer mit dem Text der in #content eingetragen wird.


    So soll es eigentlich aussehen:

    Bild
    {img-src: http://s11b.directupload.net/images/090421/z56f366q.jpg}



    Vielleicht kannst du mir nun etwas besser helfen?
    Es sollen quasi vier verschiedene Elemente zur Verfügung stehen.
    Wie könnte man das realisieren?
     
    + Multi-Zitat Zitieren
  7. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Das wundert mich gerade ziemlich. Bei mir läuft es mit meiner Version so, wie es von dir gewünscht ist. Welchen Browser benutzt du denn zur Ansicht? Bei mir (Linux, getestet mit Firefox 3.0.8 sowie Epiphany 2.24.1) läuft alles so, wie es sein soll.

    Edit: Tut mir leid, das erste Bild hat bei mir erst nicht geladen. Jetzt versteh ich, was dein Problem ist.

    Neue Problemlösung:

    Probier mal diese CSS-Datei (hab #left jetzt rot eingefärbt, kannste wieder zurücksetzen bei Bedarf)

    Code:
    body {
 width: 700px;
 margin: 10px auto;
 font-family: Andalus;
 font-size: 18px;
 text-align: center;
 color: #ffffff;
}
#head, #footer {
 position: absolute;
 width: 700px;
 border-left: 1px solid;
 border-right: 1px solid;
 background: #c5c5c5;
 overflow: auto;
 padding: 5px 10px ;
}
#head {
 top: 0px;
 height: 100px;
}
#footer {
 bottom: 0px;
 height: 30px;
}

#content{
 position: absolute;
 top: 100px;
 bottom: 40px;
 background: #8b8b8b;
 width: 700px;
 padding: 10px;
 border: 1px solid;
}

#left{
 position: absolute;
 top: 0px;
 left: -200px;
 width: 200px;
 height: 100%;
 padding: 0px;
 border: 0px;
 background: red;
}
    Problematisch ist nun nur, dass du kein padding direkt bei #left verwenden kannst, wenn #left genauso groß sein soll, wie #content, da #content relativ zur höhe gezeigt wird. Um einen Abstand zum Rand zu erzeugen musst du noch einen <div>-Container innerhalb von #left erzeugen, der einen entsprechenden Außen- oder Innenabstand hat.
     
    + Multi-Zitat Zitieren
  8. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Schau nochmal den Beitrag über dir an ich hab ihn eben verändert.
    Es hatte am Anfang doch funktioniert, als ich es dann allerdings mit Testdaten füllen wollte, verschiebte sich das #left mit zunehmendem TextInhalt.
     
    + Multi-Zitat Zitieren
  9. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Hab meinen Beitrag jetzt auch editiert. Dieses Posting soll dich nur darauf hinweisen. Nicht, dass du den edit übersiehst
     
    + Multi-Zitat Zitieren
  10. 21. April 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Etwas an ein anderes Element anheften

    Cool danke das funzt nun.

    Eins hätte ich jedoch noch^^
    Ich habe mal das #content div mit etwas mehr Zeilen gefüllt und zusätzlich noch overflow: auto;
    in #content eingebaut:

    Code:
    #content{
 position: absolute;
 top: 100px;
 bottom: 40px;
 background: #8b8b8b;
 width: 700px;
 padding: 10px;
 border: 1px solid;
 overflow: auto;
}
    Nur dann sieht es so aus:

    Bild
    {img-src: http://s10.directupload.net/images/090421/5u35h89w.jpg}


    Also sobald diese Scrollleiste kommt ist #left wieder weg.

    Woran könnte es liegen. Sorry für die Umstände
     
    + Multi-Zitat Zitieren
  11. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Ohje, das macht das ganze etwas komplizierter. Dass der Kasten links verschwindet, ist bei der Einstellung von Overflow: scroll; ganz logisch. Der Kasten ist ja selber so eingestellt, dass er aus #content herausragt, also ist er selber von overflow betroffen und wird dementsprechend ausgeblendet.

    Neue Lösung: Hab nen wrapper um #content eingefügt. Läuft jetzt soweit

    HTML:
    <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" type="text/css" href="dvd.css">
 <title></title>
 </head>
 <body>
 <div id='head'>
 </div>


 <div id='wrapper'>
 <div id='content'>
 </div>

 <div id='left'>
 </div>
 </div>

 <div id='footer'> 
 </div>
 </body>
</html>
    Code:
    body {
 width: 700px;
 margin: 10px auto;
 font-family: Andalus;
 font-size: 18px;
 text-align: center;
 color: #ffffff;
}
#head, #footer {
 position: absolute;
 width: 700px;
 border-left: 1px solid;
 border-right: 1px solid;
 background: #c5c5c5;
 overflow: auto;
 padding: 5px 10px ;
}
#head {
 top: 0px;
 height: 100px;
}
#footer {
 bottom: 0px;
 height: 30px;
}

#wrapper {
 position: absolute;
 margin: auto;
 top: 100px;
 bottom: 40px;
 width: 720px;
}

#content{
 background: #8b8b8b;
 width: 100%;
 height: 100%;
 padding: 0px;
 border: 1px solid;
 overflow: scroll;
}

#left{
 position: absolute;
 top: 0px;
 left: -200px;
 width: 200px;
 height: 100%;
 padding: 0px;
 border: 0px;
 background: red;
}
     
    + Multi-Zitat Zitieren
  12. 21. April 2009
    AW: Etwas an ein anderes Element anheften

    Sehr schön,

    ich danke dir vielmals. Nun geht soweit alles!


    Super Hilfe!
     
    + Multi-Zitat Zitieren
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten