Fragen zur Übungswebseite - Ich komme nicht weiter :-(

LauraK · 2. März 2019

Hallo,
ich arbeite schon sehr lange an einer Übungswebseite und komme da leider einfach alleine nicht mehr weiter.
Es wäre super, wenn mir da jemand helfen könnte.
Bei anderen html / css habe ich quasi das Selbe gemacht und es hat funktioniert, aber hier tut es das irgednwie nicht. :(

1. Frage:
Wie bekomme ich eine div - Box auf die rechte Seite?
Ich dachte, das tue ich, indem ich #nav {float: right;} im .css schreibe und diesen dann einfüge mit <div id="nav"> in .html. Aber es funktioniert einfach nicht.

2. Frage:
Wieso funktioniert bzw. wie genau funktioniert denn folgendes:
#nav a:link {color:white; text-decoration: none;}
#nav a:hover {color:blue; text-decoration:underline;}
Das ist ja damit ich die Links kontrollieren kann. Aber auch das bekomme ich nicht hin.

Hier sind meine Texte:
Mein HTML-Code:

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<link href="css-aufgabe.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style="background-color: #4682B4" id="nav" >
<ul>
<a href="testseite.html">Link 1</a><br>
<a href="testseite.html">Link 2</a><br>
<a href="testseite.html">Link 3</a><br>
</ul>
</div>
<div style="background-color: #DCCBAC" id="content">
<h1>CSS Einsendeaufgabe</h1>
<p class="grosstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="kleintext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Alles anzeigen

Und der css-Code dazu:

Code

@charset "utf-8";
body {
font: 100% Veradna, Geneva, sans-serif;
color: #000000;
background: #FFD700;
margin: 0px;
padding: 0px;}
h1 {
text-align: left;
font-weight: bold;
font-size: 28pt;}
#nav {
background: #4682B4;
width: 140px;
float: right;
padding: 15px 10px;
color:white;
}
#content {
background: #DCCBAC;
margin: 0 0 0 165px;
float: left;
width: 300px;
padding: 20px;}
/*Pseudoklassen: Hier: Farbe und Unterstriche von Links bestimmen*/
#nav a:link {color:white; text-decoration: none;}
#nav a:hover {color:blue; text-decoration:underline;}
/* Erster Absatz groß */
.großtext {font-size: 140%;}
/* zweiter Absatz klein */
.kleintext {font-size: 80%;}

Alles anzeigen

Der HTML-Code für die "Testseite" (für die Links zur Kontrolle):

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Testseite</title>
</head>
<body>
Diese Seite dient als Test.
</body>
</html>

Alles anzeigen

Schon mal vielen Dank für die Hilfe!!

MrMurphy · 3. März 2019

Ich kann deine Fragen nicht richtig nachvollziehen, deshalb ist es schwierig dir zu helfen.

Frage 1: Bei mir wird die Navigation rechts oben im Browserfenster angezeigt.

Frage 2: "Das bekomme ich nicht hin" ist keine Angabe mit der Dritte etwas anfangen können. Bei mir funktioniert das CSS wie nach den CSS-Regeln vorgesehen. Die Schrift wird im Quelltext weiß dargestellt, wenn der Mauszeiger darüber steht (Hover-Effekt) wird die Schrift blau und ist unterstrichen.

Noch ein Hinweis: Ich weiß nicht in wie weit du deine Lernunterlagen wechseln kannst. Die sind leider total veraltet und enthalten zudem einige Informationen, die nach den HTML- und CSS-Regeln immer schon falsch sind und waren. Falls du später mal selbst Webseiten erstellen willst sollte dir bewußt sein, dass die mit dem Lernmaterial total veraltet sein werden.

Ein Beispiel von vielen: Float ist und war nie zur Ausrichtung von Containern wie div-Boxen gedacht. Dafür gibt es bereits seit Jahren Flexbox. Wahrscheinlich wird Flexbox in deinen Lernunterlagen aber überhaupt nicht vorkommen.

Oder: In der Ebene direkt nach ul-Elementen dürfen nur li-Elemente stehen, damit keine a-Elemente.

LauraK · 5. März 2019

MrMurphy

Vielen Dank für deine Anwort!

Ja, stimmt, das sind veraltete Texte. ... Aber irgendwo muss man ja anfangen...

Zitat

Frage 1: Bei mir wird die Navigation rechts oben im Browserfenster angezeigt.

Frage 2: "Das bekomme ich nicht hin" ist keine Angabe mit der Dritte etwas anfangen können. Bei mir funktioniert das CSS wie nach den CSS-Regeln vorgesehen. Die Schrift wird im Quelltext weiß dargestellt, wenn der Mauszeiger darüber steht (Hover-Effekt) wird die Schrift blau und ist unterstrichen.

Das ist seltsam... - Wieso wird das dann bei mir gar nicht angezeigt? ... Aber gut zu wissen, dass es bei dir zu funktionieren scheint.
Ich hatte eine Idee. Ich werde das mal ausprobieren.

LauraK · 5. März 2019

Die Idee hat leider nicht funktioniert.
Um zu verdeutlichen, was ich meine, habe ich einen Scrennshot gemacht und meine Fragen dazu notiert.
Wäre super, wenn sich das mal jemand ansehen könnte und mir sagen könnte, ob es bei ihm auch so aussieht. Dann liegt der Fehler vielleicht an meinem PC und nicht am Code.

(Ich sehe, dass man meine Fragen auf dem Foto kaum lesen kann. Naja. Ein Versuch war es wert.)

Ah, und ich habe den html Code ein wenig verändert. Also etwas hinzugefügt.

HTML

<a class="blautext">Stet clita kasd gubergren, no sea takimata sanctus</a>

In CSS:

Code

.blautext {color:blue;}

Gastl · 5. März 2019

Zitat von LauraK

Ah, und ich habe den html Code ein wenig verändert.

Nur warum? Dein bisheriger Code funktioniert. Sieht so bei mir aus.

Wenn er mit deiner zweiten HTML-Datei nicht funktioniert, solltest du den Link zur CSS-Datei darin hinterlegen. Der fehlt dort.

Tags