Hjælp. index står ikke som de andre sider

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
henrik_t7
Nørd
Nørd
Indlæg: 102
Tilmeldt: 26. jul 2011, 20:12

Hjælp. index står ikke som de andre sider

Indlæg af henrik_t7 » 11. feb 2019, 20:39

Hjælp. index står ikke som de andre sider.

Min forside på www.danskspeedway.dk index siden stå ikke som de andre sider.
Det er ligesom at griden ikke virker på index siden, men det gør det på de andre sider, og det er de samme to filer til alle siderne.
Så det forstå jeg ikke.
Her er index.html siden code

Kode: Vælg alt

<!DOCTYPE HTML>
<html>
<head>
  <title>Dansk speedway.</title>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111808496-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-111808496-1');
</script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/style.css"/>
  <link rel="icon" type="image/png" href="iconbike.png">
  </head>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script>
    $(document).ready(function(){
        $("#nav-mobile").html($("#nav-main").html());
        $("#nav-trigger span").click(function(){
            if ($("nav#nav-mobile ul").hasClass("expanded")) {
                $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $(this).removeClass("open");
            } else {
                $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
                $(this).addClass("open");
            }
        });
    });
</script>
<body>
  <div class="grid">
    <header>
           <img src="image/topbanner1.png" width="1000" height="330" alt="">
     </header>
         <h2> Update 7/2 2019 </h2>

          <h2>&copy; 1995 - 2019</h2>
         </div>



        <article>
           <div class="flex-container">
          <div class="v">
            <h2>Dansk mesterskab finale k&oslash;res i &aring;r p&aring; Holdsted Speedway, dato 30/5.
            Niels Kr. Iverssen kan vinde sidt 8 mesterskab i tr&aelig;k og dermed overhælde Ole Olsen med 7 mesterskaber i tr&aelig;k.</h2>
              <br>
              <h2>Her er en fuld kalender for Metal Speedway League 2019 <a href="kalenderklade2019.html" target="_blank">her</a>.</h2>
              <br>
            <h2>Australisk U21 Mesterskab 19/1 Ipswich Speedway</h2>
           <ul>
  <li>1. Jaimon Lidsey 15p +4</li>
  <li>2. Jordan Stewart 12p +3</li>
  <li>3. Matthew Gilmore 12p +2</li>
  <li>4. Zach Cook 12p +0</li>
  <li>------------------</li>
  <li>5. Kyle Thomson 11p</li>
  <li>6. Brayden McGuinness 8p</li>
  <li>7. Jacob Hook 7p</li>
  <li>8. Issac Hawes 7p</li>
  <li>9. Kane Lawrence 6p</li>
  <li>10. Jack Morrison 6p</li>
  <li>11. Brandon Coglan 6p</li>
  <li>12. Declan Knowles 6p</li>
  <li>13. Connor Bailey 5p</li>
  <li>14. Cooper Riordan 2p</li>
  <li>15. Fraser Bowes 2p</li>
  <li>16. Aden Clare 2p</li>
  <li>17. Brock Tregea 0p</li>
  <li>18. Cordell Rogerson 0p</li>
</ul>

            <br>
            <img src="image/maxFrickeausvinder2019.jpg" width="300" height="500" alt="">
            <p>Max Fricke ny Australisk Mester</p>
            <h2>Australiens Mesterskab 2019</h2>
              <p>Runde 5 i Kurri Kurri Speedway 12/1</p>
              <ul>
  <li>1. Rohan Tungate 15p +4</li>
  <li>2. Max Fricke 14p +3</li>
  <li>3. Chris Holder 12p +2</li>
  <li>4. Sam Masters 12p +1</li>
  <li>---------------</li>
  <li>5. Brady Kurtz 10p</li>
  <li>6. Nick Morris 10p</li>
  <li>7. Jack Holder 9p</li>
  <li>8. Jordan Stewart 8p</li>
  <li>9. Jaimon Lidsey 7p</li>
  <li>10. Justin Sedgmen 5p</li>
  <li>11. Ben Cook 4p</li>
  <li>12. Zach Cook 4p</li>
  <li>13. Ryan Douglas 4p</li>
  <li>14. Todd Kurtz 3p</li>
  <li>15. Zane Keleher 2p</li>
  <li>16. Kye Thomson 1p</li>
  <li>17. Kane Lawrence DNR</li>
  <li>18. Isaac Hawes DNR</li>
   <li>--- Stillingen og kalender <a href="pdf/aus mesterskab 2019.pdf" target="_blank">her</a>.</li>
</ul>
            <h2>Australiens Mesterskab 2019</h2>
              <p>Runde 3 i Undera Speedway 7/1</p>
              <ul>
  <li>1. Max Fricke 14p +4</li>
  <li>2. Chris Holder 12p +3</li>
  <li>3. Jaimon Lidsey 11p +2</li>
  <li>4. Rohan Tungate 11p +0</li>
  <li>-----------------------</li>
  <li>5. Nick Morris 11p</li>
  <li>6. Jack Holder 10p</li>
  <li>7. Brady Kurtz 9p</li>
  <li>8. Sam Masters 9p</li>
  <li>9. Justin Sedgmen 9p</li>
  <li>10. Jordan Stewart 6p</li>
  <li>11. Todd Kurtz 5p</li>
  <li>12. Zane Keleher 5p</li>
  <li>13. Ryan Douglas 2p</li>
  <li>14. Zach Cook 2p</li>
  <li>15. Kye Thomson 2p</li>
  <li>16. Ben Cook 1p</li>

</ul>

              <h2>Australiens Mesterskab 2019</h2>
              <p>Runde 1 i Gillmann Speedway 3/1</p>
              <img src="image/ausvinn12019.jpg" width="418" height="389" alt="">
                <ul>
  <li>1. Max Fricke 13p +4</li>
  <li>2. Rohan Tungate 13p +3</li>
  <li>3. Chris Holder 10p +2</li>
  <li>4. Jordan Stewart 11p +0</li>
  <li>-----------------------</li>
  <li>5. Jaimon Lidsey 10p</li>
  <li>6. Sam Masters 10p</li>
  <li>7. Jack Holder 11p</li>
  <li>8. Brady Kurtz 8p</li>
  <li>9. Nick Morris 7p</li>
  <li>10. Ryan Douglas 6p</li>
  <li>11. Todd Kurtz 6p</li>
  <li>12. Ben Cook 5p</li>
  <li>13. Zane Keleher 5p</li>
  <li>14. Zack Cook 3p</li>
  <li>15. Kye Thomson 1p</li>
  <li>16. Justin Sedgmen 0p</li>
  <li>17. Josh Pickering 1p</li>
  <li>18. Brayden Mcguiness  DNR</li>

</ul>




          </div>
          <div class="h" >

              <h2>Kalender 2019.</h2>
              <ul>
   <li>30/5 Holsted DM Finale</li>
  <li>1/6 Glums&oslash; U21 EM Hold Semiifnale 2</li>
  <li>6/7 Holsted U21 EM Semifiale 3</li>
  <li>6/7 Vissenbjerg 85 ccm VM Finale</li>
  <li>20/7 Holstebro 250 ccm VM Semiifnale 1</li>
  <li>20/7 Holstebro 250 ccm VM Semifinale 2</li>
  <li>21/7 Holstebro 250 ccm VM Finale</li>
  <li>7/9 Vojens Speedway Grand Prix</li>
</ul>
<br>
<h2>Australiens Mesterskab 2019</h2>
<p>Runde 4 i Albury Wodonga Speedway 9/1</p>
<ul>
  <li>1. Max Fricke 14p +4</li>
  <li>2. Rohan Tungate 14p +3</li>
  <li>3. Chris Holder 10p +2</li>
  <li>4. Brady Kurtz 11p +1</li>
  <li>----------------</li>
  <li>5. Jack Holder 11p</li>
  <li>6. Sam Masters 10p</li>
  <li>7. Jaimon Lidsey 10p</li>
  <li>8. Nick Morris 9p</li>
  <li>9. Ryan Douglas 8p</li>
  <li>10. Todd Kurtz 6p</li>
  <li>11. Zane Keleher 4p</li>
  <li>12. Justin Sedgmen 4p</li>
  <li>13. Ben Cook 3p</li>
  <li>14. Jordan Stewart 3p</li>
  <li>15. Kye Thomson 2p</li>
  <li>16. Zack Cook 1p</li>
  <li>17. Josh Pickering DNR</li>


</ul>


<h2>Update af Statistik, som alt om Metal Speedway League, Dansk speedway, u21 VM og U21 EM.
            <a href="statistikalt.html">Her</a></h2>
            <br>
          <h2>Australiens Mesterskab 2019</h2>
              <p>Runde 2 i Mildure Speedway 5/1</p>
            <ul>
  <li>1. Chris Holder  14p +4</li>
  <li>2. Rohan Tungate 11p +3</li>
  <li>3. Max Fricke 11p + 2</li>
  <li>4. Brady Kurtz 11p +1</li>
  <li>---------------------</li>
  <li>5. Jack Holder 10p</li>
  <li>6. Sam Masters 10p</li>
  <li>7. Ryan Douglas 10p</li>
  <li>8. Nick Morris 8p</li>
  <li>9. Jordan Stewart 6p</li>
  <li>10. Todd Kurtz 6p</li>
  <li>11. Ben Cook 6p</li>
  <li>12. Jaimon Lidsey 5p</li>
  <li>13. Justin Sedgmen 5p</li>
  <li>14. Kye Thomson 5p</li>
  <li>15. Zack Cook 1p</li>
  <li>16. Zane Keleher 1p</li>
  <li>17. Josh Pickering DNR</li>
  <li>Heatskema <a href="image/aussolo2019n2.jpg" target="_blank">her</a>.</li>

</ul>



          </div>

          </div>

        </article>

<div id="main">
  <div class="container">
        <div id="nav-trigger">
            <span>Menu</span>
        </div>
        <nav id="nav-main">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="msl18.html">Metal Speedway League 2018</a></li>
                <li><a href="msl19.html">Metal Speedway League 2019</a></li>
                <li><a href="1div2018.html">1 Division League</a></li>
                <li><a href="sgp2018.html">Speedway World Championship 2018</a></li>
                <li><a href="sgp2019.html">Speedway World Championship 2019</a></li>
                <li><a href="sec2018.html">Speedway Europa Championship 2018</a></li>
                <li><a href="sec2019.html">Speedway Europa Championship 2019</a></li>
                <li><a href="u21vm2018.html">Speedway U21 World Championship 2018</a></li>
                <li><a href="u21vm2019.html">Speedway U21 World Championship 2019</a></li>
                <li><a href="swc2018.html">Speedway of Nations</a></li>
                <li><a href="statistikalt.html">Statistik</a></li>
                <li><a href="fotolinkside.html">Foto Link</a></li>
                <li><a href="popup.html" onClick="popWin(this.href, 750); return (false);">Click to old news.</a></li>
            </ul>
        </nav>

        <nav id="nav-mobile"></nav>


    </div>
       <div id="kal">



       </div>
      </div>





    <footer>
       <div class="u2logo">


          <a title="One of the greates rock band in the world. Perhaps the greates" href="http://www.u2.com/index/home/" target="_blank">
  <img src="image/logou2.jpg" width="180" height="80" alt="" border="0"></a>

<a title="Zoneterapi at its best" href=http://www.miethide.dk/><img src="image/foot.png" width="140" height="85" alt="Zoneterapi" border="0"></a>
<div align='center'><a href='https://www.hit-counts.com/'><img src='http://www.hit-counts.com/counter.php?t=MTQzNTA5OA==' border='0' alt='professional logo design'></a>
<BR><a href='https://www.glowgraphics.co.uk/'>professional logo design</a></div>
       </div>
    </footer>
  </div>
</body>

</html>

Her er base.css siden

Kode: Vælg alt

body {
  font-family: helvetica;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #333;
  background-image:url("../image/20150808_174546.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }


.grid > * {
  padding: 1px;
}
.grid {
  margin: 20px auto 0 auto;
  max-width:1300px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat (3, auto);
  grid-template-areas:
  "header header header header header"
  "dato dato dato dato dato"
  "nav nav nav nav nav"
  "article article article article article "
   "footer footer footer footer footer" ;
   border:5px solid #83047A;
   -moz-border-radius:43px;
   -webkit-border-radius:43px;
    border-radius:43px;

}

a
{
  text-decoration: none;
  color: #232323;

  transition: color 0.3s ease;
}

a:hover
{
  color: tomato;
}

#main {
  grid-area:nav;
}

.dato h2 {

color: #83047A;
}


img{
  max-width: 100%;
}

header{

  grid-area: header;
  display: none;
}

.dato {

  grid-area:dato;
}



article  {
  background:  #FFFFFF;
  grid-area: article;
}





  .u2logo {
   margin-left: 25px;
   margin-top: 12px;
 }

footer{

  grid-area: footer;
}

table
  {
    border-collapse: collapse;
    width: 70%;


  }

  td
  {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: .5em;

  }

  tr
  {
    background: #B0C4D7;
  }

  thead td
  {
    background: #0033CC;
    color: #fff;
  }

  tbody td
  {
    font-weight: normal;
    background: #3399CC;
  }

  th {
     font-weight: normal;
     background: #036;
     color:#fff; }

    td a
       { text-decoration:none;
         color: #fff;}

     td a:hover { color: #FF8800; }

     td  li { display: block;
              }

    ul{

    list-style-type: none;
    }
    .stor{
         visibility:hidden;

    }

    .lille{
      margin-top: -300px;
    }


@media (min-width: 650px){
 .grid{grid-template-areas:
  "header header header header dato"
  "nav article article article article"
  "footer footer footer footer footer";

 }

header {
  display: block;
}

table
  {
     width: 100%;


  }

.lille{
     visibility: visible;
     margin-top: 50px;
}

.stor{
  visibility: visible;
}




}

 @media( min-width: 1100px){

 .flex-container {
  display: flex;
  flex-wrap: nowrap;

}
        .v {
      float: left;
      width: 500px;
    }

    .h {
      float: right;
      width: 500px;

    }
 }

Med venlig hilsen
Henrik :D

jepperask
Geni
Geni
Indlæg: 378
Tilmeldt: 4. nov 2012, 17:57

Re: Hjælp. index står ikke som de andre sider

Indlæg af jepperask » 12. feb 2019, 12:48

På dine andre sider, har du <article> og <div id="main"> inde i den div med class = "grid". Men på forsiden, ligger de ved siden af hinanden. Giver det mening?

Kode: Vælg alt

<div class="grid">...</div>
<article>...</article>
<div id="main">...</div>

Bør se sådan her ud (antager jeg):
<div class="grid">...</div>
    ...
    <article>...</article>
    <div id="main">...</div>
</div>

henrik_t7
Nørd
Nørd
Indlæg: 102
Tilmeldt: 26. jul 2011, 20:12

Re: Hjælp. index står ikke som de andre sider

Indlæg af henrik_t7 » 12. feb 2019, 20:07

Hej.
Super du har ret, der må været sket en skrive fejl, da jeg rette forsiden.
Tak for det.
God aften :D :D

Besvar