Habe ein .psd Design aber weis nicht wie umsetzen?
- Themenstarter thehacker
- Beginndatum
Du bindest eine seperate Css-Datei in deine Scripte ein.
In deine screen.css kommen dann alle CSS-Codes die zur Ausgabe/Design gehören rein.
In deinen Fall würde ich das Hintergrundbild extra gestalten also ohne Die Content/Logo-Boxen.
Die Boxen kannst du dann durchsichtig machen in dem du ihnen zb 75% Deckkraft gibst.
Zum CSS: Du brauchst also 1.ens in deiner screen.css die Angaben zum Hintergrundbild
Das background-attachment:fixed sorgt dabei für ein mitscrollen Falls der User nidrigere Auflösungen nutzt.
Dann kommen die DIV's Da braucht es bei dir zur Zeit 4. Logo,Navi,Content,Footer
Diese 4 Divs werden also dann Positioniert im Wrapper.
Der Wrapper ist sowas wie die Grundbox nach der die andren Divs sich platzieren.
Ab hier solltest du dir wegen dem Platzieren mal das Thema floaten (Fliessen/Fliessrichtung der Divs/Boxen) anschauen.
Tja am besten du probierst das mal aus und änderst dann die Breiten und Höhen dann siehst sofort wie das funktioniert.
HTML:
<link href="css/screen.css" rel="stylesheet" type="text/css" />In deine screen.css kommen dann alle CSS-Codes die zur Ausgabe/Design gehören rein.
In deinen Fall würde ich das Hintergrundbild extra gestalten also ohne Die Content/Logo-Boxen.
Die Boxen kannst du dann durchsichtig machen in dem du ihnen zb 75% Deckkraft gibst.
Zum CSS: Du brauchst also 1.ens in deiner screen.css die Angaben zum Hintergrundbild
CSS:
{
background-color: #000;
background-image: url(../images/Hintergrund.jpg);
background-repeat: no-repeat;
background-position:top center;
background-attachment:fixed;
padding:0px;
text-align: center;
}Dann kommen die DIV's Da braucht es bei dir zur Zeit 4. Logo,Navi,Content,Footer
Diese 4 Divs werden also dann Positioniert im Wrapper.
Der Wrapper ist sowas wie die Grundbox nach der die andren Divs sich platzieren.
CSS:
div#wrapper{
width: 754px;
margin: 15px auto;
text-align: left;
}Ab hier solltest du dir wegen dem Platzieren mal das Thema floaten (Fliessen/Fliessrichtung der Divs/Boxen) anschauen.
Tja am besten du probierst das mal aus und änderst dann die Breiten und Höhen dann siehst sofort wie das funktioniert.
CSS:
body
{
background-color: #000;
background-image: url(../img/wasteland3.jpg);
background-repeat: no-repeat;
background-position:top center;
background-attachment:fixed;
padding:0px;
text-align: center;
}
div#wrapper{
width: 754px;
margin: 15px auto;
text-align: left;
}
div#header{
margin: 0px 0px 0px 0px;
width: 749px;
}
div#navi{
margin: 155px 0px 0 0px;
background: url(../images/navi.png) no-repeat;
width: 145px;
height: 185px;
float: left;
}
div#login{
margin: 20px 0px 0px 0px;
background: url(../images/login.png) no-repeat;
width: 145px;
height: 115px;
float: left;
}
div#content{
width: 608px;
height: 605px;
float: right;
background: url(../img/GlasContent.png) no-repeat;
}Bitte sehr.
Hab vergessen zu erwähnen das du dann die Boxen im HTML-Code ansprechen musst. Also etwa so:
Ach und wegen dem Design.psd
Man nimmt dann üblicherweisse Slices man schneidet also die Images heraus und lädt sie so übers CSS ein, wie oben gezeigt. Bei dir müsste der Hintergrund nochmal weg da dieser ja felxibel sein möchte
Hab vergessen zu erwähnen das du dann die Boxen im HTML-Code ansprechen musst. Also etwa so:
HTML:
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
<!-- GoogleFonts für besondere Fonts welche in allen Browsern ****en -->
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
TEXT
</div>
<div id="navi">
<ul class="navi">
<li><a href="index.php" class="navi<? if($aktiv == "index") echo "_aktiv"; // Mit der If-Abfrage wird ?berpr?ft, ob die Variable auf jeder Seite einem bestimmten Wert entspricht. Trifft dies zu, so wird '_aktiv' an die Klasse angeh?gt ?>">Startseite</a></li>
</ul>
</div>
<div id="content">
TEST TEXT
</div>
<div id="footer">
Footertext
</div>
</div>Ach und wegen dem Design.psd
Man nimmt dann üblicherweisse Slices man schneidet also die Images heraus und lädt sie so übers CSS ein, wie oben gezeigt. Bei dir müsste der Hintergrund nochmal weg da dieser ja felxibel sein möchte
Zuletzt bearbeitet:
Ich kenne ja leider nicht deinen Kenntnissatnd. Ich bin eher auch noch sehr Wissensbedürftig
Es wäre auch möglich das du per Javscript die Grösse des Bildes an die Auflösung der User anpasst.
Dann könntest du die Divs ohne background images machen und lediglich den Text an der gewünschten Stelle/Div ausgeben. So bräuchte man nicht mal Slices und nur ein Hintergrundbild.
Wollte es nur der Vollständigkeit halber erwähnen.
Gruss Joe.
Es wäre auch möglich das du per Javscript die Grösse des Bildes an die Auflösung der User anpasst.
Dann könntest du die Divs ohne background images machen und lediglich den Text an der gewünschten Stelle/Div ausgeben. So bräuchte man nicht mal Slices und nur ein Hintergrundbild.
Wollte es nur der Vollständigkeit halber erwähnen.
Gruss Joe.
Vergiss vorerst das Javscript-palaber.
Bei meinem ersten Code sprach ich von dem Hintergrundbild was man als erstes einbindet.
Dieses hat ja eine bestimmte Grösse. Es wird mit background-position:top center dann oben mittig hingesetzt.
Wenn nun ein User aber eine höhere Auflösung hat ist das Bild entsprechend kleiner.
Bei einer kleineren Auflösung wird dann nur mittig der Ausschnitt angezeigt.
Poste mal bitte die Grössen der Navi, Content und Logo. Dann kann dir sicher jemand schnell mal nen Beispiel geben wie das CSS aussehen könnte
Bei meinem ersten Code sprach ich von dem Hintergrundbild was man als erstes einbindet.
Dieses hat ja eine bestimmte Grösse. Es wird mit background-position:top center dann oben mittig hingesetzt.
Wenn nun ein User aber eine höhere Auflösung hat ist das Bild entsprechend kleiner.
Bei einer kleineren Auflösung wird dann nur mittig der Ausschnitt angezeigt.
Poste mal bitte die Grössen der Navi, Content und Logo. Dann kann dir sicher jemand schnell mal nen Beispiel geben wie das CSS aussehen könnte
Probier das CSS mal aus:
Das könnte so in etwa hinkommen.
Du musst dann noch die Breiten und Höhen an deine Bilder anpassen.
Margin bestimmt den Abstand zu den Boxen (Im Uhrzeigersinn Top, Right, Bottom, Left).
Float bestimmt die Fliessrichtung, in diesen Fall fliessst alles nach rechts.
die ersten 2 Boxen haben insgesamt eine Breite von 600px dazu eine Abstand von 50px (siehe das margin von Navi).
Der Content springt dann automatisch drunter, weil die Breite des Divs zu gross ist und nicht mehr neben die Navi passt. Das kommt weil der Wrapper also die Gesamtbox ja nur 800px hat.
Der Footer ist auch wieder drunter aus dem selben Grund.
Dieser hat kein Bild braucht aber dennoch Breite und Höhe da ja auch was drinnen stehen soll.
Ich hoffe das hilft dir etwas weiter. Frag ruhig wenn du noch was wissen willst.
Gruss Joe
CSS:
body
{
background-color: #000;
background-image: url(../DeinPfad/grosses_Hintergrundbild.png);
background-repeat: no-repeat;
background-position:top center;
background-attachment:fixed;
padding:0px;
text-align: center;
}
div#wrapper{
width: 800px; // Die Gesamtbreite der Box
margin: 15px auto;
text-align: left;
}
div#logo{
margin: 0px 0px 0px 0px;
width: 200px; // Breite des Logos
height: 150px; // Höhe des Logos
background: url(../DeinPfad/logo.png) no-repeat;
float: left;
}
div#navi{
margin: 50px 0px 0px 50px;
background: url(../DeinPfad/navi.png) no-repeat;
width: 400px;
height: 100px;
float: right;
}
div#content{
margin: 20px 0px 0px 0px;
background: url(../DeinPfad/content.png) no-repeat;
width: 800px; // Die Breite deines Contents Sollte der Content grösser sein musst du auch Den Wrapper grösser machen
height: 600px;
float: right;
}
div#footer{
margin: 20px 0px 0px 350px;
width: 100px;
height: 50px;
float: right;
// hat bei dir keine Grafik
}Das könnte so in etwa hinkommen.
Du musst dann noch die Breiten und Höhen an deine Bilder anpassen.
Margin bestimmt den Abstand zu den Boxen (Im Uhrzeigersinn Top, Right, Bottom, Left).
Float bestimmt die Fliessrichtung, in diesen Fall fliessst alles nach rechts.
die ersten 2 Boxen haben insgesamt eine Breite von 600px dazu eine Abstand von 50px (siehe das margin von Navi).
Der Content springt dann automatisch drunter, weil die Breite des Divs zu gross ist und nicht mehr neben die Navi passt. Das kommt weil der Wrapper also die Gesamtbox ja nur 800px hat.
Der Footer ist auch wieder drunter aus dem selben Grund.
Dieser hat kein Bild braucht aber dennoch Breite und Höhe da ja auch was drinnen stehen soll.
Ich hoffe das hilft dir etwas weiter. Frag ruhig wenn du noch was wissen willst.
Gruss Joe
Zuletzt bearbeitet:
