Ich habe auf meiner Homepage ein kleines HTML5-Video (nur eine sehr kurze) Animation mit Blender, aber egal.
Mein Problem: Das Video überlappt sich etwas mit dem restlichen Inhalt der Seite.
Es sollte das übergeordnete DIV in der Höhe erweitern, statt dessen überlappt es aber mit dem nächsten DIV, ohne dessen Text zu überdecken.
Hier sehr ihr, wie das aussieht ...
Sorry, falls ich in falschen Kategorie bin, denn ich war nicht sicher, ob es an html oder css liegt.
Hier mein Code ;)
HTML-Code:
CSS-Code:
Ich weiß echt nicht, was ich falsch gemacht habe :-/
Ich habe auch schon im Internet gesucht, aber es scheint, als ob ich der Einzige wäre.
Vielen Dank im Voraus ... ich verlasse mich auf euch, dass einer etwas weiß ;)
Mein Problem: Das Video überlappt sich etwas mit dem restlichen Inhalt der Seite.
Es sollte das übergeordnete DIV in der Höhe erweitern, statt dessen überlappt es aber mit dem nächsten DIV, ohne dessen Text zu überdecken.
Hier sehr ihr, wie das aussieht ...
Sorry, falls ich in falschen Kategorie bin, denn ich war nicht sicher, ob es an html oder css liegt.
Hier mein Code ;)
HTML-Code:
HTML:
<html><head>
<meta charset="ISO-8859-1">
<meta name="description" content="A website from me">
<meta name="author" content="B-Micraft">
<meta name="keywords" content="Minecraft; BMicraft; B-Micraft">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de); My brain :D">
<meta http-equiv="refresh" content="900; URL=">
<link href="files/style.css" type="text/css" rel="stylesheet">
<link href="files/logo/bmicraft_favicon.png" type="image/png" rel="icon">
<link href="files/logo/bmicraft_favicon.png" type="image/png" rel="shortcut icon"> <title>
Home - BMicraft</title>
<style type="text/css"></style></head>
<body sip-shortcut-listen="true">
<div id="Top">
<div id="navigation">
<ul class="nav_scroll_down">
<li id="nav">
<a href="/?p=default" title="Zurück auf die Startseite">Home</a>
<a href="/?p=/minecraft/pocket_edition/" title="">MCPE-Server</a>
<a href="/?p=/hotspot/" title="">PC als Hotspot</a>
</li>
</ul>
</div>
<div id="header">
<h1>B-Micraft</h1>
<h2> hosted by ms5.eu</h2></div> </div>
<div id="content">
<div id="main">
<article>
<h>BMicraft.tk Video</h>
<p><video width="80%" controls="" autobuffer="" poster="/MEDIA/videos/bmicraft-tk.jpg">
<source src="/MEDIA/videos/bmicraft-tk.ogg" type="video/ogg">
</video></p><p>Es tut mir Leid, aber dein Browser unterstuetzt dieses Format nicht.
<a href="/MEDIA/videos/bmicraft-tk.ogg">HIER></a> kannst du das Video herunterladen, um es dir mit dem Media-Player deiner Wahl anzusehen.</p>
<p></p>
</article>
<article>
<h>Text</h>
<p>Sehr langer, hierfür unnötiger Text</p>
</article>
</div>
<div id="byside">
<div id="article_space"><article><h>NOT your ads</h><br><p>Hier koennte ihr Werbung NICHT stehen ...</p></article></div>
<div id="article_space"><article><h>My ads</h><br><p>Hier steht meine Werbung</p></article></div>
</div>
</div>
<div id="footer">
<footer>
<p>Copyright by Bernhard000 (@[USER=29983]BMicraft[/USER]) 2013</p>
</footer> </div>
</body></html>
Code:
* {
padding: 0px;
margin: 0px;
font-family: Verdana, sans-serif;
}
li {list-style: none;}
A:link {text-decoration: none; color: #0000FF;}
A:visited {text-decoration: none; color: #0000FF;}
A:active {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: underline}
#header {
margin-top: 60px;
margin-right: 3%;
margin-left: 3%;
height: 100px;
background-color: #5555FF;
border-radius: 10px;
}
#header h1 {
font-family: Verdana;
font-style: italic;
font-size: 30pt;
text-shadow: white -4px 5px 8px;
padding-left: 45px;
padding-top: 15px;
color: white;
}
#header h2 {
font-family: Verdana;
font-style: italic;
font-size: 12pt;
text-shadow: #89BDFF 0px 0px 5px;
padding-left: 80px;
padding-top: 5px;
color: #89BDFF;
}
#navigation {
background: linear-gradient(to bottom, rgba(99,147,193,1) 0%,rgba(47,121,191,1) 90%,rgba(207,231,250,0) 100%);
position: fixed; top: 0px;
padding: 0px;
margin: 0px;
width: 100%;
height: auto;
animation-name: navdown;
animation-iteration-count: once;
animation-timing-function: ease-in;
animation-duration: 3s;
-moz-animation-name: navdown;
-moz-animation-iteration-count: once;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 3s;
-webkit-animation-name: navdown;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
}
.nav_scroll_down {
@keyframes navdown {
0% { top:-100px; }
100% { top: 0; }
}
@-moz-keyframes navdown {
0% { top:-100px; }
100% { top: 0; }
}
@-webkit-keyframes navdown {
0% { top:-100px; }
100% { top: 0; }
}
}
#navigation li a {
position: relative;
text-align: center;
display: block;
float: left;
list-style: none;
padding: 0px;
padding-right: 15px;
padding-left: 15px;
line-height: 50px;
text-decoration: none;
font-size: large;
margin: 0px;
cursor: auto;
color: white;
}
#navigation li a:hover {
background: linear-gradient(to bottom, rgba(99,147,193,1) 0%,rgba(207,231,250,1) 90%,rgba(255,255,255,0) 100%);
text-shadow: 0px;
}
body {
width: 100%;
background-size:100% 100%;
background-attachment: fixed;
background-color: #FAFAFA;
background: linear-gradient(to bottom, #cfe7fa 0%,#6393c1 100%) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
}
#content {
margin: 4%;
padding: 5%;
padding-top: 15px;
}
#content #main {
/* width: 84%; */
width: 75%;
float: left;
}
#content #main article {
color: #262626;
border: gray 4px groove;
padding: 20px;
margin-top: auto;
margin-bottom: 25px;
background-color: rgba(255, 255, 255, 0.7);
}
#content #main article h {
font-weight: bold;
text-align: left;
}
#content #main article p {
font-size: 10pt;
line-height: 16pt;
}
#content #byside {
text-align: center;
height: auto;
width: 20%;
margin-left: 10px;
color: #808080;
float: right;
}
#content #byside #article_space {
padding-bottom: 10px;
}
#content #byside #article_space article {
background-color: rgba(128, 128, 128, .2);
border-radius: 10px;
color: #333333;
padding: 15px;
}
#content #byside #article_space article h {
margin-bottom: 0px;
font-weight: 600;
}
#content #byside #article_space article p {
margin-bottom: 5px;
font-weight: 100;
}
video {
width: 320;
height: 180;
float: left;
border-radius: 5px;
}
#footer {
clear: both;
padding-top: 10px;
padding-bottom: 5px;
background: linear-gradient(to bottom,#6393c1 0%,#86B6E0 5px,#ffffff 100%);
}
#footer footer {
margin: 3%;
margin-top: 0px;
margin-bottom: 5px;
padding: 5px;
text-align: center;
background-color: #5555FF;
color: #FAFAFA;
border-radius: 15px;
}
#checkbox_av {
display: none;
}
#spoiler_av {
cursor: pointer;
}
#spoiler {
height:0px;
font-size:0px;
line-height:0px;
transition:height 2s, font-size 2s, line-height 2s;
display:block;
}
#checkbox_av:checked ~ #spoiler {
height:auto;
font-size: 10pt;
line-height: 16px;
}
Ich weiß echt nicht, was ich falsch gemacht habe :-/
Ich habe auch schon im Internet gesucht, aber es scheint, als ob ich der Einzige wäre.
Vielen Dank im Voraus ... ich verlasse mich auf euch, dass einer etwas weiß ;)