ü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

<html>
<head>
<title></title>


 <link rel="stylesheet" href="krass1.css" type="text/css">


</head>
<body>




<h1>KRASS</h1>


	<div>
	[url='csskurs_23-09_uebung2.html']Home[/url]
         [url='csskurs_23-09_uebung2.html']über uns[/url]
         [url='csskurs_23-09_uebung2.html']Willst du mitmachen?[/url]
         [url='csskurs_23-09_uebung2.html']Aufführungen[/url]
         [url='csskurs_23-09_uebung2.html']Freunde[/url]
         </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 (applaus applaus!!!).






 Wir haben bis jetzt immer ein Jahr geprobt und im Sommer dann 4 bis 5 Aufführungen gegeben.
 Jetzt wollen wir die Zeit halbieren (damit ihr auch im Winter nicht auf uns verzichten müss ;))
      </p>




</body>
</html>

Alles anzeigen

CSS

Code

body   {font-family:verdana;
       font-size:12px;}


h1	{color:#FFA000;
 	font-size:50px;
         position:absolute;
         top:100px;
         left:310px;}


h2       {font-size:12px;
         position:absolute;
         top:215px;
         left:185px;}


div       {position:absolute;
          top:140px;
          left:160px;}


a	{font-family:verdana;}


a.oben:link {font-size:12pt;
             color:#000000;
             text-decoration:none;
             font-weight:bold;}


a.oben:visited {font-size:12pt;
                text-decoration:none;
                color:#BBBBBB;}


a.oben:hover {font-size:12pt;
	    color:#FFFF00;
	    text-decoration:none;}


.mitte   {position:absolute;
         width:550px;
         top:150px;
         left:150px;
         border-style:solid;
         border-color:#FFA000;
         padding:25px;
         padding-top:50px;
         border-width:10px;
         border-top-width:40px;
         border-bottom-width:40px;
         height:400px;}

Alles anzeigen

hat jemand ne idee?

driver

wenn du im css bei mitte auf top:160px; stellst sollte es klappen..

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

sejuma

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   {font-family:verdana; 
       font-size:12px;} 


h1   {color:#FFA000; 
    font-size:50px; 

      } 


h2       {font-size:12px; 

} 




#all
{
margin: 0 auto;
text-align:center;
}
#navi       {
          } 


a   {font-family:verdana;} 


a.oben:link {font-size:12pt; 
             color:#000000; 
             text-decoration:none; 
             font-weight:bold;} 


a.oben:visited {font-size:12pt; 
                text-decoration:none; 
                color:#BBBBBB;} 


a.oben:hover {font-size:12pt; 
       color:#FFFF00; 
       text-decoration:none;} 


#mitte   {
         width:550px; 
text-align:left;         
border-style:solid; 
         border-color:#FFA000; 
         padding:25px; 
         padding-top:50px; 
         border-width:10px; 
         border-top-width:40px; 
         border-bottom-width:40px; 
         height:400px;}

Alles anzeigen

HTML

Code

<div id="all">       
 <h1>KRASS</h1> 


   <div id="navi"> 
   [url='csskurs_23-09_uebung2.html']Home[/url] 
         [url='csskurs_23-09_uebung2.html']über uns[/url] 
         [url='csskurs_23-09_uebung2.html']Willst du mitmachen?[/url] 
         [url='csskurs_23-09_uebung2.html']Aufführungen[/url] 
         [url='csskurs_23-09_uebung2.html']Freunde[/url] 
         </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 (applaus applaus!!!).


 


 Wir haben bis jetzt immer ein Jahr geprobt und im Sommer dann 4 bis 5 Aufführungen gegeben. 
 Jetzt wollen wir die Zeit halbieren (damit ihr auch im Winter nicht auf uns verzichten müss ;)) 
      </div> 


</div>

Alles anzeigen

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?

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

sejuma

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

Code

#navi      {
background-color:#FFA000; 
width:550px;
          }

Code

#mitte   {
         width:550px; 
         text-align:left;         
         border-style:solid; 
         border-color:#FFA000; 
         padding:25px; 
         padding-top:50px; 
         border-width:10px; 
         border-bottom-width:40px; 
         height:400px;}

hat jeklappt

danke

überlagerung von links durch textrahmen

Tags

Benutzer online in diesem Thema