Gå til innhold

Trenger hjelp til å bruke CSS som layot...

Howiey

Anbefalte innlegg

Howiey

Howiey

Skrevet
Skrevet (endret)

Vist du ikke gidder og lese, så kan du bare svare på spørsmålene som står med uthevet skrift...

 

Jeg prøver og lære meg hvordan css kan erstatte vanlig tabell i html...

 

Jeg prøver og lage en side med et layot basert på css...

Synes det virker nokså kult, og så har jeg forstått at css er mye bedre en vanlig "tabel" når det er snakk om layot på en webside.

 

Men jeg er ekstrem nybegynner for å si det slik.

Vist du skal i hvor god jeg er på en skala fra 1-10 så er jeg vel på -5 eller noe...

Er i hvert fall ikke flink.

 

Fant en side med forskjellige css layot, her, og fant en jeg likte. Koden er helt nede...

 

Det første jeg lurer på er, skal sidene lagres som .asp og ikke .html ?

Jeg spør fordi eksempelene på glish(se link) er lagret som .asp ...

 

Det andre jeg sliter med...

På min tidliger hjemmeside som jeg eksperimenterte litt på brukte jeg ifram...

På index siden min hadde jeg en iframe til venstre som var menyen. Og en iframe i mitten som er hovedsiden.

Linken i menyen hadde target="iframe" i seg, så alle linkene åpnet seg i "hoved-iframe,en"...

Jeg prøvde og gjøre det her også:

<a href="testside.html" target="contentcenter">Klikk her</a>

Men linken åpnet seg bare i nytt vindu...

 

Det tredje jeg ikke skjønner...

Skulle ikke dette vert i ett eget .css dokument:

 

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
 text-align:center;
 }

#frame {
 width:650px;
 margin-right:auto;
 margin-left:auto;
 margin-top:10px;
 padding:0px;
 text-align:left;
 }
 
#contentleft {
 width:175px;
 padding:0px;
 float:left;
 background:#fff;
 }

#contentcenter {
 width:300px;
 padding:0px;
 float:left;
 background:#eee;
 }

#contentright {
 width:175px;
 padding:0px;
 float:left;
 background:#fff;
 }

#contentheader {
 background:#fff
 }
 
p,h1,pre {
 margin:0px 10px 10px 10px;
 }
 
h1 {
 font-size:14px;
 padding-top:10px;
 }
 
#contentheader h1 {
 font-size:14px;
 padding:10px;
 margin:0px;
 }

#contentright p { font-size:10px}

</style>

Koden jeg sliter med:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : static width and centered</title>

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
 text-align:center;
 }

#frame {
 width:650px;
 margin-right:auto;
 margin-left:auto;
 margin-top:10px;
 padding:0px;
 text-align:left;
 }
 
#contentleft {
 width:175px;
 padding:0px;
 float:left;
 background:#fff;
 }

#contentcenter {
 width:300px;
 padding:0px;
 float:left;
 background:#eee;
 }

#contentright {
 width:175px;
 padding:0px;
 float:left;
 background:#fff;
 }

#contentheader {
 background:#fff
 }
 
p,h1,pre {
 margin:0px 10px 10px 10px;
 }
 
h1 {
 font-size:14px;
 padding-top:10px;
 }
 
#contentheader h1 {
 font-size:14px;
 padding:10px;
 margin:0px;
 }

#contentright p { font-size:10px}

</style>
</head><body>
<div id="frame">
<div id="contentheader"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: static width and centered</h1></div>
<div id="contentleft">
 <h1>contentleft</h1>
<pre>#contentleft {
width:175px;
padding:0px;
float:left;
background:#fff;
}</pre>
 <p class="greek">Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. </p>
</div>

<div id="contentcenter">
 <h1>contentcenter</h1>
<pre>#contentcenter {
width:300px;
padding:0px;
float:left;
background:#eee;
}</pre>
 <p>3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>
 <p><strong>Scroll down for the source.</strong></p>
 <p class="greek">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>

<div id="contentright">
 <h1>contentright</h1>
<pre>#contentright {
width:175px;
padding:0px;
float:left;
background:#fff;
}</pre>
 	<p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
 <a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a href="http://validator.w3.org/check?uri=http://www.glish.com/css/3.asp?noSRC=true">validate</a>?
</p>
</div>
<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div>

</body>
</html>

 

Det kan gått virke som jeg er helt dust som spør om slike ting, for enkelte...

Men jeg har ikke peiling på hva jeg snakker om her, nesten...

 

Jeg vet ikke helt om jeg skulle begynt på noe enklere, men jeg tror jeg skal klare dette, trenger brare litt start-hjelp... Jeg har brukt css før, men mye mye enklere...

 

Må bare takke for hjelpen for alle svar og alle som har giddet og lese det sykt lange innlegget mitt på forhånd, tusen takk... ;)

 

EDIT: Litt rettskriving midt på natten...

Endret av cola_boy
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Mira

Mira

Skrevet
Skrevet

Hvis du virkelig vil lære deg å bruke CSS i layouten din, hvilket er bra, bør du lære det skikkelig. Hent gjerne inspirasjon fra andre sider, men prøv å skriv koden helt selv.

Se på andre design og koding og se hvordan de forskjellige CSS atributtene oppfører seg. Da blir det mye enklere (og morsommere) å jobbe med siden.

Lenke til kommentar
PoleCat

PoleCat

Skrevet
Skrevet

1. Nei, i utgangspunktet ikke. Om du senere skal benytte deg av Active Server Pages, kan du konvertere da.

 

2. PHP-include vil ordne opp for deg her. (server må støtte PHP)

 

3. Det går egentlig på det samme. Synes jo selvfølgelig selv at det er best å ha alt i et eget stilark. Du kan bare markere alt som står innenfor <style> taggene, og lime det inn i et nytt stilark, lagre som f.eks style.css og sett denne inn mellom <head>-taggene:

<link href="style.css" rel="stylesheet" type="text/css">

En annen ting er at dersom du har flere sider som bruker samme stil, er det greit å bare kunne oppdatere det eksterne stilarket, i stedet for det interne side for side.

 

-----------------

Som de andre sier, vet ikke helt om dette er rette måten å lære seg dette på, men det er vel forsåvidt din sak. Prøv iallefall å gjøre en del formateringsendringer selv, så skjønner du kanskje hva som egentlig skjer litt bedre.

Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet (endret)

Anbefaler deg å lese tutorials, og prøve å forstå korleis du må sette opp ting, og korleis ting fungerer - istede for å prøve å lese det ut i fra et ferdig oppsett... ;)

 

edit: php kan du ta _etterpå_ ;)

PHP har ingenting med design/layout å gjøre..

Endret av arve87
Lenke til kommentar
Howiey

Howiey

Skrevet
  • Forfatter
Skrevet

Prøver å jobbe med den koden som kun står i body taggen, ikke det scripte som er i headen...For det scripte er vel kun farger og skrift-type osv?

Men da står dei tre kollonene over hverandre, og det er ikke det jeg vil.

Hva gjør jeg?

Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet (endret)
Prøver å jobbe med den koden som kun står i body taggen, ikke det scripte som er i headen...For det scripte er vel kun farger og skrift-type osv?

Men da står dei tre kollonene over hverandre, og det er ikke det jeg vil.

Hva gjør jeg?

 

For å få tre kolonner atmed kverandre gjør du slik:

<div class="venstre">Venstre kolonne</div>
<div class="midten">Midterste kolonne</div>
<div class="hogre">Høgre kolonne</div>

.venstre {
width: Npx;
float: left;
}

.midten {
width: Npx;
float: left;
}

.hogre {
width: Npx;
float: left;
}

Altså, sette inn float: left; på alle element som skal ligge atmed kverandre.

Endret av arve87
Lenke til kommentar
Lokaltog

Lokaltog

Skrevet
Skrevet

Du må bruke flere metoder for å oppnå dette i Opera, Mozilla og IE.

Nummer 1: I CSS:

.venstre {
width: Npx;
float: left;
}
.midten {
width: Npx;
float: left;
}
.hogre {
width: Npx;
float: left;
}
.container {
margin: 0 auto;
}
body {
text-align:center;
}

 

Og i HTML:

<div class="container">
<div class="venstre">Venstre kolonne</div>
<div class="midten">Midterste kolonne</div>
<div class="hogre">Høgre kolonne</div>
</div>

 

Skal i teorien funke veldig bra. Du må putte text-align: left/justify i de andre div'ene hvis du ikke vil at det innholdet skal bli midtstilt også.

Lenke til kommentar
Howiey

Howiey

Skrevet
  • Forfatter
Skrevet (endret)
Du må bruke flere metoder for å oppnå dette i Opera, Mozilla og IE.

Nummer 1: I CSS:

.venstre {
width: Npx;
float: left;
}
.midten {
width: Npx;
float: left;
}
.hogre {
width: Npx;
float: left;
}
.container {
margin: 0 auto;
}
body {
text-align:center;
}

 

Og i HTML:

<div class="container">
<div class="venstre">Venstre kolonne</div>
<div class="midten">Midterste kolonne</div>
<div class="hogre">Høgre kolonne</div>
</div>

 

Skal i teorien funke veldig bra. Du må putte text-align: left/justify i de andre div'ene hvis du ikke vil at det innholdet skal bli midtstilt også.

Det fungerer det der.

Men det blir litt feil forde. I hvert fall til slik jeg ønsket å ha det.

Uansett hvor stor vinduet er, så vil hele teksten vere en viss lengde fra venstre.

 

Men tusen takk for hjelpen for det! Kjempe greier! :thumbup:

 

Fant forresten en side på w3schools, der det står hvordan du kan lage marg på siden din, http://www.w3schools.com/css/css_margin.asp.

 

Det jeg ville ha, var slik som i den koden i det øverste innlegget.

 

Vist du åpner den siden i IE, så kan du gjøre vinduet mindre, og alikevel ligger den i midten. Vist du gjør vinduet større, vil teksten fremdeles ligge i midten av vinduet.

Så koden jeg er ute etter ligger vel i den koden jeg skrev inn i det første innlegget, det er bare det at jeg finner den ikke...!

 

Men jeg lurer på om det er denne:

#frame {
 width:818px;
 margin-right:auto;
 margin-left:auto;
 margin-top:10px;
 padding:0px;
 text-align:left;
 }

Og så begynner jeg html koden med denne <div class="frame"> og avslutter html koden, </div>

 

Er jeg inne på noe? Får den ikke til å fungere selv...

 

EDIT: Endret store deler av innlegget...

Endret av cola_boy
Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet

Om eg forstår deg riktig, så vil du ha ei side som tilpasser seg størrelsen på "viewport" - nettleservinduet.. right?

 

Dette kan du gjøre ved å gi kver kolonne en bredde, i prosent (som til sammen utgjør 100% såklart), og gi "hovedcontaineren" en prosentvis bredde i tillegg.. Skjønner?

Om dei har statisk bredde, vil du få horisontal scroll om nettleservinduet er for lite. (f eks når du justerer str. sjøl, eller oppløsninga er lav.)

Lenke til kommentar
Howiey

Howiey

Skrevet
  • Forfatter
Skrevet (endret)
Om eg forstår deg riktig, så vil du ha ei side som tilpasser seg størrelsen på "viewport" - nettleservinduet.. right?

 

Dette kan du gjøre ved å gi kver kolonne en bredde, i prosent (som til sammen utgjør 100% såklart), og gi "hovedcontaineren" en prosentvis bredde i tillegg.. Skjønner?

Om dei har statisk bredde, vil du få horisontal scroll om nettleservinduet er for lite. (f eks når du justerer str. sjøl, eller oppløsninga er lav.)

Ja, det er vel kanskje det jeg vil...

Skjønner deg ikke helt 100%, men det der med prosent kan jo fungere...

 

Men meningen min er at jeg vil ha den midtstilt er at siden min skal passe fint til alle skjermoppløsninger...

 

Det er mange nettsider som har en marg til venstre og høyre, altså at teksten er midtstilt, og da er det vel meningen at siden skal passe til mindre skjermoppløsninger? Ta f.eks. www.nrk.no Jeg bruker 1024*768 i skjermoppløsning og jeg har marg til venstre og høyre på den siden...

 

EDIT: Rettskriving...

Endret av cola_boy
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...