Zentrierungszwang erreichen mit HTML(?)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
ausrichtung
auto
banner
bereich
bild
button
code
datei
element
erfahrung
header
http
mitte
position
problem
test
text
versuchen
vertikale zentrierung
-
Ich gebe mich geschlagen - entweder ich bin zu blöd oder einfach nur zulange wach und deswegen Blind für die Problemlösung...
Ich will nen Banner von Limacity in meinem header zentrieren... an und für sich ja keine schwere Sache, aber halt mit align und valign ausrichtung... hab schon viele (will nicht sagen alle) Kombinationen ausprobiert, zumindest die die mir eingefallen sind. Leider half nichts. Auf Selfhtml fand ich nichts, habe aber wahrscheinlich nur falsch gescuht... auf ner anderen HP gab es einen \"Trick\" mit ner Table die 100% abdeckt, aber das funktioniert auch nicht... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Div für den Header in der gleichen Grösse wie der Header selbst erstellen:
<div id=\"header\"><img src=\"header.jpg\" alt=\"header\" /></div>
Und im CSS:
#header
{
left:50%;
margin-left:-200px;
width: 400px;
height: ?px;
}
Dabei muss margin-left jeweils width/-2 sein.
MfG
sebigisler -
Müsste das nich einfach damit gehen:
<img id=\"lima-city-bild\" src=\"wasweissich.jpg\" alt=\"lima-city-banner\" />
und in der CSS-Datei:
#lima-city-bild {
text-align: center;
}
SRY für eventuelle Rechtschreibfehler
Ich denke, das würde so auch gehen, allerdings kann man es afaik (soweit ich weiß) auch ohne CSS im <style>-bereich oder einer externen Datei lösen:
<div style=\"text-align:center\"><img src=\"banner.jpg\" alt=\"Lima-City-Banner\" /></div>
Wenn das nicht klappt, dann weiß ich nicht mehr weiter
MfG -
ich mach das normal immer mit:
<div align=\"center\"><img src=\"limabanner.gif\" alt=\"lima\"></div> -
Danke für die Versuche - leider klappte nichts wie ich mir das vorstellte. Zwar wird es horizontal aber nicht VERTIKAL zentriert...
Weitere Infos die vllt. helfen.
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\"
\"http://www.w3.org/TR/html4/frameset.dtd\">
Und ich hab die HP (auch wenn mich jetzt wer lünchen sollte) mit Framesets gestaltet - sprich der Header ist ne eigene HTML Datei die ich nach oben lade... wer sich das ganze anschauen will (will (vorerst) nur mal den Lima-City Banner da hin knallen) andersen.lima-city.de -
Na jetzt seh ich, wo das Problem liegt ;) Du hast also den Lima-Banner als Hintegrundbild genommen, wenn ich das richtig sehe...
Also wenn ich dich wäre, würde ich das glaub einfach so machen:
<html>
<head>
</head>
<body>
<center>
<a href=\"http://www.lima-city.de/\">
<img src=\"http://www.lima-city.de/images/banner/lima-city_728x90_2.gif\" border=\"0\" />
</a>
</center>
</body>
</html>
Der gute alte Center-Tag; zwar nicht mehr ganz frisch, aber er funktioniert ;)
Übrigens würde ich im Header sowieso nicht den Lima-Banner einbauen... Sieht meiner Meinung nach komisch aus - weshalb baust du ihn nicht unter dem Menu (als wäre er ein weiterer Menupunkt) ein?
MfG
sebigisler
Beitrag geändert: 4.5.2008 12:29:14 von sebigisler -
das mit dem Center funzt weiterhin nicht, hab ich direkt am Anfang ausprobiert gehabt ^^ ist ja auch nur align (also horizontal) ausgerichet, net valign (vertikal also oben unten)...
Aber des mit dem Button ist ne Idee... hatte mir überlegt über nen array und den entsprechenden Variablen nen \"Bannertauscher\" zu integrieren der jedesmal bei Seite ändern auch ändert - leider müsste ich dafür 2 Frames ändern und das müsste ich nochmal nachschlagen.
Das mitm Button werd ich auf jedenfall mal ausprobieren, thx ^^
Ansonsten ist das ganze im Header NICHT als BG sondern als normales Bild wie bereits bei dir geschrieben.
Quellcode:
<html>
<head>
</head>
<body>
<table height=\"100%\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
<tr height=\"100%\" width=\"100%\">
<td width=\"100%\" height=\"100%\" align=\"center\" valign=\"center\">
<div style=\"text-align:center\">
<a href=\"http://www.lima-city.de/?ref=110838\">
<img id=\"lima-city-bildy\" src=\"KurzderBanner.jpg\" border=\"0\" alt=\"lima-city-bild\">
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
(bissschen bearbietet - der Übersicht halber) -
kleiner Tipp am Rande, sieh dir deine Seite mal bei einer höheren (vor allem breiteren) Auflösung an, da passt noch was nicht mit den Framesets...
-
Hmm, ich weiß nicht was da für Probleme auftauchen, aber im BODY TAG einfach ein text-align: center als Style einfügen hatte gereicht um das Banner zu zentrieren...
-
ähm das mit dem Center ist ja alles schön und gut aber es ist NICHT vertikal (horizontal, von oben nach unten, von unten nach oben, Höhe !!!) zentriert! DAS ist das Problem!
Und mit den Framesets ist alles in Ordnung, das Bild endet nur leider an der Stelle... unschön aber ne menschliche Silouette geht nunmal nicht ewig... Nen Abschluss ans Bild setzen würde schwer werden und wahrscheinlich nicht den gewünschten Effeckt bringen. -
Fakt ist, dass eine vertikale Zentrierung in HTML NICHT geplant ist.
Denn: Wo bitteschön ist die vertikale Mitte?
Eine normale Seite ist nach links und rechts, nicht aber nach unten begrenzt.
Der Text geht unten weiter. Wo wäre denn da die Mitte?
Ich kann mir vorstellen, was du vorhast:
Einen Block in der Mitte der Seite, der eigene Scrollbalken hat?!
Doch dafür ist HTML nicht ausgelegt.
Du kannst nur versuchen, über die CSS-Angaben position:absolute; top: 20%; bottom: 20%; oder so ähnlich
in der Mitte einen Bereich zu erzeugen, zwischen dem der Inhalt aufgespannt wird.
Doch der IE z.B. hat arge Probleme mit den Angaben top, left, right und bottom (wieso auch immer...).
Mich persönlich würde das ja nicht stören, da IE eh doof ist, aber ich wollte es trotzdem lieber erwähnen... ;)
-
Versuch mal:
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align -
ähm das mit dem Center ist ja alles schön und gut aber es ist NICHT vertikal (horizontal, von oben nach unten, von unten nach oben, Höhe !!!) zentriert! DAS ist das Problem!
Wie willst du auch ein Element in der Höhe zentrieren, wenn über und unter dem Banner kein Platz mehr ist?
Mal davon abgesehen, dass man dein Layout ohne Frames viel einfacher realisieren könnte.
-
Hi,
also wenn du ein Element hast wie
<div class=\"test\">Test</div>
Dann müsste sowas hier schon reichen (nach meiner Erfahrung):
div.test { margin-left:auto; margin-right:auto; }
Yazurah -
Hi,
also wenn du ein Element hast wie
<div class=\"test\">Test</div>
Dann müsste sowas hier schon reichen (nach meiner Erfahrung):
div.test { margin-left:auto; margin-right:auto; }
Yazurah
Funktioniert jedenfalls, wenn man als Doctype XHTML1.1 Strict angibt (getestet FF2+3, Opera (getestet 9.25), IE6+7, Safari
-
Hi, schau dir mal meinen Code von der Seite
http://www.finch.at.tt
ich hab vert. und horiz zentriert und haut supi hin. :-)
(kannst auch tabellen und auch alles andere so zentrieren...)
-
Hab jetzt nicht alles ganz genau durchgelesen, aber wenn du den oberen Frame eine Feste Größe gibst und den Banner in nen DIV ballerst mit festen Abstand nach oben(den du dann ja durch probieren zentrieren kannst) angibst haste doch deine vertikale Zentrierung auch erreicht..
im Übrigen finde ich die Hellsingfolgen auch sehr geil, leider gabs da nur 13 oder 14 von...wenn du willst nehm ich deine Seite mit in meine Linkliste auf(wenn ja per PN melden bitte)..
Edit: da fällt mir ein, dass man mit css auch vertikal zerntrieren kann..
code:
BANNER {
position: absolute;
width: BANNERBREITE;
height: BANNERHÖHE;
margin-top: BANNERBREITE/2px;
margin-left: BANNERHÖHE/2px;
top: 50%;
left: 50%;
}
in den div musste den Banner klatschen und entsprechend die Höhe und Breite eintragen
Beitrag geändert: 7.5.2008 12:13:45 von blu3t0oth -
<table style=\"margin:0px 0px 0px 0px;width:100%;height:100%;\"> <tr> <td style=\"text-align:center;vertical-align:middle;\"><img src=\"banner.jpg\"></td> </tr> </table>
das hier schon mal probiert? -
Robin, blu3t0oth und der Link von Kleingerede (mit CSS gearbeitet) sind des Rätsels Lösung :D
Hab mich mittlerweile entschieden die Banner aber in die Menuliste zu hauen und wende mich bald dem nächsten Projekt zu, erstmal noch ein paar \"kleine\" Tests an der Seite ^^
Damit kann der Topic geschlossen, aber bitte NIE gelöscht werden ^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
