Anfängerin sucht Hilfe für CSS/HTML

Cyberia · 07.06.2011

Hallo liebe PSD-Tutorials.de Community.

Ich habe ein Problem. Und zwar weiß ich das man alles googeln kann und finde auch Anleitungen usw. dennoch funktioniert manches dann nicht so, weil man es zum Beispiel leicht abgeändert braucht und dann hänge ich leider noch fest. :rot:

Und ich hoffe der Thread hier ist erlaubt, denn ich würde gerne hier versuchen Antworten auf solche Fragen, die nicht mit den Tutorials geklärt werden zu stellen.

Eine Frage hätte ich auch direkt: Ich möchte gerne in meiner Überschrift die mit der ID Neu gekennzeichnet ist, das der erste Buchstabe rot wird.

Dieses Tutorial habe ich mir angeschaut und dachte dann das es so klappen müsste:

Code:

#Neu: first-letter
{
color: red;
}

Leider funktioniert es nicht und ich bekomme es gerade nicht hin, vielleicht ist es nur ein kleiner Fehler aber ich finde ihn irgendwie nicht.

xuLLix · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Ich denke mal, dass du es direkt zuweisen musst.

Code:

p:first-letter { 
  color:red;
}

tias1092 · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

@ xullix
oder in diesen fall einfach statt "p", "h1" für die überschrift.

Code:

h1:first-letter
  { 
color:red; 
  }

sokie · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

deine pseudoclass heisst ":first-letter" nicht : first-letter. (also das leerzeichen weglassen) Dann sollte es auch klappen.

Code:

#Neu:first-letter

Cyberia · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Hi, danke für die Hilfe.

Leider mag das auch nicht klappen

Code:

#Neu:first-letter;
{
color: red;
}

So steht´s jetzt da. Notepad++ hats nun auch orange makiert, aber das eigentliche HTML Dokument zeigt immer noch alle Buchstaben in schwarz.

Mittlerweile hat sich auch noch ein Problem ergeben.

Und zwar liegen die Dateien bei mir so:

Diese Ordner sind auf der gleichen Ebene: CSS und Bilder.
Nun möchte ich das die CSS Datei aus dem Ordner CSS auf eine Bilddatei im Ordner Bilder zugreift, wie mache ich das?

Und noch ein Problem, ich möchte das ein Bild mittig angezeigt wird und das es sich wenn man die Größe ändert immer noch mittig befindet, wie bekomme ich so was hin?

pixelbienchen · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Das Problem ist, dass du nach "first-letter" ein ";" stehen hast. Das muss raus, dann sollte es auch funktionieren.

Cyberia · 07.06.2011

Perfekt! Geht! Problem 1 schon mal gelöst, vielen, vielen Dank!

Mir wurde so sehr eingetrichtert, das die ";" nie fehlen dürfen, seis in Programmierung oder CSS. xD Aber hier mussten sie mal weg sein, danke wäre ich nie drauf gekommen!

Ich habe noch ein Problem. Ich habe ein paar divs. Ein Logo, ein Bild, eine Navigation, ein Content Teil. Die sind alle untereinander. Wie bekomme ich das zurecht geschoben?

Doitsu · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Cyberia schrieb:
Mir wurde so sehr eingetrichtert, das die ";" nie fehlen dürfen, seis in Programmierung oder CSS.

Das ist auch richtig, allerdings gehoert im CSS das Semikolon nur zwischen die Eigenschaften.

Cyberia schrieb:
Mittlerweile hat sich auch noch ein Problem ergeben.

Und zwar liegen die Dateien bei mir so:

Diese Ordner sind auf der gleichen Ebene: CSS und Bilder.
Nun möchte ich das die CSS Datei aus dem Ordner CSS auf eine Bilddatei im Ordner Bilder zugreift, wie mache ich das?

Durch '../' gehst du eine Ebene zurueck. (url('../img/bild.jpg'); )

Cyberia schrieb:
Und noch ein Problem, ich möchte das ein Bild mittig angezeigt wird und das es sich wenn man die Größe ändert immer noch mittig befindet, wie bekomme ich so was hin?

text-align: Horizontale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Cyberia schrieb:
Ich habe noch ein Problem. Ich habe ein paar divs. Ein Logo, ein Bild, eine Navigation, ein Content Teil. Die sind alle untereinander. Wie bekomme ich das zurecht geschoben?

float: Elemente umfließen lassen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

.. lerne Grundlagen, wenn man bei jeden Problem glich zu einen Forum rennt, wird das nie was. Tutorials gibt es im Netz wie Sand am Meer.

Cyberia · 07.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Danke schön, mal sehen ob ich die Tutorials verstehe. Ich lese übrigens auch Tutorials, wie ich schon im ersten Post erwähnte, nur leider treten da manchmal doch Probleme auf, wo ich dann nicht weiter weiß, auch nicht mit Tutorial.

LOL den ersten Link hatte ich schon selber, hilft nichts. Text Align frisst das Teil irgtendwie nicht. o_O

PS: Ich würde es übrigens begrüßen, wenn man nicht direkt verurteilt wird mit Sprüchen wie läuft direkt zum nächsten Forum, ich habe es schon selber probiert, genauer gesagt gammel ich da schon seit, lass mich nicht lügen, 4 Wochen dran rum.

Edit: ROFL jetzt geht´s auf einmal mit dem Text Align...ich komme mir verarscht vor, war wie gesagt auf der gleichen Seite und habe keine Ahnung was ich nun anders gemacht habe also vorher. o_O

Aber freut mich!

Nun muss ich nur noch die Anordnung der Elemente hin bekommen, dann wird das sogar endlich vielleicht ja doch noch was mit der Internetseite. xD

Doitsu · 08.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Cyberia schrieb:
PS: Ich würde es übrigens begrüßen, wenn man nicht direkt verurteilt wird mit Sprüchen wie läuft direkt zum nächsten Forum [..]

Tut mir Leid, wenn du es als Angriff gewertet hast, es war in keiner Weise boese gemeint. Ich wollte damit nur sagen, dass man es schneller versteht, wenn man selbst daran Arbeitet - selbst wenn es Wochen dauert (da du dann in Zukunft auch ein paar mehr Referenzen hast). Ich bastel nun seit mehr als 4 Jahren an einem Projekt.

Cyberia schrieb:
Nun muss ich nur noch die Anordnung der Elemente hin bekommen [..]

Falls du noch nicht Weite bist, hier mal eine kleine Beispielseite:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Script-Type"  content="text/javascript" />
		<title>Testdokument..}</title>
		<style type="text/css">
			body {
				text-align: center; /* Seite fuer den IE < 7 zentrieren */
				margin: 0; /* margin & padding entfernen - sind Raender.. Nicht wirklich noetig. */
				padding: 0;
			}

			#main {
				text-align: left; /* IE-Bug aufheben */
				margin: 0 auto; /* Seite fuer alle modernen Browser zentrieren */
				width: 1000px; /* Seiteninhalt auf 1000 Pixel beschraenken */
			}

			#header, #footer {
				height: 100px;
				background: #FF0;
				color: #000;
				font-size: 20px;
			}

			#navi {
				width: 200px; /* mit einer Breite von 200 Pixel .. */
				float: left; /* #left am linken Seitenrand anzeigen */
				background: #00F;
				color: #000;
			}

			#content {
				width: 800px;
				float: right; /* #content rechts anzeigen */
				background: #0F0;
			}

			.cleaner {
				height: 1px;
				font-size: 1px;
				line-height: 1px;
				clear: both; /* und die Floats wieder aufheben, sonnst koennte es mit der Zeit zu ungewollten Problemen kommen, dass sich z.B. dein Text verschiebt .. */
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="header">Mein Header!</div>
			<div id="wrapper">
				<div id="navi">
					Meine Navigation ..
				</div>

				<div id="content">
					<p align="justify">
						Lorem ipsum dolor sit amet, quis porttitor pellentesque. Nullam sed, justo quam. Feugiat vivamus mauris, elementum nunc quam. Neque aliquam amet, non mus. Mauris ante, ullamcorper ac cras, lectus porttitor in.</p>
					<p align="justify">
						In erat, neque nec. Ut ut placerat, tristique magna non. Sodales vestibulum eget, cursus suscipit. Mauris metus, imperdiet aliquam. Varius malesuada praesent, sem phasellus.</p>
					<p align="justify">
						Augue nullam euismod, iaculis et lorem. Amet at nulla, amet senectus, sit libero libero. Sed aenean euismod, urna ullamcorper. Justo sodales, duis sed, pharetra est. Posuere vitae purus. Orci consequat, vel ac.</p>
					<p align="justify">
						Vel inceptos, mi mauris. Pellentesque maecenas. Felis lacinia vestibulum, eos purus, ultricies quam. Vel vestibulum tellus, morbi convallis. Consequat eleifend ac. Donec sollicitudin, sed nibh.</p>
				</div>

				<div class="cleaner">&nbsp;</div>
			</div>
			<div id="footer">Mein Footer!</div>
		</div>
	</body>
</html>

Cyberia · 08.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Kein Problem aber ja ich fühlte mich schon angegriffen, aber weiß ja nun das es nicht so gemeint war.

Das Problem ist ich habe nicht unendlich Zeit sonst hätte ich auch wahrscheinlich ganz gemütlich daran weiter gebastelt.

Und ich danke dir, ich habe meine erste Seite nun einigermaßen gut hin bekommen.

Leider hängt das Bild beim Hover Effekt bei der Naviation unten drüber und ich verstehe nicht wirklich warum, da die größe genau gleich groß ist wie die width und height eingestellt ist. Und ich finde die Seite ist etwas zu lang nach unten raus, ich hätte das gerne dynamisch an den Inhalt angepasst.

Und ich frage mich ob man wirklich für jede Seite eine eigene CSS Datei macht oder ob man alles in eine schreiben kann. Und wenn ob es irgendein Auskommentierzeichen gibt um zum Beispiel Navigation über den Bereich wo die Dinge für Navigation stehen, zu schreiben, ohne damit das CSS Dokument zu zerfleischen.

Und ich überlege mir noch wie ich das am besten realisieren kann und zwar möchte ich Beschreibungen und Bilder in eine Rubrik der Seite packen und jedes Projekt soll seine eigende Seite haben. Also sozusagen Unterpunkte zu einem Menüpunkt.

Da weiß ich nicht ob ich einfach innerhalb des Bereichs wo der Content ist (also sonst der Text) ein Dropdown Menü mache oder ob ich das irgendwie anders umsetzen sollte? Hmm....

TherionDracos · 09.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Cyberia schrieb:
...

Und ich danke dir, ich habe meine erste Seite nun einigermaßen gut hin bekommen.
...

Dürfen wir die dann auch mal sehn, oder is das ne ganz geheimnisvolle Geheimnisseite?

(Ich bin eigentlich von Natur aus nicht so neugierig...eigentlich *g*)

Grüßle
Therion

Cyberia · 09.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

TherionDracos schrieb:
Dürfen wir die dann auch mal sehn, oder is das ne ganz geheimnisvolle Geheimnisseite? (Ich bin eigentlich von Natur aus nicht so neugierig...eigentlich *g*)

Grüßle
Therion

Natürlich, aber ich weiß nicht so recht wie ich euch die präsentieren soll. Also sie ist ja noch offline nur auf meinem PC.

Aber ein Bild könnte ich posten. ^_^

sokie · 09.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Hallo Cybria,
Deine serifenlose Schrift im Menü und die Georgia? in den Texten werden wohl kein Problem sein, die Überschriften werden (ohne Ersetzungstechniken) wohl in sehr vielen Browsern nicht so zu lesen sein.

Wenn Du deine Seite vorstellen willst ist es am günstigsten sie einfach auf deinen Webspace zu laden und hier zu verlinken. Sicher ist es eine gute, die Seite schon zu einem frühen Entwicklungsstadium in ein Testverzeichnis auf seinem Webspace zu laden und dort auch zu testen. Denn letztlich muss die Seite im Netz funktionieren, und nicht nur auf dem eigenen Rechner.

Doitsu · 09.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Cyberia schrieb:
Leider hängt das Bild beim Hover Effekt bei der Naviation unten drüber und ich verstehe nicht wirklich warum, da die größe genau gleich groß ist wie die width und height eingestellt ist. Und ich finde die Seite ist etwas zu lang nach unten raus, ich hätte das gerne dynamisch an den Inhalt angepasst.

Da koennen wir dir nicht helfen, es sei denn: Du laedst die Seite hoch.

Cyberia schrieb:
Und ich frage mich ob man wirklich für jede Seite eine eigene CSS Datei macht oder ob man alles in eine schreiben kann. Und wenn ob es irgendein Auskommentierzeichen gibt um zum Beispiel Navigation über den Bereich wo die Dinge für Navigation stehen, zu schreiben, ohne damit das CSS Dokument zu zerfleischen.

es geht beides, je nachdem auf wie vielen Seiten der Style benoetigt wird, meistens macht es Sinn nur eine CSS-Datei zu haben, ausser du hast groessere Seiten, wo viel zusammenkommt, was nur auf dieser Seite gebraucht wird.

CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 2 - Stylesheets in HTML einbinden

Cyberia schrieb:
Da weiß ich nicht ob ich einfach innerhalb des Bereichs wo der Content ist (also sonst der Text) ein Dropdown Menü mache oder ob ich das irgendwie anders umsetzen sollte? Hmm....

Tja, das ist deine Entscheidung. Dort koennen wir dir nicht helfen, typisch sind allerdings Menues wie dieses: potsdam-abc.de (wobei man bei einer Umsetzung lieber auf Listen setzt, als auf Divs..)

P.S. schoenes Design, wobei ich den Uebergang vom Weiss zu Grau etwas hart finde. (evtl. noch einen Schlagschatten einfuegen oder ein helleres Grau verwenden ..)

Cyberia · 09.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

@sokie Ich denke die Schrift ist eine Standardschrift ist Cooper Std, oder?

@Doitsu danke für das Lob!

An diese Art der Umsetzung des Menüs dachte ich auch, leider habe ich noch keine Ahnung wie am besten.

Wie nennt sich denn ein halbes grau? Ich habe einfach color: gery gemacht.

Und das klingt jetzt wahrscheinlich mega blöd, aber ich weiß gar nicht wie ich die Webseite auf einen Space lade. ^_^

sokie · 10.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Cyberia schrieb:
@sokie Ich denke die Schrift ist eine Standardschrift ist Cooper Std, oder?

ja, auf Windows Rechnern eventuell. Alle anderen werden da wohl etwas anderes zu sehen bekommen. Inzwischen werden Webseiten auf allen möglichen Ausgabegeräten angesehen, sodass man sich nicht auf das Windows beschränken kann.

TherionDracos · 11.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Huhu Cyberia

mir gefällt die Seite recht gut. Nicht überladen und sehr übersichtlich.

Zu dem "halben" grau

Versuch mal color:LightGrey, das is dann nen helleres Grau. Oder du machst das ganze über RGB bzw. hex-Werte um es noch feiner abzustimmen.

Grüßle
Therion

Cyberia · 14.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Danke für eure Hilfe! Also das mit den Schriften probiere ich später mal, das verschiebe ich erstmal auf später.

Ich möchte nun gerne ein Formular einrichten.

Ich möchte das es so aussieht. Links steht Ihr Name und darunter Ihr Anliegen, jeweils dahinter ein Feld wo sie ihren Namen und Anliegen rein schreiben können. Dann möchte ich ein Textfeld haben wo drüber steht ihre Nachricht und dann ein großes Feld wo jemand eine Nachricht rein schreiben könnte.
Dann noch darunter so etwas wie E-Mail ADresse: und daneben dann ein Feld wo die E-Mail Adresse rein geschrieben werden soll.

In HTML habe ich das jetzt so geschrieben:

HTML:

<div id="Formular">
<form action="mailto:diana_erichsen@live.de"method="post" enctype="text/plain">
<fieldset><legend>Kontaktieren Sie uns</legend>
<label id="Name">Ihr Name: <input name="Name" type="text" /></label>
<label id="Anliegen">Ihr Anliegen: <input name="Anliegen" type="text" /></label>
<label id="Nachricht">Ihre Nachricht<textarea name="Inhalt"></textarea></label>
<label id="E-Mail">Ihre E-Mail Adresse unter der sie die Antwort erhalten möchten: <input name="E-Mail Adresse" type="text" /></label>
</fieldset>
</form>
</div>

Und in CSS so, das ist aber sehr mühseelig so und passt auch nicht, also so bekomme ich zwar die Wörter untereinander es ist aber sehr schwer pixelgenau sie auf der gleich zu positiionieren. Gibt es da vielleicht eine andere, einfachere Möglichkeit?

Code:

#Formular
{
position:relative;
bottom:595px;
left:202px;
padding-top:65px;
padding-left:40px;
padding-right:40px;
padding-bottom:50px;
min-width:400px;
max-width:600px;
border:1px solid grey;
-moz-border-radius:15px;
border-radius:15px;
overflow:hidden;
z-index:2;
background-color:white;
}

fieldset
{
padding: 20px;
}

#Name
{
position:relative;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}

#Anliegen
{
position:relative;
top: 35px;
bottom: 10px;
left: -199px;
right: 10px;
}

#Nachricht
{
position:relative;
top: 60px;
bottom: 10px;
left: -429px;
right: 10px;
}

#E-Mail
{
position:relative;
top: 60px;
bottom: 10px;
left: -429px;
right: 10px;
}

cebito · 14.06.2011

AW: Anfängerin sucht Hilfe für CSS/HTML

Du darfst die Inputs nicht in das Label einschließen, und außerdem solltest du den Labels auch den Bezug zum Input geben (for)...

HTML:

<!doctype html>
<html>
    <head>
<style>
*{margin:0;padding:0;}
form{width:600px;}
label{float:left;clear:both;width:200px;}
input,textarea{float:left;}
</style>
    </head>
    <body>

<form action=""method="post" enctype="text/plain">
<fieldset><legend>Kontaktieren Sie uns</legend>
<label for="Name">Ihr Name: </label><input name="Name" type="text" />
<label for="Anliegen">Ihr Anliegen: </label><input name="Anliegen" type="text" />
<label for="Inhalt">Ihre Nachricht: </label><textarea name="Inhalt"></textarea></label>
<label for="E-Mail">Ihre E-Mail Adresse unter der sie die Antwort erhalten möchten: </label><input name="E-Mail" type="text" />
</fieldset>
</form>
    </body>
</html>

Abstände lassen sich dann per margin einstellen...