html - Sticky Nav på tværs - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css3 html

Bruger #17390 @ 26.10.13 12:50

Hey folkens.

Jeg vil sku være lidt mere kreativ med html og css og ville høre om der nogen der vidste hvordan man laver en div, der går på tværs af hele siden, da jeg skal lave en navigation helt i toppen som skal være sticky, men samtidig skal menuen også være centreret som resten af indhold i wrapperen, og planen var så også at have en login knap udenfor det centrerede område

Har prøvet at google lidt, men har ikke rigtig kunne finde noget.
Håber at nogen kan hjælpe

4 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 18 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 26.10.13 15:15

4.283

Ellers bare kig på HTML og CSS. :o)

HTML kode

 <body>
      <div style="background: #ccc; position: fixed; top: 0px; left: 0px; width: 100%;">
          <div style="width: 960px; margin: 0 auto; position: relative;">
                <a href="#" style="display: inline-block; width: 100px; height: 20px; line-height: 20px;">Link</a>
                <a href="#" style="display: inline-block; width: 100px; height: 20px; line-height: 20px;">Link</a>
                <a href="#" style="position: absolute; right: 0px;">Right side link</a>
          </div>
      </div>
 </body>

Bruger #17072 @ 26.10.13 14:38

152

Prøv at kigge på Bootstrap. Den har det du efterspørger. Det kan være du kan bruge det, eller lære hvordan du laver en sticky nav selv.

Bruger #17081 @ 26.10.13 17:30

1.258

Enig med Michael ... Dog uden inline styling

Bruger #17390 @ 27.10.13 08:58

Ellers bare kig på HTML og CSS. :o)

HTML kode

 <body>
      <div style="background: #ccc; position: fixed; top: 0px; left: 0px; width: 100%;">
          <div style="width: 960px; margin: 0 auto; position: relative;">
                <a href="#" style="display: inline-block; width: 100px; height: 20px; line-height: 20px;">Link</a>
                <a href="#" style="display: inline-block; width: 100px; height: 20px; line-height: 20px;">Link</a>
                <a href="#" style="position: absolute; right: 0px;">Right side link</a>
          </div>
      </div>
 </body>

Tak for hjælpen Michael

Sticky Nav på tværs

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler