Freier Platz

[roloremo]

Guten Abend liebe Community,
ich habe habe folgendes, wahrscheinlich sehr ungewöhnliches Problem:

Ich schreibe aktuell eine WebApp für jemanden aus meinem Bekanntenkreis.
Da ich keine Dropdown Menüs benutzen möchte (eigene Präferenz von wegen "Simplicity" und weil ich keine Dropdown-Menüs mag) packe ich jedes Menü auf eine extra Seite.
Das Problem ist, dass ich in einem von vielen Menüs nur theoretisch zwei Buttons anbringen muss und die Seite viel zu groß dafür ist, die Buttons aber nicht in eine andere Kategorie passen.

Was also anfangen mit dem übrigen Platz? Da ist sind noch viel bis zum Footer. Oder einfach die Buttons groß und schön darstellen?

Über eure Anregungen würde ich mich sehr freuen!

Mfg

[NotEnoughForYou]

hast du vlt. eine live preview oder ein Bild? Kann mir das gerade schlecht vorstellen.

[roloremo]

HTML

<!DOCTYPE html>
<html> 
<head>
	<title>German Bartending</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta name="language" content="deutsch, de">
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<link href="advices-menu.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="header">German Bartending</div>

<div class="menu">
	<div class="menu-button" id="recipes">Rezepte</div>
	<div class="menu-button" id="advices">Tipps und Tricks</div>
</div>

<div class="content">
	<div class="advices-categories" id="expensive-vs-cheap">Teuer vs Billig</div>
	<div class="advices-categories" id="create-own-creations">Kreation-Findung</div>
</div>

<div class="footer">
	<div class="shortcut" id="website"></div>
	<div class="shortcut" id="facebook"></div>
	<div class="shortcut" id="youtube"></div>
</div>

</body>
</html>

CSS

html, body {
	display: block;
	font-family: georgia, "times new roman", times, serif;
	color: rgb(51, 51, 51);
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgb(247, 246, 238);
}

h1{color: rgb(89, 37, 0);}

h2{
	font-style: italic;
	color: rgb(51, 51, 51);
}

.header {
/* position: fixed; */
	background-color: rgb(51, 51, 51);
	height: 50px;
	/* width: 360px; */
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: top;
}
.headliner {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

.menu {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 44px;
}
.menu-button{
	height: 100%;
	/* width: 178px; */
	width: 50%;
	/* border-style:solid;
	border-width: 1px; */
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
	
}
#recipes{background-color: rgb(51, 181, 229);}
#advices{background-color: rgb(51, 181, 229);}

.content{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
.advices-categories{
	/* height: 100%; */
	height: 100%;
	width: 50%;
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
}
#expensive-vs-cheap{background-color: rgb(255, 255, 255);}
#create-own-creations{background-color: rgb(255, 255, 255);}

.footer{
	display: none;
	background-color: rgb(51, 51, 51);
	height: 50px;
	margin-bottom: 0px;
	padding: 0px;
	
}

[UserIsGrateful]

@roloremo


Bin auch der Meinung, bzw. wünsche ich mir wie NotEnoughForYou ein Bild dazu. Denn der Quellcode von HTML und CSS ist schön und gut, doch nicht ausreichend um Aussagen zum Design zu treffen .

Falls du inzwischen eine Lösung gefunden hast, teile sie uns doch bitte mit - Danke!
Ansonsten bitte live preview (Demo) oder Bild.

[Steini00]

Deine Problembeschreibung ist wirklich sehr mager. Wo hast du denn zu viel Platz? Nach unten, rechts - links?
Ich habe ja keinen Plan, was du da für einen Inhalt hast. Aber schon mal an Infos, Top´s, Likes, Share, Comment, Newsletter, SinUp, Warenkorb, News etc gedacht?