Teile einer "Mini" Homepage erstellen; Problem mit Farbe und Vorgabe

SkyDefend · 17. Oktober 2015

Guten Morgen,

ich hoffe, hier findet sich jemand, der mir helfen kann.
Ich habe ganz neu mit HTML angefangen (Studium) und wollte zuhause ein wenig rumtesten.
Jetzt stehe ich jedoch vor mehreren kleinen Problemen.

1. Ich muss ein vorgegebenes Bild an linker Stelle einfügen, das hat nach etlichem probiere auch geklappt, jedoch soll auch ein Text direkt neben das Bild eingefügt werden, was ich nicht schaffe.
Entweder fügt er den Text einfach unter dem Bild ein, ganz rechts oder einfach mittig, aber nicht direkt neben das Bild.

2. Wenn ich Überschriften oder bestimmte Wörter kennzeichnen will, funktionieren die vorgegebenen Farben sogut wie nie, was ich überhaupt nicht nachvollziehen kann.

So sieht meine style.css datei aus:
<!doctype html>
<html>
<style>
h1 {color:blue}

</style>
</html>

Wenn ich jetzt Beispielsweise dieses Wort in blau haben möchte sieht das bei mir so aus:

<h3 class=blue">Herzlich Willkommen bei IMAGINE GmbH!</h3>

Verlinkt ist die css Datei so:
<link href="css/style.css" rel="stylesheet" type="text/css">

Kann mir da irgendein erfahrener unter euch weiterhelfen, bin echt so langsam am verzweifeln, vorallem bei manchen Wörter funktioniert dieser Befehl, bei anderen wiederum nicht

Muletto · 17. Oktober 2015

Zu deinem zweiten Problem. Zum ersten haben HTML Attribute nichts in der CSS Datei zu suchen. Generell selektiert man die HTML Elemente, indem man beispielsweise den Namen des HTML Elements angibt, in diesem Fall h1 { color: blue; }. Nach einer Anweisung das Semikolon nicht vergessen, sonst wird dein Quelltext nicht richtig geparst. Du musst dem h1 Element keine Klasse mehr zuweisen, da du es schon selektiert hast. Wenn du einem HTML Element eine Klasse zuweisen möchtest, dann sollte vor dem Bezeichner ein Punkt "." stehen. Bei einer Id steht eine Raute "#" vor dem Bezeichner. Ich hoffe das war verständlich. Du müsstest dein erstes Problem mehr erläutern, bzw. am besten noch den Quelltext hier reinposten, damit man es besser nachvollziehen kann.

Gruß Muletto

Ap0ll0XT · 17. Oktober 2015

Muletto hat das Style-Problem ja schon erklärt. In die CSS-Dateien kommen nur die Style-Anweisungen. Du musst also nur den HTML-Kram rausnehmen.

Zu deinem Bild-Problem: HTML arbeitet standardmäßig ohne Textfluss. Du musst also einen Textfluss erzeugen. Wenn du das nur für ein Element machen willst, kannst du das theoretisch im Styleattribut direkt in der Image-Anweisung des Markups machen. Ist aber ehrlich gesagt nicht so gern gesehen. Lege lieber in der Style.css zwei Klassen an. Einmal .right und einmal .left. Gebe denen jeweils die CSS-Anweisung float:left; und float:right; und weise dem Bild eine der Klassen zu. Wenn der Text also rechts vom Bild sein soll die Klasse left und bei linken Text die Klasse right. Der Absatz wird dann das Bild umfließen.

Bei weiteren fragen einfach fragen

SkyDefend · 18. Oktober 2015

Vielen Dank für die Veranschaulichung.
Die Farben funktionieren nun einwandfrei.
Aber aller Anfang ist echt schwer und auch find ich im Fall von HTML ziemlich kompliziert, sich die ganzen Befehle, etc. zu merken

.
Mit dem Bild ist zu kompliziert zu erklären, da werde ich morgen den Dozenten fragen

.
Bei weiteren Fragen werde ich aber gerne hier wieder Fragen

.

Das einzige was ich jetzt hätte, wäre bestimmte Wörter Fett darzustellen.
Hier mal ein Ausschnitt aus dem Code für den Text:

<h4><p style="color: #00005F; font-family: "Times New Roman", Georgia, Serif;">
Wenn unsere Kunden etwas für unmöglich halten,<br>
fängt für uns erst die Arbeit an.<br>
Das ist auch Ihre Einstellung? - Klasse!<br>
Dann schlagen Sie jetzt<br>
das spannendste Kapitel Ihrer beruflichen Zukunft<br>
bei der <p2 style="color:#5F0000">Imagine GmbH</p2> auf.<br>
Wir sind ein modernes Software-House<br>
mit flachen Hierachien und hohen Gehältern.<br>
Wir freuen uns auf Ihre Bewerbung.</p></h4>

Und zwar muss Imagine GmbH fett gekennzeichnet werden, ich schaffe es aber einfach nicht, ka obs vielleicht am schon vorhandenen p liegt.
Nicht wundern, bei mir heißt es p2, da ich bei p das Problem habe, das er bei Imagine GmbH ansonsten jeweils nach oben und nach unten 1 zeile platz lässt, sowie die Farbe unter Imagine GmbH schwarz lässt.
Wie mache ich soetwas dann am besten, wenn ich beispielsweise einen Satz Fett, in einer bestimmten Schriftart, einer bestimmten Schriftgröße und einer bestimmten Schriftfarbe anzeigen lassen soll?

Aufgabe für mich: "Der Text (text1.txt) befindet sich im Ordner text. Dieser Text soll in Schriftgröße 1, in der Schriftfarbe #00005F und in der Schriftart Times New Roman erscheinen."
Wie ist das gemeint? Schriftgröße 1? Das ist entweder doch sehr groß, oder halt sehr klein, das verstehe ich nicht so ganz.(Bezieht sich jetzt auf den obigen Code)

Muletto · 18. Oktober 2015

@Skydefend: Du kannst nicht ohne weiteres selbst HTML Elemente erzeugen. Du müsstest dem p Element, in dem Falle mit einer ID kennzeichnen.
Da du oben ja schon angefangen hattest, die Anweisungen fürs Layout in eine seperate CSS Datei auszulagern, solltest du am besten damit weitermachen.

Hier mal etwas verbessert:

Das in HTML:
<p id="foo">Imagine GmbH</p> auf.<br>

Das in CSS:
.foo {
color: #5F0000;
font-weight: bold;
font-family: "Times New Roman"
}

Der Bezeichner für die Id ist frei wählbar, ich habe hier nur als Beispiel foo genommen.
Am besten noch die einzelnen Anweisungen einrücken, das bekomme ich aber hier nicht ganz hin.

Eine kleine Erklärung: Mit font-weight kannst du die Schriftdicke einstellen. Mit font-family kann man die Schriftart ändern.

Am Anfang ist das noch alles neu, aber wenn du fleißig übst dann merkst du, dass es mit der Zeit immer einfacher wird.
Falls du weiterhin Fragen hast, kannst du sie gerne Stellen. :-)

Gruß Muletto

SkyDefend · 18. Oktober 2015

Muletto schrieb:
@Skydefend: Du kannst nicht ohne weiteres selbst HTML Elemente erzeugen. Du müsstest dem p Element, in dem Falle mit einer ID kennzeichnen.
Da du oben ja schon angefangen hattest, die Anweisungen fürs Layout in eine seperate CSS Datei auszulagern, solltest du am besten damit weitermachen.

Hier mal etwas verbessert:

Das in HTML:
<p id="foo">Imagine GmbH</p> auf.<br>

Das in CSS:
.foo {
color: #5F0000;
font-weight: bold;
font-family: "Times New Roman"
}

Der Bezeichner für die Id ist frei wählbar, ich habe hier nur als Beispiel foo genommen.
Am besten noch die einzelnen Anweisungen einrücken, das bekomme ich aber hier nicht ganz hin.

Eine kleine Erklärung: Mit font-weight kannst du die Schriftdicke einstellen. Mit font-family kann man die Schriftart ändern.

Am Anfang ist das noch alles neu, aber wenn du fleißig übst dann merkst du, dass es mit der Zeit immer einfacher wird.
Falls du weiterhin Fragen hast, kannst du sie gerne Stellen.

Gruß Muletto

Achso, oh danke das du mich darauf hinweist.
Was bedeutet .foo?
Wie würde ich weitere IDs kennzeichnen, wenn ich mal weitere brauche ?

Edit: Mache ich es so wie du es mir geschrieben hast sieht mein Text wieder so aus, was dann falsch ist.

Herzlich Willkommen bei IMAGINE GmbH!

Wenn unsere Kunden etwas für unmöglich halten,
fängt für uns erst die Arbeit an.
Das ist auch Ihre Einstellung? - Klasse!
Dann schlagen Sie jetzt
das spannendste Kapitel Ihrer beruflichen Zukunft
bei der

Imagine GmbH
auf.
Wir sind ein modernes Software-House
mit flachen Hierachien und hohen Gehältern.
Wir freuen uns auf Ihre Bewerbung.

bis "bei der" ist der Text blau, alles darunter wird schwarz inkl Imagine gmbH

Gibt es evtl einen anderen Fehler, der diesen dann erzeugt?
Hier mal der komplette Code der Seite:

<!doctype html>
<html>
<head>

<title>Info</title>
<meta charset="UTF-8"

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

</head>

<body>
<hr>


<h3><p style="color: #00005F">Herzlich Willkommen bei IMAGINE GmbH!</h3></p> 

<h4><p style="color: #00005F; font-family: "Times New Roman", Georgia, Serif;">
Wenn unsere Kunden etwas für unmöglich halten,<br>
fängt für uns erst die Arbeit an.<br>
Das ist auch Ihre Einstellung? - Klasse!<br>
Dann schlagen Sie jetzt<br>
das spannendste Kapitel Ihrer beruflichen Zukunft<br>
bei der <p id="foo">Imagine GmbH</p> auf.<br> 
Wir sind ein modernes Software-House<br>
mit flachen Hierachien und hohen Gehältern.<br>
Wir freuen uns auf Ihre Bewerbung.</p></h4>

<hr> 

<div style="text-align: center">
<a href="../willkommen.html">Willkommen</a> 

<a href="mailto:info@xyzimagine.de">- E-Mail</a>
</div>

</body>

</html>

Ap0ll0XT · 18. Oktober 2015

AW: Teile einer "Mini" Homepage erstellen; Problem mit Farbe und Vorgabe

Nutze für Fettschrift bitte kein und erst recht das nicht existente . Um etwas in Fettschrift darzustellen nutzt man in HTML das b-Tag für fetten Text.

JonnyBnator · 21. Oktober 2015

Muletto schrieb:
@Skydefend: Du kannst nicht ohne weiteres selbst HTML Elemente erzeugen. Du müsstest dem p Element, in dem Falle mit einer ID kennzeichnen.
Da du oben ja schon angefangen hattest, die Anweisungen fürs Layout in eine seperate CSS Datei auszulagern, solltest du am besten damit weitermachen.

Hier mal etwas verbessert:

Das in HTML:
<p id="foo">Imagine GmbH</p> auf.<br>

Das in CSS:
.foo {
color: #5F0000;
font-weight: bold;
font-family: "Times New Roman"
}

Der Bezeichner für die Id ist frei wählbar, ich habe hier nur als Beispiel foo genommen.
Am besten noch die einzelnen Anweisungen einrücken, das bekomme ich aber hier nicht ganz hin.

Eine kleine Erklärung: Mit font-weight kannst du die Schriftdicke einstellen. Mit font-family kann man die Schriftart ändern.

Am Anfang ist das noch alles neu, aber wenn du fleißig übst dann merkst du, dass es mit der Zeit immer einfacher wird.
Falls du weiterhin Fragen hast, kannst du sie gerne Stellen.

Gruß Muletto

Hey,
hier ist der/dem lieben Muletto ein kleiner Syntaxfehler unterlaufen, weswegen es wohl nicht klappen wird

in der HTML datei gibt er <p id="foo">... an, und in der css datei "greift er/sie zu", durch ein .foo {...}"
müsste aber da in der HTML datei eine ID vergeben wurde und nicht eine class #foo{...} sein.

Ich möchte hier nochmal etwas gesondert zitieren:

Muletto schrieb:
Da du oben ja schon angefangen hattest, die Anweisungen fürs Layout in eine seperate CSS Datei auszulagern, solltest du am besten damit weitermachen.

Bitte, bitte tu das!! dein Prof wirds dir danken, und etwaige spätere Arbeitgeber auch!

Erst mal deine ersten Fragen

SkyDefend schrieb:
Was bedeutet .foo?
Wie würde ich weitere IDs kennzeichnen, wenn ich mal weitere brauche ?

.foo greift auf eine class mit dem Namen "foo" zu.
Gemeint war #foo, welches auf die ID mit dem Namen "foo" zugreift ( siehe oben)

Weiter IDs kennzeichnest du ganz einfach, in dem du ihnen einen anderen Namen gibst, simpel, oder?

Beispielsweise
<div id="nav"> ... </div>

SkyDefend schrieb:
Achso, oh danke das du mich darauf hinweist.

Hier mal der komplette Code der Seite:

<body>
<hr>


<h3><p style="color: #00005F">Herzlich Willkommen bei IMAGINE GmbH!</h3></p> 

<h4><p style="color: #00005F; font-family: "Times New Roman", Georgia, Serif;">
Wenn unsere Kunden etwas für unmöglich halten,<br>
fängt für uns erst die Arbeit an.<br>
Das ist auch Ihre Einstellung? - Klasse!<br>
Dann schlagen Sie jetzt<br>
das spannendste Kapitel Ihrer beruflichen Zukunft<br>
bei der <p id="foo">Imagine GmbH</p> auf.<br> 
Wir sind ein modernes Software-House<br>
mit flachen Hierachien und hohen Gehältern.<br>
Wir freuen uns auf Ihre Bewerbung.</p></h4>

<hr> 

<div style="text-align: center">
<a href="../willkommen.html">Willkommen</a> 

<a href="mailto:info@xyzimagine.de">- E-Mail</a>
</div>

</body>

</html>

Da fallen mir jetzt ein paar Sachen auf:

<h3 class=h3">

Einerseits ist hier ein Syntaxfehler drinnen, siehst du ihn?(schließlich sollst du ja was lernen, hilft ja nichts wenn ich alles zurechtmache

) (kleiner Tipp: Hochkommata)

andererseite ist das ziemlich redundant dem h3 block die class mit dem namen h3 zuzuordnen. du kannst einfach in die css datei h3{css-befehle} schreiben, dann werden alle h3 überschriften auf der Seite sich verhalten, wie befohlen.
also lass das class hier weg.

<h3><p style="color: #00005F">Herzlich Willkommen bei IMAGINE GmbH!</h3></p>

Hier hast du falsch verschachtelt. Du öffnest zuerst <h3> und danach <p>. Deswegen musst du </h3> zuletzt schließen, </p> davor. ( Mal abgesehen davon, dass das <p> ... </p> hier sowieso unnötig ist, was man also getrost weglassen kann/sollte)

<h4><p style="color: #00005F; font-family: "Times New Roman", Georgia, Serif;">
[...]
Wir freuen uns auf Ihre Bewerbung.</p></h4>

Alle h-Blöcke sind Überschriften, d.h. h1 bis h7(ist glaube ich das höchste) wird nur für Überschriften gebraucht.
Du schließt damit aber den ganzen Text ein, das ist falsch benutzt.

<p>[...]bei der <p id="foo">Imagine GmbH</p> auf.<br>[...]</p>

Du verschachtelst hier 2 mal das p Element ineinander, allerdings kennzeichnet dieses einen gesamten Textblock. D.h. das "innere" p Element sollte ersetzt werden. Für deine Zwecke hier das <span> Element.

Das ist alles was mir jetzt beim ersten durchlesen aufgefallen ist, abgesehen natürlich davon, dass du die ganzen css Befehle auslagern solltest.
Hast ja jetzt einiges zum Lesen, hoffe es hilft dir, und scheu dich nicht bei Problemen erneut zu fragen!

LG Jonny

Muletto · 21. Oktober 2015

@JonnyBnator hoppla da ist mir ein Fehler unterlaufen. Das mit der Webprogrammierung ist bei mir ein weilchen her. :-)

Natürlich hast du vollkommen Recht. Danke für die Verbesserung. ;-)

Gruß Muletto

DarkMo · 23. Oktober 2015

wenn du in der css datei direkt die tagbezeichnung wählst (wie das oben gezeigte h1 {...}), dann werden automatisch ALLE h1-tags deines dokuments so gestaltet, ohne dass du da irgendwas zusätzlich angeben müsstest. ein h1 { color:red; } in der css datei würde also bewirken, dass alle "h1 elemente" deiner html datei mit rotem text dargestellt werden würden. ein einfaches <h1>text</h1> würde also eine rote Überschrift erzeugen.
sowas ist gut für ein allgemeingültiges layout der seite. also alles, was immer so aussehen soll. hier bei der pcgh seite könnte man so zum bsp buttons einheitlich formatieren.

will man nun aber nur bestimmte elemente verändern, so kann man css-klassen bauen. will man klassen für einen betimmten tag bauen, so kann man das so machen: tagname.klassenname { styles }. für unsere rote überschrift könnten wir also zum bsp h1.wichtig { color: red; } wählen. unser bisheriges <h1>text</h1> würde davon nicht betroffen sein. hier muss man nun den class-parameter anfügen: <h1 class="wichtig">text</h1>. alle so gekennzeichneten überschriften würden nun rot sein, alle anderen normal.
sowas ist sinnvoll für einheitliche designs von elementgruppen, möcht ichs mal nennen. wenn du dir bspw selfHtml anschaust, da gibts hier und da So Achtung!-bereiche mit Text der neben nem roten balken steht. Das wird denke ich mal ein div mit einer formatierten border sein.

sinn von css ist es, dass man design und layout trennt. stell dir vor, du hast nun eine seite gebaut, wo du viele unterschiedliche styles eingebunden hast. also die rote überschrift, solche !achtung-bereiche... und nun willst du das design aber umstellen, dass diese ganzen achtung-dinger nicht mehr rot sondern blau sind. also gehst du in dein css file, änderst dort bei den einzelnen klassen die farbe auf blau und hast die seite selbt überhaupt nicht angefasst - aber das ganze design mit wenigen klicks geändert. ich hoffe, das dürfte beispiel langt, ums dir vorstellbar zu machen ^^

was du auch machen kannst: statt tagname.klassenname auch einfach nur .klassenname. dann wäre der style nicht nur auf eine tag-art eingegrenzt. auch gibt es subklassen. das wäre dann sowas hier: (tagname).klassenname.subklassenname(.subsub... usw usf). also kA, eine überschrift für SUPERWICHTIGE! sachen ^^ h1.wichtig.super { font-weight: bold; } - dann könntest du das so aufrufen: <h1 class="wichtig super">text</h1> und hättest roten fetten text anstatt nur roten.
dabei kann man dann auf die erneute definition der veränderten parameter der parent-klasse verzichten. du musst hier also nicht erneut angeben, dass die textfarbe rot sein soll. du kannst style-attribute der parent-klasse aber auch überschreiben, geht freilich auch. wenn in der subklasse also ein color: blue; stände, dann wäre der text dann eben blau und nicht rot.
sinn des ganzen ist wieder platzersparnis. wenn du einem element grundsätzlich 10 styleattribute verpasst hast und magst nur eine kleine abwandlung davon haben, dann musst du das rad nicht neu erfinden sondern baust so eine subklasse.

geht zum bsp schön mit buttons die ein icon haben sollen. am ende nutzt du einen link (<a>) mit der button class und dieser link wird wie ein button dargestellt - ist ja alles kein ding. jedenfalls, du formst dir grundlegend einen button. gibts eine broder an, vllt runde ecken, eine hintergrundfarbe und und und, bis dir der button an sich gefällt. und nun erstellst du subklassen davon. diese subklasse nutzt dann bspw ein hintergrundbild (was glaube ich die hintergrundfarbe überschreiben würde, hmmmm ^^) das vorne hingebaut wird und setzt ein padding-left (linker innenabstand), sodass der text nicht auf dem bild/icon steht. und je nach icon gibts eben eine subklasse. ein ok-button mit einem häckchen, ein cancel button mit nem x oder sowas...

mit css kann man wirklich sehr viele schöne dinge gestalten

hoffe, ich konnte dir das grundkonzept etwas verdeutlichen. die bisherigen antworten waren mir etwas zu spezifisch *duck* ^^

Teile einer "Mini" Homepage erstellen; Problem mit Farbe und Vorgabe

SkyDefend

Komplett-PC-Aufrüster(in)

Muletto

Kabelverknoter(in)

Ap0ll0XT

Guest

SkyDefend

Komplett-PC-Aufrüster(in)

Muletto

Kabelverknoter(in)

SkyDefend

Komplett-PC-Aufrüster(in)

Ap0ll0XT

Guest

JonnyBnator

Schraubenverwechsler(in)

Muletto

Kabelverknoter(in)

DarkMo

Lötkolbengott/-göttin

Ähnliche Themen