nicht angemeldet
Div innerhalb eines Divs ganz unten positionieren
Gunnar BittersmannGuten Abend, Ich versuche im Div "Siedebar" den Div-Tag "zahlungsargen" und die nachfolgenden ganz unten zu positionieren, sodass platzt zwischen dem Menü und den Zahlengarten entsteht, doch es gelind mir seit paar Tagen nicht.. Ich habe auch google durchgesucht, aber nicht gefunden was funktioniert, oder ich kann es nicht umsetzen... Außerdem sollte der Div-Tag "sidebar" die volle höhe der Seite einnehmen. Das gelingt mir ebenfalls nicht. Nicht mit: height:100%; oder auch nicht mit min-height:100%;... Hat hier vl. Jemand eine Idee? Gruß
Hier ist der Code:
<div id="sidebar" style=
"float: left; width: auto; min-height: 100%; height: 100%; margin-top: 0px; border-right:4px solid #f6921e; float:right; border-left:4px solid #f6921e; margin-left: 0px;">
<div style=
"float: left; background: #f6921e; color:#ffffff; width: 100%; height:100%; ;">
<div style=
"border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
Unser Shop
</div>
<div style=
"margin-left:40px; margin-right:5px; line-height:30px;">
Logogestaltung
</div>
<div style=
"margin-left:40px; margin-right:5px; line-height:30px;">
Visitenkarten
</div>
<div style=
"margin-left:40px; margin-right:5px; line-height:30px;">
Briefpapier
</div>
<div style=
"border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:30px;">
<div style="margin-left:30px;">
Briefumschl‰ge
</div>
</div>
<div style=
"border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
Zu Favoriten hinzuf¸gen
</div>
<div style=
"border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
Beobachten
</div>
<div style=
"border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
Bewertungen
</div>
<div style=
"border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
AGBs
</div>
<div style=
"margin-left:10px; margin-right:10px; line-height:40px;">
FAQ
</div>
</div>
<div style="margin-left: 10px; margin-right: 10px;">
<div id="Zahlungsarten" style=
"border-top:solid 1px #656565; border-bottom:solid 1px #656565;">
<div style=
"font-size:; color:#f6921e; line-height:25px;">
Zahlungsarten:
</div>
<div style="margin-bottom:-6px; margin-left:0px;">
<img width="35%" src="PaypalLogo.png">
</div>
<div style="font-size:; line-height:20px;">
Banküberweisung
</div>
<div style=
"font-size:; line-height:20px; padding-bottom:1px;">
Kreditakrte
</div>
</div>
<div align="center" id="social" style=
"border-bottom:solid 1px #656565; height:auto; padding:5px; padding-bottom:4px;">
<img src=
"Facebook-logo.png">
<img src=
"Googlepluslogo.png">
</div>
<div id="impressum" style="font-size:14px">
<div style=
" color:#f6921e; line-height:25px; font-size:16px;">
Impressum
</div>
</div>
</div>
Im Moment sieht das Ganze so aus: Screenshot
Die sidebar soll natürlich bis ganz unten gehen, die Spalte "zahlungsinformationen" und die nachfolgenden sollen bis nach ganz unten rutschen. Es soll aber auch rsponsive sein. Egal bei welcher Bildschirmhöhe gleich/ähnlich aussehen.
Gruß und gute Nacht Daniel
-
@@Danl
Außerdem sollte der Div-Tag "sidebar" die volle höhe der Seite einnehmen. Das gelingt mir ebenfalls nicht.
Da du den relevanten Code nicht zeigst, kann die niemand sagen, woran es liegt. Und ein Online-Beispiel, bitte.
Nicht mit: height:100%; oder auch nicht mit min-height:100%;...
100% wovon? Welche Höhe hat der umschließende Block?
Hat hier vl. Jemand eine Idee?
Nicht
floatverwenden, sondern Flexbox. Dann ergiben sich Boxen in voller Höhe wie von selbst.Und auch Flexitems unten zu positionieren sollte kein Problem sein.
<div id="sidebar" style= "float: left; width: auto; min-height: 100%; height: 100%; margin-top: 0px; border-right:4px solid #f6921e; float:right; border-left:4px solid #f6921e; margin-left: 0px;">Sämtliche Angaben zur Darstellung gehören ins Stylesheet; nicht inline in
style-Attribute.Sollen die Inhalte darin mal Links werden? Dann ist statt
divvielleichtnavangebracht?<img src= "Facebook-logo.png"> <img src= "Googlepluslogo.png"> </div>Fehler: Den Bildern fehlen die Alternativtexte.
Im Moment sieht das Ganze so aus:
Den Link hab ich mal in deinem Posting berichtigt.
Es soll aber auch rsponsive sein. Egal bei welcher Bildschirmhöhe gleich/ähnlich aussehen.
Das widerspricht sich.
Responsive heißt nicht „gleich aussehen“; im Gegenteil.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|