Ergebnis 1 bis 8 von 8

Thema: DIV oben fixieren

  1. #1
    HTML Newbie
    Registriert seit
    02.05.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage DIV oben fixieren

    Hallo Community

    Ich habe ein kleines Problem und finde die Lösung einfach nicht:


    Ich habe drei DIVs:
    #content {
    margin-top: 5%;
    margin-left: 5%;
    width: 600px;
    background-color: red;
    }
    #component {
    background-color: #009900;
    height: 400px;
    overflow: auto;
    }
    #search {
    background-color: silver;
    width: 200px;
    height: 60px;
    background-position: 100px 20px;
    margin-top: -400px;
    float: right;
    position: static;
    }

    Diese sind so eingegliedert:
    <div id="content">
    <div id="component">
    Text
    </div>
    <div id="search">Suche</div>
    </div>

    Das ganze sieht dann zum Beispiel etwa so aus: http://ims.theblackwhitepro.ch/test2.html

    Nun will ich ja, dass es einen Scrollbalken gibt in component falls dessen Inhalt zu gross wird.
    Jedoch bleibt die Suche dann immer am gleichen Ort, scrollt also mit, sie sollte aber nicht mitkommen sondern verschwinden.
    Ich will damit verhindern, dass die Suche über den Text kommt.

    Ich hoffe ihr habt eine Lösung für mein Problem...

    Freundliche Grüsse und besten Dank
    thedvd
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: DIV oben fixieren

    Hey,

    versuch es mal mit "position: absolute;"
    So bleibt dein Element immer da wo du es hingesetzt hast.

    lg


  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    02.05.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bleistift

    Danke für die Antwort.

    Jedoch bringt das nicht, denn theoretisch bleibt das div ja auch an dem Ort wo es auf dem Bildschirm ist...
    Siehe http://ims.theblackwhitepro.ch/test2.html, jedoch scrollt das component div runter und ich will, dass das search div sozusagen mit scrollt...

  4. #4
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: DIV oben fixieren

    Ok also wenn ich das richtig verstehe soll dein component-Element dein such-Element umfassen
    und oben rechts bleiben auch wenn im content-Element gescrollt wird !?

    Wie wäre es wenn du dein such-Element in den content Bereich schiebst mit
    Code:
    margin-top 0px;
    margin-right: 0px;
    position: absolute;
    dann müsste es funktionieren ...

    ich will, dass das search div sozusagen mit scrollt...
    "Suche" scrollt bei mir immer mit


  5. #5
    Bandit
    Gast

    Standard AW: DIV oben fixieren

    Zitat Zitat von Bleistift Beitrag anzeigen
    "Suche" scrollt bei mir immer mit
    Im IE ja, im Firefox nein

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    02.05.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV oben fixieren

    Wow, im IE funktioniert es wie ich gerne hätte. Also so dass das Suchen-Feld beim runter scrollen auch nicht mehr sichtbar ist.

    Das mit dem search im component habe ich auch schon überlegt, jedoch muss es ja dann sofort nach dem component-div kommen und nicht erst nach dem Inhalt dieses.
    Dabei macht mir dann joomla einen Strich durch die Rechnung... Es soll ja oben Rechts und nicht unten sein...

  7. #7
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: DIV oben fixieren

    Ich nutzte Opera, dort scrollt das Suche-Element mit.
    ___

    Verstehe ich jetzt nicht ganz.
    Du willst deine Suchfunktionions-Element doch oben rechts in der Ecke haben oder ?
    Ohne das es mitscrollt..!?
    Wenn du sagen wir mal ein Content-Element hast was folgende Werte hat:

    Code:
    #content {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    float: center;
    width: 500px;
    height: 500px;
    }
    und ein suchelement:

    Code:
    #search {
    margin-top: 0px;
    float: right;
    margin-right: 0px;
    width: 150px;
    height: 100px;
    }
    und das in deiner html datei folgendermaßen einfügst:
    HTML-Code:
    <div id="content">
    <div id="search">Suche</div>
    </div>
    Müsste es funktionieren .. Habs aber grad nicht ausprobiert ..


  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    02.05.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV oben fixieren

    Danke für eure Hilfe...

    Im Prinzip stimmt Bleistifts Antwort zwar, jedoch ist sie bei mir nicht ganz Anwendbar, da das endgültige Design noch erweitert ist und Joomla den Inhalt eines DIVs oder Position vor dem nächsten DIV einfügt...

    Der Vollständigkeit halber hier noch kurz meine Lösung...
    <div id="content">
    <div id="comsearch">
    <div id="search"><jdoc:include type="modules" name="right-up" style="xhtml" /></div><!--#search-->
    <div id="component"><jdoc:include type="component" style="xhtml"/></div><!--#component-->
    </div>
    <div id="menu"><jdoc:include type="modules" name="left-up" style="xhtml" /></div><!--#menu-->
    <div id="login"><jdoc:include type="modules" name="left-down" style="xhtml" /></div><!--#login-->
    </div><!--#content-->

    Ich habe einfach noch ein DIV nur für den component und search Inhalt gemacht, da vorhin auch noch das Menü und das Login in content waren.
    Da nun search zuerst kommt bleibt es auch oben.

    CSS:
    div#content {
    width: 900px;
    }


    div#comsearch {
    float: right;
    width: 664px;
    height: 619px;
    overflow: auto;
    background-color: white;
    }


    div#search {
    width: 300px;
    float: right;
    padding-right: 4px;
    height: 50px;
    padding-top: 20px;
    text-align: right;
    padding-right: 20px;
    }


    div#component {
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 5px;
    }



    Danke für die Hilfe nochmals

Ähnliche Themen

  1. Hintergrund fixieren
    Von abc-help im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 10.03.2011, 14:29
  2. div fixieren !!!
    Von Barbony im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.05.2009, 10:53
  3. Div fixieren
    Von MasterOfDsaster im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 02.03.2009, 18:08
  4. Keywords fixieren
    Von dulldeidi im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 2
    Letzter Beitrag: 15.10.2006, 15:39
  5. tabellen fixieren
    Von meek im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 07.03.2006, 20:26

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •