Menü und Text lässt sich nicht nach oben verschieben?

BlackBoSs · 29.07.2012

Hallo Leute,

Bin gerade dabei eine HTML/CSS Seite zu bauen, ich bin aber leider im Menübereich hängengeblieben.

Mein Problem ist dass ich die <ul> bzw die id menu nicht so positioniere so dass es auf der selben höhe wie der grauen linie ist.

und neben dem Logo ist auch ein <p> Tag denn kann ich auch nicht nach oben verschieben ..

Kann mir jemand helfen und sagen wie ich es hinbekomme ?

Link :

Danke im voraus.

Liebe Grüße

Misco · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

hm da passt einiges nicht so, aber du kannst es mit margin-top:-50px; erreichen.

BlackBoSs · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

Misco schrieb:
hm da passt einiges nicht so, aber du kannst es mit margin-top:-50px; erreichen.

Hey, erstmals danke für deine rasche Antwort.

Was passt denn nicht ... würde mich über lehrhafte tipps freuen

Übrigens danke mit margin-top:-50px; hab ich es hinbekommen ...

*Link ist aktualisiert ()

BlackBoSs · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

Verstehe das nicht ..

Wenn ich mit IE9 es ansehe .. sitzt die Menüfläche...

Aber wenn ich es mir mit Chrome, Firefox, Safari ansehe verschiebt sich die Menüfläche nach Links ...

Wenn es aber bei Chrome, Firefox, und Safari passt, stimmt es dann in IE nicht..

das ist der Code für die id menu :

#menu {
list-style: none;
width:903px;
height:50px;
background:#485155;
float:left;
margin-left:350px;
margin-top:-52px;
border-top: solid #799ca4 1px;
}

kann mir bitte jemand helfen ...

TECFreddy · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

bei mir sitzt es richtig, wenn du bei

CSS
#menu{
height: 45px;
und margin-top: 60px
}

einstellst.

Für den IE müsstest du dann wohl eine Browserweiche einbauen.
Bsp.:

HTML Code

Nach der genauen Syntax solltest du vielleicht selbst nochmal schauen.
Ich hoffe ich konnte weiterhelfen.
LG

BlackBoSs · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

@ TECFreddy: Danke für die Hilfe...

Aber irgendwo hab ich anscheinend ein Fehler worauf ich nicht draufkomme ...

Habe jetzt einige Text mal hinzugefügt..

Die Texte werden in Chrome und Safari tadellos angezeigt...
Firefox zeigt es komplett anderst her ...

und die rote Grafik das in der Mitte zentriert ist lässt sich nirgends hin verrutschen ...

Seit 5 Stunden bin ich grad mal soweit gekommen ... ich plage mich hin und her mit dem verschieben ...

Sollte ich irgendwo vielleicht position:absolute oder relative setzen ?
Kann das vielleicht ein Problem gewesen sein dass sich alles nicht beliebig verschieben lässt?

Siehe Link :

Lg

TECFreddy · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

Wo soll denn die rote Grafik hin?
Am besten postest du mal ein Bild vom Layout wie es aussehen soll, damit ich mir das vorstellen kann.

BlackBoSs · 29.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

TECFreddy schrieb:
Wo soll denn die rote Grafik hin?
Am besten postest du mal ein Bild vom Layout wie es aussehen soll, damit ich mir das vorstellen kann.

so soll es aussehen eigentlich ..

<a href="http://image-upload.de/file/5cKtiK/54c4f17315.jpg" target="_blank">Link</a>

Die Texte sehen auch in Chrome anderst und in Firefox total anderst...

Woran liegt das Problem ... das die Texte so anderst dargestellt werden .. und das sich die rote Grafik nicht verschieben lässt..

Wäre dankbar wenn du mir helfen könntest..

Myhar · 30.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

Da passt einiges nicht bei der Seite. Wieso ist content und footer im header der Seite? Und wieso ist dann der header nur 200px hoch? Darf deine Seite nicht höher werden?
Auch kann man davon ausgehen, dass nicht ordentlich gearbeitet wurde, wenn bei so einem simplen "Design" negative margins oder absolute Positionen verwendet werden. Diese zwei Dinge kommen nämlich bei korrekter Anwendung von HTML/CSS nur relativ selten vor.
Auch hat man bei einer sauberen Umsetzung keine Probleme mit der Darstellung in FF und IE9. Bei älteren IE Versionen sieht das schon anders aus, aber eine Weiche wie [if IE] ist trotzdem nicht zu empfehlen. Damit kann man nicht zwischen den einzelnen Versionen unterscheiden.
Deine Problemlösung sieht folgendermaßen aus:
Strukturiere dein HTML ordentlich. Dann schreib dein CSS neu. Das wirst du wohl größteils neu schreiben müssen. Achte darauf, nicht höhe und Breite fix vorzugeben sondern nur eines der Beiden.

BlackBoSs · 30.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

Myhar schrieb:
Da passt einiges nicht bei der Seite. Wieso ist content und footer im header der Seite? Und wieso ist dann der header nur 200px hoch? Darf deine Seite nicht höher werden?
Auch kann man davon ausgehen, dass nicht ordentlich gearbeitet wurde, wenn bei so einem simplen "Design" negative margins oder absolute Positionen verwendet werden. Diese zwei Dinge kommen nämlich bei korrekter Anwendung von HTML/CSS nur relativ selten vor.
Auch hat man bei einer sauberen Umsetzung keine Probleme mit der Darstellung in FF und IE9. Bei älteren IE Versionen sieht das schon anders aus, aber eine Weiche wie [if IE] ist trotzdem nicht zu empfehlen. Damit kann man nicht zwischen den einzelnen Versionen unterscheiden.
Deine Problemlösung sieht folgendermaßen aus:
Strukturiere dein HTML ordentlich. Dann schreib dein CSS neu. Das wirst du wohl größteils neu schreiben müssen. Achte darauf, nicht höhe und Breite fix vorzugeben sondern nur eines der Beiden.

Hallo myhar,
erstmals danke ich dir für deinen sehr hilfreichen und ausführlichen beitrag.

ich werde meine Seite morgen Abend (heute leider keine Zeit mehr - muss in die Arbeit) komplett nochmals von Anfang an (HTML und CSS) neu schreiben.

Ich glaub mein Problem ist, dass ich bei dem Design nicht ganz gewusst habe wie ich das mit dem Hintergrundbild unter dem Header kläre und auch nicht ganz gewusst habe (noch immer nicht genau weiß) wohin ich wrapper einbaue.

Bezüglich der Höhe von Header, der Header ist ja auch nur 200px hoch aber Content kommt ja dazu dann .. ? Was soll ich dann bei der Breite eingeben ? width:auto ?
Sollte ich in anderen Divs auch keine fixe Breite angeben ? und bei höhe einfach auf auto damit es einfach sich automatisch vergrößert sobald ein Inhalt vorhanden ist?

Oder muss ich den Header + Content + Footer in einem Container einbauen ?
Oder ist es besser wenn ich für Header, Content und für Footer eine extra div anlege ?

Myhar · 31.07.2012

AW: Menü und Text lässt sich nicht nach oben verschieben?

BlackBoSs schrieb:
Bezüglich der Höhe von Header, der Header ist ja auch nur 200px hoch aber Content kommt ja dazu dann .. ? Was soll ich dann bei der Breite eingeben ? width:auto ?
Sollte ich in anderen Divs auch keine fixe Breite angeben ? und bei höhe einfach auf auto damit es einfach sich automatisch vergrößert sobald ein Inhalt vorhanden ist?

Oder muss ich den Header + Content + Footer in einem Container einbauen ?
Oder ist es besser wenn ich für Header, Content und für Footer eine extra div anlege ?

Bei einigen Fragen weiß ich nicht, was du genau meinst. "kommt ja dazu dann" interpretiere ich mal folgendermaßen: Du musst es natürlich auch im code "dazu geben", also danach schreiben. <div id="header"></div><div id="content"></div>

Bezüglich der fixen Breite/Höhe: Entscheide dich für eines, bzw. arbeite mit min- und max-height/width. Hat ein Element zB eine Breite von 200px, dann muss die Höhe flexibel bleiben, damit sichergestellt ist, dass auch bei mehr Inhalt (längerer Text, größere Bilder, etc.) das Layout noch passt.
Wie du deine Header + Content + Footer verschachtelst musst du selber wissen. Aber gehe ich recht in der Annahme, dass du noch kaum Ahnung von HTML/CSS hast? Oder interpretiere ich hier etwas falsch?
Falls dem so ist kann ich

Bitte kostenlos registrieren, damit du die Links siehst.