Probleme im css mit der Anordnung der Links

Hilderlein · 07.03.2012

Hallo,

ich habe ein Problem, ich erlerne gerade css, aber ich komme einfach nicht weiter, mache wahrscheinlich immer den selben Fehler oder habe es irgendwie gar nicht richtig verstanden, vielleicht könnt ihr mir helfen.
Ich möchte das die Links (jetzt unten rechts) oben rechts neben dem Textcontainer stehen.

Meine css-Datei dazu schaut so aus:

Code:

@charset "utf-8";
body {
font: 100% Verdana, Geneva, sans-serif; 
color: #000000;
background: #ADA189;
margin: 0px;
padding: 0px;
}
#holder { 
width: 740px;
margin: 0 auto 0 150px;
float: left;
background: #6E8B3D; 
}
#nav {
width: 120px; 
float: right;
padding: 15px 10px; 
background: #9ACD32;
}
#content {
margin: 0 165px 0 0;
float: left;
padding: 15px;
border-left: 1px solid #90EE90;
background: #186135;
}
.callout  { 
font: bold 130% Verdana, Geneva, serif;
color: #000;
margin: 0; 
padding: 20px 10 px; 
}
#nav ul {
background-color: transparent;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 90%;
}
#nav ul li {
padding: 0;
margin: 0;
}
#nav ul li a {
background-color: #FF7F24;
color: #FFF; 
display: block;
padding: 4px 0 4px 0;
text-decoration: none;
height: 1%;
}
#nav a:hover, #nav a:focus {
color: #2515DA;  
}

Meine html dazu:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="holder">
<div id="content">
<h1 class="callout">Test</h1>
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.
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.
</div>
<div id="nav">
<ul>
<li><a href="#"> Link 1 </a></li>
<li><a href="#"> Link 2 </a></li>
<li><a href="#"> Link 3 </a></li>
</ul>
</div>
</div> 
</body>
</html>

Ich würde mich freuen, wenn ich von euch einen Tipp bekommen könnte, was ich hier grundlegend falsch mache.

Freundliche Grüße
Hilderlein

simonpicos · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

Ich denke mal, dass du die entsprechenden Elemente floaten musst. Ich hab aber keine Lust mir deinen Code zusammen zu basteln. Lad deine Seite doch mal bitte hoch..

Hilderlein · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

(Heute um 18:32 Uhr). Grund: Bitte die Codewerkzeuge (oben rechts) benutzen!

Vielen Dank, beim nächsten mal weiß ich es. Bin noch ein absoluter Anfänger hier.
Ich habe gerade gesucht, wie ich eine Datei hier ansonsten anhängen kann.
Freundliche Grüße
Hilderlein

jaderbass · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

simonpicos schrieb:
Ich denke mal, dass du die entsprechenden Elemente floaten musst.

Gefloated hat sie ja schon (siehe CSS-Code). Schreib im CSS-Code bitte

Code:

#nav { 
width: 120px;  
float: [COLOR=Red][B]left[/B][/COLOR]; 
padding: 15px 10px;  
background: #9ACD32; 
}

dann sollte es klappen.

Ist ein wenig tricky mit dem float weil float:right heißt nicht, dass der Container sich "rechts" ausrichtet, sondern dass die anderen Container "rechts" um diesen Container herumfließen. Damit sich der Content-Container "links" vom Link-Container ausrichtet muss es eben float:left heißen.

Ich hoffe ich konnte mich verständlich ausdrücken.

Hilderlein · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

Danke jaderbass,
theroretisch habe ich das jetzt verstanden, bekomme es trotzdem nicht umgesetzt, jetzt sitzt der nav links direkt unter dem Textcontainer. Benötigt der Content trotzdem auch noch einen float. Ich habe alle Varianten *schäm* probiert, es ändert sich nichts, er sitzt nun unter dem Textcontainer.

Frdl. Grüße
Hilderlein

Gelöschtes Mitglied 133165 · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

float right müsste auch funktionieren, aber der content-div muss dann nach dem (geschlossenen) navi-div im Quelltext stehen. Ausserdem , musst du ihm einen entsprechenden Innen-Abstand (padding) zuweisen.

Wie immer mein Tipp: www.little-boxes.de

cebito · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

jaderbass schrieb:
Ist ein wenig tricky mit dem float weil float:right heißt nicht, dass der Container sich "rechts" ausrichtet, sondern dass die anderen Container "rechts" um diesen Container herumfließen. Damit sich der Content-Container "links" vom Link-Container ausrichtet muss es eben float:left heißen.

Völliger Schwachsinn, sorry, wenn ihr schon Halbwissen hier postet, dann probiert das wenigstens vorher mal aus! :hmpf:

ich zitiere mal daraus

Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler und während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die sich auf Webstandards besser verstehen.

jaderbass schrieb:
Ich hoffe ich konnte mich verständlich ausdrücken.

Naja, ich hoffe ich mich auch

Abzüglich aller margins und paddings und der linken Border braucht #content also auch eine definierte Breite, die hier bei 569px liegt.

hellemon · 07.03.2012

AW: Probleme im css mit der Anordnung der Links

Also hier zwei Beispiele zu deinem Thema - @cebito solltest du vertrauen der kennt sich da wirklich sehr gut aus.

Gleich eins noch, solltest du mal float's einsetzten solltest du auch das ganze wieder mit einem clear beenden. Und zweitens gewöhne dir gleich beim lernen von CSS/HTML5 an sauberen Code zu schreiben, das wird dir später unwahrscheinlich helfen in zu lesen, denn wenn du alles zusammen klatscht wirst du irgendwann nicht mehr durchsehen.

Also Beispiel 1 so wie @cebito es dir vorschlägt.

Code:

@charset "utf-8";

html {
  margin: 0;
  padding: 0;
}

body {
  background: #ADA189;
  margin: 0;
  padding: 0;
  font: 100% Verdana, Geneva, sans-serif;
  color: #000;
}

#holder {
  background: #6E8B3D;
  width: 740px;
  margin: 0 auto 0 150px;
  float: left;
}

#nav {
  background: #9ACD32;
  width: 120px;
  padding: 15px 10px;
  float: left;
}

#content {
  background: #186135;
  width: 560px;
  margin-right: 8px;
  padding: 15px;
  float: left;
  border-left: 1px solid #90EE90;
}

.callout  {
  margin: 0;
  padding: 20px 10 px;
  font: bold 130% Verdana, Geneva, serif;
  color: #000;
  clear: left;
}

#nav ul {
  background-color: transparent;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 90%;
}

#nav ul li {
  padding: 0;
  margin: 0;
}

#nav ul li a {
  background-color: #FF7F24;
  color: #FFF;
  display: block;
  padding: 4px 0 4px 0;
  text-decoration: none;
  height: 1%;
}

#nav a:hover, #nav a:focus {
  color: #2515DA;
}

Beispiel 2 ohne @cebitos Link gelesen zu haben

, es würde auch so gehen, aber das wäre die unsaubere variante.

Code:

@charset "utf-8";

html {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Verdana, Geneva, sans-serif;
  color: #000;
  background: #ADA189;
  margin:0;
  padding:0;
}

#holder {
  position:relative;
  width:740px;
  margin:0 auto 0 150px;
  float:left;
  background:#6E8B3D;
}

#nav {
  position: absolute;
  width: 145px;
  top: 0;
  left: 575px;
  padding: 15px 10px;
  background: #9ACD32;
}

#content {
  margin: 0 165px 0 0;
  padding: 15px;
  border-left: 1px solid #90EE90;
  background: #186135;
  clear: left;
}

.callout  {
  font: bold 130% Verdana, Geneva, serif;
  color: #000;
  margin: 0;
  padding: 20px 10 px;
}

#nav ul {
  background-color: transparent;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 90%;
}

#nav ul li {
  padding: 0;
  margin: 0;
}

#nav ul li a {
  background-color: #FF7F24;
  color: #FFF;
  display: block;
  padding: 4px 0 4px 0;
  text-decoration: none;
  height: 1%;
}

#nav a:hover, #nav a:focus {
  color: #2515DA;
}

Gruß hellemon

EDIT: Hier noch ein guter Link für CSS Layouts -->

Hilderlein · 23.03.2012

AW: Probleme im css mit der Anordnung der Links

Hallo,
vielen lieben Dank, wollte endlich bescheid geben, dass jetzt alles super funktioniert.
Ich hoffe ich werde euch in Zukunft nicht all zu sehr nerven, es kommen bestimmt noch viele Fragen.
Herzliche Grüße
Hilderlein