Kachelmenü für eine Webanwendung

sarah1991 · #1 (**permalink**) 27.12.2015, 20:15

Hallo zusammen,

ich saß heute den ganzen Tag an der Implementierung einer Kachelnavigation. Die Icons, die auf den kacheln zu sehen sind, sind PNG-Grafiken (Siehe unten im Bild). Folgende zwei Probleme, die ich bislang nicht gelöst habe:

1. Die Kacheln haben keine feste Höhe sondern nur height:auto;
Wenn ich mir meine Datei im Browser ansehe, dann verschiebt sich die dritte Kachel auf die Position der vierten Kachel und die vierte Kachel rutscht in eine neue Zeile. Sobald ich die Höhe der Klasse -nav__link auf 1rem oder höher setze, dann sind die Kacheln korrekt positioniert. Warum ist das so? Ich hätte gern eine automatische Höhe...

2. Ich möchte, dass sich die Kachelgröße an die Höhe des Viewports anpasst, (die Breite funktioniert wunderbar) allerdings weiß ich nicht, wie ich das lösen kann. Meine Versuche waren erfolgslos.

Dies ist mein HTML-Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<title>Carzeug</title>

	<link rel="stylesheet" type="text/css" href="css/vendor/foundation.css"/>
	<link rel="stylesheet" type="text/css" href="css/custom.css"/>

	<script type="text/javascript" src="js/vendor/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/web_gui.js"></script>

</head>
<body>
	<div class="carzeug--content wrapper">
		<div class="row">
			<ul class="nav__list wrapper">
		        <li class="nav__item small-6">
		            <a class="nav__link">
		               	<img class="nav--img profil" src="img/profil.png"/>
		            </a>
		        </li>
		        <li class="nav__item small-6 padding-right">
		            <a class="nav__link">
						<img class="nav--img calendar" src="img/calendar-color.png"/>
		            </a>
		        </li>
				<li class="nav__item small-6">
		            <a class="nav__link">
		                <img class="nav--img oil" src="img/oil.png"/>
		            </a>
		        </li>
		        <li class="nav__item small-6 padding-right">
		            <a class="nav__link">
		               	<img class="nav--img plakette" src="img/plakette-color.png"/>
		            </a>
		        </li>
		    </ul>
		</div>
	</div>
</body>
</html>

Dies ist mein CSS-Code:

Code:

html {
  box-sizing: border-box; 
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit; 
}

body,
html {
    overflow-x: hidden;
}

.carzeug--content {
    background-color: rgb(218, 218, 218);
    max-width: 1024px;
    width: auto;
}

/****************************/
/***********LAYOUT***********/
/****************************/
.padding-right {
  padding-right: 0.5rem!important;
}


/********************************/
/***********NAVIGATION***********/
/********************************/
.nav__list {
    list-style: none;
    margin: 0;
}

.nav__item {
  float: left;
  padding: 0.5rem 0 0 0.5rem;
}

.nav__link {
    position: relative;
    display: block;
    height: auto;
    background-color: rgb(22, 29, 50);
    cursor: pointer;
}

und in der JavaScript-Datei steht folgendes:

Code:

$(document).ready(function(){
	sizeOfContent();
	$(window).resize(sizeOfContent);
});


function sizeOfContent() {
	var height = $("html").height() + "px";
	$(".wrapper").css("min-height", height);
}

MrMurphy · #2 (**permalink**) 27.12.2015, 20:40

Hallo

ein Link zur Seite wäre sinnvoller. Deine Quellcodeschnipsel sind leider nicht hilfreich um dein Problem zu lösen.

Zunächst stammt die Seite wahrscheinlich aus einem Framework, das uns nicht vorliegt.

Dann ist die JS-Version nicht bekannt.

Und zudem liegen uns die Bilder nicht vor.

Und nein, es ist unwahrscheinlich, das jemand nur um dir zu helfen

das Framework installiert
die notwendigen Dateien erstellt und mit Inhalt füllt
die Bilder einbindet

um dann nur feststellen zu müssen, das eine Hilfe nicht möglich ist, weil doch noch eine wichtige Information von dir fehlt.

Freewareanbieter gibt es genug, zum Beispiel bplaced.net.

Gruss

MrMurphy

sarah1991 · #3 (**permalink**) 27.12.2015, 20:42

Hallo MrMurphy,

ich habe leider keinen Link, da die Anwendung nicht online ist. Ich könnte alles in ein Repository laden und dann den git-Link hier einfügen?!

Die Seiten stammen aus keinem Framework. Die Seiten habe ich gerade anhand meines Konzeptes erstellt.

GIT LINK:
https://github.com/wesade/carzeug

Thielo · #4 (**permalink**) 27.12.2015, 22:51

Problem 1) liegt halt an der unterschiedlichen Höhe der Grafiken. Entweder gibst du allen die selbe Größe, oder alle Bilder erhalten die selbe Größe.

Problem 2) Can I use... Support tables for HTML5, CSS3, etc

sarah1991 · #5 (**permalink**) 27.12.2015, 22:59

Vielen Dank!!!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln