PSD -> Html/CSS - Am verzweifeln

[AzRaIL]

nachdem ich mein erstes Portfolio Design entworfen habe versuche ich das ganze jetzt in Html und Css umzusetzen

zum Design: http://www6.pic-upload.de/27.12.10/sd7yaq4mcso.jpg

es ist also sehr einfach aufgebaut
das ist das erste mal das ich sowas mache deswegen fällts mir relativ schwer
ich hab mir überlegt das ich das Grundgerüst (die ganzen Boxen) einfach ausschneide und in nem Div tag als Hintergrund definiere

das sieht dann wie folgt aus:

#container {
    float: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/bg1.png);
}

jedoch wird das Bild einfach nicht angezeigt, egal was ich versuche
und auf meinen Fehler komme ich auch nicht

könnt ihr mir weiterhelfen?

 

[threadi]

Ist das Bild auch wirklich unter

../images/bg1.png

erreichbar?

Wieso floatest Du einen 100% breiten Container?

 

[AzRaIL]

Ist das Bild auch wirklich unter

../images/bg1.png

erreichbar?

Wieso floatest Du einen 100% breiten Container?

also der Pfad muss richtig sein (benutze Dreamweaver und hab das so direkt ausgewählt)

Das mit dem Float hab ich sowieso noch nicht so wirklich verstanden
hab das davor aus nem Tutorial kopiert wo das so ähnlich gemacht wurde wie bei mir

 

[Elroy]

Hallo.

Wenn du noch keinen Inhalt hast gib dem <div> mal eine Höhe und schau nach ob du dann was siehst.

Gruss
Elroy

 

[Uelik]

Guten Morgen
Er wollte wohl dem #container ein Float geben, weil er darin alle divs gefloatet hat.

Geht aber auch anders, so als Tipp. Gib dem #container halt eine class="clearfix" und dann brauchst du noch folgenden Code.

[COLOR=#6666FF].clearfix[/COLOR][COLOR=#3333FF]:after [/COLOR][COLOR=#00AA00]{[/COLOR]
	[COLOR=#000000][B]content[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#FF0000]"."[/COLOR][COLOR=#00AA00];[/COLOR]
	[COLOR=#000000][B]display[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]block[/COLOR][COLOR=#00AA00];[/COLOR]
	[COLOR=#000000][B]clear[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]both[/COLOR][COLOR=#00AA00];[/COLOR]
	[COLOR=#000000][B]visibility[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]hidden[/COLOR][COLOR=#00AA00];[/COLOR]
	[COLOR=#000000][B]line-height[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#CC66CC]0[/COLOR][COLOR=#00AA00];[/COLOR]
	[COLOR=#000000][B]height[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#CC66CC]0[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
 
[COLOR=#6666FF].clearfix[/COLOR] [COLOR=#00AA00]{[/COLOR]
	[COLOR=#000000][B]display[/B][/COLOR][COLOR=#00AA00]:[/COLOR] inline-[COLOR=#993333]block[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
 
html[COLOR=#00AA00][[/COLOR]xmlns[COLOR=#00AA00]][/COLOR] [COLOR=#6666FF].clearfix[/COLOR] [COLOR=#00AA00]{[/COLOR]
	[COLOR=#000000][B]display[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333]block[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
 
[COLOR=#00AA00]*[/COLOR] html [COLOR=#6666FF].clearfix[/COLOR] [COLOR=#00AA00]{[/COLOR]
	[COLOR=#000000][B]height[/B][/COLOR][COLOR=#00AA00]:[/COLOR] [COLOR=#993333][COLOR=#CC66CC]1[/COLOR]%[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]

Zum Nachlesen: CSS clearfix

 

[AzRaIL]

Nachdem ich dem Div ne Höhe gegeben habe wurde immerhin etwas angezeigt
jedoch geht es nur mit genauen Angaben (xx px)

Hätte aber ne neue Frage
und zwar wenn ich die Auflösung verkleinere bleibt der Hintergrund gleich groß und man muss scrollen um alles zu sehen
kenne mich noch nicht so gut mit CSS aus daher ist mir kein Weg bekannt um das Problem zu lösen
könntet ihr mir dabei helfen?

 

[Uelik]

Dann müsstest du mit relativen Massen arbeiten: Prozente zum Beispiel: 90% breite etc etc. aber ich bevorzuge auch Pixel. Hintergrund bleibt halt gleich gross. Was stört dich daran?

 

[AzRaIL]

Dann müsstest du mit relativen Massen arbeiten: Prozente zum Beispiel: 90% breite etc etc. aber ich bevorzuge auch Pixel. Hintergrund bleibt halt gleich gross. Was stört dich daran?

Sorry das ich so spät antworte
also jetzt wo du es sagst, eigtl. störts nicht

jedoch hab ich ein neues Problem (wie immer...)
und zwar teste ich zurzeit ein wenig rum
und wie schonmal erwähnt hab ich große Verständnisschwierigkeiten mit der Anpassung des Layouts an die Auflösung
hier mal mein aktuelles Problem:

Portfolio

unter einer Auflösung von 1280 x 1024 sieht alles in Ordnung aus
wenn ich die Auflösung aber runterschraube auf 1024 x 768 sind die beiden Content Fenster verschoben
Ich hatte davor alles in einem Div, da hat es auch super funktioniert wenn ich die Auflösung geändert habe
aber daran hat mich halt gestört das wenn sich die Navi geöffnet hat, das die beiden Content Fenster dann mit runter gegangen sind

 

[Elroy]

Hallo.

Deine beiden Content Fenster haben eine fixed Positionierung.
Was erwartest du denn was passiert wenn du den Viewport verkleinerst.

Vergiss das ganze positionieren und arbeite mit margin und padding.

Gruss
Elroy

 

[AzRaIL]

Hallo.

Deine beiden Content Fenster haben eine fixed Positionierung.
Was erwartest du denn was passiert wenn du den Viewport verkleinerst.

Vergiss das ganze positionieren und arbeite mit margin und padding.

Gruss
Elroy

Ok danke
ich hatte das Positionieren benutzt, weil ich ein Problem mit dem Scrollen hatte
habs mal editiert damit du siehst was ich meine:

azrail-designs.de

 

[Elroy]

Dein Content hat immer noch eine fixed Positionierung.

Damit nimmst du ihn aus dem Textfluss was natürlich jetzt zu Problemen beim Scrollen führt.
Verzichte auf alle fixed und absulote positionierungen, die sind bei deinem einfachen Design nicht nötig.

Verzichte bitte ebenfalls auf solche Angaben: margin-top: -833px;

Gruss
Elroy

 

[AzRaIL]

Dein Content hat immer noch eine fixed Positionierung.

Damit nimmst du ihn aus dem Textfluss was natürlich jetzt zu Problemen beim Scrollen führt.
Verzichte auf alle fixed und absulote positionierungen, die sind bei deinem einfachen Design nicht nötig.

Verzichte bitte ebenfalls auf solche Angaben: margin-top: -833px;

Gruss
Elroy

Irgendwie hat mich das jetzt nur noch mehr verwirrt
die Navibar ist nun komplett verschwunden
die beiden Content Boxen sind irgendwo im Fenster verteilt

wieso sollte ich auf Angaben wie margin-top: -833px; verzichten?
damit hab ich das eine Fenster doch nur korrekt positioniert

edit: naja nach bisschen rumversuchen hab ich es hinbekommen das man wieder was sieht
habe aber immernoch Probleme mit der Positionieren der Elemente
BITTE könnte es mal jemand so erklären sodass es auch ein Anfänger wie ich versteht
bin bis jetzt nur so weit gekommen, weil Dreamweaver sogut wie alles vorgibt
aber bei solchen Problemen dreh ich einfach durch und weis net weiter =/

hab es nochmal neu hochgeladen:

www.azrail-designs.de

 

[rapid10]

Was verstehst du denn nicht?
Erst einmal solltest du deine HTML-Datei (logisch) aufbauen. Erst danach kommt das Style-Sheet (CSS). Und auf dem ersten Blick in den Quellcode, sind mir die divs nur so entgegen gesprungen. Das Menü hast du gut mit einer Liste aufgebaut.
Versuche einmal das Grundgerüst der HTML-Datei aufzubauen und wenn du Schwierigkeiten hast, kannst du ja jederzeit fragen.