Ankündigung

Einklappen
Keine Ankündigung bisher.

probleme mit darstellung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • probleme mit darstellung

    hallo zusammen

    ich versuche mich mal an CSS. nun habe ich ein kleines darstellungsproblem.
    der div für die subnavigation will einfachnicht dort sein, wo ich es will

    so sieht es aus:http://www.pusztateufel.ch/bd/test.html
    und es sollte so aussehen, wie es im anhang ist. das feld habe ich vorübergehend gelb gefärbt, damit man es besser sieht.

    auch den border am container kann man leider nicht sehen.

    hier ist der style:
    HTML-Code:
    /*Link*/
    
    a:link {
    	color: #000000;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #000000;
    }
    a:hover {
    	text-decoration: underline;
    	color: #000000;
    }
    a:active {
    	text-decoration: none;
    	color: #000000;
    }
    
    body {
    font-size:12px;
    font-family: Verdana, Ariel, Helvetica;
    padding: 0;
    margin: 0;
    border: none;
    background-color:#ffffff;
    }
    
    
    #container {
    text-align: left;
    padding: 0em;
    margin: 1em auto ;
    width: 900px;
    color:#000000;
    background-color:#FFFFFF;
    border:3px solid ##BECBD9;
    }
    
    
    #Banner {
    height:135px;
    background-image:url(../Images/banner_hintergrund.jpg);
    border-bottom:thin; 
    border-bottom-style:solid; 
    border-color:##BECBD9;
    }
    
    
    
    #Subnavigation {
    	background-color:#FAE502;
    	background-image:url(../Images/design_banner.jpg);
    	background-repeat:no-repeat;
    	background-position:bottom;
    	color:#000000;
    	width:165px;
    	height:465px;
    	padding-left:0px;
    	position: absolute;
    	left: 758px;
    	top: 152px;
    }
    
    #Text {
    background-color:#FFFFFF;
    width:685px;
    text-align: left;
    padding:25px;
    height: 465px;
    overflow: auto;
    }
    
    #Text p.center,  {
    text-align:center;
    }
    
    #Text img.center{
    text-align:center;
    }
    
    #Text span.center {
    text-align:center;
    }
    was mach eich blos falsch???
    Angehängte Dateien
    Grüässli Husika
    sigpic

  • #2
    AW: probleme mit darstellung



    Du mußt einen Eltern-Container, dessen Position fix zu deinem zu positionierenden Div ist, relativ positionieren, also #container oder #banner, sonst richtet sich die absolute Positionierung nach dem Body.
    Dietmar

    Joomla Forum - Deutscher Joomla Support Chat - Deutsche Joomla-Dokumentation

    Kommentar


    • #3
      AW: probleme mit darstellung

      Mahlzeit!

      Subnavigation:
      Statt diese mit "position:absolute" zu positionieren würde ich ein float:right"
      einsetzen:
      Code:
      #Subnavigation 
      {
      [B]float: right;[/B]
      background-color:#FAE502;
      background-image:url(../Images/design_banner.jpg);
      background-repeat:no-repeat;
      background-position:bottom;
      color:#000000;
      width:165px;
      height:465px;
      padding-left:0px;
      }
      Borderproblem:
      Hier sind zwei Schreibfehler die Ursache:
      Code:
      #container {
      text-align: left;
      padding: 0em;
      margin: 1em auto ;
      width: 900px;
      color:#000000;
      background-color:#FFFFFF;
      [B]border:3px solid ##BECBD9;[/B]
      }
      
      #Banner {
      height:135px;
      background-image:url(../Images/banner_hintergrund.jpg);
      border-bottom:thin; 
      border-bottom-style:solid; 
      [B]border-color:##BECBD9;[/B]
      }
      Entferne jeweils die doppelte Raute, so das am Ende nur eine (!) Raute
      darsteht.
      mfg
      dhx

      Kommentar


      • #4
        AW: probleme mit darstellung

        Hi husika,

        beide bisherigen Antworten sind richtig. Ich persönlich bin der Ansicht, das der Vorschlag von dhx der bessere ist, da du dann die ganzen relativen und absoluten Positionierungen vermeidest.

        Was dhx vergessen hat zu erwähnen ist: wer floatet muss irgendwann auch mal wieder clearen.
        D.h.: am Ende deines Inhaltes mußt du den normalen Textfluß wieder herstellen.

        Grüße
        Peter
        Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
        Mein neuer Versuch .... und
        hiermit verdiene ich mein Geld.

        Kommentar


        • #5
          AW: probleme mit darstellung

          Mahlzeit!

          Peter0308:
          Was dhx vergessen hat zu erwähnen ist: wer floatet muss irgendwann auch
          mal wieder clearen.
          Vergessen habe ich nix. Da beiden DIV's die gleiche Höhe haben wird hier ein
          "clear" erstmal nicht gebraucht. -Einbauen kann man es aber trotzdem.

          Peter0308:
          ...wer floatet muss irgendwann auch mal wieder clearen.
          Nicht unbedingt. Es kommt darauf an wie und wo ich das "float" einsetze.
          Beispiel:
          Bild in einem Textabsatz, wobei der Text das Bild umfließt.
          mfg
          dhx

          Kommentar


          • #6
            AW: probleme mit darstellung

            Hi,

            @dhx
            Da beiden DIV's die gleiche Höhe haben wird hier ein
            "clear" erstmal nicht gebraucht. -Einbauen kann man es aber trotzdem.
            Erstmal nicht ... das stimmt. Hoffentlich kommt die OT nicht irgendwann mal auf den Gedanken einen Footer einbauen zu wollen.

            Nicht unbedingt. Es kommt darauf an wie und wo ich das "float" einsetze.
            Beispiel: Bild in einem Textabsatz, wobei der Text das Bild umfließt.
            Eine gefährliche Aussage ... Immer wenn ein übergeordnetes div, in welchem sich floatende Elemente befinden geschlossen wird und ein weiteres Blockelement (ich weiß momentan nicht genau ob auch ein Inlineelement reicht) folgt, dann muss ein clear gesetzt werden.
            Um von vornherein jeder Schwierigkeit aus dem Weg zu gehen (z. B. bei einem späteren redisign) bin ich der Meinung, das zu jedem float ein clear gehört.

            Peter
            Zuletzt geändert von Peter0308; 19.04.2008, 06:18.
            Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
            Mein neuer Versuch .... und
            hiermit verdiene ich mein Geld.

            Kommentar


            • #7
              AW: probleme mit darstellung

              Hi,
              Zitat von Peter0308 Beitrag anzeigen
              Immer wenn ein übergeordnetes div, in welchem sich floatende Elemente befinden geschlossen wird und ein weiteres Blockelement (ich weiß momentan nicht genau ob auch ein Inlineelement reicht) folgt, dann muss ein clear gesetzt werden.
              nö, absolut nicht.
              Zum einen beim Beispiel mit dem von Text umflossenen Bild - hier ist clear für ein nachfolgenes Element entbehrlich, wenn sichergestellt ist, dass genug Text vorhanden ist, um mindestens den Platz neben dem Bild auszufüllen. Ein typischer Fall, bei dem clear hier sogar vermieden werden solllte, ist ein kleines neben dem Inhaltstext gefloatetes Teaserbild; wenn danaben auch die Navigation gefloatet ist, kann sich das clear auch hierauf auswirken.

              Dies gilt übrigens auch in Hinblick auf Footer. Clear muss hierfür den Textfluss nur dann wieder herstellen, wenn keine oder nicht genügend Inhalte im Textfluss sind - z.b. wenn alle Elemente gefloatet sind.

              Gruß
              Ingo
              Ingo Webdesign

              Kommentar


              • #8
                AW: probleme mit darstellung

                Hi Ingo,

                das es manchmal sogar das Design zerstört, wenn man cleart, habe ich auch schon festgestellt.

                Zur Zeit zweifel ich allerdings an mir und der Welt ... ich schaffe es noch nicht mal, den Fehler, den ich meine (ohne "clear", wie ich und viele Anfänger ihn schon gemacht haben) zu reproduzieren.

                @dhx
                Ich Entschuldige mich für den Schmarrn, den ich gesagt habe.

                So ... und jetzt fang ich von vorne an CSS zu lernen.

                Grüße
                Peter
                Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
                Mein neuer Versuch .... und
                hiermit verdiene ich mein Geld.

                Kommentar


                • #9
                  AW: probleme mit darstellung

                  hi,
                  vielleicht ist es auch hilfreich, über die unterschiedliche Interpretation von 'clear' Bescheid zu wissen...

                  Übrigens mal ein Beispiel, wo (nur sicherheitshalber) am Ende clear eingesetzt ist und ansonsten den floats freies Spiel gelassen wird.

                  Gruß
                  Ingo
                  Zuletzt geändert von Ingo; 19.04.2008, 11:19.
                  Ingo Webdesign

                  Kommentar


                  • #10
                    AW: probleme mit darstellung

                    vielen herzlichen dank für die hilfe. es sind manchmal so kleine dinge, die einem zur verzweiflung treiben.

                    bitte nicht streiten, denn es führen ja soooo viele wege nach rom

                    so sieht es jetzt aus:
                    HTML-Code:
                    /*Link*/
                    
                    a:link {
                    	color: #000000;
                    	font-weight: bold;
                    	text-decoration: none;
                    }
                    a:visited {
                    	text-decoration: none;
                    	color: #000000;
                    }
                    a:hover {
                    	text-decoration: underline;
                    	color: #000000;
                    }
                    a:active {
                    	text-decoration: none;
                    	color: #000000;
                    }
                    
                    body {
                    font-size:12px;
                    font-family: Verdana, Ariel, Helvetica;
                    padding: 0;
                    margin: 0;
                    border: none;
                    background-color:#ffffff;
                    }
                    
                    
                    #container {
                    text-align: left;
                    padding: 0em;
                    margin: 1em auto ;
                    width: 900px;
                    color:#000000;
                    background-color:#FFFFFF;
                    border:3px solid #BECBD9;
                    }
                    
                    
                    #Banner {
                    height:135px;
                    background-image:url(../Images/banner_hintergrund.jpg);
                    border-bottom:thin; 
                    border-bottom-style:solid; 
                    border-color:#BECBD9;
                    }
                    
                    
                    
                    #Subnavigation {
                    float:right;
                    background-color:#FFFFFF;
                    background-image:url(../Images/design_banner.jpg);
                    background-repeat:no-repeat;
                    background-position:bottom;
                    color:#000000;
                    width:165px;
                    height:500px;
                    padding-left:0px;
                    	
                    	}
                    
                    #Text {
                    background-color:#FFFFFF;
                    width:685px;
                    text-align: left;
                    padding:25px;
                    height: 450px;
                    overflow: auto;
                    }
                    
                    #Text p.center,  {
                    text-align:center;
                    }
                    
                    #Text img.center{
                    text-align:center;
                    }
                    
                    #Text span.center {
                    text-align:center;
                    }


                    :danke:
                    Grüässli Husika
                    sigpic

                    Kommentar


                    • #11
                      AW: probleme mit darstellung

                      Hallo,

                      Danke ingo für den Artikel ist sehr interessant einmal ein wenig mehr darüber zu lesen. Man hat schliesslich nie ausgelernt, auch bei Programmiersprachen nicht. Finde es schön das hier auch ein wenig über vor- und nachteile bestimmter Thechniken gesprochen wird, das ist ja noch lange kein Streit.
                      Na ja, ich bin immernoch so gemütlich und bleibe auf meinem position:absolute sitzen. Über die Nachteile hiervon weiss ich schon bescheid, doch in letzer Zeit machte ich anderes(mehr php)... Ich werde mich jetzt jedoch etwas mehr auf die floats konzentrieren(und habe in verschiedenen Webdesigns auch schon ein wenig getestet), und dein Artikel hat mir auch schon einige Interessante informationen geliefert.

                      MfG
                      [ASTERIX]

                      Kommentar


                      • #12
                        AW: probleme mit darstellung

                        hallo zusammen

                        ich versuche wieder mal eine Seite mit CSS. doch immer wiede rtauchen die hleichen Probleme auf und ich weiss nicht wieso

                        der textbereich und der footer werden einfach unterhalb dargestellt, statt unterhaln und neben dem banner



                        hier ist der css dazu:

                        Code:
                        /*Link*/
                        
                        a:link {
                        	color: #000000;
                        	font-weight: bold;
                        	text-decoration: none;
                        }
                        a:visited {
                        	text-decoration: none;
                        	color: #000000;
                        }
                        a:hover {
                        	text-decoration: underline;
                        	color: #000000;
                        }
                        a:active {
                        	text-decoration: none;
                        	color: #000000;
                        }
                        
                        h1,h2,h3,h4,h5,h6 {
                        	font-weight: bold;
                        }
                        h1 {
                        	font-size: 16px;
                        	color: #3A5E8E;
                        }
                        h2 {
                        	font-size: 14px;
                        	color: #3A5E8E;
                        }
                        h3 {
                        	font-size: 12px;
                        	color: #3A5E8E;
                        }
                        h4 {
                        	font-size: 9px;
                        	color: #333333;
                        }
                        
                        h5 {
                        	font-size: 9px;
                        	color: #ffffff;
                        }
                        
                        #body {
                        font-size:12px;
                        font-family: Verdana, Ariel, Helvetica;
                        padding: 0;
                        margin: 0;
                        border: none;
                        background-color:#3A5E8E;
                        }
                        
                        
                        #container {
                        text-align: left;
                        padding: 0em;
                        margin: 1em auto ;
                        width: 1024px;
                        color: #000000;
                        background-color: #FFFFFF;
                        border:3px solid #000000;
                        }
                        
                        
                        #Banner {
                        height:231px;
                        background-image:url(../Images/banner.jpg);
                        }
                        
                        
                        #Subnavigation {
                        background-color:#FFFFFF;
                        background-image:url(../Images/banner_links.jpg);
                        width: 222px;
                        text-align: center;
                        text-bottom: 15px;
                        height: 537px;
                        
                        }
                        
                        
                        #Text {
                        float:right;
                        background-color:#FFFFFF;
                        color:#000000;
                        width:746px;
                        height:500px;
                        padding:25px;
                        overflow: auto;
                        }
                        	
                        
                        #Text p.center{
                        text-align:center;
                        }
                        
                        #Text img.center{
                        text-align:center;
                        }
                        
                        #Text span.center {
                        text-align:center;
                        }
                        
                        #Footer {
                        background-color:#FFFFFF;
                        width:746px;
                        text-align: right;
                        font-size:9px;
                        height: 37px;
                        padding-top:20px;
                        padding-left: 25px;
                        float:right;
                        }
                        
                        #Footer span.right {
                        text-align:right;
                        }
                        ich danke euch für die hilfe. irgend wan mal, wedre ich es sicher kapieren
                        Grüässli Husika
                        sigpic

                        Kommentar


                        • #13
                          AW: probleme mit darstellung

                          Hi Husika,

                          immer noch die liebe "float"-Anweisung

                          Bedenke bitte, dass sich "float" nur auf die nachfolgenden html-Elemente auswirkt.

                          Grüße
                          Peter
                          Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
                          Mein neuer Versuch .... und
                          hiermit verdiene ich mein Geld.

                          Kommentar


                          • #14
                            AW: probleme mit darstellung

                            hallo peter

                            ja ja, mr. float mach mir zu schaffen. also dann muss ich float "links" einfügen im css?
                            Grüässli Husika
                            sigpic

                            Kommentar


                            • #15
                              AW: probleme mit darstellung

                              Hi,

                              wenn du den html-Quelltext so lässt, wie er jetzt ist, dann ja. Allerdings bei der Navigation. Und nicht vergessen, bei dem "text" musst du es dann rausnehmen.

                              lg Peter
                              Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
                              Mein neuer Versuch .... und
                              hiermit verdiene ich mein Geld.

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 57.195   Beiträge: 431.990   Mitglieder: 29.634   Aktive Mitglieder: 29
                              Willkommen an unser neuestes Mitglied, GinaKing.

                              Online-Benutzer

                              Einklappen

                              956 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 954.

                              Mit 9.939 Benutzern waren am 17.05.2023 um 21:38 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X