Responsive (Bild-)Navigationleiste

JeffDavis · 29. Juni 2017

Howdy folks!

Ja, ich bins mal wieder, denke werde des öfteren Male hier ein paar Fragen raushauen.

Ich bin mit meinem Webdesign schon etwas vorangekommen. Nun habe ich folgendes Problem, wofür man sich einmal die Bilder ansehen sollte.

1980x1080 Bildschirm

1680x1050

Ich glaube da fällt einen schon was auf Möchte die Navigationsleiste eben mittig haben und das responsive. Derzeitig mache ich es mit margin, aber das siehste ja dann im Code.
Was würdet ihr verwenden, um die Bilder etwas weiter auseinander zu machen?

HTML

<!doctype html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Robada County-Roleplay</title>
<link href="css/enterpage.css" >
<link rel="icon" href="icons/favicon.png" type="image/png" />	
</head>


<body>
<!--Text-->
<div class="headbox">
	<div class="enterpage">
		<h1>Willkommen auf <b style="color: #b97027" rel="color: #b97027">Robada County</b> - Roleplay</h1>
	</div>
</div>
<content id="nav">
	<a href="#"><img src="css/forum.jpg" id="forum"></a>
	<a href="#"><img src="css/ucp.jpg" id="ucp"></a>
	<a href="#"><img src="css/server.jpg" id="server"></a>
	<a href="#"><img src="css/ts3.jpg" id="ts3"></a>
</content>
<!--Hintergrundmusik-->
<audio id="musik22" autoplay loop>
<source src="Country Instrumental  Beat Backwoods.mp3" type="audio/wav">
</audio>
<script>
var music = document.getElementById("musik22")
music.volume = 0.09
</script>
<script type="text/javascript">
function taste (t) {
if (!t)
t = window.event;
if ((t.type && t.type == "contextmenu") || 
(t.button && t.button == 2) || (t.which && t.which == 3)) {
if (window.opera)
window.alert("Speichern nicht erlaubt.");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = taste;
document.oncontextmenu = taste;
</script>
</body>
</html>

Alles anzeigen

CSS

@charset "utf-8";
/* CSS Document */


@-webkit-keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}


@keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}


body{
	background-image: url(bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: burlywood
}


.enterpage{
	text-align: center;
	font-family: Century Gothic;
}


.headbox{
	box-sizing: border-box;
	border-style: solid;
	border-left: none;
	border-right: none;
	width: 700px;
	height: 70px;
	margin: auto;
}


#nav{
display:inline-block;
position: relative;
margin-top:  20%;
margin-left: 20%;
}


#forum {
width: 12%;
height: 12%;
margin: 10px;
padding-left: 20%;
vertical-align:middle;
}


#forum:hover {
 -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}


#server {
width: 12%;
height: 12%;
margin: 10px;
vertical-align:middle;
}


#server:hover{
 -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-image: url(images/Bild2.png);
}


#ucp {
width: 12%;
height: 12%;
margin: 10px;
vertical-align:middle;
}


#ucp:hover{
 -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}


#ts3 {
width: 12%;
height: 12%;
margin: 10px;
vertical-align:middle;
}


#ts3:hover{
-webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}


.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

Alles anzeigen

xGreekz7x · 30. Juni 2017

Also folgende Methoden stehen dir zur Verfügung.

1. Tables ( nicht empfehlenswert )
2. div columns ( Sprich 4 Div-Elemente mit jeweils 25% breite & dann noch den innen Abstand mittels padding setzen )
3. flex boxes

Mit allen 3 Methoden solltest du an dein Ziel kommen.

Außerdem:

#nav sollte keine % als margin-left haben, sondern eher ein margin-left // margin-right: auto;

JeffDavis · 30. Juni 2017

Danke, habs jetzt so unter #nav reingemacht.
Funktioniert spitze.

Danke, danke, danke

CSS

position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding-top: 20%;

Fancy · 30. Juni 2017

position: relative; kannt doch eigentlich weg?

sag mir aber bitte nicht, das du mit padding-top das ganze in die mitte verschiebst?!

edit:
Hier hast du mal eine saubere Flex Version
https://codepen.io/anon/pen/LLQaKJ

JeffDavis · 30. Juni 2017

Zitat von Fancy

position: relative; kannt doch eigentlich weg?

sag mir aber bitte nicht, das du mit padding-top das ganze in die mitte verschiebst?!

edit:
Hier hast du mal eine saubere Flex Version
https://codepen.io/anon/pen/LLQaKJ

hih ich kenn's nicht anders :x aber danke, das andere probier ich mal aus.

breadfish.de 12. März 2022