• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Safari - andere Prozentrechnung?

G

gd0123456

Mitglied
Hi, kann sein das Safari anders mit Prozent rechnet. Hab drei Divs. die in Summe 100% an höhe ergeben. Jedoch wird das mittlere div länger in Safari dargestellt. In allen anderen Browsern geht es. Anbei zwei Bilder um es leichter zu verstehen.

html

Code: 
<!DOCTYPE html>
<html lang = "de">
<head>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "./css/smartphone/480.css" media = "screen and (min-device-width: 1px) and (max-device-width: 480px)">
<link rel = "stylesheet" href = "./css/smartphone/1024.css" media = "screen and (min-device-width: 481px) and (max-device-width: 1024px)">
<link rel = "stylesheet" href = "./css/desktop/desktop.css" media = "screen and (min-device-width: 1025px)">
</head>
<body>
<div id = "links">
<div style = "height:20%; background-color:#ECECEC;">
</div>
<div style = "height: 15%; background-color:#2DAB66;">
</div>
<div style = "height: 16%; background-color:#ECECEC;">
</div>
<div style = "height: 15%; background-color:#1E788B;">
</div>
<div style = "height: 34%; background-color:#ECECEC;">

</div>
</div>
<div id = "rechts">
<div style = "height:20%; background-color:#ECECEC;">
</div>
<div style = "height: 15%; background-color:#2DAB66;">
</div>
<div style = "height: 16%; background-color:#ECECEC;">
</div>
<div style = "height: 15%; background-color:#1E788B;">
</div>
<div style = "height: 34%; background-color:#ECECEC;">

</div>
</div>
<div id = "mitte" >
<div id = "willkommen">
<img src = "./images/willkommen.png">
</div>
<div id = "name">
<div id = "ben" >

<img src = './images/space.png' width = 40px><img src = './images/logo-bw.png'>
</div>
<div id = "grafik">
<img src = './images/grafik-mediendesign.png'><img src = './images/space.png' width = 40px>

</div>
</div>
<div id = "kombiniert">
<img src = './images/arbeit.png'  width = 94% >
</div>
<div id = "namepro">
<div id = "stefan" >

<img src = './images/space.png' width = 40px><img src = './images/sg-logo.png'>
</div>
<div id = "software">
<img src = './images/software-entwicklung.png'><img src = './images/space.png' width = 40px>

</div>
</div>
</div>


</body>

</html>

CSS

Code: 
* {
box-sizing: border-box;
}


@font-face {
font-family: 'Arvil_Sans';
src: url('../font/Arvil_Sans.ttf') format('truetype');
}


html {
height: 98%;
}

body {
padding-left: 0px;
margin-left: 0px;
margin-top: 2%;
padding-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
background-color: white;
width: auto;
height: 97%;
overflow: auto;
background-color: #3C3C3B;
border-style: solid;
border-color: red;
border-width: 0px;
}

#container {
width: 100%;


min-height:100%;
height: auto;
height: 100%;
border-style: solid;
border-color: blue;
border-width: 0px;
}

#main {
width: 100%;


min-height:100%;
height: auto;
height: 100%;
border-style: solid;
border-color: blue;
border-width: 0px;

}

#links {
width:13%;
border-style: solid;
border-color: red;
border-width: 0px;
min-height:93%;
height: auto;
height: 93%;
position: absolute;
float: left;
left: 12.1%;
}

#mitte {
left: 25%;
width: 50%;
border-style: solid;
border-color: blue;
border-width: 0px;
min-height:93%;
height: auto;
height: 93%;
position: absolute;

background-color: white;
}

#rechts {
width: 13%;
border-style: solid;
border-color: yellow;
border-width: 0px;
min-height:93%;
height: auto;
height: 93%;
position: absolute;
left: 75%;
float: right;
}

@-webkit-keyframes name {
  0% {top: 0%; color: red;}
  100% {top: 20.2%}
}

@keyframes name {
0% {top: 0%; color: red;}
  100% {top: 20.2%}
}

@keyframes willkommenanimation {
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes willkommenanimation {
from {opacity: 0;}
to {opacity: 1;}
}

#willkommen {
background-color: #ffffff;
position: absolute;
top: 10%;
left: 35%;

animation-name: willkommenanimation;
animation-duration: 3s;
-webkit-animation-name: willkommenanimation; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}



#ben {
position: absolute;
width: 40%;
border-color: red;
border-width: 0px;
border-style: solid;
color: white;
font-size: 3.2em;
font-family: 'Arvil_Sans','COurier New';
}

#grafik {
float: right;
width: 40%; 
border-color: green;
border-width: 0px;
border-style: solid;
text-align: right;
color: white;
font-size: 3.2em;
font-family: 'Arvil_Sans';
}

#stefan {
position: absolute;
width: 40%;
border-color: red;
border-width: 0px;
border-style: solid;
color: white;
font-size: 3.2em;
font-family: 'Arvil_Sans','COurier New';
}

#software {
float: right;
width: 40%; 
border-color: green;
border-width: 0px;
border-style: solid;
text-align: right;
color: white;
font-size: 3.2em;
font-family: 'Arvil_Sans';
}

#namepro{
width: 100%;
background-color: #000000;
height: 15.1%;
min-height: 15.1%;
height: auto;

position: relative;

left: 0%;
top: 36.4%;
}

#name {
width: 100%;
background-color: #000000;
height: 15.15%;
min-height: 15.15%;
height: auto;

position: relative;

left: 0%;
animation-name: name;
animation-duration: 2s;
-webkit-animation-name: name; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

#kombiniert {
top: 36%;
position: absolute;
left: 3%;
width: 100%;
}
 

Anhänge

  • safari.png
    safari.png
    46,8 KB · Aufrufe: 8
  • ie.png
    ie.png
    211,3 KB · Aufrufe: 9
Zuletzt bearbeitet:
Wozu ist den links/rechts da. Für Inhalte oder dienen sie nur der Gestaltung?
Wenn ja dann vielleicht so.
Code: 
<html>

<head>
<meta charset="utf-8">
<title>Fixed</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
text-decoration:none;
border:none;
outline:none;
}
html, body {
height: 100%;
background:#333;
}
#container {
display:flex;
width:100%;
max-width:1000px;
margin:20px auto;
min-height:calc( 100% - 40px );
background:#eee;
position:relative;
}


#mitte {
margin:0 auto;
width:70%;
background:#fff;
position:relative;
z-index:99;
}

#container:before ,#container:after {
content:"";
position:absolute;
left:0;
top:100px;
width:100%;
height:100px;
background:#2DAB66;
}

#container:after  {
top:300px;
background:#1E788B;
}
#mitte h2 {
height:100px;
text-align:center;
line-height:100px;
}

#mitte p {
height:100px;
}

#mitte p:nth-child(2n +2) {
background:#000;
color:#fff
}

.name {
 position:relative;
 top:0px;
 animation-name: name;
 animation-duration: 2s;
}
@keyframes name {
  0%  { top:  -200px }
  100% { top: 0px }
 }
</style>
</head>

<body>
<body>
<div id = "container">

<div id="mitte">
<h2>Willkommen</h2>
<p class="name">Irendwtwas</p>
<p>Irendwtwas</p>
<p>Irendwtwas</p>
</div>


</div>
</body>
</html>
 
Zuletzt bearbeitet:
Es sollte so ein 3 spalten layout werden. links und rechts bekommen die divs nur Hintergrundfarben, in der mitte kommt text etc... du machst es mit px. versteh nicht warum es in Prozent nicht geht
 
Die Div's sind nur so hoch wie sein Inhalt. Also kein Inhalt keine Höhe, bzw. 0% hoch..
probier mal aus.
 
es ist ja ein Inhalt vorhanden sprich es werden bilder geladen. das Problem eben ist dass der mittlere div länger ist als die anderen beiden. und ich versteh nicht warum. oder meinst weil ich links und rechts keinen Inhalt habe?

das div wird ja angezeigt mit zb 20% höhe. auch ohne Inhalt.
 
Zuletzt bearbeitet:
Naja, sorry. Was du da veranstaltest ist totaler Schrottt, aber hier noch ein Beispiel mit %
Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed</title>
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 box-sizing:border-box;
 text-decoration:none;
 border:none;
 outline:none;
}
html, body {
 height:calc( 100% - 20px );
 background:#333;
}
#container {
 display:flex;
 width:100%;
 max-width:1000px;
 margin:20px auto;
 height:100%;
 background:#eee;
 position:relative;
}


#mitte {
 margin:0 auto;
 width:70%;
 background:#fff;
 position:relative;
 z-index:99;
}

#container:before ,#container:after {
 content:"";
 position:absolute;
 left:0;
 top:20%;
 width:100%;
 height:20%;
 background:#2DAB66;
}

#container:after  {
 top:60%;
 background:#1E788B;
}
#mitte h2 {
 height:20%;
 text-align:center;
 line-height:100px;
}

#mitte p {
 height:20%;

}

#mitte p:nth-child(2n +2) {
 background:#000;
 color:#fff;
}

.name {
 position:relative;
 top:0px;
 animation: name 3s ;
}
@keyframes name {
  0%  { top:-40% }
  100% { top: 0px }
 }
</style>
</head>

<body>
<body>
<div id = "container">

<div id="mitte">
<h2>Willkommen</h2>
<p class="name">Irendetwas</p>
<p>Irendetwas</p>
<p>Irendetwas</p>
</div>


</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben