nicht angemeldet
css postition top und bottom wollen nicht in % funktionieren.
Gunnar BittersmannHalli Hallo, um ehrlich zu sein verstehe ich kaum was ich hier mache und versuche mit meinem Halbwissen ans Ziel zu kommen.. Ich habe mir zahlreiche Videos zum Thema css positionierung angesehen.. bedauerlicherweise fehlt mir aber scheinbar der ein oder andere IQ um zu verstehen warum das hier nicht so klappt wie es soll.
Mein Problem ist das ich meine "Linkliste" (DIV "solinks") nicht so positionieren kann wie ich gern möchte. Rechts und Links klappt prima nur Top und bot werden ignoriert sobald ich sie in % angebe.
Mein Plan war es alle Maße auf der Seite in % anzugeben damit sie bei jeder Skalierung (also tablet PC oder weisnichtwas) gleich darstellt.
.solinks p {
text-align: center;
border: 5px solid green;
color: #ffffff;
bottom: 50%;
left: 70%;
max-width: 20%;
position: relative; }
<html lang="de">
<head>
<title>Reese</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="page-home">
<span class="logo-reese"><img src="assets/img/reesetvmk.png">
<div class="solinks">
<p><a href="">Facebook</a></p>
<p><a href="">Youtube</a></p>
<p><a href="">Soundcloud</a></p>
<p><a href="">E-Mail</a></p>
</div>
<video poster="assets/img/videoposter.jpg" autoplay controls>
<source src="assets/vid/tvvid1.mp4" type="video/mp4">
<source src="assats/vid/tvvid1.webm" type="video/webm">
</video>
</div>
</div>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/js/functions.js" type="text/javascript"></script>
</body>
</html>
-
Hallo
Hat zwar nichts direkt mit deinem Problem zu tun: Zunächst solltest du den Quellcode korrigieren. So wird zum Beispiel ein span-Element geöffnet und nicht geschlossen oder ein div geschlossen, dass nicht geöffnet wurde:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.reese.julien-wagner.de%2F
Zu deinen Problem:
Gib dem umgebenden Element zunächst mal einen Rahmen um dessen Größe zu sehen, zum Beispiel mit
.solinks { border: 2px solid orange; }Gib anschließend dem umgebenden Container .solinks zusätzlich eine Höhe. Und zwar zunächst 1px, dann 10px, dann 100px, dann 100vh und schau was passiert. Gleichzeitig kannst du an den bottom-Angaben herumschrauben.
Gruss
MrMurphy
-
@@MrMurphy1
Gib dem umgebenden Element zunächst mal einen Rahmen um dessen Größe zu sehen
Durch einen Rahmen ändert man aber (je nach Box-Modell) die Größe des Elements. *klopf klopf* „Wer da?“ – „Heisenberg.“
Protip: Zum Sichtbarmachen der Ausmaße eines Elements nicht
border, sondernoutlineverwenden. Oder auchbackground-color.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:|
-
-
@@JulienW
Mein Plan war es alle Maße auf der Seite in % anzugeben damit sie bei jeder Skalierung (also tablet PC oder weisnichtwas) gleich darstellt.
Dieses Posting von unten nach oben lesen.
Ein Link zur problematischen Seite könnte helfen, dein Problem zu verstehen. Einer, der funktioniert.
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:|