Design Einbindungs-Frage + Element Positionierung

Z

Zweirad

Grünschnabel
Hallo liebe Community,

ich habe da so zwei Fragen und ich hoffe, dass Ihr sie mir beantworten könnt! :)
Meine erste Frage wäre da; ich habe in Photoshop ein komplettes Website Layout erstellt, also komplettes Design. Jetzt möchte ich das in Code umwandeln. Viel kann man ja jetzt schon mit CSS3 machen, so etwas wie Verläufe, etc. Doch wie mache ich das z.B mit der Schrift? Sind das auf Websites statische Bilder, die eingebunden sind mit Schrift drauf, oder wird das per HTML editiert? Vielleicht eine doofe Frage, aber ich weiß es nicht genau. ;)

Die zweite Frage die ich habe, ist zu meinem Code; Ich versuche dann gerade eine kleine Website zu coden, um etwas Praxiserfahrung zu sammeln und schaffe es einfach nicht, dass die Elemente auf die komplette Breite angepasst werden. Ich habe bei google geschaut und etwas von poisition:absolute; gefunden, doch ist mir schleierhaft, wo und wie ich das einbinden muss. Kommt dies in die HTML oder in die CSS Datei? Achja, meine Elemente habe ich mit <div> Containern definiert. :)

Ich hoffe, dass die Fragen verständlich sind. Ich bedanke mich schonmal für die Hilfe!

Mit freundlichen Grüßen,
Zweirad
 
Also zuerst mal Willkommen hier im Forum!

Frage 1: Wenn du eine Schrift auf der Seite verwendest die es auf dem Rechner des Besuchers nicht gibt, kannst du mit CSS (font-family) verschiedene "Alternativen" definieren.
Gibt es keine davon, wird die Standardschrift des Browsers genommen und das kann dazu führen das die Seite nicht mehr korrekt angezeigt wird!
Wenn du also "exotische" Schriften im Design hast, dann lade sie als Bild in die Seite.

Frage 2: Die CSS Angabe position und absolute brauchst du nur wenn du ein Element an einer bestimmten Stelle platzieren möchtest. Die Breite stellst du mit width ein, z.B. "width: 100%" oder "width: 200px".

HTML: 
<--! CSS Eigenschaften direkt im Element -->
<div style="width: 200px; height: 100px; background-color: #808080;">BLA BLA BLA</div>

<--! CSS Eigenschaften stehen in der CSS Datei und werden als Klasse eingebunden -->
<div class="klasse_fuer_div">BLA BLA BLA</div>
 
Hallo,

danke und danke für die schnelle Antwort!

Die "width" gebe ich ja schon mit 100% an aber der hat auf beiden Seiten und ob auch einen kleinen Rand vielleicht von 8-10px. Und vielleicht könntest Du mir nochmal genauer erläutern, wo ich deinen Code jetzt mit eintrage, da habe ich noch nicht ganz durchgeblickt.
Ich habe also ein Hintergrundbild, darauf liegen jetzt die jeweils anderen Elemente: Header mit Logo, weitere Elemente und soweiter. Aber wie gesagt, am Rand ist bei allen Elementen jeweils ein Rand.

Grüße
 
Der Rand kommt daher weil die Seite (das body-Tag) auch einen Rand hat.

Wenn es wirklich bis ganz an den Rand gehen soll, musst du dem body-Tag "padding: 0px" und "margin: 0px" zuweisen.

Wo du den Code einträgst, liegt bei dir. Entweder mit style beim jeweiligen Element (div, body, ...) oder eben in einer separaten CSS-Datei.

Hier noch ein kleines Beispiel:

HTML: 
<style type="text/css">
body {
	padding: 0px;
	margin: 0px;
}

div {
	font-weight: bold;
	border: 1px solid;
}
</style>

<div style="width: 100%;">Hallo</div>
<div style="width: 200px; background-color: #808080;">wie geht es dir?</div>
 
Zuletzt bearbeitet:
Hi,
zu Frage 1: Falls du eine Schrift genommen hast für die du auch eine Weblizenz besitzt kannst du den Font auf der Webseite auch mittels @font-face verwenden. Aber eben ganz wichtig du musst die Lizenz besitzen.
Falls du uns ein Screenshot deines Designs hochlädts können wir dir auch gerne sagen welche Elemente du per Bild lösen musst oder per CSS realisiert werden kann.

Grüße
 
Hallo,

danke nochmal für die Antworten! Also das mit dem padding: und margin: hat geklappt. Super! :)

Jetzt habe ich aber wieder eine Frage. Und zwar möchte ich jetzt in einen bestimmten Bereich, also einem <div> Container Text zuweisen. Ich möchte einfach etwas drauf schreiben.
Meine Seite ist so aufgebaut:
Header
Bild mit einer schwarzen Fläche und opacity
Fläche

-> auf die Fläche möchte ich jetzt etwas schreiben, doch bewegt sich das Element darüber irgendwie. Entweder die Fläche mit der Transparenz oder das Bild an sich. Wie kann ich das beheben?

Und ich habe noch eine Frage.. sorry; wie würde ich PHP einbauen? Im <body> Tag? Und warum wird auf der Seite nichts angezeigt, wenn ich im Body Tag

<?php
echo "Test";
?>

eingebe?

Sorry, beim Coden kommen die ein oder anderen Fragen auf!
Danke schonmal und nen schönen Abend :)
 
Hi,
also Text kannst du direkt in das DIv schreiben oder nochmal in ein <p> verschteln.

-> auf die Fläche möchte ich jetzt etwas schreiben, doch bewegt sich das Element darüber irgendwie. Entweder die Fläche mit der Transparenz oder das Bild an sich. Wie kann ich das beheben?
Zum Vergrößern anklicken....
Um dir dazu eine Antwort geben zu können würde ich noch etwas Code benötigen.

PHP kannst du überall ausführen nicht nur im Body.
Hast du deine Seite auf einem Server laufen der PHP unterstützt?

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück