Hilfe bei CSS-Seitenlayout [Archiv]

Stanger

2014-05-17, 16:40:29

Hallo,
guckt euch bitte mal www.pchelpnow.de an. Ich bin am verzweifeln.
Ich möchte dass die Box mit "Navigation" und "Neues" den gleichen Abstand haben wie der mittige Inhalt zum Top "Willkommmen...." dort sieht man ja den kleinen Abstand. Momentan kleben beide Boxen am Top-Banner.

Mein CSS code:

body {
padding: 0px;
margin: 0px;
background-color: #1D634D;
}
#kopf {
height: 100px;
margin: 10px;
background-color: #D1CBC5;
}
#inhalt {
width: auto;
margin: 0px 180px;
padding: 10px;
background-color: #D1CBC5;
}
#links {
position: fixed;
top: 22%;
width: 160px;
margin: 0px;
left: 10px;
height: 300px;
background-color: #B4AA9C;
}
#rechts {
position: fixed;
top: 22%;
width: 160px;
margin: 0px;
right: 10px;
height: 300px;
background-color: #B4AA9C;
}

Ausserdem verschieben sich die beiden Boxen wenn man die Fenstergröße ändert, das darf natürlich auch nicht sein.

Bitte um Hilfe

mfg
Stanger

BigRob

2014-05-17, 18:52:39

Hi,

versuchs mal hiermit als Ausgangsbasis:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pchelpnow</title>

<style>
body{
background-color: #1D634D;
}

.seite{
position: relative;
text-align:center;
width: 100%;
margin-top:10px;
}

.content{
position: relative;
margin:auto;
text-align:center;
min-width: 960px;
}

.kopf{
width: 100%;
margin: 5px;
background-color: #D1CBC5;
padding: 0;
}

.links{
float:left;
margin:0;
padding: 0 5px;
background-color: #B4AA9C;
width: 150px;
}

.rechts{
float:right;
margin:0;
padding: 0 5px;
background-color: #B4AA9C;
width: 150px;
}

.inhalt{
margin:0;
padding: 0 5px;
display: inline-block;
background-color: #D1CBC5;
max-width: 600px;
}

</style>

</head>
<body>

<div class="seite">

<div class="content">

<div class="kopf">
<h1 align="center" style="color:blue">Willkommen auf pchelpnow.de</h1>
</div>

<div class="links">
<ul>
<br>
<p>Navigation</p>
<li><p><b>Home</b></p></li>
<p>PC Hilfe</p>
<li><a href="pchelp.html">Seite 1</a></li>
<li><a href="pchelp2.html">Seite 2</a></li>
<p>Vdeoschnitt</p><br />
<li><a href="dv.html">Videoschnitt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>

<div class="inhalt">
<p>Hallo,nach Jahren und ettlichen selbstzusammengebauten Rechnern, habe ich mich entschlossen eine kleinen Troubleshooter Seite zu erstellen.</p>
<p>Fragen und Anregungen und Kritik bitte an i_n_f_o@p_c_h_e_l_p_n_o-w.de. Die Unterstriche müssen manuell entfernt werden.</p>
<p>Viel Spaß auf meiner Homepage.</p>
<p>Axel</p>
</div>

<div class="rechts">
<p>Neues</p>
</div>

</div>

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

*Anmerkung: Enthält noch HTML-Fehler!*

Stanger

2014-05-17, 18:59:43

Hallo,
vielen Dank für deine Mühen ich habs gerademal getestet und bin schon halbwegs zufrieden ;-)

Als Head habe ich folgendes angefügt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

das müsste passen oder ?
Ich probiers morgen nochmal aus mit dem angedachten Inhalt und Navigation - ich melde mich wieder.
Eines noch: Ich nutze derzeit Phase 5 als WYSIWG Editor dieser stellt aber in der Vorschau die Webseite jedoch nicht so dar, als wenn ich die Dateien hochlade. Gibts einen aktuellen WYSIWYG der diesbezüglich genauer ist ?

Vielen Dank nochmal

mfg
Stanger

BigRob

2014-05-18, 20:00:54

WYSIWYG nutze ich nicht weil meines Wissens ordentliche Editoren Geld kosten (z. B. von Adobe), deshalb kann ich dir da nicht weiter helfen.

Wegen der Doctype-Declaration schau mal hier:

http://www.w3schools.com/tags/tag_doctype.asp

Generell würde ich HTML 5
<!DOCTYPE html>

oder

HTML 4.1 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

nehmen.

Lass deine Seite einfach mal validieren um zu sehen, was noch fehlerhaft ist:

http://validator.w3.org/

Viel Erfolg!

RattuS

2014-05-18, 22:28:09

Ich nutze derzeit Phase 5 als WYSIWG Editor dieser stellt aber in der Vorschau die Webseite jedoch nicht so dar, als wenn ich die Dateien hochlade. Gibts einen aktuellen WYSIWYG der diesbezüglich genauer ist ?
Nein. WYSIWYG-Editor müssen Annahmen treffen und Kompromisse eingehen, um möglichst pauschal zu funktionieren und eine breite Auswahl an Darstellungswünschen abbilden zu können. Das produzierte Markup ist nie pixel-perfect. Bei deinem Beispiel werden die Boxen absolut positioniert, was bei deinem eigentlichen Ziel natürlich falsch bzw. eine schlechte Lösung ist.