Ergebnis 1 bis 7 von 7

Thema: überlagerung von links durch textrahmen

  1. #1
    Gast

    Standard überlagerung von links durch textrahmen

    hallo,
    ich dachte, wenn etwas im html/css oben steht, wird das unten stehende überlagert... scheint aber doch nicht so zu sein, denn ich sehe meine links nur noch zur hälfte - der rest ist verschwunden unter einem testrahmen, den ich als hintergrund benutzen wollte...

    ich währe sehr dankbar, wenn jemand meinen fehler findet oder mir sagt, wies vielleicht doch gehen könnte...

    die einzige alternative, die mir einfällt, währe den hintergrund als pixelgrafik einzufügen, doch das wollte ich eigendlich nich...

    HTML
    Code:
    <html>
    <head>
    <title></title>
    
     <link rel="stylesheet" href="krass1.css" type="text/css">
    
    </head>
    <body>
    
    
    <h1>KRASS</h1>
    
    	<div>
    	Home
             über uns
             Willst du mitmachen?
             Aufführungen
             Freunde
             </div>
    
    <h2>über uns</h2>
    
          <p class="mitte">
    KRASS existiert seit 1997 als Jugendtheatergruppe in Berlin und probt einmal in der Woche im Kreativhaus.
     Wir sind eine bunte Gruppe mit wechselnder Besetzung, die sich hauptsächlich trifft,
     um Spass am Theaterspielen zu haben. 
    
    
    
     Aber natürlich soll auch was bei raus kommen, wir wollen ja schließlich irgendwann aufführen.
     Und damit das ein Erfolg wird, haben wir Suse - unsere Theaterpädagogin &#40;applaus applaus!!!&#41;.
    
    
    
     Wir haben bis jetzt immer ein Jahr geprobt und im Sommer dann 4 bis 5 Aufführungen gegeben.
     Jetzt wollen wir die Zeit halbieren &#40;damit ihr auch im Winter nicht auf uns verzichten müss ;&#41;&#41;
          </p>
    
    
    </body>
    </html>

    CSS
    Code:
    body   &#123;font-family&#58;verdana;
           font-size&#58;12px;&#125;
    
    h1	&#123;color&#58;#FFA000;
     	font-size&#58;50px;
             position&#58;absolute;
             top&#58;100px;
             left&#58;310px;&#125;
    
    h2       &#123;font-size&#58;12px;
             position&#58;absolute;
             top&#58;215px;
             left&#58;185px;&#125;
    
    div       &#123;position&#58;absolute;
              top&#58;140px;
              left&#58;160px;&#125;
    
    a	&#123;font-family&#58;verdana;&#125;
    
    a.oben&#58;link &#123;font-size&#58;12pt;
                 color&#58;#000000;
                 text-decoration&#58;none;
                 font-weight&#58;bold;&#125;
    
    a.oben&#58;visited &#123;font-size&#58;12pt;
                    text-decoration&#58;none;
                    color&#58;#BBBBBB;&#125;
    
    a.oben&#58;hover &#123;font-size&#58;12pt;
    	    color&#58;#FFFF00;
    	    text-decoration&#58;none;&#125;
    
    .mitte   &#123;position&#58;absolute;
             width&#58;550px;
             top&#58;150px;
             left&#58;150px;
             border-style&#58;solid;
             border-color&#58;#FFA000;
             padding&#58;25px;
             padding-top&#58;50px;
             border-width&#58;10px;
             border-top-width&#58;40px;
             border-bottom-width&#58;40px;
             height&#58;400px;&#125;
    hat jemand ne idee?
    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
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    wenn du im css bei mitte auf top:160px; stellst sollte es klappen..
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    Gast

    Standard

    das is ja nicht sinn und zweck des ganzen... ich wollte, das die schrift AUF dem rahmen liegt... sorry wenn ich mich unklar ausgedrückt habe.

    trotzdem danke

    ines

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das haut dann immer noch nicht ganz hin, weil dann die Navi die Überschrift noch überlagert.
    Du musst dir mal über die Top-Abstände bewusst werden:
    h1 ist von oben 100 px entfernt und hat 50px Höhe, zusammen also 150px.
    Dann kommt der div, der nur 140 px von obern Abstand hat und ragt folglich in die Überschrift hinein.
    Vorschlag:
    Lass mal überall die top- und left-Werte weg und verzichte auch auf das position:absolute;
    Weniger ist in diesem Fall mehr.

    Dafür machst du einen allumfassenden Container, der die Seite zentriert.
    Statt der bisherigen Klasse Mitte machst du einen id. und den div bezeichnest du als navi.

    Die CSS sieht dann so aus:


    Code:
    body   &#123;font-family&#58;verdana; 
           font-size&#58;12px;&#125; 
    
    h1   &#123;color&#58;#FFA000; 
        font-size&#58;50px; 
           
          &#125; 
    
    h2       &#123;font-size&#58;12px; 
            
    &#125; 
    
    
    #all
    &#123;
    margin&#58; 0 auto;
    text-align&#58;center;
    &#125;
    #navi       &#123;
              &#125; 
    
    a   &#123;font-family&#58;verdana;&#125; 
    
    a.oben&#58;link &#123;font-size&#58;12pt; 
                 color&#58;#000000; 
                 text-decoration&#58;none; 
                 font-weight&#58;bold;&#125; 
    
    a.oben&#58;visited &#123;font-size&#58;12pt; 
                    text-decoration&#58;none; 
                    color&#58;#BBBBBB;&#125; 
    
    a.oben&#58;hover &#123;font-size&#58;12pt; 
           color&#58;#FFFF00; 
           text-decoration&#58;none;&#125; 
    
    #mitte   &#123;
             width&#58;550px; 
    text-align&#58;left;         
    border-style&#58;solid; 
             border-color&#58;#FFA000; 
             padding&#58;25px; 
             padding-top&#58;50px; 
             border-width&#58;10px; 
             border-top-width&#58;40px; 
             border-bottom-width&#58;40px; 
             height&#58;400px;&#125;
    HTML
    Code:
    <div id="all">       
     <h1>KRASS</h1> 
    
       <div id="navi"> 
       Home 
             über uns 
             Willst du mitmachen? 
             Aufführungen 
             Freunde 
             </div> 
    
    <h2>über uns</h2> 
    
          <div id="mitte"> 
    KRASS existiert seit 1997 als Jugendtheatergruppe in Berlin und probt einmal in der Woche im Kreativhaus. 
     Wir sind eine bunte Gruppe mit wechselnder Besetzung, die sich hauptsächlich trifft, 
     um Spass am Theaterspielen zu haben. 
    
     
    
     Aber natürlich soll auch was bei raus kommen, wir wollen ja schließlich irgendwann aufführen. 
     Und damit das ein Erfolg wird, haben wir Suse - unsere Theaterpädagogin &#40;applaus applaus!!!&#41;.
    
     
    
     Wir haben bis jetzt immer ein Jahr geprobt und im Sommer dann 4 bis 5 Aufführungen gegeben. 
     Jetzt wollen wir die Zeit halbieren &#40;damit ihr auch im Winter nicht auf uns verzichten müss ;&#41;&#41; 
          </div> 
    
    </div>
    Falls du dann noch die Top-Abstände verändern willst, kannst du ja entsprechende Werte einfügen.

    edit: Welche Schrift bzw. welcher Text soll auf dem Rahmen liegen?

  5. #5
    Gast

    Standard

    die navi soll auf dem rahmen liegen. das ist ja mein problem... sie sollte weiss werden uns der rahmen gibt ihr nen orangen background...

    die abstände sollen ja eigendlich fast so bleiben...

    danke für deine hilfe
    ines

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Jow, dann eben anders:
    Ersetze mal die folgenden Positionen mit nachgenannten Codes, ausgehend von meinem vorherigen Quelltext:

    Code:
    #navi      &#123;
    background-color&#58;#FFA000; 
    width&#58;550px;
              &#125;
    Code:
    #mitte   &#123;
             width&#58;550px; 
             text-align&#58;left;         
             border-style&#58;solid; 
             border-color&#58;#FFA000; 
             padding&#58;25px; 
             padding-top&#58;50px; 
             border-width&#58;10px; 
             border-bottom-width&#58;40px; 
             height&#58;400px;&#125;

  7. #7
    Gast

    Standard

    hat jeklappt

    danke

Ähnliche Themen

  1. Textrahmen
    Von caddon im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 06.12.2007, 23:07
  2. CSS durchsichtige Grafik im Vordergrund / Überlagerung
    Von Mir nicht im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 20.06.2007, 11:20
  3. idividueller Textrahmen
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 29.01.2007, 21:12
  4. zugriff auf evenRowBackgroundColor / überlagerung background
    Von ich_finde_keinen_namen im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 0
    Letzter Beitrag: 07.04.2006, 10:37
  5. Links durch <a href="...."> ersetzen
    Von nuessler im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 18.04.2005, 22:14

Stichworte

Berechtigungen

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