Gå til innhold

Hjelp med html og css. 3 koloner ved siden av hverandre

D02

Av D02
i Programmering og webutvikling

Anbefalte innlegg

D02

D02

Skrevet
Skrevet

Hei! har begynt å små titte på html og css. Jeg vil lage en nettside med hjelp av div tags, brukte tabeller før, som jeg har skjønt er en stor nybegynner feil :)

 

Problemet er at jeg skal få tre div ved siden av hverandre. som vist på bildet trykk på bildet for større

1145489.jpeg

 

Sånn koden er nå så havner boksen "logo" på venstre side, "meny" i midten mens "høyre" havner på venstre side. Som navnet tilsier vil jeg ha den på høyresiden :p noen som ser feilen i koden min?

 

Hvis noen vet hvordan jeg får den i midten til å være på 562px mens de to andre "flyter" mot kanten så de tetter igjen plassen som kommer på siden hadde det vært supert? nå er det delt i blå bokser = 25% mens den røde = 50% width.

css
#logo {
position: absolute;
left:0px;
width:25%;

}
#meny {
position: absolute;
width:50%;
left:25%;
right:25%;
}

#høyre {
position: absolute;
right:0px;
width:25%;

}

 

html
<html>
<head>
<title>Hjem</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<div algin="center">

</div id="outer" style="width:960px">

 <div id="logo" style="height: 123; border: 1px solid #000000;">
 Logo
 </div>
 <div id="meny" style="height: 123;border: 1px solid #000000;">
 Meny
 </div>

 <div id="høyre" style="height: 123;">
 </div>
</div>

</body>
</html>

  • Liker 1
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
SimsteX

SimsteX

Skrevet
Skrevet (endret)

Fant bare en skrivefeil, skal lese gjennom og teste selv :))

 

<html>

<head>

<title>Hjem</title>

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

</head>

<body>

<div algin="center">

</div id="outer" style="width:960px">

<div id="logo" style="height: 123; border: 1px solid #000000;">

Logo

</div>

<div id="meny" style="height: 123;border: 1px solid #000000;">

Meny

</div>

<div id="høyre" style="height: 123;">

</div>

</div>

</body>

</html>

Endret av SimsteX
Lenke til kommentar
D02

D02

Skrevet
  • Forfatter
Skrevet

Det staves "align" :p

 

ah. trodde han hadde rettet på det i rød skrift :p

men fortsatt så har ingen av tingene hjulpet :O noe jeg har gjort feil eller er det andre feil her også?

 

Funker nå. takker folkens :)

Lenke til kommentar
D02

D02

Skrevet
  • Forfatter
Skrevet

Siste ting.

Er det veldig vanskelig å få til sånn at den boksen i midten er på 562 px mens de to rundt fyller resten av skjermen mot kantene? på en måte at div tagen "logo" = 562px-100% / 2 og den andre er like stor.

er håper dere skjønner stykker jeg satt opp :p

Lenke til kommentar
The Red Devil

The Red Devil

Skrevet
Skrevet

Å bruke ein sett størrelse er ikkje ein god ide når du tenker på tilgjengelighet (accessibility).

 

Men, for det du vil gjør vil dette fungere. NB, koden er bare skrevet inn her så du må oppdatere den til å fungere i ditt layout, men teknikken er slik som dette.

 

Det som skjer er at me seier at menyen skal være heilt til venstre, og at content flyter rett ved siden av den mot venstre, og at høyre menyen skal flyte så langt til venstre som den kommer. Vist den går ned under dei andre så er det pga at området ikkje er stort nok. Note. Du må ha med den siste diven med clear: both; uten den så fungerer det ikkje. denne gjør dei om fra "flytende" til faste i designet.

 

CSS:

#container
{
width: yyypx;
}
#menu
{
float: left;
width: xxxpx;
}
#content
{
float: left;
margin-left: 5px;
width: xxxpx;
}
#right-menu
{
float: right;
}

 

HTML:

 

<div id="container">
<div id="menu">
</div>
<div id="content">
</div>
<div id="right_menu">
</div>
</div>
<div style="clear: both;"></div>

Lenke til kommentar
MikkelRev

MikkelRev

Skrevet
Skrevet

Du har en god del småfeil i koden din.

1. "html" før html-taggen.

2. LINK med store bokstaver.

3. ikke hermetegn rundt attributt-verdien.

4. center er utgått.

5. bruk external stylesheet istedetfor inline stylesheet

6. ingen doctype.

562px-100% / 2: aritmetikk i css kan du gjøre hvis du bruker SASS e.l. Ellers må du regne det ut manuelt.

Anbefaler denne tutorialen for å komme i gang med html og css

http://net.tutsplus.com/sessions/web-design-from-scratch/

Lenke til kommentar
D02

D02

Skrevet
  • Forfatter
Skrevet

Du har en god del småfeil i koden din.

1. "html" før html-taggen.

2. LINK med store bokstaver.

3. ikke hermetegn rundt attributt-verdien.

4. center er utgått.

5. bruk external stylesheet istedetfor inline stylesheet

6. ingen doctype.

562px-100% / 2: aritmetikk i css kan du gjøre hvis du bruker SASS e.l. Ellers må du regne det ut manuelt.

Anbefaler denne tutorialen for å komme i gang med html og css

http://net.tutsplus.com/sessions/web-design-from-scratch/

 

Beklager hvis jeg spørr dumt.

 

Kunne du forklart en måte å regne ut sånn at den havner i midten?

 

1. Det var for å forklare hva som var html koden og css(så er ikke i orginal koden)

2. Fikset på.

3. Tenker det var center det mangler rundt. Den er nå slettet grunnet 4.

4. Se 3.

5. Hvis jeg forstår deg riktig så mener du at jeg skal sette inn Høyde, border osv inn i css og ikke i html sånn at jeg kan bruke samme kode for flere under sider lettere?

6. Får se nærmere på det en annen dag. Hvis noen vil hadde det vært supert med en forklaring :)

 

:)

Lenke til kommentar
MikkelRev

MikkelRev

Skrevet
Skrevet

<!DOCTYPE html> gir beskjed til nettleseren hvilken HTML-versjon det er snakk om. I dette tilfellet HTML5. Den anbefales å ha med. For å midtstille uten å bruke align="center", kan du sjekke ut margin:0 auto. Evt. kan du bruke margin/padding for å angi avstand.

Lenke til kommentar
D02

D02

Skrevet
  • Forfatter
Skrevet

Kan jeg sette avstanden fra center? vil ha en logo som er x px fra cener, så den holder seg på samme sted hele tiden. Løsningen jeg har nå er at jeg jar valgt at den skal være 25% fra venstre kant, noe som fører til at når det er liten skjerm blir logoen flyttet på så det ser litt dumt ut.

 

takker for alle svar så langt

:)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...