Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
puresoul
Threadersteller
Dabei seit: 03.12.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 15.07.2011 07:22
Titel div nebeneinander positionieren |
|
|
Hallo,
ich habe ein Problem, ich bekomme es einfach nicht hin de divs rechts nebeneinader zu positionieren, wenn ich im dreamweaver auf vorschau gehe, stehen sie komischwerweise nebeneinander aber im internet nicht??
habe 5 divs mit float left und mit mit margin left eingerückt, aber das funktioniert einfach nicht. Hat hier vl jemand eine andre lösung ?? Wäre euch sehr dankbar ich poste mal den code:
Code: | <div id="footer2_galerie">
<div id="link1"><a href="haus.html">Haus</a></div>
<div id="link2"><a href="bauernhof.html">Bauernhof</a></div>
<div id="link3"><a href="wellness.html">Wellness</a></div>
<div id="link4"><a href="galerie.html">Galerie</a></div>
<div id="link5"><a href="kontakt.html">Kontakt</a></div>
</div> |
css:
Code: | }
#container #footer2_galerie {
height: 20px;
width: 1017px;
background-repeat: no-repeat;
font-size: 11px;
background-image: url(../slices/hausfooterbottom.png);
color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
text-decoration: none;
}
#footer2_galerie #link1 {
float: left;
width: 35px;
margin-left: 195px;
}
#footer2_galerie #link2 {
float: left;
width: 80px;
margin-left: 85px;
}
#footer2_galerie #link3 {
float: left;
width: 75px;
margin-left: 50px;
}
#footer2_galerie #link4 {
float: left;
width: 70px;
margin-left: 35px;
}
#footer2_galerie #link5 {
float: left;
margin-left: 340px;
} |
hier noch ein bild, damit ihr euch vorstellen könnt was ich meine, die Links unten sind gemeint ( Gästehaus, Bauernhof, Wellness, Galerie und Kontakt)
Uploaded with ImageShack.us
Zuletzt bearbeitet von puresoul am Fr 15.07.2011 07:29, insgesamt 1-mal bearbeitet
|
|
|
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 15.07.2011 08:45
Titel
|
|
|
Code: |
div {
display:inline-block;
float:left;
margin:5px 15px;
}
|
|
|
|
|
|
Anzeige
|
|
|
Windhauch
Dabei seit: 01.08.2008
Ort: Saarland
Alter: 33
Geschlecht:
|
Verfasst Fr 15.07.2011 09:35
Titel
|
|
|
Wieso machst du um die Links überhaupt Divs drum? Links sind von sich aus Inlineelemente, da brauchst du kein float. Lass einfach die Divs weg. Den Grasbüschel kannst du den Links über CSS als Hintergrundgrafik geben.
#footer2_galerie {
padding-left: 195px;
height: 20px;
width: 822px;
background-repeat: no-repeat;
font-size: 11px;
background-image: url(../slices/hausfooterbottom.png);
color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
}
#footer2_galerie a {
display: inline-block;
margin: 0 5px;
padding-left: 30px;
text-decoration: none;
background: url(url_der_grasbüschel) no-repeat 0 0;
}
Dem Kontakt Link gibst du dann über eine Klasse ein float: right.
Zuletzt bearbeitet von Windhauch am Fr 15.07.2011 09:38, insgesamt 2-mal bearbeitet
|
|
|
|
|
puresoul
Threadersteller
Dabei seit: 03.12.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 18.07.2011 13:54
Titel
|
|
|
@Windhauch.
Vielen Dank für dein Hilfe.
hab es jetzt einmal so gemacht:
Code: | </div>
<div id="footer2_galerie">
<ul>
<li><a href="haus.html">Haus</a></li>
<li><a href="bauernhof.html">Bauernhof</a></li>
<li><a href="wellness.html">Wellness</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</body>
</html> |
Code: |
#footer2_galerie ul {
list-style-type: none
width: 1017px;
height: 20px;
font: normal 11px Verdana, Geneva, sans-serif;
text-decoration: none;
background-color: #765025;
background-repeat: no-repeat;
margin: 0 0px;
}
#footer2_galerie li {
display: inline;
text-decoration: none;
margin-left: 70px;
}
#footer2_galerie a, #footer2_galerie a:visited, #footer2_galerie a:hover {
color: #ffffff;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
margin-left: 30px;
background-image: url(../../Websites/Oberegg/HP/gras.png);
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
} |
Jetzt ist mein Prob, dass sich der abstant mit margin-left nur der Abstand zw. den links ändern. Die Links sollen aber soweit einrücken, dass sie genau unter unterkunft stehen, wie bei meinem Bild anbei und der Link Kontakt soll ganz rechts stehen.
Was muss ich in meinen Code shreiben, damit das funktioniert?
Danke, lg
http://imageshack.us/photo/my-images/838/balkeni.png/
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS / Newbie / DIVs nebeneinander positionieren?
DIV nebeneinander
3 divs nebeneinander
[CSS] 4 DIVS nebeneinander
IE 7 Liste nebeneinander
css 3 spalten nebeneinander
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|