HTML og CSS - Nybegynner med spørsmål

[Yawa]

Med mindre dette ikke er nettstedets hoved-navigasjonsmeny, så ikke bruk <nav> da denne er kun beregnet på det.

 

Benytt en vanlig div, eller bare style <ul>-tagen.

 

For å plassere liste-elementer horisontalt, og ikke vertikalt, kan du benytte css.display:inline-block;

Dette vil sørge for at <li>-elementene i listen din plasserer seg rett etter hverandre på samme linje.

 

Se her: http://codepen.io/anon/pen/tdrjD

Endret 28. september 2013 av Yawa

[sunsunsun]

Nå vet jeg ikke hva du lager, men du kan skrive det sånn som det her:

<nav id="buttons_top">
  <ul>
    <li>tekst1</li>
    <li>tekst2</li>
  </ul>
</nav>

Både div og nav er block-elementer. Div er en usemantisk tag som ikke betyr noe spesielt. Nav betyr at innholdet i elementet er til å navigere. Bortsett fra det er det ingenting som skiller dem.

http://www.w3schools.com/html/html5_semantic_elements.asp

#buttons_top li {
  display: inline;
  list-style: none;
}

#buttons_top ul {
  padding: 0;
}

Gjør om li til et inline-element og fjerner noen standard stiler (ekstra padding og bullets/punkter).

 

Her er kan du prøve koden: http://codepen.io/anon/pen/dkIBo

[Yawa]

Både div og nav er block-elementer. Div er en usemantisk tag som ikke betyr noe spesielt. Nav betyr at innholdet i elementet er til å navigere. Bortsett fra det er det ingenting som skiller dem.

http://www.w3schools.com/html/html5_semantic_elements.asp

Ikke helt korrekt det der.

I forbindelse med en screen-reader eller annet hjelpemiddel-utstyr har disse to elementene svært forskjellig virkning - og bør ikke forveksles.

 

Jeg anbefaler alle å sjekke ut hva w3.org har og si før man skriver noe her slik at ikke ting missforståes.

Samme gjelder for section - som var nevnt tidligere i denne tråden.

 

- w3.org er et bra oppslagsverk å forholde seg. På lik linje som php.net er for PHP. Les å lær...

 

html5doctor.com har gode forklaringer på intensjon med elementet og bruksområde o.l.

 

- http://dev.w3.org/html5/html-author/#the-nav-element

- http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

- http://html5doctor.com/nav-element/

Endret 28. september 2013 av Yawa

[sunsunsun]

Selfølgelig er de ikke like. Det kom sikkert ikke tydelig nok fram, men semantisk sett er de forskjellige. Det jeg prøvde å si er at de har samme default style. Så hvis du først skal ha et nav-element så trenger du ikke en div rundt den.

[Yawa]

Mye mulig jeg misstolket svaret ditt ja...

[Manlulu]

Å nice dette er slikt jeg skal lese på. Det kan være litt forvirrende med div og section og slik nå i starten. Jeg har ikke lest så mye slik teori enda. All tiden min går på å skrive og kode.

 

http://imgur.com/0Fub2U4

 

Jeg klarte ikke legge ut bilde her, så jeg legger ut en link til bildet istede. (ikke skyt meg for design osv. Det er ikke det som er poenget med siden)

 

Dere ser de to menyene jeg har der.

Hvordan får jeg teksten til å komme helt opp, og helt bak? endrer jeg på padding nå, så blir teksten tettere, men den vil fortsatt ha et stort mellomrom fra "taket" og "veggen" bak i boksen.

Jeg prøvde å skrive padding-top: 0px; men teksten er liksom på toppen.
Skriver jeg padding-top: 10px; for eksempel, så blir teksten dytta lenger ned.

[Yawa]

du kan bruke css.top/left/bottom/right til dette - kansje? Skjønner ikke helt hva du mener...

[Manlulu]

http://imgur.com/6Q82eBm

 

Der eg har streka. Over menyene og til venstre for den til venstre.

Koden ser slik ut:

 

<div class="menu" id="buttons_left">

<nav>

<ul>

<li><a href="#ng">Knapp 1</a></li>

<li><a href="#ng">Knapp 2</a></li>

<li><a href="#ng">Knapp 3</a></li>

<li><a href="#ng">Knapp 4</a></li>

<li><a href="#ng">Knapp 5</a></li>

<li><a href="#ng">Knapp 6</a></li>

<li><a href="#ng">Knapp 7</a></li>

<li><a href="#ng">Knapp 8</a></li>

</ul>

</nav>

</div>

<div class="menu" id="buttons_top">

<nav>

<ul>

<li><a href="#ng">Knapp 9</a></li>

<li><a href="#ng">Knapp 10</a></li>

<li><a href="#ng">Knapp 11</a></li>

<li><a href="#ng">Knapp 12</a></li>

<li><a href="#ng">Knapp 13</a></li>

<li><a href="#ng">Knapp 14</a></li>

</ul>

</nav>

</div>

CSS:

#buttons_left {

width: 150px;

height: 265px;

top: 136px;

left: 20px;

}

#buttons_top {

width: 650px;

height: 50px;

top: 136px;

left: 190px;

text-align: center;

padding-top: 0px;

transition: background-color 0.8s 0s;

}

#buttons_top li {

display: inline;

padding: 0px 10px 0px 10px;

border-right: 2px solid black;

transition: background-color 0.8s 0s;

top: 0px;

}

#buttons_left li {

list-style-type: none;

padding-bottom: 5px;

border-bottom: 2px solid rgb(240, 70, 50);

transition: background-color 0.8s 0s, margin-left 0s 0s;

}

.menu {

position: absolute;

background-color: rgb(255, 0, 0);

font-size: 20px;

}

Tipper dette ble villt rot

[Yawa]

Jeg vil tippe at html.ul-elementet ditt har en margin. Prøv å legg til css.margin:0; og se hva som skjer... Og forresten... Å benytte css.top:136px; for å flytte menyen under overskriften er ikke riktig. Skjønner overhodet ikke hvorfor du gjør dette - du må ha gjort noe feil tidligere.

 

Jeg ser heller ikke helt poenget med å sette nav-elementet inni en div - som elos påpekte et par poster opp her, som jeg missforstod litt i farten. Men elementet oppfører seg som et block-element. Det vil i bunn og grunn bety at du liksegodt kan style dette direkte slik at strukturen din blir noe mer slik:

<nav class="menu" id="buttons_left>
    <ul>
    <li><a href="#ng">Knapp 1</a></li>
    <li><a href="#ng">Knapp 2</a></li>
    <li><a href="#ng">Knapp 3</a></li>
    <li><a href="#ng">Knapp 4</a></li>
    <li><a href="#ng">Knapp 5</a></li>
    <li><a href="#ng">Knapp 6</a></li>
    <li><a href="#ng">Knapp 7</a></li>
    <li><a href="#ng">Knapp 8</a></li>
    </ul>
</nav>

Et viktig element i webprogrammering er å minimalisere så mye som mulig - uten at det går på komprimiss av sluttresultatet. Å benytte færre tagger et ganske elementært...

Endret 28. september 2013 av Yawa

[Manlulu]

Jeg gjør det fordi jeg ikke kan så mye som andre her. Du må skjønne at det er ikke alle som har drevet med dette like lenge som deg.

Derfor jeg spør

[Yawa]

joda, det er fullt forstålig. men det har blitt påpekt tidligere i posten din. Så endten har du ikke giddet å lese deg opp rundt emnet, eller så har du bare oversett det og bare fortsatt med det du allerede hadde.

 

Ta deg en tur her http://hjemmeside.org/koding/html og gå gjennom artiklene en etter en. Ta notater og gjør litt reasearch på det du evt. ikke forstår umiddelbart.

 

Forøvrig kan du se linje 24 i css vinduet her: http://codepen.io/anon/pen/EijBK (tar du bort denne linjen ser du umiddelbart hva som skjer)

 

Beklager. Mente i css vinduet. Linje 24 i css-vinduet... (har rettet teksten nå)

Endret 28. september 2013 av Yawa