Design, Hintergrund Spry menü

[han86]

Hallo Community,

ich verzweilfe.

Ich habe heute meine Seite komplett zerschnitten gehabt und mit stylesheets und div tags eingefügt. Hätte auch alles super funktioniert wenn ich nicht folgendes Problem hätte oder mir gemacht habe.

Ich habe ein Design wo links leicht über den Rand ein großes Segel ist wo ich das Menü einfügen möchte. Ich check einfach nicht wie ich das machen soll den meine Seite orientiert sich ja am Header und der ist kleiner als die komplette Seite mit Segel.




So das in aus. Und dort möchte ich mein drop menü vertikal einfügen.

Wie krieg ich das hin ................. :'(

Soll ich das ganze Design als Hintergrund einfügen oder alles einzeln in css und div tags. Also einmal komplett oder Header, Segel, content , footer etc. ?

Wenn ich es einzeln einfüge kann ich das Segel nicht überlappen lassen.

Gruß

 

[sokie]

AW: Design, Hintergrund Spry menü

die ganze Seite lässt sich (ohne Segel) einfach mit drei Containern im html beschreiben (header, content,footer zb.) in den Content kannst du ein div mit dem Segel als Hintergrund reinhängen, (absolut zum content positionieren, links mit negativen Wert). in diesen Container legst du die navigationsliste und positionerst die einfach über die margins.
der contentbereich muss evtl eine mindesthöhe haben in der grösse der navigationsbox(segel)

 

[han86]

AW: Design, Hintergrund Spry menü

So das mit dem Segel hat soweit funktioniert aber wenn ich es aus Photoshop slice und zurecht rücke passt es im ie explorer aber im firefox ist es verschoben.
Was mach ich falsch?



iexplorer :

firefox:

 

[sokie]

AW: Design, Hintergrund Spry menü

eigentlich musst du da nicht slicen. Die farbigen Flächen sind besser als Hintergrundfarben der boxen. Für das Segel mit dem Schatten nimmst du einfach ein PNG mit transparenzen.
beispiel

 

[han86]

AW: Design, Hintergrund Spry menü

Okay und wie geht das?? Wenn ich ein BIld aus Photoshop nehme das einen Transparenten Hintergrund hat passiert das.
Oder versteh ich das falsch was du versuchst mir zu erklären?
Also aus Photoshop hab ich es als png abgespeichert.

 

[sokie]

AW: Design, Hintergrund Spry menü

kannst du nicht einfach mal deine Seite hochladen, und hier den Link posten? (Bilder deiner Bildbearbeitung helfen nicht wirklich weiter).
hast du denn den code nach dem Beispiel geschrieben?

 

[han86]

AW: Design, Hintergrund Spry menü

wie schreibe ich den Transparenz in css?
Ne kann ich noch nicht sorry ist noch nicht soweit und ich hab noch keinen webspace.
Sobald der Anfang steht mach ich das sofort.

Mein css code:

* {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
}
#wrapperarea {
background-color: #FFF;
width: 834px;
margin-right: auto;
margin-left: auto;
}
#wrapperarea #header {
background-color: #FFF;
height: 157px;
background-image: url(../image/header.jpg);
background-repeat: no-repeat;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapperarea #content {
height: 803px;
background-image: url(../image/content.jpg);
background-repeat: no-repeat;
}
#wrapperarea #content #segel {
height: 495px;
width: 266px;
position: absolute;
background-image: url(../image/segel_zwei.jpg);
background-color: #FFF;
left: 319px;
top: 175px;
background-repeat: no-repeat;

 

[sokie]

AW: Design, Hintergrund Spry menü

ohne das html ist mit dem css alleine nichts anzufangen.

trnsparentes png(hintergrund) in transparenten Container (zusammengefasst):

background: transparent url(../image/segel_zwei.[COLOR=Red][B]PNG[/B][/COLOR]) no-repeat;

das muss schon ein PNG mit (alpha)Transparenzen sein.