Design wird nicht richtig dargestellt: margin Wert

[sanjella]

Hallo ihr Lieben,
ich habe gerade ein Problem mit der richtigen Darstellung meiner Homepage. Das Content-Fenster ist irgendwie verrückt.
Ich habe dann die margin Werte verändert, bekam das Content-Fenster aber nur an die richtige Stelle, indem ich beim ersten Wert -23em angegeben habe.
So:
#content
{
min-height: 700px;
background: #fff;
margin: -23em 0em 0em 16em;
padding: 10px 20px 15px 25px;
}
Natürlich konnte ich durch den angegebenen Minuswert im IE nichts mehr mit der Seite anfangen...also keine Lösung. ;)
Könnt ihr mir helfen, das Content-Fenster an die richtige Stelle zu rücken? Also so, dass es oben auf gleicher höhe wie die Navigation anfängt?
Wäre sehr nett, wenn ihr mir auf die Sprünge helfen könntet! :)

Homepage: http://www.idefix-vom-herzkamper-hof.de

 

[Timmer]

Ich geb dir nen Tipp: Pack alles Zwischen dem Logo und dem Footer in einen Div, damit es erstmal zusammenhängt, dann kannst du auch mit float arbeiten, um die Divs zu positionieren ^^

 

[sanjella]

Ohje, ich bin doch kein Profi, haha. ;)
Muss ich alles zwischen dem Logo und dem Footer im CSS oder im html in einen div packen? Und wie genau arbeite ich mit float? äääääh?:mrgreen:

 

[Timmer]

Kein Problem ^^

Pack die Sidebar und das Content-Fenster in einen Div.

Float ist ein ganz normales CSS Attribut, müsste sich selbst erklären ^^ Gib mal beiden Divs (Sidebar und Content) float:left; und entferne das margin-left vom Content

SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[sanjella]

Ok, das margin-left im Content entferne ich doch, indem ich das 16em Null setze, oder?
Ich habe das nun so gemacht:
<div style="float:left;">
#content
{
min-height: 700px;
background: #fff;
margin: 0em 0em 0em 0em;
padding: 10px 20px 15px 25px;
}
</div>

<div style="float:left;">
#left
{
float: left;
width: 16em;
margin: 0px;
padding: 0px;
}
</div>

Aber das scheint ja irgendwie Quatsch zu sein...sorry, ich bin halt ein bisschen doof. Bitte nicht lachen. ;)

 

[Bleccer]

du willst den content Bereich in die Mitte oder wie wenn ja dann

{
min-height: 700px;
background: #fff;
margin: 30px auto;
padding: 10px 20px 15px 25px;
}

 

[sanjella]

Bleccer: Das Content-Fenster soll rechts neber der Navigation erscheinen und halt auf gleicher Höhe wie die Navigation beginnen.
Wenn ich deine vorgeschlagenen Werte eingebe, befindet sich das Content-Fenster jedoch immer noch unterhalb der Navigation. ;)

 

[Timmer]

OK, noch ein Versuch:

Mach einen Div um die beiden Divs 'left' und 'content'. Dann entferne den Div mit Style="clear:both;". Schon ist es nebendrann.

Und dann füg noch folgendes in deinen CSS Code:

#left {
float:left;
margin:0;
padding:0;
width:16em;
}


#content {
float:left;height:700px;
padding:10px;
width:900px;
}

Ich habe height, width und padding bei #content mal einfach so gesetzt, kannst du nach Belieben ändern oder auch entfernen.

 

[sanjella]

Also quasi so?
<div>
<div style="float:left;">
</div style="clear: both;">
#content
{
min-height: 700px;
background: #fff;
margin: 30px auto;
padding: 10px 20px 15px 25px;
}
</div>

 

[Timmer]

Ich habe so das Gefühl, dass du dich mit den Basics nicht wirklich auskennst... Aber ich finde deinen Hund toll, deswegen mach ich dir das mal schnell. Ich muss gleich von der Arbeit heimfahren, deswegen kopier mal den Code deiner 'index.html' hier rein: nopaste.info - free nopaste script and service und schick mir dann den Link, den du bekommst. Dann setz ich mich zu Hause mal kurz drann (für mich sind das keine 30 Sekunden Arbeit).

Du kannst dir dann derweilen folgende Seite anschauen: LTFB.de - Learn The F***ing Basics

;D

 

[sanjella]

Ich kenne mich überhaupt nicht aus, da hast du allerdings Recht!
Man sollte dafür wirklich besser einen Profi ranlassen, aber das ist im Moment leider nicht drin und die Homepage muss es nunmal geben... ;)
Danke für die Hilfe, ist wirklich seeehr sehr nett. :-)

nopaste.info - free nopaste script and service das hier ist der Link.
Schon mal vielen, vielen Dank!

 

[Timmer]

So, daheim und ich muss erstmal lachen xD

Ich bräuchte schon den ganzen Code, also der kompletten Datei ;D

Wenn du ICQ, MSN oder sowas hast, können wirs auch darüber machen ^^