Iframe Design in der Mitte
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ahnung
anhand
befehlen
beitrag
beschrieb
bild
body
design
element
enthaltene flash
fram
irgendein
margin
millimeter
mitte
mittelpunkt
negativen margin
pixelgenau zentrierung
tabelle
webseite
-
Hallo!
ich habe wiedermak ein iframe-design gemacht, aber ich hab keine ahnung mehr, wi ich des in die mitte bekomme! ich habe ein Bild gemacht, und anhand von dem die iframes positioniert.
Nur bracuh ich den code, das das ganze Bild und die frames in die mitte wanden. ich hab gelesen, man kann es in ne tabelle packn, hab aber keine ahnung wie das geht.
Es ging doch auch mit irgendeinen code...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
sunny017 schrieb:
Hallo!
ich habe wiedermak ein iframe-design gemacht, aber ich hab keine ahnung mehr, wi ich des in die mitte bekomme! ich habe ein Bild gemacht, und anhand von dem die iframes positioniert.
Nur bracuh ich den code, das das ganze Bild und die frames in die mitte wanden. ich hab gelesen, man kann es in ne tabelle packn, hab aber keine ahnung wie das geht.
Es ging doch auch mit irgendeinen code...
Mit purem HTML nur sehr schwer realisierbar: die pixelgenau Zentrierung
eines Elementes in der Mitte der Webseite.
Wenn Deine Webseite eine Introseite besitzt und Du das dort enthaltene Flash-Intro oder den "Start"-Button genau in der Mitte der Seite ausrichten willst, bietet Dir CSS dazu folgende M?glichkeit:
<html>
<head>
<style type="text/css">
<!--
BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
-->
</style>
<title>Elemente genau in der Mitte der Webseite zentrieren</title> </head> <body>
<div id="zentriert">
<img src="bild.jpg">
</div>
</body>
</html>
Zuerst wird der unsichtbare Abstand zwischen Inhalt der Webseite und dem Browserfenster mit dem Befehl margin: 0px 0px 0px 0px; auf Null gesetzt.
F?r den Bereich "zentriert" wird zuerst die Breite (width: 400px) und die H?he (height: 300px) festgelegt. Mit den beiden Befehlen left: 50% und top: 50% wird das Element in die Mitte der Webseite verschoben. Da sich die beiden Befehle left und top auf die linke, obere Ecke des Elementes beziehen, muss dieses noch durch einen negativen margin-left und margin-top um genau die H?lfte seiner Gr??e nach links bzw. oben versetzt werden.
Nun ist der Mittelpunkt der Grafik genau in der Mitte der Webseite
zentriert.
Ich hoffe das hilft weiter oder eben mit <table ...........><tr><td>.......</td></tr></table> und so weiter -
Hmm, es geht aber wirklich nur das bild in die mitte, die frames bleiben wo sie sind. Hab den ganzen text einfach in den <head> bereich kopiert, (ohne den <html> </body> tag uns so nat?rlich) es funktioniert irgendwie nicht.
Ich muss e nichts ver?ndern -> ausser den bildlink halt, oder?
Ich bin einfach zu bl?d f?r diese Welt *lol* -
NeNe bist nicht zu bl?d must halt noch ein wenig dazulernen!
Selfhtml und Selfphp kann ich da nur empfehlen!!!
Nun zu Deinem Problem.
Es sollte einfach funzen, wenn Du folgendes gemacht hast!
<style type="text/css">
<!--
BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
-->
</style>
Den Teil wie o.g. in den Head - Tag
BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
<-- Das in den Body - Tag
<div id="zentriert">
<img src="bild.jpg">
</div>
<-- das dort einbinden, wo die Grafik erscheinen soll -
n? also da bewegt sich nichts, hab schon alles erdenkliche herumprobiert *lol*.
okay, der erste teil im head tag ist mir klar, der letzte teil ist mir auch klar, was mir nicht ganz klar ist, ist der teil, wo der code im body tag soll.
Meine Frames und so sind ja auch im body tag. Meinst du soll ich es einfach zwischen
<body>
CODE
</body>
schreiben.
oder so:
<body bgcolor="blablabla" BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
-------------
Da w?re ja kein Abschluss da oder so?? -
sunny017 schrieb:
n? also da bewegt sich nichts, hab schon alles erdenkliche herumprobiert *lol*.
okay, der erste teil im head tag ist mir klar, der letzte teil ist mir auch klar, was mir nicht ganz klar ist, ist der teil, wo der code im body tag soll.
Meine Frames und so sind ja auch im body tag. Meinst du soll ich es einfach zwischen
<body>
CODE
</body>
schreiben.
oder so:
<body bgcolor='blablabla' BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
-------------
Da w?re ja kein Abschluss da oder so??
Neee....
<body bgcolor='blablabla' BODY {
margin: 0px 0px 0px 0px;
}
nicht so ......!!!!!!!!
<style type="text/css">
<!--
BODY {
margin: 0px 0px 0px 0px;
}
Das hier muste auch so schreiben ....
<style type="text/css">
<!--
BODY {
margin: 0px 0px 0px 0px;
}
...
...
...
</style>
Dass sind sogenannte Style Shets
also legst Du in <style>.....</style> fest was im Body passiert
Aufrufen tuste den Bopdy einfach wie gehabt mit <body> unterhalb von <head> -
lol, ich komm ma schon so bl?d vor..
Das bewegt sich keinen millimeter. habe das jetzt so gemacht
<html>
<head>
<title>lol<title>
<style type="text/css">
<!--
BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<style type="text/css">
<!--
BODY {
margin: 0px 0px 0px 0px;
}
#zentriert {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
-->
</style>
<div id="zentriert">
<img src="bild.jpg">
</div>
Hier irgendwo w?ren dann die ganzen iframe
Beitrag ge?ndert am 26.06.2006 13:39 von sunny017 -
Mmmmmm.... So wie es nun aussieht isses etwas in die Falsche Richtung gegangen habe aber leider keine Zeit mehr weiter zu machen. Werde morgen weiter sehen, ob ich Dir helfen kann, wenn es sich nicht schon erledigt hat. Denn das was wir nun beschrieben haben kommt nicght in die Seite wo der Frame aufgerufen wird sondern in die im Frame dargestellte Seite also seite.html
der aufruf des Iframes sieht so oder so ?hnlich aus :
<iframe src=\"seite.html\" name=\"iframe\" scrolling=\"auto\" width=\"99%\" height=\"510\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" allowTransparency=\"true\" align=\"center\"></iframe>
Und in die Seite die (hier Seite.html) gennant wird der Code eingebunden.
Also wenn es nicht hinhaut werde ich mich morgen noch einmal melden.
MfG Und nicht verzweifeln es wird schon -
Okay, aber ich weiss das ich es mit irgendeinem code (den ich ja leider nicht mehr habe) direkt in die index.html wo auch jetzt meine iframes sind hinbekommn habe.
und sonst hab ich keine anderen seiten. ich hab nur f?r jeden iframe eine extra seite.
Also f?r rechtes frame: right.htm und so weiter.
Ansonsten hab ich noch meine ganzen link seiten.
kontakt.html
gbook.html und und und.
ich denk maml dr?ber nach, vielleicht komm ich ja noch drauf, kann ja ned so schwer sein.
aja, und mein bild was ich als design verwenden will hba ich auch noch, und das gebe ich auch auf der index.html an
Beitrag ge?ndert am 26.06.2006 14:03 von sunny017 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage