Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  6 2436
Hei, har prøvd en liten stund på å få laget en navigasjons bar. Vil dette vær ok, hva kan jeg evt gjøre for å gjøre den bedre?

https://jsfiddle.net/bhc6su79/

Kode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation bar</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
<header class="wrapper">
<nav class="navbar">
<a class="navbar-brand" href="./index.html">Nichlas</a>
<ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link" href="#">CSS3</a></li>
  <li class="nav-item"><a class="nav-link" href="#">HTML5</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Portefolio</a></li>
</ul>
<a class="CV" href="#">Last ned min CV</a>
</nav>
</header>

</body>
</html>

Kode

*{
margin: 0;
padding: 0;
}
.wrapper{
height: 76px;
}
.navbar{
position: fixed;
background-color: aquamarine;
width: 100%;
padding: 16px;
text-align: center;
text-decoration: none;
}
.navbar-nav{
display: inline-block;
}
.nav-item{

display: inline-block;
}
.nav-link{
text-decoration: none;
padding: 0 10px;
text-align: center;
color: blueviolet;
}
.navbar-brand{
display: inline-block;
padding: -10px;
text-align: center;
text-decoration: none;
color: blueviolet;
font-size: 20px;
font-weight: 600;
float: left;
}
a:hover{
color: black;
}
.CV{
display: inline-block;
color: blueviolet;
text-decoration: none;
position: fixed;
text-align: center;
padding: 0px 10px;
right: 10px;
border: 2px solid black;
border-radius: 100px;
font-size: 20px;
font-weight: 600;
}
https://jsfiddle.net/bhc6su79/
Sist endret av Jonta; 30. mai 2022 kl. 17:12. Grunn: Code-tagger og jsfiddle-lenke lagt til
Ikke egentlig okay. Sånn ser det ut her.

Strekk den helt ut. Tekst ligger oppå hverandre. Bruk anen farge, finn en palett. Pimp opp knappene.

Eeh hvor ble det av bildet..?

https://imma.gr/112385x7dc97
Sist endret av kastrertHankatt; 30. mai 2022 kl. 19:09. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
Trådstarter
Ja veit den ser håpløs ut der. Men når jeg åpner den i nettleseren via visual studio kode, ser den annerledes ut.

Width står på 100% så skjønner ikke hvorfor den, ser helt merkelig ut der.
Sist endret av Tynnedekk; 30. mai 2022 kl. 19:12. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
Jeg er sikker på at det er flere her inne som ser hva som må gjøres ved første øyekast. Må selv sette meg ned å knote litt for å gi noe svar. Ellers anbefaler jeg å finne en god tutorial eller 2 eller 3 på YouTube. Smell det opp på Tv en eller kjør splitscreen. Så koder du nøyaktig det samme som i videon. Spol frem og tilbake visst du sitter fast. Ellers har du Codecademy, det funket greit for meg til å begynne med.

Det tar gjerne endel tid før det blir gøy. Så ikke gi opp.
m0b
m0b's Avatar
DonorAdministrator
Selv fordrar jeg ikke å skrive css fra bunnen. Kunne bootstrap ha vært noe for deg også? Eksempler og tema.
Sist endret av m0b; 31. mai 2022 kl. 03:13.
I JSfiddelen din mangler du et wildcard på margin/padding-resetten din.

Kode

* {
  margin: 0;
  padding: 0;
}
Ellers ville jeg fokusert på vertikal "alignment", CV-knappen din er veldig langt ned i forhold til de andre elementene.

Anbefaler deg å lære litt flexbox, da det gjør sånne ting mye enklere.
▼ ... noen uker senere ... ▼
Ønsker du å bruke html5 standard ?

Jeg har kun sett på koden og ikke bilder, og ser mye som er typisk "ekstra arbeid / feil / dårlig kode" uten ønske å trakke ned på forsøket ditt. Jeg gjorde selv mange av samme "feil" når jeg begynte.

Først bør du kanskje vite hva de forskjellige taggene i html er, hva de gjør og hvorfor du trenger de eller ikke trenger de.

eks <meta http-equiv="X-UA-Compatible" content="IE=edge"> <-- vet du hva/hvorfor ? Gjerne les denne posten what-does-meta-x-ua-compatible-do

Anbefaler deg å bruke w3schools både for referanse, tutorial, og validering Du kan f.eks begynne her : https://www.w3schools.com/tags/default.asp

Hvis du trenger hjelp / sitter fast, så er det alltid greit å kunne spørre noen, og ikke vær redd for dumme spørsmål.. Det er de som spør som faktisk lærer noe.. PM om du ønsker
Sist endret av ParaTorMal; 15. juni 2022 kl. 19:01.