0
Ich brauche Hilfe mit einer Webseite, die ich entwerfe. Die Seite sieht an meinem Ende gut aus, aber im Safari Browser ist sie unten abgeschnitten. Kann mir jemand sagen warum? Wenn Sie einen Link zu der Website zum Inspizieren von Elementen benötigen und was es nicht ist http://packoflaughs.us/ Ich habe keine Ahnung, was könnte dieses Problem verursachen. HierMeine Seite wird im Safari-Browser abgeschnitten
ist die html:
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?
family=Amatic+SC" />
<div class="page-header style="text-align:center">
<h1>Pack of Laughs</h1>
<body>
<div id="expertise">
<a href="https://www.youtube.com/channel/UCX7CesB0TNwrvDX6N9Wmw-w"
style="text-decoration: none !important;">
<div class="Blog square">Youtube </div>
<a href="https://www.instagram.com/packoflaughss/" style="text-
decoration: none !important;" >
<div class="About square">Instagram</div>
<a href="https://www.facebook.com/Packoflaughs/" style="text-decoration:
none !important;">
<div class="twitter square">Facebook</div>
<a href="https://www.about.packoflaughs.us" style="text-decoration: none
!important;">
<div class="youtube square">About Us</div>
<a href="https://www.facebook.com/Packoflaughs/" style="text-decoration:
none !important;">
<div class="twitch square">Contact Us</div>
<a href="https://www.gofundme.com/packoflaughs" style="text-decoration:
none !important;">
<div class="faq square">Donations</div>
</div>
</body>
<a href="http://about.packoflaughs.us" >
<a href="mailto:[email protected]" style="text-decoration: none
!important;">
Hier ist die CSS ist:
h1 {
text-align:center;
font-size: 72px;
}
body {
width:100%;
height:100%;
font-family: "Amatic SC";
font-weight: 100;
font-size:24px;
background: #fff;
overflow:hidden; /*removes scroll bar*/
list-style-type: none;
}
#expertise {
width:500px;
height:500px;
display:block;
margin:0 auto;
padding:10vh 0;
list-style-type: none;
}
.square {
position:relative;
color: black;
background-color: transparent;
padding: 10px;
width:48%;
border: white solid 2px;
margin-bottom:10px;
display:inline-block;
* display:inline;
margin: 0px 3px 10px 3px;
padding:20px;
box-sizing:border-box;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
border-radius:2px;
font-size: 150%;
overflow:hidden;
list-style-type: none;
}
.square:before {
content:'';
background-repeat: no-repeat;
background-size: 100%;
width:72px;
height:96px;
display:block;
margin:0 auto;
list-style-type: none;
}
.Blog.square:before {
background-image: url("red.jpg");
}
.Blog.square:hover:before {
background-image: url("green.jpg");
}
.About.square:before {
background-image: url("blue.jpg");
}
.About.square:hover:before {
background-image: url("orange.jpg");
}
.twitter.square:before {
background-image: url("green.jpg");
}
.twitter.square:hover:before {
background-image: url("red.jpg");
}
.youtube.square:before {
background-image: url("yellow.jpg");
}
.youtube.square:hover:before {
background-image: url("purple.jpg");
}
.twitch.square:before {
background-image: url("purple.jpg");
}
.twitch.square:hover:before {
background-image: url("yellow.jpg");
}
.faq.square:before {
background-image: url("orange.jpg");
}
.faq.square:hover:before {
background-image: url("blue.jpg");
}
.square:after {
content: "";
display:block;
border-top: 0 #fff solid;
border-bottom: 15px transparent solid;
border-left: 15px #fff solid;
position:absolute;
top:0;
left:0;
width:0;
z-index:-1;
overflow:hidden;
}
.item:before, .item:hover:before, .item:hover:after {
-webkit-transition: 0.75s all ease;
-moz-transition: 0.75s all ease;
-o-transition: 0.75s all ease;
transition: 0.75s all ease;
}
An welchem Punkt wird es abgeschnitten an? – sk03
Ich nehme an, Sie sind nicht besorgt über diese zwei Links, die Sie haben * nach * der schließenden '