Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Ginia · 24.01.2013

Hallo zusammen! Ich beschäftige mich erst seit kurzem mit HTML/CSS und versuche jetzt eine erste Homepage zu bauen.
Ich habe dafür ein Layout in Photoshop angelegt - wo ich festgelegt habe, wie die Homepage ungefähr aussehen sollte... z.B. wo die Bilder sitzen und so. Dann wollte ich das ganze in Dreamweaver umsetzen...
Ich hab also in Photoshop die Lineale eingeblendet, den 0 Punkt auf den linken Dokumentrand gesetzt und ausgemessen wie groß der Abstand in Pixeln zum ersten Bild ist. In HTML hab ich das Bild in einen div-container gelegt... (ich will das Bild dann noch verlinken - soll wie ne Schaltfläche sein, worüber man wieder auf ne andere HTML-Seite gelangt). Und im Style-sheet hab ich dann margin-left angegeben und dann die ausgemessene Pixelzahl von Photoshop. Trotzdem sitzt das Bild ganz woanders... nicht wie in meinem Photoshop-Layout. Auch die Navigations-Leiste konnte ich nicht an die richtige Stelle rücken. Mache ich irgendetwas falsch/ hab ich irgendwas nicht beachtet in Photoshop oder Dreamweaver?

leveler · 24.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Trotzdem sitzt das Bild ganz woanders... nicht wie in meinem Photoshop-Layout

Wo jetzt genau, im Browser? Das kann mehrere Ursachen haben, gern genommen sind reset-anweisungen von http://meyerweb.com/eric/tools/css/reset/ um Eventualitäten in den verschiedenen Browsern auszuschliessen.

Ginia · 24.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Danke für deine Antwort! Also es sitzt auch im Programm schon irgendwie nicht richtig... denke nicht, dass das am Browser liegt.
Das Bild ist schon in der idealen Größe - möchte es weder verkleinern noch vergrößern. Muss ich dann vielleicht beim div-container trotzdem noch die Größe angeben, damit es richtig platziert werden kann?

So sieht es aus:

<div id="content">

<div id="bild1"> <a href=""><img src="images/thumb_image_01.jpg"/></a> </div>

</div>

Style-sheet:

#bild1 { margin-left: 163,465 px;
}

leveler · 24.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Zeig mal den ganzen Code, dann kann man was dazu sagen.

schleppel · 24.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Probier doch mal folgendes

#bild1 {
position:absolute;
top:100px;
left:400px;
width:320px;
padding:10px;
margin:0px;
}

und ändere die Werte top & left auf Deine Bedürfnisse.

patrick_l · 24.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Ohne deinen Quellcode können wir schwer weiterhelfen. Du musst auch berücksichtigen, das jeder Browser ein Standard-CSS implementiert hat. Daher sollte anfangs in deinem CSS ein Reset gemacht werden, um alle Browser auf einen Nenner zu bringen. Möglich z.B. mit dem Stern-Selektor:

Code:

* {margin:0; padding:0; border:none, outline:none; font-size:100%;}

Aber wie gesagt, ohne deinen Quellcode zu kennen, kann man bzw. können wir schlecht helfen. Also poste bitte mal deinen Code oder lade deine bisherige Arbeit auf deinem Webspace hoch.

Edit:
Wenn du deinen Quellcode hier rein stellst, bitte die entsprechenden Tags verwenden. Für HTML

HTML:

Quellcode [/ html] (Schließende Tag ohne Leerstelle) und für CSS [code] + schließendem Tag.  

Liebe Grüße, Patrick

Ginia · 24.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Vielen Dank für eure Tipps.

Hier der Quellcode... allerdings steht da noch nicht so viel drin, weil ich ja sozusagen erst damit begonnen hab und dann nicht weitergekommen bin. Ist echt schwer nen Anfang zu finden.
Ich möchte auf der HP 4 Bilder nebeneinander sitzen haben und die Bilder sollen auch wie eine Art Schaltfläche sein... wenn man drauf klickt kommt man zu einer anderen html Seite mit z.B. Text oder mehr Bildern. Hab also irgendwie generell Probleme die Elemente an die Stelle zu bekommen, wo ich sie gerne hätte... auch z.b. die navigationsleiste.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id= "navigation">
<a href= "about.html"> about </a>
<a href= "contact.html"> contact </a>
<a href= "impressum.html"> impressum </a>
</div>

<div id="content">

<div id="bild_1" <a href=""> <img src="images/thumb_1.jpg"/> </a>
<div id="bild_2"> <a href=""> <img src="images/thumb_2.jpg"/> </a>
<div id="bild_3"> <a href=""> <img src="images/thumb_3.jpg"/> </a>
</div>

</div>

</body>
</html>

leveler · 25.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

und die style.css ?
aber da fehlen auch 3 "div-schliessen"-tags. ah ja, divs sind per se blockelemente. weiss ja nicht, ob du das in der css angepasst hast, daher die Frage nach dem stylesheet

Ginia · 25.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

oh sorry hier noch die style.css - da bin ich mir echt unsicher, ob das so stimmt.
danke, die 3 schliessen-tags hab ich verbessert - habs entweder vergessen oder ich habs durch's viele rumprobieren weggelöscht...

@charset "UTF-8";
/* CSS Document */

#wrapper {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 1024px;
height: 600px;
}

#navigation { font:Arial, Helvetica, sans-serif;
margin-right: 151,165px;
}

#bild_1 { width:171 px;
height:122 px;
float:left;
}

#bild_2 {width:171 px;
height:122 px;
float:left;
}

leveler · 25.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

#navigation { font:Arial, Helvetica, sans-serif;
margin-right: 151,165px;
}

das fällt mir gleich als erstes auf, dann gilt: floats sollten gecleared werden, und wie gesagt, die divs sollte wohl besser display; inline geschrieben sein und auch wieder gefloatet, wenn Sie nebeneinander liegen sollen.

<div id="bild_1" <a href=""> <img src="images/thumb_1.jpg"/> </a>

da muss wohl ein / vor den ordnernamen hin.
Ja und das reset kann man empfehlen.

patrick_l · 25.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

Eine Navigation wird anders umgesetzt. Dafür wird eine unsortierte Liste verwendet. Diese Liste muss dann anschließend nur mit CSS angepasst werden. dazu findest du hier auch einige Tutorials.

HTML:

<div id="navigation">
    <ul>
        <li><a href="#">page 1</a></li>
        <li><a href="#">page 2</a></li>
        <li><a href="#">page 3</a></li>
    </ul>
</div>

Nun zu deinem restlichen Code. Es muss nicht für jedes Bild eine neue Div geschrieben werden. Bilder einfach mit dem Image-Tag <img> einfügen und später mit CSS nach Wunsch positionieren und anpassen.

Zu deinem CSS:

Code:

#wrapper {
   [COLOR=Blue] margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;[/COLOR]
    width: 1024px;
    height: 600px;
}

[COLOR=SeaGreen]Das geht auch kürzer [COLOR=Black];)[/COLOR][/COLOR]

#wrapper {margin: 0 auto;}

Die Kurzschreibweise hält dein CSS schlank, bläht es nicht unnötig auf und ist somit übersichtlicher. Es gibt vier Möglichkeiten Werte zu verkürzen.

Code:

* {margin: 5px;} oben/rechts/unten/links
      * {margin: 5px 10px;} oben/unten, rechts/links 
      * {margin: 5px 10px 5px;} oben, rechts/links, unten
      * {margin: 5px 10px 4px 20px;} oben, rechts, unten, links

- CSS Kurzschreibweise

Code:

#navigation { [COLOR=Blue][B]font[/B][/COLOR]:Arial, Helvetica, sans-serif;
            margin-right: [B][COLOR=Red]151,165px;[/COLOR][/B]
}

#navigation {font-family: Arial, Helvetica, sans-serif;}



#bild_1 { width:171[COLOR=Red][B][U]_[/U][/B][/COLOR]px;
            height:122[COLOR=Red][B][U]_[/U][/B][/COLOR]px;
            float:left;
}

Keine Leerzeichen zwischen Wert und Einheit. Keine durch Kommata getrennte Zahlen. Einzige Ausnahme bei RGB/RGBA Farbwertangaben und Schriftaufzählungen.

Liebe Grüße, Patrick

cebito · 25.01.2013

AW: Photoshop-Layout in Dreamweaver umsetzen: Problem beim Positionieren

leveler schrieb:
die divs sollte wohl besser display; inline geschrieben sein und auch wieder gefloatet, wenn Sie nebeneinander liegen sollen.

:uhm: wozu noch floaten, wenn sie dann doch schon IN LINE sind?

leveler schrieb:
da muss wohl ein / vor den ordnernamen hin.

Warum?