Menügrafik "überstehen" lassen?

Poncho

Hallo miteinander!
Habe mal wieder eine Frage.

Zur Veranschaulichung habe ich euch einen überarbeiteten Screenshot hier angehängt.
Und zwar würde ich gerne wissen ob es möglich ist das als Grafik erstellte Menü über den weißen (per css definierten Bereich) überhängen zu lassen (rot eingezeichnet). Momentan wird die Grafik fix bei 900 Pixel abgeschnitten rechts und links.

Hier die layout.css

Code

#main { border: medium none ;
    margin: 50px auto;
    background: rgb(255, 255, 255) none repeat scroll 0%;
    width: 900px;
    text-align: left;
    -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -khtml-border-top-left-radius: 8px; border-top-left-radius: 8px;
    -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -khtml-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; background
    }


  #header { height: 150px;
    }


  #content { height: 650px;
    }

Alles anzeigen

und die style.css

Code

* {margin:0; padding:0; font-size:100%;}
a img {border:0;}
body{background:url(../img/fondo1.gif) top repeat}
#header{overflow:hidden;}
#header .logo{padding:10px 0 0 310px;}
#content{overflow:hidden;}
#content .imageleft{padding:0;}
#content .imageright{padding:0;}
#content .buttonleft{padding-top:17px;}
#content .buttonright{padding-top:17px;}

Vielen Dank!!

synaptic

also wenn die grafik schon so gemacht is und das ganze im #header ism nach ma des overflow:hidden raus
ohne link is immer mau zu testen...
und css ohne html is auch godlike..^^

synaptic

da du mir den link nun per pn mitgeteilt hast (manchmal hilft es auch einfach nen freespace für ne vorschau zu nutzen, um die richtigen seiten-links zu verbergen )

du benutzt ein img als menü, das wird seotechnich bestimmt nen supergau
dann willst du links und rechts was überlappen lassen, dafür gibts zwei möglichkeiten
1) den codebereich separat zu stellen und absolut/relativ positionieren
2) mit negativem margin das ding über den rand hinaus zu ziehen. (in dienem fall margin-left: -50px oder so)

Poncho

VIELEN DANK!!
Hat geklappt!
Den Hinweis bzgl. SEO habe ich schonmal hier erhalten.
Allerdings liegt es leider außerhalb meiner Fähigkeiten das anders als so umzusetzen.
Ich hoffe es ändert sich im Laufe der Zeit. Manchmal lernt man ja etwas dazu

Nochmals vielen Dank!

synaptic

du wirst doch wohl noch ne liste mit links hinbekommen, die du dann entsprechend formatierst.
das is doch kein hexenwerk

ul
li
a

das ul ne breite, ne höhe und nen hintergrundbild und die kannste dann auch so positionieren, wie oben beschrieben
die li bekommen nen float:left, ne breite, ne höhe, ggf nen position:relative (aber nur wenn du die links an einer speziellen stelle im li haben willst)
das a braucht nur für ne positionierung nen position: absolute (und auch nur wenn das umliegende li nen relative hat)

Poncho

Hi synaptic,
nochmals vielen Dank! Ist sehr gut gemeint, ich weiß, dennoch weiß ich nicht wie ich das umgesetzt bekomme.

djheke

Vieleicht hilft das hier.Natürlich nur bei Interesse.
http://www.gipspferd.de/css/anleitung/a5/a5.php
http://www.gipspferd.de/css/anleitung/a16/a16.php

synaptic

ja das steht doch schon da.
und ohne eigeninitiative deinerseits werd ich dir auch nicht den code posten.
es geht ja um hilfe zur selbsthilfe und nich darum dir den kram zu coden.

Poncho

@ djheke
vielen Dank! Werde ich mir gleich mal ansehen!

@ synaptic
habe ja auch gar nicht danach gefragt dass mir jemand den Code postet.

Tags