[CSS] hintergrundbild (seite) soll mit browser skalieren

stropharia · 13. Mai 2011

hintergrundbild (seite) soll mit browser skalieren

guten morgen rr

hab da mal wieder ein problem, das etwas komplizierter zu sein scheint.

und zwar handelt es sich um meine seite die quasi nur aus bildmaterial besteht.
die links werden quasi auf bildelemente gelegt und erst durch einen hovereffekt sichtbar.
(hat nix mit standart layout ect zu tun wird ne kunstseite )

das bild hat 1024 auf 512 px und soll sich der browsergröße anpassen...
genau da ist das prob.
(quasi das es sich verkleinert wenn man den browser zuzieht)
hoffe ihr könnt folgen
muss ich das nun in verschiedenen auflösungen abspeichern und laden lassen?
oder gibt es noch eine andere lösung möglichst ohne java/flash kram?

html:

css:

body{
width:100%;
height:100%;

}

.outer{
margin:0px auto 0px auto;
width:100%;
width:100%;
}
.brett{
background: url(../img/schachbrett1.png) no-repeat;
width: 1024px;
height: 506px;

}

#navi{

position:relative;

list-style:none;

width:400px;

height:266px;

}

#navi li a{

position:absolute;

text-indent:-9999px;

display:block;

text-decoration:none;

width:70px;

height:70px;

background:none;

}

#button1 a{

margin:305px 0px 0px 195px;

top:27px;

left:137px;
border:1px solid green;

}

#button2 a{

margin:120px 0px 0px 270px;

top:132px;

left:145px;
border:1px solid red;

}

#button3 a{

margin:300px 0px 0px 300px;

top:35px;

left:220px;

border:1px solid blue;

}

#button4 a{

margin:245px 0px 0px 435px;

top:90px;

left:250px;

border:1px solid yellow;

}

#button1 a:hover { background: url(../img/koenig_inv.png) no-repeat;
width: 81px;
height: 179px;

}

#button4 a:hover { background: url(../img/koenig_inv.png) no-repeat;
width: 81px;
height: 179px;

}

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

hoffe jemand hat nen lösungsvorschlag bin mit meinem latein am ende
kann auch unelegant sein die seite muss weder barrierefrei noch valide sein
text ist zumindest auf der index auch nicht geplant

greetz

Anzeige

onip · 13. Mai 2011

AW: hintergrundbild (seite) soll mit browser skalieren

schonmal gegooglet?

ich seh jedoch ein problem bei der skalierung.
das bild mag sich skalieren, aber was ist mit deinen elementen, die du darauf plazierst?
die müssen sicher ihre position halten, oder?

stropharia · 13. Mai 2011

AW: hintergrundbild (seite) soll mit browser skalieren

jupp das wäre dann das nächste problem ;-)
habe nun eine lösung mit tabelle gefunden...
werd diese nun mal in den zahlreichen browsern testen ;-)
dann mal schauen wie das mit den links funktionieren könnte...
für vorschläge bin ich immer dankbar ;-)

greetz
hier noch der kot der funktioniert..

html:

hmm dann mal weiter basteln ;-)

onip · 13. Mai 2011

AW: hintergrundbild (seite) soll mit browser skalieren

ehrlich gesagt ohne JS wird das nicht gehen.
mit JS recht aufwendig.
wenn du etwas flash kannst, mach es besser damit.
da kannst du das swf auf 100% aufziehen und alles passt sich von selbst an.

// edit
probier mal mit prozent werten zu positionieren.
also:

HTML:

#myNav1 {
 position:absolute;
 top: 10%;
 left: 20%;
}

ist nur ne idee

stropharia · 13. Mai 2011

AW: hintergrundbild (seite) soll mit browser skalieren

scheint zu funktionieren
sogar ohne position-absolute
der rest ist fummel-kleinkram
dank dir für deine zeit bw is raus ...

leider kann ich (noch) kein flash aber es läuft
übung macht den meister un so

thx

Nützliche Suchen

[CSS] hintergrundbild (seite) soll mit browser skalieren

Videos zum Themenbereich