Autor |
Nachricht |
juizzle
Threadersteller
Dabei seit: 06.11.2006
Ort: karlsruhe
Alter: 41
Geschlecht:
|
Verfasst Mo 13.12.2010 16:18
Titel DIV Sichtbarkeit / Zentrierung |
|
|
Hallo liebe gemeinde,
bin zur zeit dabei mich ein bisschen mit html/css vertraut zu machen.
Das alles kratzt bisher nur am allergröbsten der Oberfläche, aber schon jetzt komme ich nicht mehr weiter...
Es dreht sich um folgende Seite:
Test-Seite
Da klappte bisher alles einigermaßen so wie ich es mir auch vorgestellt habe (mittlerweile sogar auch im ie, den ich jetzt schon hasse). Nun zum Problem:
Ich möchte nun einen Rahmen zentriert platzieren, über den ich dann text und Bilder legen möchte. Vom Grundprinzip ähnlich wie beim Header mit dem Logo. Ich habe auch alles exakt aufgebaut wie beim header, aber es treten zwei Probleme auf:
Das rahmen.png, wird gar nicht erst angezeigt, sondern erst, wenn ich innerhalb des divs inhalt drinhabe, wir zum Beispiel Zeilenumrüche. Dann wird das png zeilenweise "freigelegt", eben soweit wieviel auch Zeilen vorhanden sind. Wenn es dann dadurch zu sehen ist, ist es allerdings auch noch linksbündig.
Verstehe es wirklich nicht, da alles wie beim logo-div ist.
Anbei der Code und die css, würde mich sehr freuen, wenn jemand den Fehler sieht.
Sollte sonst etwas sehr unsauber sein, gerne bescheid sagen....
HTML:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- HEADER ANFANG -->
<div class="header" align="center">
<div id="logo">
</div>
</div>
<!-- HEADER ENDE -->
<!-- MENU ANFANG -->
<div class="menu" align="center">
<div id="balken">
<ul id="menu">
<li><span style="color:#FFFFFF";><a href="">Home</li>
<li><a href="/about.html">SMV</li>
<li><a href="">Mediadaten</li>
<li><a href="">Downloads</li>
<li><a href="">AGB</li>
<li><a href="">Disclaimer</li>
<li><a href="">Kontakt</li>
<li><a href="">Impressum</span></li>
</ul>
</div>
</div>
</div>
<!-- MENU ENDE -->
<!-- CONTENT ANFANG -->
<div class="rahmen" align="center">
<div id="rahmen" align="center">
</div>
</div>
<!-- CONTEND ENDE -->
</body>
</html>
|
CSS:
Code: | @charset "UTF-8";
body {
margin:0px; padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
background-color:#f6f6f6;
position:inherit;
}
a:link {
color:#FFFFFF;
text-decoration:none;
}
a:visited {
color:#FFFFFF;
text-decoration:none;
}
a:focus {
color:#CCCCCC;
text-decoration:none;
}
a:hover {
color:#CCCCCC;
text-decoration: none;
}
a:active {
color:#999999;
text-decoration:none;
}
.header {
height:107px;
background-image:url(images/header_bg.png);
background-repeat:repeat-x;
}
.menu {
margin-top:20px;
word-spacing:24px;
}
.rahmen {
height:387px;
width:569px;
}
#rahmen {
background-image:url(images/rahmen.png);
background-repeat:no-repeat;
background-position:center;
width:569;
height:387;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:400px;
height:151px;
}
#balken {
background-image:url(images/navi.png);
background-repeat:no-repeat;
width:720px;
height:56px;
}
ul#menu {
padding-top:15px;
right:0px;
text-align:center;
}
ul#menu li {
display:inline;
font-size:13px;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
|
|
|
|
|
|
Nothingness
Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Mo 13.12.2010 16:44
Titel
|
|
|
Hi juizzle,
#rahmen {
background-image:url(images/rahmen.png);
background-repeat:no-repeat;
background-position:center;
width:569px;
height:387px;
}
Dir fehlen hier die Einheiten.
Edit: Du öffnest viele Tags, die du nicht wieder schließt (zB in der Liste). Und lagere das CSS doch komplett aus, align=center ist zB veraltet.
Immer nützlich
Zuletzt bearbeitet von Nothingness am Mo 13.12.2010 16:56, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
timonn
Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 13.12.2010 16:54
Titel
|
|
|
Außerdem sollte die rahmen-class noch ein margin-auto bekommen, damit es auch im firefox zentriert wird.
|
|
|
|
|
timonn
Dabei seit: 21.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 13.12.2010 18:26
Titel
|
|
|
Was mir gerade noch einfällt:
Ich habe es anfangs immer so gemacht, dass ich jedem Container eine andere Hintergrundfarbe gegeben habe, die sich gut voneinander abtrennen, also kein hexadezimal-code sondern die vorgefertigten Farben. So konnte ich immer direkt sehen, wo was angeordnet wurde, wie breit und hoch was ist und wo vielleicht noch ein paar Fehler sind. Wenn das alles stimmt, kannst du dann ja die Bilder und Farben anpassen. Hat mir immer sehr geholfen, vielleicht hilfts dir ja auch.
PS: Kann man hier seine eigenen Beiträge nicht editieren?
|
|
|
|
|
juizzle
Threadersteller
Dabei seit: 06.11.2006
Ort: karlsruhe
Alter: 41
Geschlecht:
|
Verfasst Di 14.12.2010 08:47
Titel
|
|
|
wunderbar, vielen lieben Dank für die Tipps!
Das Auto-Margin war gold wert...
Verstehe trotzdem noch nicht, warum das beim Rahmen nötig ist, beim Logo allerdings nicht - dort ist es auch ohne das zentriert. Kann mir das jemand erklären
ps.: doch kann man oben rechts in deinem post ist ein edit-button
Zuletzt bearbeitet von juizzle am Di 14.12.2010 08:48, insgesamt 1-mal bearbeitet
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 14.12.2010 09:30
Titel
|
|
|
Solltest du entfernen.
Zentriert werden Blockelemente mit
Textelemente / Inhaltselemente (img, p, ...):
Code: | text-align: center; |
Und für die farbigen Rahmen gibts was besseres: Firebug (Firefox), WebInspector (Safari/WebKit/Chrome), Dragonfly (Opera). Damit kannst du auch gut testen und versuchen zu verstehen, was wie aussieht
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS und zentrierung von z-index
XHTML und CSS, Zentrierung und Positionierung?
(CSS) Zentrierung eines Klappmenus
(BARRIEREFREIHEIT) SWF zentrierung in HTML
zentrierung per CSS: inhalt verschwindet links
Problem bei Zentrierung eines DIV-Tags
|
|