Grösse anpassen

[Skulldred]

Hallo zusammen

ich habe zum ersten mal eine Seite komplett mit div und css aufgebaut.
Funktioniert eigentlich alles ganz gut, ausser wenn ich das Fenster verkleinere... Dann schneidet es mir einfach teile von den Bilder ab.

Im link ist ein Beispiel...

Könnte mir jemand sagen warum das passiert? Verstehe es nicht da alle div's grössendefiniert sind daher müsste er doch alles anzeigen!

Danke schon mal im Voraus

MfG Skulldred

[Zeromancer]

Hallo,

ich habe zum ersten mal eine Seite komplett mit div und css aufgebaut.
Funktioniert eigentlich alles ganz gut, ausser wenn ich das Fenster verkleinere... Dann schneidet es mir einfach teile von den Bilder ab.

erst einmal:

<div id="sktech_01"><table width="100%" height="117"><tr><td></td></tr></table></div>

macht keinen Sinn, oder? Die Tabelle enthält weder tabellarische noch andere Daten. Das Attribut 'height' ist nicht erlaubt.

Im Stylesheet bietet sich eine verkürzte Schreibweise an:

BODY {
padding:  0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #AFAFAF;

wird zu:

body {
  padding:0;
  margin:0;
  background:#afafaf;
}

Du solltest weiterhin alle Selektoren, Attribute und Wertzuweisungen "kleinschreiben". Mehr als ein Leerzeichen zwischen Attribut und Wert kann manchmal zu Schwierigkeiten führen (s. oben bei "padding").

Unter Umständen liegt es an der absoluten Positionierung deiner Elemente.

Mit freundlichen Grüßen

André

[Skulldred]

Hallo,

ich habe zum ersten mal eine Seite komplett mit div und css aufgebaut.
Funktioniert eigentlich alles ganz gut, ausser wenn ich das Fenster verkleinere... Dann schneidet es mir einfach teile von den Bilder ab.

erst einmal:

<div id="sktech_01"><table width="100%" height="117"><tr><td></td></tr></table></div>

macht keinen Sinn, oder? Die Tabelle enthält weder tabellarische noch andere Daten. Das Attribut 'height' ist nicht erlaubt.

Das war auch nur ein test weil ich schauen wollte obs daran liegt ;)

Im Stylesheet bietet sich eine verkürzte Schreibweise an:

BODY {
padding:  0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #AFAFAF;

wird zu:

body {
  padding:0;
  margin:0;
  background:#afafaf;

Ok wusste ich nicht...

}

Du solltest weiterhin alle Selektoren, Attribute und Wertzuweisungen "kleinschreiben". Mehr als ein Leerzeichen zwischen Attribut und Wert kann manchmal zu Schwierigkeiten führen (s. oben bei "padding").

Jopp mein fehler war auch langsam spät ;)

Unter Umständen liegt es an der absoluten Positionierung deiner Elemente.

Das Prob liegt hier:

#sktech_01 {
position: absolute;
width: 194px;
height: 189px;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -400px;
background-image: url(../images/sktech_01.jpg);
background-repeat: no-repeat;

Ich wollte das es mir die gesammte website immer zentriert aber wenn ich es auf diese weise mache habe ich den effekt das es alles abschneidet....

}

Mit freundlichen Grüßen

André

Gruss zurück & danke

[Zeromancer]

Hallo,

Ich wollte das es mir die gesammte website immer zentriert aber wenn ich es auf diese weise mache habe ich den effekt das es alles abschneidet....

Für die horizontale Zentrierung ist "margin" bei Blockelemente vorgesehen: http://de.selfhtml.org/css/eigenschaften/randabstand.htm

Mit freundlichen Grüßen

André

[Ingo Turski]

Hi,

Könnte mir jemand sagen warum das passiert? Verstehe es nicht da alle div's grössendefiniert sind daher müsste er doch alles anzeigen!

Du hast zwei sehr üble Angaben gemacht: position:absolute und negative margins. Das führt zwangsläufig dazu, daß Inhalte aus zu kleinen Fenstern unerreichbar herauspositioniert werden.
Davon abgesehen ist Dein Konzept völlig ungeeignet. Sobald Du über diese Hintergrundgrafik etwas mehr Text setzt, kann es Dein Layout zerhauen - spätestens bei Schriftvergrößerung.

freundliche Grüße
Ingo

[Skulldred]

Hi,

Könnte mir jemand sagen warum das passiert? Verstehe es nicht da alle div's grössendefiniert sind daher müsste er doch alles anzeigen!
Du hast zwei sehr üble Angaben gemacht: position:absolute und negative margins. Das führt zwangsläufig dazu, daß Inhalte aus zu kleinen Fenstern unerreichbar herauspositioniert werden.

Hmmm das position:absolut nicht zu den "guten" gehört hab ich auch nicht gewusst....

Davon abgesehen ist Dein Konzept völlig ungeeignet. Sobald Du über diese Hintergrundgrafik etwas mehr Text setzt, kann es Dein Layout zerhauen - spätestens bei Schriftvergrößerung.

Das leuchtet mir ein, aber 1. kann man drauf achten das der content nicht grösser wird zudem kann ich das lösen mit einem witeren div oder table dazu muss ich die grafik noch etwas anpassen...

mein grösste problem liegt darin: Ich versuche schon die ganze zeit ein Grundgerüst aufzubauen das sich an grössen und auflösung anpasst und alles zentriert, wenn ich kumpels frage heisst es im frames oder tables oder so ein blubb... Kann ich net ernst nehmen! Kann mir jemand sagen wo ich diesbezüglich gute infos herbekomme? oder wie ihr eure webseite aufbaut?

freundliche Grüße
Ingo

Danke & Gruss zurück

[Ingo Turski]

Hi,

1. kann man drauf achten das der content nicht grösser wird zudem kann ich das lösen mit einem witeren div oder table dazu muss ich die grafik noch etwas anpassen...

Nein! Dazu müßtest Du wirklich sehr viel Platz ungenutzt lassen, so daß der Text bei noch üblicher Schriftvergrößerung in die Box paßt - und das ist weder sinnvoll noch ansprechend und erst recht keine brauchbare Lösung.

mein grösste problem liegt darin: Ich versuche schon die ganze zeit ein Grundgerüst aufzubauen das sich an grössen und auflösung anpasst und alles zentriert,

Ganz einfach: verzichte auf vertikale Zentrierung und damit auch auf feste Höhenangaben für Elemente, die Text enthalten. Und zentriere nur horizontal und vor allem über margin (bzw. text-align für den IE) und nicht position.
Und verwende vor allem kein solch unflexibles Hintergrundbild. Teile es in Eckgrafiken und Randgrafiken und sorge für flexible Randteile durch Hintergrundgrafiken.

freundliche Grüße
Ingo