Hjælp til IT-eksamens projekt

Her kan du stille og svare på spørgsmål omkring HTML. Du kan altså med andre ord finde en masse hjælp til HTML og HTML5 på dette forum
Besvar
Brugeravatar
Marjun
Begynder
Indlæg: 7
Tilmeldt: 11. aug 2016, 18:47
Geografisk sted: Græsted

Hjælp til IT-eksamens projekt

Indlæg af Marjun » 15. nov 2016, 21:24

Hej alle :)

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;

}
Siden:

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>
Jeg har prøvet at sætte et link til et nyt vindue ind, det er blot midlertidigt.
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. :?
Vedhæftede filer
Billede2.jpg
Billede2.jpg (38.63 KiB) Vist 981 gange
Billede1.jpg
Billede1.jpg (36.98 KiB) Vist 981 gange

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Hjælp til IT-eksamens projekt

Indlæg af cristian » 18. nov 2016, 15:14

Der er en del med jeres side i skal kigge på.

#1 Jeres <center></center> åbnes og lukkes forkert.
#2 i har </th> elementer uden <th>
#3 I stedet for at bruge <br> burde i lave en struktur og lave nødvendig mellemrum imellem dem i jeres CSS
#4 i har en CSS side, men i bruger stadig style="" width="" og height="" i jeres HTML
#5 JS burde man altid loade til sidst, hver mindre andet er strengt nødvendigt.
#6 Brug af <button> for en menu vil jeg ikke selv vælge, og "normalt" laves disse som uorganiseret lister.
http://www.w3schools.com/html/html_lists.asp
#7 opbyg en bedre struktur der deler jeres side mere op, se også #3
#8 Få styr på jeres tabulator ryk for (indentation) af jeres sides elementer så det er nemt at overskue.

Mine 2 cent i første omgang

Besvar