Notwendige Quellcodes für Teil 2
Wenn die Aufgabe aus Teil 1 gelöst wurde, existiert bereits der Container menue. Falls nicht, muss er jetzt angelegt werden. Dieser Container wird nun in menue2 umbenannt und folgendermaßen angepasst:
<div id="menue2">
<p><a href="xx.html">Link 1</a><br />
<a href="xx.html">Link 2</a><br />
<a href="xx.html">Link 3</a><br />
<a href="xx.html">Link 4</a><br />
<a href="xx.html">Link 5</a><br /></p>
</div>
Die dazugehörigen Anweisungen im Stylesheet sehen so aus:
#menue2 {
float: right;
width: 150px;
background: #fc9;
overflow: visible;
padding:5px 2px 5px 10px;
margin: 7px 1px 5px 20px;
border-left: 1px solid #369;
border-bottom: 1px solid #369;
}
Code zur Lösung der Aufgabe 2
Den Container menue2 in menue21 umbenennen.
#menue21 {
float: left;
width: 150px;
background: #fc9;
overflow: visible;
padding:5px 2px 5px 10px;
margin: 7px 20px 5px 1px;
border-right: 1px solid #369;
border-bottom: 1px solid #369;
}
Das float wird von rechts auf links gesetzt. Auch padding, margin und border müssen angepasst werden.