Habe ein .psd Design aber weis nicht wie umsetzen? @ tutorials.de: Tutorials, Forum & Hilfe

thehacker · 10.12.11 21:31

Hallo,
ich habe gerade ein Design um gesetzt habe aber keine Idee wie ich es umsetzen kann?

Hatt mir Tipps?
oder Ideen?

Ich will das am liebsten selbst machen aber verstehe css nicht wirklich

*schäm*

mfg
TheHacker

Wenn im falschen Forum, bitte verschieben.

Joe · 10.12.11 22:20

Du bindest eine seperate Css-Datei in deine Scripte ein.

HTML-Code:

<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

Code 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;
}

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.

Code 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.

Code 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;
}

thehacker · 10.12.11 22:42

Danke schön hilft schon mal

Joe · 10.12.11 22:51

Bitte sehr.

Hab vergessen zu erwähnen das du dann die Boxen im HTML-Code ansprechen musst. Also etwa so:

HTML-Code:

<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

thehacker · 10.12.11 22:56

Das mit dem ansprechen weis ich schon aber Danke ist nett

Joe · 10.12.11 23:03

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.

thehacker · 10.12.11 23:13

passt und jetzt blicke ich es garnicht mehr

Joe · 10.12.11 23:24

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

thehacker · 10.12.11 23:28

mhhhhh muss ich eben nach schauen

Joe · 11.12.11 00:35

Probier das CSS mal aus:

Code 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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Photoshop Design umsetzen !?

Ich weis nicht was ich da für ein Script habe

ja ich weis..aber trotzdem!

Habe win 2000 geht aber nicht so wie ich will

habe xp aber boot manger will nicht :(

E-Mail:

Abonnieren Abbestellen