Willkommen auf dem Portal für Mediengestalter

Oysterhase · Threadersteller

Hallo ihrs,

ich schraube gerade eine Seite für einen Kunden zusammen, die auf Mobilgeräten nicht so richtig originalgetreu aussieht und ich weiss nicht, warum.

Ich komme eher von der gestalterischen Seite und stoße beim Programmieren gerade an meine Grenzen.

Konkret:
Warum verschieben sich einzelne Elemente wie Kopf (Kopf02.png) und Menü (<ul class="menu">)
beim Zoomen gegeneinander, obwohl sie im gleichen Container sitzen?

Und warum wird die Hintergrundgrafik auf dem Androidphone nicht flächendeckend angezeigt?

Ich bin für jede Idee dankbar... Lächel

HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>LOGO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<style>
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu ul {
position: absolute;
top: 87px;
left: 0;
opacity: 0;
background: #910854;

-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu li a {
display: block;
padding: 0 0px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;

border-left: 1px solid #393942;
border-right: 1px solid #393942;

font-family: "Avenir Next", "Helvetica", "Arial", sans-serif;
font-weight: ;
font-size: 20px;

color: #f3f3f3;
text-shadow: none;

-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;

-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}

.menu li:hover > ul li {
height: 30px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 202px;
height: 28px;
text-align: center;
padding: 5px 0px 0px -5px;
margin: 0;

border: none;
border-bottom: 1px solid #393942;
}

.menu ul li:last-child a { border: none; }

.menu li:first-child a { border-left: none; }
.menu li:last-child a { border-right: none; }

.menu li:hover > a { color: #FBF9C7; }
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu {
height: 80px;
width: 1080px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 80px;
}

</style>
<body>

<div class="container">
<div class="home">
<a href="LOGOindex1.html">
<img src="Kopf02.png" width="450" height="150" border="0" alt="Home"></a>

<div class="header">
<ul class="menu">

<li><a href="LOGOprivat1.html">
<img src="Knoeppi01g.png" width="200" height="80" border="0" alt="Privat"></a></li>
<li><a href="LOGOBusiness1.html">
<img src="Knoeppi02g.png" width="200" height="80" border="0" alt="Business"></a></li>
<li><a href="LOGOschule1.html">
<img src="Knoeppi03g.png" width="200" height="80" border="0" alt="Schule"></a></li>
<li><a href="LOGOteam1.html">
<img src="Knoeppi04g.png" width="200" height="80" border="0" alt="Team"></a></li>
<li><a href="LOGOkontakt1.html">
<img src="Knoeppi05g.png" width="200" height="80" border="0"T alt="Kontakt"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

CSS:
html {
background: url(Tisch2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

body {
font: 100%/1.4 "Avenir Next", "Helvetica Neue Thin", "Arial", "Helvetica", sans-serif;
margin: 0;
padding: 0;
color: #000;
}

ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h4 {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
color: #000;
}
h3, h5, h6, p{
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}

a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
position:absolute;
width: 90%;
height: 40%;
top: 2%;
left: -10%;
margin: 0 auto;
}
.home {
position:absolute;
width: 30%;
height: 16%;
top: 15%;
left: 73%;
margin: 0 auto;
}

.header {
position:absolute;
width: 90%;
height: 9%;
top: 450%;
left: -175.5%;
margin: 0 auto;
}

PinkePunk · **Verfasst** Mi 15.07.2015 00:03 **Titel**

Hallo,
hier einige Denkanstöße:

Zum einen fällt mir auf, dass die zwei übergeordneten Container container und home eine Höhenangabe von geringem Wert haben und somit die beanstandeten Elemente kopf02.png und menu überhaupt nicht umfassen (wird gut im Dreamweaver-Entwurfsmodus angezeigt).
Des weiteren finde ich es seltsam, dass die Klasse home einmal als übergeordneter Container und zugleich für das Bild Kopf02.png benutzt wird.

SimonDerDude · **Verfasst** Mi 15.07.2015 10:51 **Titel**

Ich täte dir raten das Layout nochmals ohne die absolute Positionierung umzusetzen.
Vielleicht einmal hier durcharbeiten.

Willkommen auf dem Portal für Mediengestalter

Thema: Webseite, mobile Darstellung, Viewport vom 14.07.2015

Webseite, mobile Darstellung, Viewport