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:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Einsendeaufgabe</title>
<!-- Seitentitel -->
<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">
<!-- Überschrift -->
<h1>CSS Einsendeaufgabe</h1>
<!-- Erster Absatz groß. -->
<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>
<!-- Erster Absatz klein. -->
<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:
@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):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Testseite</title>
<!-- Seitentitel -->
</head>
<body>
Diese Seite dient als Test.
</body>
</html>
Alles anzeigen
Schon mal vielen Dank für die Hilfe!!