CSS Problem Platzierung

Julian Ulrich

Julian Ulrich

Angesehenes Mitglied
Guten Abend,

CODE <html>
<head>
<meta http-equiv="inhalt-type" inhalt="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>eurwf kjerfjre kf,ge jerbj</title>
</head>

<body>
<a href="index.html"><img src="logo-super.jpg" alt="eurwf kjerfjre kf,ge jerbj
   erk" width="781" height="160" border="0" class="header"/></a>
<ul>
 <li class="akt"><a href="#">Startseite</a></li>
 <li><a href="#">Seite1</a></li>
 <li><a href="#">Seite2</a></li>
 <li><a href="#">Seite3</a></li>
 <li><a href="#">Seite4</a></li>
 <li><a href="#">Seite5</a></li>
 <li><a href="#">Seite6</a></li>
</ul>


<div class="inhalt">
 <h1>eurwf kjerfjre kf,ge jerbj</h1>
 <p><img src="os2.jpg" width="130" height="86" /> eurwf kjerfjre kf,ge jerbj
   erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre
   kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj
   erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre
   kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj
   erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre
   kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj
   erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre
   kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj
   erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre
   kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj
   erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk eurwf kjerfjre
   kf,ge jerbj erk eurwf kjerfjre kf,ge jerbj erk </p>
</div>

</body>
</html>



CODE body {
margin: 0px;
padding: 0px;
font-family: Verdana;
font-size: 12px;
background: #ffffff;
color: #032958;
}

.header {
margin-top: 10px;
}


ul {
position:absolute;
left:10px; top:180px;
padding: 0px;
margin: 0px;
list-style: none;
width: 160px;
}

li a{
font-weight: bold;
text-decoration: none;
color: #032958;
display: block;
padding: 8px;
border-left: 4px solid #C1E6F8;
border-right: 4px solid #C1E6F8;
margin-bottom: 10px;
}

.akt a, li a:hover {
background: #C1E6F8;
color: #286ea0;
border-left: 4px solid #2DA9D9;
border-right: 4px solid #2DA9D9;
}

.inhalt {
position:absolute;
left:200px; top:180px;
width: 611px;
border-right: 20px solid #D2EDFA;
padding-right: 20px;
line-height: 20px;
}

.inhalt a {
text-decoration: underline;
color: #015A85;
padding: 3px 3px 3px 3px;
}

.inhalt a:hover {
text-decoration: underline;
color: #ffffff;
background-color: #015A85;
padding: 3px 3px 3px 3px;
}

.inhalt img {
border: 2px dashed #2DA9D9;
float: left;
margin: 0px 10px 0px 0px;
}

a img {
border: 0;
}

h1 {
font-size: 16px;
margin: 0px;
padding: 0px;
color: #032958;
}


Ich will, dass der rechte Border des Inhalts mit dem Header oben abschließt. gina lisa nackt
Also eine Linie bilden, wenn ihr wisst, was ich meine. Kein Abstand nach rechts oder links.

Bitte um Hilfe!

lg, julian
 
QUOTE .inhalt {
position:absolute;
left:200px; top:180px;
width: 611px;
border-right: 20px solid #D2EDFA;
padding-right: 20px;
line-height: 20px;
}


QUOTE <a href="index.html"><img src="logo-super.jpg" alt="eurwf kjerfjre kf,ge jerbj
erk" width="781" height="160" border="0" class="header"/></a>

=> 781-200-20(padding)-20(border)=541

=> inhalt.width=541px

PS: Evtl gibt es auch noch mehr abzuziehen und ich habs übersehen (zB. zusätzliche Breite in den LIs) Und ich weiss nicht ob das direkt so geht, ich würd eher noch die Divs in ein weiters Div wrappen.
 
Danke. Das größte Problem ist aber, dass Firefox, Explorer und Opera es völlig anders anzeigen.
Wie kann ich es allen recht machen?
 
Wir haben es nochmal in Ruhe betrachtet. Daher noch folgendes Update:

Ich weiss nicht was genau falsch dargestellt wird, aber gute Infos zu Browser-Bugs findest du hier http://www.quirksmode.org/css/contents.html
Generell ziehe ich es immer vor, für das Menü einen div mit float: left zu erstellen - dann musst du den Inhalt nicht absolut positionieren (dem Inhalt dann einen margin-left mit der Breite des Menüs geben). Wichtig ist nur, das du vor dem Footer richtig clearst. (Vgl. http://www.css4you.de/clear.html). Ausserdem würde ich die komplette Seite in einen div machen, der genauso breit ist wie der Header (also width: ...px), dann brauchst du beim Inhalts-div keine feste Breite angeben (die blöde Rechnerei fällt weg).

Alternativ könntest auch dem Inhalt ein float: right; und eine Breite zuweisen - und das Menü nicht floaten lassen - dann kannst du im Quellcode den Inhalts-div vor dem Menü notieren (Vorteilhaft für Suchmaschinen).
 
Ich bin mir ziemlich sicher, dass mein erstes Post im FF funktioniert, im IE aber falsch angezeigt wird. Weiter glaube ich mich zu errinnert, dass der IE die padding und border Grössen _nicht_ der Breite zurechnet. Ergo müsste für den IE die Breite +40px (581px) sein.

Wie gesagt, wrappe in ein div. Wrappen heisst verpacken und Matthias ist so nett zu erklären:
QUOTE nicht absolut positionieren ... Ausserdem würde ich die komplette Seite in einen div machen, der genauso breit ist wie der Header (also width: ...px),
 
Vielen Dank für eure Mühe!

Der ganze Code hat sich sehr verändert.
Ein kleines Problemchen gibt es noch.
Beim IE ist ein zu großer Abstand zwischen Navigation und Content.

CODE <html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #032958;
}
div#wrap {
width: 778px;
background-image: url(logo-super.jpg);
background-repeat: no-repeat;
padding-top: 180px;
}
div#sidebar {
float: left;
width: 160px;
}
div#content {
float: right;
width: 558px;
line-height: 20px;
padding-right: 20px;
border-right: 20px solid #D2EDFA;
}

#content a {
text-decoration: underline;
color: #015A85;
padding: 3px 3px 3px 3px;
}

#content a:hover {
color: #ffffff;
background-color: #015A85;
}

h1 {
font-size: 16px;
margin: 0px;
padding-bottom: 10px;
color: #032958;
}

ul {
list-style: none;
width: 160px;
padding-left: 10px;
}

li a{
font-weight: bold;
text-decoration: none;
color: #032958;
display: block;
padding: 8px;
border-left: 4px solid #C1E6F8;
border-right: 4px solid #C1E6F8;
}

.akt a, li a:hover {
background: #C1E6F8;
color: #286ea0;
border-left: 4px solid #2DA9D9;
border-right: 4px solid #2DA9D9;
}

-->
</style>
</head>

<body>
<div id="wrap">

<div id="sidebar">
<ul>
<li class="akt"><a href="#">Startseite</a></li>
<li><a href="#">Seite1</a></li>
<li><a href="#">Seite2</a></li>
<li><a href="#">Seite3</a></li>
<li><a href="#">Seite4</a></li>
<li><a href="#">Seite5</a></li>
<li><a href="#">Seite6</a></li>
</ul>
</div>

<div id="content">
<h1>Eine Überschrift</h1>
<p>der große content</p>
</div>

</div>
</body>
</html>



Findet ihr sonst noch Probleme?
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben