• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Script für Mozilla

Habe margin-top 70 auf 0 gesetzt...ist mir jetzt aber etwas zu nah dran...warum kann ich kein margin-top 20 setzten?...der abstand wird dann wieder so riesig!


http://www.sb-installationen.de/

Code: 
/* Allgemeine Formatierungen */
*{
 margin:0;
 padding:0;
}

body{
 background:#eee;
 font:.8em "trebuchet ms", arial, sans-serif;
 text-align:center;
}


/* Formatierungen Layout (grob) */
#seite{
 background:#000 url(hintergrund.jpg) repeat-y;
 margin:0 auto;
 padding:10px 10px 5px 13px;
 text-align:left;
 width:715px
}

#oben{
 background:#fff url(header_layer.jpg);
 clear:both;
 height:168px;
 width:713px;
}

#margit{
 background:#fff url(margit.jpg);
 padding:10px 10px 5px 13px;
 margin:130px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 
 }
 #daniel{
 background:#fff url(daniel.jpg);
 padding:10px 10px 5px 13px;
 margin:145px 25px 20px 20px;
 clear:both;
 float:right;
 height:90px;
 width:90px;
 }
 #book{
 background:#fff url(book.swf);
  margin:80px 25px 20px 20px;
  clear:both;
 height:600px;
 width:700px;
}
#links{
 float:left;
 margin:0 0 20px 0;
 width:458px;
}
 
 #flash1{
 background:#fff url(flash1.swf);
 /* oben/ rechts/-----/----/ */
 margin:50px 1px 0px 0px;
 float:right;
 height:227px;
 width:227px;
  }
 #teppich{
 background:#fff url(goto_roter_teppich.jpg);
 /* oben/ rechts/-----/----/ */
[COLOR=Red] margin:0px 1px 10px 0px;[/COLOR]
 clear:both;
 float:right;
 height:151px;
 width:227px;
 }
 


#rechts{
 float:left;
 margin:0 0 20px 20px;
 width:235px
}

#unten{
 background:#000000;
 clear:both;
 width:713px
}
.back {
	
	background-repeat: repeat-y;
	background-position: top center;
	background-attachment: scroll;
}

/* Formatierungen Navigationsleiste */
#navigation{
 background:#000000;
 float:left;
 width:500px;
 padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
 display:inline;
 margin:0 10px 0 0 
}

#navigation ul li a{   /* Balken - Navi */
 text-decoration:none;
 border-bottom:4px solid #000000;
 color:#ffffff;
 font-size:.9em; 
 font-weight:bold;
}

#navigation ul li a:hover{
 text-decoration:none;
 border-bottom:4px solid #ffffff
}



/* Sonstige Formatierungen */
.titel{
 float:right;
 width:90px;
 padding:0 10px 0 0
}

.titel img{
 border:0
}



/* Schrift-Formatierungen */
h1,h2,h3,h4,h5,h6{
 border-bottom:1px solid #ccc;
 color:#ffffff;
 font-size:1.5em;
 letter-spacing:0.01em;
 margin:25px 0 0 0
}

#links p{
 text-align:justify
}

#unten p{
 color:#eee;
 font:.85em "trebuchet ms", verdana, sans-serif;
 padding:5px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul{
list-style:none;
 margin:0 0 0 0
}

#rechts ul li{
 background:url(liste.jpg) no-repeat;
 display:block;
  margin:0 0px 0 0;
 padding:0 0 0 16px
}

#rechts ul li a{
 text-decoration:none;
  color:#666;
}

#rechts ul li a:hover{
  color:#000;
}



/* Link-Formatierungen */
a:link,a:visited,a:active{
 color:#000;
 text-decoration:underline
}

a:hover{
 text-decoration:none
}


#unten a{
 color:#fff;
 text-decoration:underline
}

#unten a:hover{
 text-decoration:none
}
 
halloo,

: weil du noch "clear:both" drin hast?
probier's aus. mit clear:both wird ja dieser Container in der Zeile unterhalb vom Container "links" angeordnet,
also bemisst sich der Abstand von der Unterkante dieses links-Containers...


planet4.
 
woher kommen denn die ca. 2px unter dem photo "roter teppich"?...die da eigentlich nicht hingehören?

da ist bestimmt der hight wert falsch oder?
 
... soll heißen: im Firefox sind sie nicht zu sehen, weiß jetzt auch gerad nicht warum,
mach einfach mal die Höhe um 2px niedriger.

planet4.
 
Das scheint etwas von der oberen Bildkante zu sein....!

ist das float right korrekt?
 
Zuletzt bearbeitet:
ja, das ist die obere Bildkante, da das Hintergrundbild wiederholt wird, wenn der
Container größer als das Bild ist, mit der Anweisung "no-repeat" kannst du das im CSS
ausschließen, am besten das Hintergrundbild auch gleich oben links anordnen:

background:#fff url(goto_roter_teppich.jpg) top left no-repeat;

musst mal gucken, wie hoch überhaupt dein Hintergrundbild ist
[ ich hab gerad gesehen, es ist 151, wenn du es jetzt oben links im Container positionierst
und no-repeat hinzufügst, müsst auch IE das eigentlich richtig machen, aber man weiß ja nie...]

planet4.
 
Zuletzt bearbeitet:
Habe es entsprechend verbessert:

http://www.sb-installationen.de/

Jetzt erscheint im IE ein weißer Balken unter dem Bild :D :D


}
#teppich{
background:#fff url(goto_roter_teppich.jpg) top left no-repeat;
margin:20px 5px 20px 0px;
float:right;
height:151px;
width:227px;
}
 
na prima ! :D

du hast ja, hab ich gerade gesehen, im HTML-Quelltext in diesem Container auch das Bild eingefügt...
ich hatte bisher gedacht, das sei nur ein Hintergrundbild. Ist das nicht doppeltgemoppelt? muss das sein?

nimm doch das Hintergrundbild weg und mach den Hintergrund des Containers schwarz.

Die Anzeige im IE hängt sicher damit zusammen, dass er hier wegen des Bildes, das in HTML eingefügt
ist, den Container größer macht.

planet4.
 
(manchmal weiß ich nciht, ob deine Fragen ernst gemeint sind :) )

das Bild ist weg, ja, auf was soll man jetzt klicken können?

es gibt zwei Möglichkeiten:

1. das Bild muss wieder her und das Hintergrundbild kommt raus, weil überflüssig

2.das Bild bleibt draußen, aber der a-Tag wird per CSS auf die Größe des Bildes getrimmt:

a.warum {
display: block;
height: 151px;
}

d.h. a erhält die Klasse "warum", breitet sich so weit es kann aus, weil alle Blockelemente das tun, und
bekommt eine Höhe von 151px zugewiesen, somit füllt es den Container mit dem Hintergrundbild aus
und man kann draufklicken :)


planet4.
 
fragen sind leider ernst gemeint :(

Code: 
 #teppich{
[COLOR=Red]background:#fff url(goto_roter_teppich.jpg) top left no-repeat ;[/COLOR]
 margin:20px 5px 20px 0px;
 float:right;
 
 height:151px;
 width:227px;
 }

Das heißt das rot markierte löschen (war keine gute idee)
oder nur als bild ein schwarzes bild laden?
 
nein, du brauchst kein schwarzes Bild, mach einfach nur den Hintergrund schwarz:

background:#fff;

planet4.
 
so ist der HTML code

Code: 
</div>
<div id="teppich"><a href="roterteppich.html" target="_self"><img src="goto_roter_teppich.jpg" border="0" /></a>
</div>


so der CSS code

Code: 
  }
 #teppich{
 background:#fff;
 margin:20px 5px 20px 0px;
 float:right;
  height:151px;
 width:227px;
 }



irgendetwas stimmt noch nicht :confused:
 
ja, der Hintergrund ist weiß antstatt schwarz (hab ich vorhin auch falsch abgeschrieben)
also #000000,
(sollte doch so sein, weil der IE sonst einen weißen Streifen unten anzeigt, wenn ich mich richtig erinnere...)

planet4.
 
hätte ich natürlich auch drauf kommen können... aber manchmal denkt man, dass man von dem ganzen eh weniger ahnung hat als andere...und bevor man sich wieder verennt...naja


aber danke funzt ausgezeichnet..



ein hoch auf CSS :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben