Einfaches CSS Layout

[Messiahs]

Hallo liebe Community

Ich bin in CSS nicht sehr bewandert, daher versuche ich mich auf einen schlichten Layout.

Ich habe eine Hintergrunf Grafik mittig:

#hg {
    background-image: url(hgs.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: -10px;
    height: 1743px;
    width: 99%;
    position: absolute;
    }

Danach habe ich einen Button in die Grafik gesetzt:

#a {
    float:left;
    
    height: 139px;
    width: 200px;
    margin-top: 300px;
    margin-left: 500px;
    } 
#a {background-image: url(das_spiel.png);}
#a:hover { background-image: url(das_spiel_a.png);}
 {

Der Button liegt in einen Div:

<div id="hg">
<div id="a"></div>
<div id="b"></div>
</div>

Im hg Div liegt die Hintergrung-Grafik.

Mein Problem ist, wenn ich nun im Browser das Fenster kleiner mache, verschieben sich die Buttons nicht mit. Daher ist die Position der Button unterschiedlich.

Kann mir jemand helfen wie ich das Problem löse ?

Mfg Messiahs

 

[Pixelverwender]

AW: Einfaches CSS Layout

1. Ist das kein php-Code, den Du da gepostet hast, sondern CSS bzw. im 3. Fenster HTML.

2. Kann der Button sich auch nicht mitbewegen, wenn Du ihm mit margin-top und -left feste Werte zuweist (wenn sich die Grafik dort befindet, wo ich sie vermute).
3. ist es ein ziemliches CSS-Kauderwelsch, was ich da sehe.
4. Erschließt sich mir nach wie vor nicht, was genau denn nun Dein Button ist.
5. Ein Link zur Ansicht wäre hilfreich.

 

[patrick_l]

AW: Einfaches CSS Layout

Das wichtigste hat Pixelverwender ja bereits gesagt. Wäre hilfreich wenn du das ganze mal auf deinem Webspace packen würdest. So kann man es schwer nachvollziehen.

Noch ein Tipp nebenbei. Du kannst dein CSS auch schlanker gestalten. Spart unnötige Schreiberei und alles bleibt etwas übersichtlicher. Vor allem bei größeren Stylesheets.

#id {background: url(hgs.jpg) no-repeat center;}

Für mehre margin od. padding-Werte:

 #id {margin: 300px 0 0 500px; } /* oben, rechts, unten, links */

Liebe Grüße, Patrick

 

[Myhar]

AW: Einfaches CSS Layout

IN deinem geposteten HTML Code gibt es keine Buttons sondern nur divs. Hier ist der komplette Code hilfreich.
Auch wenn ich denke, dass dein Problem vom position:absolute her stammt, aber ohne weiteren Informationen kann man nichts dazu sagen.

 

[Messiahs]

AW: Einfaches CSS Layout

Danke für die Antworten.
Hier der Link:


Einige Fehler konnte ich bereits beheben.
Wenn ich jetzt das Browser Fenster kleiner machen bleiben die Buttons auf Ihrer Position, bis eben die Breite von 800px erreicht ist.

Wie ist es möglich das die Buttons immer auf der gleichen Position bleiben, auch wenn ich das Fenster ganz klein ziehe?
Mann sieht auch, wenn das Fenster von der Breite klein gezogen wird, das ein Scroll Balken entsteht.Auf der Rechten-Seite bildet sich eine Schwarze Fläche. Würde mich über Tips und eurer Hilfe freuen.

Mfg

 

[Messiahs]

AW: Einfaches CSS Layout

Das wichtigste hat Pixelverwender ja bereits gesagt. Wäre hilfreich wenn du das ganze mal auf deinem Webspace packen würdest. So kann man es schwer nachvollziehen.

Noch ein Tipp nebenbei. Du kannst dein CSS auch schlanker gestalten. Spart unnötige Schreiberei und alles bleibt etwas übersichtlicher. Vor allem bei größeren Stylesheets.

#id {background: url(hgs.jpg) no-repeat center;}

Für mehre margin od. padding-Werte:

 #id {margin: 300px 0 0 500px; } /* oben, rechts, unten, links */

Liebe Grüße, Patrick

Danke sehr für diesen TIP !
Ich werde das ganze neu schreiben

 

[s4f]

AW: Einfaches CSS Layout

da du von buttons sprichst gehe ich davon aus, das "b" auch ein button ist.
"b" hat also bestimmt auch ein margin top,left, oder?
"die buttons verschieben sich nicht mit" - ja das ist richtig, du hast doch selbst festgelegt wo sie liegen sollen.

zu deiner neuen frage,
ich sitze jetzt nur am tablet und kann also nicht wirklich scrollen, aber
die buttons sind doch gefloatet.
wenn das fenster also für beide zu klein wird, dann floaten sie.

 

[schnullerbacke]

AW: Einfaches CSS Layout

Die Buttons sind nicht positioniert, die "kleben" in der linken-oberen Ecke des Elternelements (#men). Das Elternelement hat eine Breite von 800px und ist immer mittig. Wenn du das Fenster verkleinerst, verschiebt sich das Elterenelement
(und damit auch die buttons) bis zu einer Breite von 800px. Dann steht es ganz am linken Rand (und damit natürlich auch die buttons) und du bekommst einen horizontalen Scrollbalken..

Das left und top für #a hat keinerlei Auswirkungen, solange du nicht auch noch ein position angibst.

Zur Verdeutlichung kannst du dem Div "men" ja mal eine background-color und eine height geben. Dann siehst du die Abhängigkeit besser.


Der schwarze "Balken" rechts könnte von der width 99% kommen. Nur ne Vermutung.

 

[Messiahs]

AW: Einfaches CSS Layout

Genau es geht um die Breite von 800px, wie kann ich den Buttons sagen das sich diese nicht verschieben? Wie muss ich meinen Css Coden Anpassen ?

Lg Messiahs

 

[schnullerbacke]

AW: Einfaches CSS Layout

Genau es geht um die Breite von 800px, wie kann ich den Buttons sagen das sich diese nicht verschieben? Wie muss ich meinen Css Coden Anpassen ?

Lg Messiahs

Na ja, im Prinzip verschieben sich die Buttons nicht. Das Elternelement verschiebt sich und der Hintergrund verschiebt sich.

Wie soll es denn bei unterschiedlichen Auflösungen aussehen? Ich versteh nicht so ganz, wo du hinwillst.