Hvordan får man aside til at altid værer i toppen

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

Hvordan får man aside til at altid værer i toppen

Indlæg af henrik_t7 » 23. feb 2017, 20:59

Hej
Hvordan får man aside til at altid værer i toppen?

Jeg har lavet en side med en header og lige ned under en nav og der efter en article og ude i højre side er min
aside og sidst en footer.
men aside er uden i højre side, men den står ikke i toppen, kun efter header, nav og article.?

aside.jpg
aside.jpg (167.23 KiB) Vist 1077 gange

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

Re: Hvordan får man aside til at altid værer i toppen

Indlæg af jepperask » 26. feb 2017, 13:10

Må vi se din kode? Det er meget svært at vurdere ud fra et billede.

Det ligner dog at du har alle elementerne indkapslet i samme div, eftersom der er mellemrum mellem den gule menu og footeren.

Jeg ville lave 1 div til det hele, 2 div indeni til hhv. venstre og højre side og så dine individuelle segmenter i hver af de indre divs.

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

Re: Hvordan får man aside til at altid værer i toppen

Indlæg af henrik_t7 » 2. mar 2017, 18:13

Hej.
Jeg har løst det, men du kan godt se HTML koden.

Kode: Vælg alt

<!DOCTYPE HTML>

<html>

<head>
<title>Speedway</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>

<div id="main">
   <header>
      <h1>Dansk Speedway</h1>
        <img src="image/topbanner700.png" width="700" height="231" alt="">
         <h3>&copy; 1995 - 2017 Update 16/2 2017</h3>
         <br>
         <div id="logo"><img src="runde flag/nylogods2100.png" width="100" height="100" alt=""></div>
         <br>
   </header>
      <nav>
       <ul>
         <li><a href="">Home</a></li>
         <li><a href="">Speedsway League </a></li>
         <li><a href="">SEC</a></li>
         <li><a href="">Statistik</a></li>
         <li><a href="">U21 Speedway</a></li>
         <li><a href="">SGP</a></li>


       </ul>


      </nav>
       <article>
            123



       </article>

       <aside>

           <h2>Kalender Danske l&oslash;b </h2>
      <br>
     <ul>
  <li>21/4 SGP/SEC Kvalifikation Slangerup </li>
  <li>6/5 SGP Kvartfinale Esbjerg</li>
  <li>12/5 DM Kvartfinale Grinsted</li>
  <li>25/5 DM Semifinale Glums&oslash;</li>
  <li>3/6 U21 Hold VM Semifinale Fjelsted</li>
  <li>24/6 SGP Horsens</li>
  <li>25/6 DM U21 Semifinale Uhre/Herning</li>
  <li>29/7 DM U21 Finale Holsted</li>
  <li>4/8 DM Finale Fjelsted</li>
  <li>13/8 50 &Aring;rs Jubil&oelig;umsl&oslash;b Slangerup</li>
  <li>2/9 DM Finale 85ccm Slangerup</li>
</ul>
      <br>
      <h2>SGP 2017</h2>
       <ul>
  <li>29/4 Krsko <img src="runde flag/sk28.png" width="28" height="28" alt=""></li>
  <li>13/5 Warsaw <img src="runde flag/pl28.png" width="28" height="28" alt=""></li>
  <li>27/5 Daugavpils <img src="runde flag/lv28.png" width="28" height="28" alt=""></li>
  <li>10/6 Prag <img src="runde flag/cz28.png" width="28" height="28" alt=""></li>
  <li>24/6 Horsens <img src="runde flag/dk28.png" width="28" height="28" alt=""></li>
  <li>22/7 Cardiff <img src="runde flag/uk28.png" width="28" height="28" alt=""></li>
  <li>12/8 M&aring;lilla <img src="runde flag/se28.png" width="28" height="28" alt=""></li>
  <li>26/8 Gorzow <img src="runde flag/pl28.png" width="28" height="28" alt=""></li>
  <li>9/9 Teterow <img src="runde flag/de28.png" width="28" height="28" alt=""></li>
  <li>23/9 Stockholm <img src="runde flag/se28.png" width="28" height="28" alt=""></li>
  <li>7/10 Torun <img src="runde flag/pl28.png" width="28" height="28" alt=""></li>
  <li>28/10 Melbourne <img src="runde flag/au28.png" width="28" height="28" alt=""></li>
</ul>


       </aside>

           <footer>

              3

           </footer>
</div>

</body>

</html>
og her er så css.

Kode: Vælg alt

body{
 font-family: helvetica;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  background-image:url("../image/92.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; }


#main {
  width: 1200px;
  margin: 0 auto;
}

header {
  width: 60%;
  background-color:#FF6633;
  border:5px solid #83047A;
  -moz-border-radius:43px;
  -webkit-border-radius:43px;
  border-radius:43px;
}

h1 {
  margin: 0;
  padding: 10px 0;
  font: 44px "Arial";
  text-align: center;
}

header h1 {
  color: white;
}

#logo {
  float: right;
  margin-top: -100px;
  padding: 15px;
}

nav{
  float: left;
  width: 60%;
  background-color: #FF9900;
  border:5px solid #83047A;
  -moz-border-radius:43px;
  -webkit-border-radius:43px;
  border-radius:43px;
}

nav li{
    float:left;
    list-style: none;
}

nav li a {
  float: left;
  color: #000000;
  padding: 6px 20px;
  text-decoration: none;
  border-right: 1px solid #000000;
  font-size: 16px;
  font-style: oblique;
}

nav li a:hover{
  background-color: #333;
  color:#fff;
}

article{
  width: 60%;
  float: left;
  background-color:#FFFFFF;
  border:5px solid #83047A;
  -moz-border-radius:43px;
  -webkit-border-radius:43px;
  border-radius:43px;
}

aside{
  float: right;
  position: fixed;
  left: 57%;
  top: 0;
  width: 25%;
  padding-left: 5px;
  background-color:#66FF00;
  border:5px solid #83047A;
  -moz-border-radius:43px;
  -webkit-border-radius:43px;
  border-radius:43px;

}

aside li{
  list-style: none;
}

footer{
  width: 100%;
  clear: both;
  background-color: #006699;
  border:5px solid #83047A;
  -moz-border-radius:43px;
  -webkit-border-radius:43px;
  border-radius:43px;
}
Du kan se koden igennem og skrive hvis der er noget som ser mærkelige ud.

Besvar