Gå til innhold

Hvordan bestemme "plass" i css?

Nitrius

Av Nitrius
i Programmering og webutvikling

Anbefalte innlegg

Nitrius

Nitrius

Skrevet
Skrevet (endret)

Driver med et webprosjekt på skolen nå, og så klart har vi bare lært hvordan man lager design ved bruk av tabeller, noe som jeg har hørt at ikke er den beste måten.

 

Så jeg er på jakt etter å lære hvordan jeg bestemmer hvor ting skal stå via .css

Se vedlagt fil på hvordan jeg vil ha det.

 

Det som er tenkt er at i øverste tabell der skal banneren være, tabellen til venstre i midten skal jeg ha en meny, midten skal tekst være og bunnen ja den er ikke så viktig skal vel bare ha noe copyright tull der.

 

Så hvordan bestemmer man dette i .css?

 

 

 

Edit: Kan legge til at jeg vet basic bruken av .css hvordan jeg gir ting farge, skrifttype, skrift størrelse osv...

post-21999-1164284155_thumb.jpg

Endret av Nitrius
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Gjest medlem-77217

Gjest medlem-77217

Skrevet
Skrevet 

Float         // Her har du Left og Right. Veldig standard hvor du vil ha den. 
Margin      // Her har du -left, -left, -top og -bottom. Brukes med px

 

Dette er generelt hva jeg bruker. Du har jo alltids plassering i bilder også.

 

 

background: #000 url('bilde.jpg') top center no-repeat;

Lenke til kommentar
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

Driver å utforsker litt med plassering i css, funker bra så langt.

Er en liten ting jeg ikke forstår.

 

Hvis dere ser på headeren, så er det en tekst der, den er centrert, og den var fin, før jeg gjorde "boksen" større/høyrer og nå er ikke teksten helt sentrert, hvorfor?

 

 

 

Edit: Bilde kommer straks.

Der var bilde opplastet.

 

 

Edit2: Hvordan får jeg navigasjonen til å "henge" sammen med headeren på en enkel måte?

Eneste måten jeg har fått det til på er ved å finne riktig antall piksler f.eks

 

top: 50px;

post-21999-1164356194_thumb.jpg

Endret av Nitrius
Lenke til kommentar
Inc

Inc

Skrevet
Skrevet
padding så ut til å fikse sentrerings problemet.

 

men det å få navigasjonen og headeren ti å "henge" sammen har jeg ikke fått til så langt, så hvis noen har tips, kom med dem.

7348442[/snapback]

Set absolute på header, sidebar, footer og main.

Set border:none på header.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
   <TITLE>A frame document with CSS 2.1</TITLE>
   <STYLE type="text/css" media="screen">
     BODY { height: 8.5in } /* Required for percentage heights below */
     #header {
       position:absolute;
       width: 100%;
       height: 15%;
       top: 0;
       right: 0;
       bottom: auto;
       left: 0;
	background-color:#000000;
     }
     #sidebar {
       position:absolute;
       width: 10em;
       height: auto;
       top: 15%;
       right: auto;
       bottom: 100px;
       left: 0;
	background-color:#009933;
     }
     #main {
       position:absolute;
       width: auto;
       height: auto;
       top: 15%;
       right: 0;
       bottom: 100px;
       left: 10em;
	background-color:#0000CC;
     }
     #footer {
       position:absolute;
       width: 100%;
       height: 100px;
       top: auto;
       right: 0;
       bottom: 0;
       left: 0;
	background-color:#CC9900;
     }
   </STYLE>
 </HEAD>
 <BODY>
   <DIV id="header">   </DIV>
   <DIV id="sidebar">  </DIV>
   <DIV id="main">   </DIV>
   <DIV id="footer">  </DIV>
 </BODY>
</HTML>

 

bare ett lite eksempel..

Lenke til kommentar
Inc

Inc

Skrevet
Skrevet
Takker, det var snilt av deg, men hvordan blir det hvis jeg har lyst til å bruke en banner jeg har laget i photoshop?

 

noe slikt:

background: url('images/header.jpg');

?

7348681[/snapback]

Det går sikkert og.

 

Jeg ville plassert den i html.

Noe ala dette:

<DIV id="header">
<img scr="settinnlink"> </DIV>

og juster resten i css under #header

Lenke til kommentar
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet
Takker, det var snilt av deg, men hvordan blir det hvis jeg har lyst til å bruke en banner jeg har laget i photoshop?

 

noe slikt:

background: url('images/header.jpg');

?

7348681[/snapback]

Det går sikkert og.

 

Jeg ville plassert den i html.

Noe ala dette:

<DIV id="header">
<img scr="settinnlink"> </DIV>

og juster resten i css under #header

7348710[/snapback]

 

 

Smart, skal prøve det ut.

 

En liten ting, det har vel ikke så mye å si om jeg har .css filen og .html filene i hver sin fil? er det noe fordeler og ulemper med en av delene, eller er det helt det samme?

Lenke til kommentar
Inc

Inc

Skrevet
Skrevet (endret)
Takker, det var snilt av deg, men hvordan blir det hvis jeg har lyst til å bruke en banner jeg har laget i photoshop?

 

noe slikt:

background: url('images/header.jpg');

?

7348681[/snapback]

Det går sikkert og.

 

Jeg ville plassert den i html.

Noe ala dette:

<DIV id="header">
<img scr="settinnlink"> </DIV>

og juster resten i css under #header

7348710[/snapback]

 

 

Smart, skal prøve det ut.

 

En liten ting, det har vel ikke så mye å si om jeg har .css filen og .html filene i hver sin fil? er det noe fordeler og ulemper med en av delene, eller er det helt det samme?

7348748[/snapback]

Det er vel egentlig bare fordel. Med en css fil så slipper du å justere alle sidene. Siden alle sidene blir linket til en css stil. Og du kan ha flere css stiler om du vil.

Endret av regga
Lenke til kommentar
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

Okay, takk for all hjelpen.

 

En liten ting, hvis jeg vil ha header bildet i .css filen, hva er koden for det?

 

Edit: Prøvde å bruke den coden til å sette inn en header, men det funket ikke helt, se bilde.

Hva er feilen?(ja er sikker på at bilde ligger der)

post-21999-1164366408_thumb.jpg

Endret av Nitrius
Lenke til kommentar
Inc

Inc

Skrevet
Skrevet (endret)
text-align:center; i footeren?

7384040[/snapback]

 

 

Ja har gjort det, og det blir sentrert til toppen, jeg vil ha de både sentrert og midstilt, hvis du forstår.

7384153[/snapback]

til toppen av footeren?

hva skjer da hvis du legger inn f.eks top:2em; ?

 

Edit. du må sikkert sette en "id" tag på teksten du vil justere, eller ender du opp med å justere hele footeren.

Endret av regga
Lenke til kommentar
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

Da lurer jeg på hvordan legger jeg en ID tagg innenfor en annen ID tag?

 

 

Edit:

<DIV id="footer">
<link><a href="theLast.html">Om Oss</a> - <a href="theLast.html">Kontakt Oss</a> - <a href="theLast.footer>html">Blankt?</a></link>
</DIV>

 

Hvor jeg da i .css fila har sagt at <link> skal ha en 25px avstand fra top.

link {
top: 25px;
}

Endret av Nitrius
Lenke til kommentar
Inc

Inc

Skrevet
Skrevet (endret)

Jeg har litt prblemer med å huske alt selv. Men alt du trenger å vite om plassering av tekst står her, som jeg har linket til lengre oppe.

 

Men å legge en div="id" innenfoe en annen f.eks.:

 

<div id="boks1">

<p>her kommer masse tull i boks 1</p>

<div id="boks2">

<p>her kommer masse tull i boks 2</p>

</div>

</div>

men å plassere tekst i bokser er ikke heldig. bedre om du får det til med float.

Endret av regga
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
×
×
  • Opprett ny...