IMG im DIV ausrichten

[vega]

Hi CSS-Gemeinde,

ich bin mit meiner Website quasi fertig und muss noch den letzten Makel entfernen. Ich habe vier kleine Grafiken als CSS-Switcher-Navigation in einem DIV liegen. Leider bekomme ich es nicht hin, dass sie sich am unteren Rand des DIVs anordnen und bottom:0; hat nichts gebracht. :-/

CSS:

Code: Alles auswählen

body {
  margin:0;
  padding:0;
  background-color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:100,01%;
}

img {
   display:block;
   border:0;
   }

#titelwrap {
   margin-top:30px;
   margin-left:0;
   padding-left:230px;
   width:600px;
   margin-bottom:25px;
   }

#titel {
   margin-left:0;
   float:left;
   }

#farbmenue, img {
   text-align:right;
   display:inline;
   }

HTML:

Code: Alles auswählen

<div id="farbmenue">
<p>
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_default"><img src="../grafx/de.gif" width="10" height="10" alt="weiß" /></a>
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_rw"><img src="../grafx/rw.gif" width="10" height="10" alt="rot" /></a>
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_ws"><img src="../grafx/ws.gif" width="10" height="10" alt="schwarz" /></a>
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_mg"><img src="../grafx/mg.gif" width="10" height="10" alt="magenta" /></a>
</p>
</div>

Weiß jemand Rat/die Lösung?

Schöne Grüße

[sejuma]

Versuch's mal damit:

Code: Alles auswählen

#farbmenue p {margin: 0; padding: 0;}

Begründung siehe http://www.ohne-css.gehts-gar.net/0037.php

Eine weitere Ursache könnte diese sein: http://www.ohne-css.gehts-gar.net/0009.php

Wenn das nichts nützt, poste bitte einen Link zur Problemseite.

[vega]

leider nicht gelöst. link per pn.

[vega]

ich habe auch mal das <p> drum herum entfernt, aber das brachte auch keinen erfolg.

[Azra]

Da die Navigation wohl eher nicht dynamisch ist, also sich in der Größe nie verändert reicht doch einfaches "margin-top" usw.
Ansonsten schick mir bitte auch den Link einmal zu.

> top, bottom, left und right sind Angaben die nur mit Verwendung von "position: absolute;" funktionieren

[vega]

gesendet. danke euch.

[sejuma]

Gib #farbmenue, img einen margin-top-Wert.
So ca. 10px müssten hinkimmen.

[Azra]

Also grundlegend funktioniert das mit einem <p>-Tag schonmal garnicht.
Zum Zweiten, ist die Trennung durch ein Komma auch fehl am Platz, da sich die Attribute dann auf den Container UND alle Bilder auswirken.
Deßhalb kann das Komma bei "#farbmenue, img" schonmal weg.

Ich habe heute leider keine Zeit mir weitere Gedanken zu machen.
Wenn es bis morgen noch nicht gelöst ist, gucke ich gerne noch einmal drüber.

[vega]

also, ich nehme an, du meintest padding-top und nicht margin-top. margin-top ändert gar nichts. padding-top lässt es in der tat etwas absenken, aber blöderweise auch die inhalte darunter, was ich nicht verstehe, da ich davon ausging, dass padding für das innere des divs zuständig ist.

ich habe noch etwas verändert, das es vorher unpraktisch war. zumindest wird der inhalt nun wieder rechtsbündig angeordnet:

Code: Alles auswählen

#titel {
   margin-left:0;
   float:left;
   }

#farbmenue {
   width:600px;
   text-align:right;
   }

#farbmenue img {
   display:inline;
   }

es fehlt nur weiterhin, dass es sich auch UNTEN im div anordnet. blöde sache. :-/

[sejuma]

Bitte nochmal einen funktionierenden Link.

[vega]

jetzt noch einmal das aktuelle konstrukt, denn ich habe die grafiken entfernt:

html

Code: Alles auswählen

<div id="titelwrap">
<div id="titel">
<h1><a href="../../">Website-Titel</a></h1>
</div>
<div id="farbmenue">
<p>
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_default">1</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_rw">2</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_ws">3</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_mg">4</a>
</p>
</div>
</div>


css

Code: Alles auswählen

#titelwrap {
   margin-top:30px;
   margin-left:230px;
   width:600px;
   margin-bottom:25px;
   }

#titel {
   margin-left:0;
   float:left;
   }

#farbmenue {
   width:600px;
   text-align:right;
   }

h1 {
  font-size:1.2em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
}

p {
  font-size:0.7em;
  margin-left:0;
  padding:0;
  color:#666;
}

ihr seht also, die konstruktion ist recht einfach. "titelwrap" ist der große div, der die anderen divs "titel" und "farbmenue" nebeneinander beinhaltet.

in titel steht etwas mit h1-format, in farbmenue etwas in p-format. der text im linken div ist demzufolge größer und ich möchte, dass der text im rechten div (farbmenue) sich auch unten auf gleicher höhe mit dem text vom linken div (titel) anordnet, aber ich bekomme es ums verrecken nicht hin.

[sejuma]

Hab's mal etwas abgespeckt; denke so sollte klappen. Ggf. noch etwas die margins justieren.

CSS:

Code: Alles auswählen

#titelwrap {
   margin-top:30px;
   margin-left:230px;
   width:600px;
   margin-bottom:25px;
    position: relative;
   }

#titel {
  font-size:1.2em;
  margin-top:0px;
  margin-bottom:5px;
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
   }

#farbmenue {
   position: absolute;
   bottom: 0;
   right: 0;
   }

HTML:

Code: Alles auswählen

<div id="titelwrap">

<h1 id="titel"><a href="../../">Website-Titel</a></h1>

<div id="farbmenue">
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_default">1</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_rw">2</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_ws">3</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_mg">4</a>

</div><!--Ende #frbmenue-->

</div><!--Ende titelwrap-->

[vega]

genau den relative-absolute-kram habe ich auch schon in varianten versucht. weißt du, was dann passiert? diese kleine css-navigation (1 - 4) wird dann einfach nur ganz unten am browserrand gezeigt. der rest der website bleibt normal. also, auch nicht gelöst. :-/

[sejuma]

Also bei mir funktioniert dieser Code, wenn ich ihn so wie er dasteht isoliert verwende.
Bei absoluten Positionierungen kommt es darauf an, zu welchem übergeordneten Element die absolute Positionierung erfolgt.
In meinem Beispiel ist es der relativ positionierte #titelwrap.
Da sich #farbmenue innerhalb #titelwrap befindet, ist eine Positionierung am unteren Bildschirmrand ausgeschlossen.
Da muss bei dir dann noch ein anderer Fehler sein.

[vega]

das ist doch verrückt. ich poste noch einmal den KOMPLETTEN css-code, denn ich kann diesen "fehler" nicht finden.

Code: Alles auswählen

body {
  margin:0;
  padding:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:100,01%;
  background-color:#fff;
}

img {
   display:block;
   border:0;
   }

#titelwrap {
   margin-top:30px;
   margin-left:230px;
   width:600px;
   margin-bottom:25px;
   }

#titel {
   margin-left:0;
   float:left;
   }

#farbmenue {
   width:600px;
   text-align:right;
   }

#menu {
  clear:left;
  width:130px;
  height:300px;
  padding:0;
  float:left;
  margin-left:80px;
  margin-top:-1px;
}

#wrap {
  margin-left:230px;
  margin-top:0;
}

#themabild {
  margin-left:0px;
  padding:0px;
}

#themabild img {
  display:block;
}

#inhalt {
  clear:left;
  margin:0;
  padding:0px;
  width:610px;
}

#kf_1 {
  padding:0px;
  width:240px;
  float:left;
}

#kf_2 {
  padding:0px;
}

#kf_3 {
  padding-left:240px;
  clear:left;
}

#imprint_1 {
  padding:0px;
  width:250px;
  float:left;
}

#imprint_2 {
  padding:0px;
}

#imprint_3 {
  width:600px;
  padding:0px;
  clear:left;
}

input {
  font-size:1em;
  font-family:Arial,Helvetica,sans-serif;
  border:none;
  background-color: #f2f1f1;
}

input.btn {
  font-size:0.7em;
  color:#666;
}

textarea {
  font-size:1em;
  font-family:Arial,Helvetica,sans-serif;
  border:none;
  background-color: #f2f1f1;   
}

h1 {
  font-size:1.2em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#009ab2;
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
}

h1 a {color:#009ab2;}
h1 a:link {color:#009ab2;}
h1 a:visited {color:#009ab2;}
h1 a:hover {color:#646464;}
h1 a:active {color:#009ab2;}

h2 {
  font-size:0.76em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#009ab2;
}

h3 {
  font-size:0.7em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#666;
}

h4 {
  font-size:0.7em;
  margin-top:0px;
  margin-bottom:3px;
  margin-left:0px;
  color:#666;
}

p {
  font-size:0.7em;
  margin-top:0;
  margin-left:0;
  padding:0;
  color:#666;
}

a {
   color:#e628d2;
   }
a:link {
   color:#e628d2;
   text-decoration:none;
   }
a:visited {
   color:#e628d2;
   text-decoration:none;
   }
a:hover {
   color:#646464;
   }
a:active {
   color:#e628d2;
   text-decoration:none;
   }

ul.navi, ul ul {
   border:0;
   list-style-type:none;
   overflow:hidden;
   padding:0;
   }
ul.navi {
   font-size:0.76em;
   list-style-type:none;
   text-align:right;
   vertical-align:top;
   margin:0px;
   width:130px;
   height:300px;
   }

ul.navi ul {}
ul.navi li {
   padding-bottom:4px;
   line-height:1em;
   }
ul.navi li.drop {}
ul.navi li a, ul.navi li a:visited {
   width:130px;
   text-decoration:none;
   }
ul.navi li a.last, ul.navi li a.last:visited {}
ul.navi li ul {
   display:none;
   padding-left:5px;
   margin-bottom:0;
   padding-top:3px;
   }
ul.navi li ul li {
   padding-bottom:2px;
   }
ul.navi li:hover a, ul.navi li a:hover {
   padding-right:5px;
   }
ul.navi li:hover ul, ul.navi li a:hover ul {
   display:block;
   width:130px;
   }
ul.navi li:hover ul li a, ul.navi li a:hover ul li a {
   color:#9b9b9b;
   }
ul.navi li:hover ul li:hover a, ul.navi li a:hover ul li a:hover {
   color:#646464;
   }

.shadow {
    background: url(_en/grafx/dropshadow.png) no-repeat bottom right;
    float:left;
}
.shadow img {
    display: block;
    margin: 0px 9px 9px 0px;
}
.shadow:after {
   background:url(_en/grafx/dropshadow.png) left bottom no-repeat;
    display:block;
    width:18px;
    height:9px;
    content:"";
    margin:-9px 0px 0px 0px;
}
.shadow:before {
    background:url(_en/grafx/dropshadow.png) right top no-repeat;
    display:block;
    height:18px;
    content:"";
   margin-bottom:-18px;
}
   
#card_1 {
  padding:0px;
  width:250px;
  float:left;
}

#card_2 {
  padding:0px;
}

#card_3 {
  padding-left:250px;
  clear:left;
}

input.radio {
  background-color:#fff;
}

table.cardtable {
  border:0;
  border-collapse:collapse;
}

/*
EM - PX zum kopieren oder nachschauen
10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em
*/

[sejuma]

Eben, da sind meine Änderungen, sowohl in HTML als auch CSS in keinster Weise übernommen.

[vega]

haha, ja, natürlich nicht. ich hatte deine änderungen drin und es hat leider den effekt erzielt, wie oben beschrieben. ich kann hier natürlich den code MIT deiner änderung posten, aber du sagtest ja ohnehin, dass der fehler woanders liegt.

wenn ich es so hochlade, habe ich die kleine zahlenreihe ganz unten im browser stehen, völlig im leeren feld ohne sinn.

css

Code: Alles auswählen

body {
  margin:0;
  padding:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:100,01%;
  background-color:#fff;
}

img {
   display:block;
   border:0;
   }

#titelwrap {
   margin-top:30px;
   margin-left:230px;
   width:600px;
   margin-bottom:25px;
   position:relative:
   }

#titel {
   margin-left:0;
   font-size:1.2em;
   margin-top:0px;
   margin-bottom:5px;
   font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
   }

#farbmenue {
   width:600px;
   position: absolute;
   bottom: 0;
   right: 0;
   }

#menu {
  clear:left;
  width:130px;
  height:300px;
  padding:0;
  float:left;
  margin-left:80px;
  margin-top:-1px;
}

#wrap {
  margin-left:230px;
  margin-top:0;
}

#themabild {
  margin-left:0px;
  padding:0px;
}

#themabild img {
  display:block;
}

#inhalt {
  clear:left;
  margin:0;
  padding:0px;
  width:610px;
}

#kf_1 {
  padding:0px;
  width:240px;
  float:left;
}

#kf_2 {
  padding:0px;
}

#kf_3 {
  padding-left:240px;
  clear:left;
}

#imprint_1 {
  padding:0px;
  width:250px;
  float:left;
}

#imprint_2 {
  padding:0px;
}

#imprint_3 {
  width:600px;
  padding:0px;
  clear:left;
}

input {
  font-size:1em;
  font-family:Arial,Helvetica,sans-serif;
  border:none;
  background-color: #f2f1f1;
}

input.btn {
  font-size:0.7em;
  color:#666;
}

textarea {
  font-size:1em;
  font-family:Arial,Helvetica,sans-serif;
  border:none;
  background-color: #f2f1f1;   
}

h1 {
  font-size:1.2em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#009ab2;
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
}

h1 a {color:#009ab2;}
h1 a:link {color:#009ab2;}
h1 a:visited {color:#009ab2;}
h1 a:hover {color:#646464;}
h1 a:active {color:#009ab2;}

h2 {
  font-size:0.76em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#009ab2;
}

h3 {
  font-size:0.7em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#666;
}

h4 {
  font-size:0.7em;
  margin-top:0px;
  margin-bottom:3px;
  margin-left:0px;
  color:#666;
}

p {
  font-size:0.7em;
  margin-top:0;
  margin-left:0;
  padding:0;
  color:#666;
}

a {
   color:#e628d2;
   }
a:link {
   color:#e628d2;
   text-decoration:none;
   }
a:visited {
   color:#e628d2;
   text-decoration:none;
   }
a:hover {
   color:#646464;
   }
a:active {
   color:#e628d2;
   text-decoration:none;
   }

ul.navi, ul ul {
   border:0;
   list-style-type:none;
   overflow:hidden;
   padding:0;
   }
ul.navi {
   font-size:0.76em;
   list-style-type:none;
   text-align:right;
   vertical-align:top;
   margin:0px;
   width:130px;
   height:300px;
   }

ul.navi ul {}
ul.navi li {
   padding-bottom:4px;
   line-height:1em;
   }
ul.navi li.drop {}
ul.navi li a, ul.navi li a:visited {
   width:130px;
   text-decoration:none;
   }
ul.navi li a.last, ul.navi li a.last:visited {}
ul.navi li ul {
   display:none;
   padding-left:5px;
   margin-bottom:0;
   padding-top:3px;
   }
ul.navi li ul li {
   padding-bottom:2px;
   }
ul.navi li:hover a, ul.navi li a:hover {
   padding-right:5px;
   }
ul.navi li:hover ul, ul.navi li a:hover ul {
   display:block;
   width:130px;
   }
ul.navi li:hover ul li a, ul.navi li a:hover ul li a {
   color:#9b9b9b;
   }
ul.navi li:hover ul li:hover a, ul.navi li a:hover ul li a:hover {
   color:#646464;
   }

.shadow {
    background: url(_en/grafx/dropshadow.png) no-repeat bottom right;
    float:left;
}
.shadow img {
    display: block;
    margin: 0px 9px 9px 0px;
}
.shadow:after {
   background:url(_en/grafx/dropshadow.png) left bottom no-repeat;
    display:block;
    width:18px;
    height:9px;
    content:"";
    margin:-9px 0px 0px 0px;
}
.shadow:before {
    background:url(_en/grafx/dropshadow.png) right top no-repeat;
    display:block;
    height:18px;
    content:"";
   margin-bottom:-18px;
}
   
#card_1 {
  padding:0px;
  width:250px;
  float:left;
}

#card_2 {
  padding:0px;
}

#card_3 {
  padding-left:250px;
  clear:left;
}

input.radio {
  background-color:#fff;
}

table.cardtable {
  border:0;
  border-collapse:collapse;
}

/*
EM - PX zum kopieren oder nachschauen
10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em
*/

html

Code: Alles auswählen

<body>
<div id="titelwrap">
<h1 id="titel"><a href="../../">Ivan Schneider</a></h1>
<div id="farbmenue">
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_default">1</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_rw">2</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_ws">3</a> :
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?style=style_mg">4</a>
</div>
</div>
...

[vega]

relative: = relative; natürlich.

[sejuma]

Dann ersetze mal bei #titelwrap

Code: Alles auswählen

    position: relative:

den Doppelpunkt durch einen Strichpunkt.

[vega]

siehe beitrag darüber vor ca. 30 min. das war nur ein tippfehler beim nochmaligen kopieren.

[vega]

http://www.ivanschneider.com/test/portfolio/ ... hier kann man sich den fehler/effekt ansehen, wenn man oben auf die "4" klickt. das ist die css-datei mit deinen settings (sejuma).

wie gesagt, es ordnet sich einfach unten (am browserrand) an.

[vega]

uhps, nein, lustig, nun ordnet es sich einfach über dem "titel" an. verrückt.

[sejuma]

Code: Alles auswählen

#titelwrap {
   margin-top:30px;
   margin-left:230px;
   width:600px;
   margin-bottom:25px;
   position:relative;
   }

#titel {
  font-size:1.2em;
  margin: 0;
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
   }

#farbmenue {

   position: absolute;
   bottom: 0;
   right: 0;
   }

[vega]

hm, ja, ordnet nun rechts an und ist auf gleicher höhe mit dem titel links, aber nur, weil die schriftgröße gleich ist. sobald ich um die 1 - 4 ein <p></p> setze (hat kleinere schrift als eigenschaft), ist es wieder weiter oben, d.h. es ordnet sich nicht unten am div an, sondern oben. :-/

problem weiterhin ungelöst.

[sejuma]

Dann nimm zusätzlich noch

Code: Alles auswählen

#farbmenue p {margin: 0; padding: 0;}

und falls das immer noch nicht passt, justiere über den bottom-Wert bei #farbmenue.