Jeg har før haft held herinde, så nu prøver jeg igen
Vi har ikke verdens bedste lærer og nu sidder vi med vores eksamensprojekt som jo helst skal sidde lige i skabet.
Vi vil lave et "mini-site" med et fjernsyn og er kommet ok langt, men jeg kan simpelthen ikke få størrelsen til at passe til alle skærme.
Når jeg sidder med det herhjemme ser det fint ud i str. men når min gruppe kammerat åbner det, mangler hele bunden og det er ved at drive mig til vanvid.
Stylesheet:
Kode: Vælg alt
body {
overflow: hidden;
background-color: #000000;
font-family: "berlin sans FB";
}
#hoved {
width: 99%;
height: 1000px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: thin;
border-radius: 15px;
background-color: #FFFFFF;
style="background-repeat: no-repeat;"
}
#top {
width: 90%;
height: 75px;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
text-align: center;
background-color: #FFFFFF;
vertical-align: middle;
line-height: 75px;
}
#indhold_venstre {
width: 45%;
height: 750px;
margin-left: 5%;
margin-top: 1%;
float: left;
background-color: #FFFFFF;
}
#indhold_højre {
width: 45%;
height: 750px;
margin-right: 5%;
margin-top: 1%;
float: right;
background-color: #FFFFFF;
}
#bund {
width: 90%;
height: 30px;
margin-right: 5%;
margin-top: 1%;
float: right;
text-align: center;
background-color: #FFFFFF;
vertical-align: middle;
line-height: 3px;
}Kode: Vælg alt
<!DOCTYPE html>
<html>
<head>
<title>Helios</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="top"><!--Rammen der er i toppen af siden-->
<button style="width:30%">Button</button>
<button style="width:30%">Button</button>
<button style="width:30%">Button</button>
</div>
<div id="indhold_venstre"> <!--Rammen med sidens indhold-->
<br><br><br>
<center>
<div style="max-width:99%">
<img class="mySlides" src="billede1.jpg" style="width:99%">
<img class="mySlides" src="billede2.jpg" style="width:99%">
<img class="mySlides" src="billede3.jpg" style="width:99%">
<img class="mySlides" src="billede4.jpg" style="width:99%">
<br>
<div>
<img src="billede1.jpg" style="width:24%" onclick="currentDiv(1)">
<img src="billede2.jpg" style="width:24%" onclick="currentDiv(2)">
<img src="billede3.jpg" style="width:24%" onclick="currentDiv(3)">
<img src="billede4.jpg" style="width:24%" onclick="currentDiv(4)">
</div>
</div>
</div>
</center>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace;
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += "opacity-off";
}
</script>
</div>
<div id="indhold_højre"> <!--Rammen med sidens indhold-->
<br><br><br>
<center>
<table>
<tr>
<td><img src="billede1.jpg"width="300" height="300"<br>
<center></th></td>
<td><img src="billede2.jpg"width="300" height="300"<br>
</th></td>
</tr>
</table>
<a href="#" onClick="MyWindow=window.open('file:///C:/Users/Marjun/OneDrive%20for%20Business/IT/TEST_HELIOS/Test2_index.html','MyWindow',width=600,height=600); return false;">Click Here</a>
</div>
<div id="bund"> <!--Rammen i bunden-->
<center>
<p>Zepto.com</p>
</div>
</body>
</html>Billederne er midlertidige, da min gruppekammerat sidder med dem der skal bruges og venter på at jeg finder ud af hvilken str. de skal have så hun kan beskære dem korrekt.
Ligeledes er de to billeder til højre kun midlertidige da der skal være tekst med specifikationer på tv'et der.
Knapperne foroven skal være "usynlige" altså skal kun deres tekst være synlig. Det prøver jeg også at finde ud af.
Nøj hvor jeg glæder mig til at blive færdig.
