Hey Leute,
ich wollte mal in CSS was "neues" ausprobieren, was ich selber relativ selten gemacht habe. Ich habe eine linke vertikale Box die eine breite von 180px hat. Die Höhe beträgt 100%. Damit habe ich versucht, dass die Höhe der Box mit dem Bildschirm mitgeht. Allerdings habe ich ein kleines Problem bemerkt, denn sobald ich runterscrollen kann, wird der untere Bereich abgeschnitten. Manchmal nimmt es auch die Navigationspunkte mit. Ich möchte das ändern, allerdings weiß ich nicht wie. Könnt ihr mir da helfen?
Hier habe ich auf 130% rangescrollt.
Hier hab ich auf die Bildschirmgröße 360x640 umgeschaltet.
Bei der Bildschirmgrößenumschaltung, bleibt die Höhe, wie gewollt, automatisch am Bildschirm angepasst. Das passiert bei den Größen 768x1024, 800x1280 und 980x1280.
Ich habe bereits in meiner CSS Befehle wie position:fixed; oder position:absolute; ausprobiert, nichts hat geholfen.
Index.php ( pastebin link:
)
HTML Code:
<!DOCTYPE html>
<html>
<?php require_once('head.php'); ?>
<body>
<div id="sidebar_left">
<div class="sidebar_left_head"><p title="Multigaming Teamspeak Clan"><b>GamerCrewClan</b> <i class="fa fa-bookmark"></i></p></div>
<div class="sidebar_left_profile" style="background:url('img/sidebar_left/profile_gcc.png') 50%;" title="GamerCrewClan Multigaming Clanbild"></div>
<div id="sidebar_left_navigation_main">
<div class="sidebar_left_navigation_head"><p>GamerCrewClan</p></div>
<div class="sidebar_left_navigation_menu">
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="Seiten Übersicht des GamerCrewClans">Startseite</a></li></div>
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="Hompage Updates, Teamspeak Updates oder Multigaming Clan Updates">Updates</a></li></div>
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="Neues über den GamerCrewClan und deren Server auf einer Übersicht">News</a></li></div>
</div>
</div>
<div class="sidebar_left_profile" style="background:url('img/sidebar_left/profile_mc.png') 68%;" title="GamerCrewClan Multigaming Minecraft Serverbild"></div>
<div id="sidebar_left_navigation_main">
<div class="sidebar_left_navigation_head"><p>Minecraft</p></div>
<div class="sidebar_left_navigation_menu">
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="Aktuell oder kommende Events im Überblick">Events</a></li></div>
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="Veränderungen am GamerCrewClan Multigaming Minecraft Server">Updates</a></li></div>
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="Community Feedback über den GamerCrewClan Multigaming Minecraft Server">Community</a></li></div>
</div>
</div>
<div class="sidebar_left_profile" style="background:url('http://blogs-images.forbes.com/insertcoin/files/2014/06/nintendo3.jpg') 46%;" title="GamerCrewClan Multigaming Minecraft Serverbild"></div>
<div id="sidebar_left_navigation_main">
<div class="sidebar_left_navigation_head"><p>Clanbereiche</p></div>
<div class="sidebar_left_navigation_menu">
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="GamerCrewClan Multigaming League of Legends Clanbereich">League of Legends</a></li></div>
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="GamerCrewClan Multigaming Arma 3 Clanbereich">Arma 3</a></li></div>
<div class="sidebar_left_navigation_menu_box"><li><a href="index.php" title="GamerCrewClan Multigaming CS:GO Clanbereich">CS:GO</a></li></div>
</div>
</div>
</div>
</body>
</html>
main.css ( pastebin link:
)
Code:
* {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-style: normal;
font-variant: normal;
}
#sidebar_left {
position:fixed;
position:absolute;
top:0;
left:0;
width:190px;
height:100%;
background-color:#34495e;
}
#sidebar_left > .sidebar_left_head > p {
color:#fff;
font-size:14px;
text-align:center;
margin-bottom:50px;
}
#sidebar_left > .sidebar_left_profile {
width:75px;
height:75px;
border-radius:100px;
margin:0 auto;
margin-bottom:15px;
}
#sidebar_left > #sidebar_left_navigation_main {
width:100%;
height:190px;
padding:0;
margin-bottom:10px;
}
#sidebar_left > #sidebar_left_navigation_main > .sidebar_left_navigation_head > p {
text-align:center;
font-size:11px;
color:#ccc;
}
#sidebar_left_navigation_main > .sidebar_left_navigation_menu > .sidebar_left_navigation_menu_box:hover {
width:100%;
height:50px;
cursor:pointer;
background-color:#22313F;
}
#sidebar_left_navigation_main > .sidebar_left_navigation_menu > .sidebar_left_navigation_menu_box > li > a {
color:white;
text-decoration:none;
}
#sidebar_left_navigation_main > .sidebar_left_navigation_menu > .sidebar_left_navigation_menu_box > li {
color:#fff;
font-size:15px;
line-height:50px;
text-decoration:none;
text-align:center;
list-style:none;
}
Dies sind unter anderem auch die einzigsten Dateien die ich bisher beschriftet habe.
