Website in Firefox und IE falsch angezeigt!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
auto
befinden
blocken
boxen
button
code
eigene designs
eigenschaft
element
eltern
jemand
knopf
komplikation
pointer
programm
radius
sagen
tag
text
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Am besten du stellst den betroffenen Code einfach mal hier rein.
Ohne Code kann ich nur sagen das Chrome eigene Designs "anwendet". Wenn du normalisor verwendest wird es vieleicht gleich aussehen. -
<html> <head> <title> Home - Tec-Fantasy! </title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="shortcut icon" href="images/favicon.png"> </head> <body align="center" style="align:center"> <br><br><br><br> <a href="http://tec-fantasy.lima-city.de/"><button type="button" id="home" onClick="">Home</button></a> <a href="http://tec-fantasy.lima-city.de/news"><button type="button" id="home" onClick="">News</button></a> <a href="http://tec-fantasy.lima-city.de/ueber.html"><button type="button" id="ueber" onClick="">Über Uns</button></a> <a href="http://tec-fantasy.lima-city.de/programme/index.html"><button type="button" id="programme" onClick="">Programme und Spiele</button></a><br> <hr style="color:#ffffff; background-color:#ffffff; height:6px;"> <h1>Home</h1> <div style="background-color:#9999ff">Willkommen auf der Website von Tec-Fantasy!</div> <hr style="color:#ffffff; background-color:#ffffff; height:6px;"> </body> </html>
* { margin:0; padding:0; border:0; } body { background-color:#000000; margin:0; font-family:Verdana, Tahoma, Arial, sans-serif; font-size:14px; color:#FFFFFF; } a:link, a:active, a:focus { text-decoration:underline; color:#9999FF; } a:visited { color:#BB99FF; } a:hover { text-decoration:none; background-color:#FFFFFF; color:#000000; } .left { float:left; } .right { float:right; } .clear { clear:both; height:1px; font-size:1px; line-height:1px; } #knopf { margin:30px 0px 0px 20px; border:1px solid #036; padding:10px; border-radius:8px; transform:rotate(10deg); background:linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); box-shadow:2px 2px 6px 2px #ccc, inset 0 0 8px rgba(0,0,0,0.75); color:#FFFFCC; font-family:"Comic Sans MS", cursive; font-size:14px; font-weight:bold; cursor:pointer; } #knopf:hover { background:linear-gradient(to bottom, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); box-shadow:3px 3px 7px 3px #bbb, inset 0 0 6px rgba(0,0,0,0.5); color:#FFFFFF; }
Beitrag zuletzt geändert: 12.10.2014 19:42:43 von tec-fantasy -
Also zentrieren kann man seinen Inhalt mit auto (z.B. margin: 0 auto;) und wenn es dann immernoch nicht funktioniert must du noch eine max-width: setzen.
Das solte es schon gewesen sein. -
hallo tec-fantasy,
um block-elemente richtig u zentrieren musst du zwei angaben machen:
(1) dem eltern-element (in dem sich die zu zentrierenden elemente befinden) die eigenschaft "text-align:center" geben
(2) jedem zu zentrierendem block-element (wie z.b. div) die eigenschaft "margin:0px auto" geben (oder eine sonstige angabe zu margin bei dem für links und für rechts auto steht)
nun macht das zentrieren von block-elementen ja nur sinn wenn du ihnen eine feste breite gibst, denn sonst sind sie ja eh genauso breit wie das eltern-element, also quasi sowieso zentriert.
auf deiner seite sind die links eher unglücklich gewählt. du verschachtelst "button" innerhalb von "a" wodurch es meiner meinung nach zu komplikationen im click-event kommen könnte. auch stehen bei den buttons teilweise die selben ids.
ich würde dir raten dort entweder nur "button" zu benutzen wenn du die fukionalität eines buttons haben willst, oder halt nur "a" wenn du einen link haben möchtest (egel wie der tag deines elements lautet, mit css kannst du jedes wie jedes andere aussehen lassen)
lg hechma -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
