mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 20:06 Benutzername: Passwort: Auto-Login

Thema: div nebeneinander positionieren vom 15.07.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> div nebeneinander positionieren
Autor Nachricht
puresoul
Threadersteller

Dabei seit: 03.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 15.07.2011 07:22
Titel

div nebeneinander positionieren

Antworten mit Zitat Zum Seitenanfang

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 Lächel 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
  View user's profile Private Nachricht senden
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 15.07.2011 08:45
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

div {
  display:inline-block;
  float:left;
  margin:5px 15px;
}
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Windhauch

Dabei seit: 01.08.2008
Ort: Saarland
Alter: 33
Geschlecht: Weiblich
Verfasst Fr 15.07.2011 09:35
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
puresoul
Threadersteller

Dabei seit: 03.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 18.07.2011 13:54
Titel

Antworten mit Zitat Zum Seitenanfang

@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/
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS / Newbie / DIVs nebeneinander positionieren?
DIV nebeneinander
3 divs nebeneinander
[CSS] 4 DIVS nebeneinander
IE 7 Liste nebeneinander
css 3 spalten nebeneinander
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.