Nybegynner, ser etter veiledning...

Steinmann · 9. juni 2005

Hadde du tatt en kjapp titt i oppslagsverket ville du funnet

http://www.glish.com/css/7.asp

Denne er skrevet i "xhtml", men ved et enkelt bytte av docktype blir det bra.

EDIT: lagde en kjapp en uten så mye tull:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3 kolonner</title>
<style type="text/css">
 * { /*Setter så alle elementene starter med like verdier*/
  margin: 0;
  padding: 0;
 }
 html, body {
  width: 100%;
  height: 100%;
 }
h1 {
 text-align: center;
}
 #wrap {
  width: 800px; /*Bredden på hele greia*/
  margin: 0 auto; /*Midstiller saken*/
  border: 2px solid black;
  overflow: auto;
 }
 #left {
  width: 100px;
  float: left;
  background-color: blue;
 }
 #center {
 width: 600px;
 float: left;
 }
 #right {
  width: 100px;
  background-color: blue;
  float: right;
 }
 #footer {
  clear: both; /*Legger den nederst og får wrap div'n til å strekke seg rundt alt inholdet*/
  text-align: center;
 }
 </style>
</head>
<body>
<div id="wrap">
 <h1>Overskriften</h1>
 <div id="left">
 	<p>Dette skal være til venstre</p>
 </div>
 <div id="center">
 	<h2>Hvor er jeg?</h2>
 	<p>Jeg er i midten</p>
 </div>
 <div id="right">
 	<p>Til høyre ja</p>
 	<p>Til høyre ja</p>
 	<p>Til høyre ja</p>
 	<p>Til høyre ja</p>
 </div>
 <div id="footer">
 	<p>Nede ved roten</p>
 </div>
</div>
</body>
</html>

stilarket bør helst være seperat, men greit når man tester

Endret 9. juni 2005 av orsus

Nitrius · 9. juni 2005

Takker så mye =)

Men er forsatt på jakt etter tips på hvordan man bygger siden, altså hvilken rekkefølge ting burde gjøres og sånt, vis det finnes noe sånt

Edit:

1. <style type="text/css">

@import "all.css"; /* just some basic formatting, no layout stuff */

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

Den koden der, gjør den sånn at den tar med alle .css filer inn i html dokumentet mitt sant? Vis det, er det noe vits med nummer 2?

Edit2: orsus: den du lagde nå nettopp er det ikke deler av den som egentlig skal inn i et .css dokument? eller? er kan minimalt så har masse spørsmål

Endret 9. juni 2005 av ToxicMan

Steinmann · 9. juni 2005

Glem den jeg ga deg, den var stygg :S

http://www.glish.com/css/3.asp er bedre

Den koden importerer en css fil som heter "all.css" og det er bare noe de har for å få sån fargekode osv. Ittno å bry seg om

EDIT: Stemmer det.

La det bare i samme dokument for å gjøre det enkelt.

Den beste måten å importere(synes jeg) er å bryke <link>

Endret 9. juni 2005 av orsus

Nitrius · 9. juni 2005

Så om jeg har forstått det riktig(bare glem siste edit i forrige post) så er det sånn at det å "dele" opp websiden i flere biter(http://www.glish.com/css/3.asp) Så gjøres det i html dokumentet altså? ikke i .css dokumentet?

Steinmann · 9. juni 2005

I htmlfilen legger du inn blokkene du skal ha. På en semantisk måte.

Også deffinerer du hvordan det skal se ut i css fila.

alt som står i <style> skal egentlig stå i en css fil

Nitrius · 9. juni 2005

Skjønner =)

Alt så alt som da egentlig er inni slike tagger: <style></style>

kan man egentlig flytte til en .css fil?

Edit: Tydelig vis er det sånn ja.

En ting, er det noen som vet om noen sider som kan generer tekst som jeg kan putte inn i siden får å se?

Edit2: http://glish.com/css/3.asp vis vi ser på den, har ordna putta det som skal i.css fila i .css filen, og sånt, men er en ting jeg ikke får til med den der, vis dere ser der det står: "LAYOUT TECHNIQUES: static width and centered" er det mulig å gjøre den "blokken" der større? har tenkt å ha en form for banner der vil jeg tro....

Endret 9. juni 2005 av ToxicMan

Haraldson · 9. juni 2005

ToxicMan: Placeholder text.

Nitrius · 9. juni 2005

Takker =)

Lurer fortsatt på det som står i Edit3 i min forrige post, håper noen kan hjelpe meg med det =)

Edit: Fant det ut, måtte sette "padding" til fler px,da ble den større akkurat som jeg ville

Edit2:

1.Fått til.

2.

Og det er vel mulig å lage en passe fin side ute å bruke photoshop eller?

3.

Hvordan får jeg til disse rød aktige stripene på vær sin side av siden http://forum.hardware.no/index.php?act=Att...post&id=4319664

Vis det der gjøres med "border" koden(eller hva jeg skal kalle det) så har jeg fått til det å.

Edit3: Må si det begynner å bli kult å drive med .html og .css nå lærer mer og mer, artig det, skal bli kult når jeg endelig blir ferdig med denne siden min en gang.

Det er vel alt for nå

Endret 10. juni 2005 av ToxicMan

Nitrius · 10. juni 2005

Glem tingene i forrige post.

Se bilde. Dere ser der det står "Navigate, Modus Midten og Modus Høyre" akkurat på toppen der kunne jeg tenkt å satt inn en liten tynn strimel/norder/bilde av noe slag, vis dere ikke skjønner hva jeg mener så er det noe som på denne siden: http://www.whinerz.com/ Se der det står "Modules" f.eks noe lignende vil jeg også ha hos meg på de 3 tingene jeg nevnte, så hadde vært fint om noen kunne fortalt meg hvordan dette gjøres =)

Steinmann · 10. juni 2005

Det er et bilde.

For å gjøre dette må du lage bildet ( :yes: ) og bruke

background-image: url('her er bildet');

så for at texten ikke skal ligge over, legger du på en padding ekvivalent med bredden på bildet.

padding-left: BILDEBREDDEpx

kjekt å ha litt mer enn bildebredden også kansje.

Alt dette setter du på Hn elementet(ene) du skal ha bilde på:

h2 {

background-image: url('streker.png');

padding-left: 15px;

}

Nitrius · 10. juni 2005

Fikk det til, men en ting er at den ikke strekker seg helt ut til kanten, jeg har gjort bilde like langt som selve "rammen" den skal være inni, men den strekker seg bare ikke helt ut(se bilde).

Noen aning om hvorfor?

Steinmann · 10. juni 2005

Kan ha noe med at du brukte padding for å utvide boxen om jeg ikke husker feil noen poster tilbake :S

Padding er som den uttrykker padding, altså polstring eller fyll.

Ved å legge på padding får du en indre margin.

For å øke bredden endrer du width

Nitrius · 10. juni 2005

Så det jeg må er å finne "padding"en som jeg har stilt på får å gjøre "formene" bredere eller noe og stille den tilbake og heller bruke "width" sant?

Edit: tror jeg nemlig har brukt "padding" til å flytte "formene" fra hverandre, tenker på mellomrommet mellom "formene" tror jeg brukte padding til det, kansje det er problemet...

Edit2:

.CSS

* {

padding: 0;

margin: 0;

}

body {

text-align:center;

background:#8FABC2;

}

#frame {

width:700px;

margin-right:auto;

margin-left:auto;

margin-top:10px;

padding:0px;

text-align:center;

}

#contentleft {

width:175px;

padding:0px;

float:left;

background:#fff;

margin-right:5px;

border-style:solid;

border-width:1px;

border-left-width:1px;

border-right-width:1px;

border-color:black;

}

#contentcenter {

width:334px;

padding:0px;

float:left;

background:#fff;

border-style:solid;

border-width:1px;

border-left-width:1px;

border-right-width:1px;

border-color:black;

}

#contentright {

width:175px;

padding:0px;

float:left;

background:#fff;

margin-left:5px;

border-style:solid;

border-width:1px;

border-left-width:1px;

border-right-width:1px;

border-color:black;

}

#contentheader {

background:#fff;

}

p,h1,pre {

margin:0px 10px 10px 10px;

}

h1 {

font-size:14px;

padding-top:5px;

}

#contentheader {

font-size:20px;

padding:0px;

margin:0px;

margin-bottom:5px;

}

a.button {

font-weight:bold;

font-size:9px;

font-family:Verdana, Arial, Helvetica, sans-serif;

padding:2px 6px;

border-top:1px solid white;

border-right:1px solid black;

border-bottom:1px solid black;

border-left:1px solid white;

text-align:center;

min-width:75px;

text-transform:uppercase

}

a.button:link {

background-color:#82A5DF;

color:#FFF;

text-decoration:none;

}

a.button:visited {

background-color:#82A5DF;

color:#fff;

text-decoration:none;

}

a.button:hover {

background-color:#82A5DF;

color:red;

border-color:black white white black;

text-decoration:none;

}

a.button:active {

background-color:#369;

color:#ccc;

text-decoration:none;

}

li {

padding:5px;

list-style:none;

}

ul {

padding-bottom:10px;

}

Vis noen har lyst til å prøve å finne den feilen der finner den nemlig ikke...

Endret 10. juni 2005 av ToxicMan

Steinmann · 10. juni 2005

hmm, da er det vel noen annet rart da. :hm:

Prøvd å validere css'n?

sikker på at breddene er like?

Nitrius · 10. juni 2005

Alt ser likt ut, og etter sist jeg sjekka så skal ting være som det skal være?

Men gi meg en side der jeg kan validere så skal jeg gjøre det, men må være mulig å laste opp fila, har nemlig ikke fått lagt siden ut på nett...

Men jeg er prøvde å validere CSS fila mi istad og at den ikke fant noen problemer, men husker ikke om jeg faktisk gjorde det eller ikke

W3C CSS Validator Results for file://localhost/stilark.css
No error or warning found

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
Valid CSS information
* {
padding : 0;
margin : 0;
}
body {
text-align : center;
background : #8fabc2;
}
#frame {
width : 700px;
margin-right : auto;
margin-left : auto;
margin-top : 10px;
padding : 0;
text-align : center;
}
#contentleft {
width : 175px;
padding : 0;
float : left;
background : #fff;
margin-right : 5px;
border-style : solid;
border-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-color : black;
}
#contentcenter {
width : 334px;
padding : 0;
float : left;
background : #fff;
border-style : solid;
border-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-color : black;
}
#contentright {
width : 175px;
padding : 0;
float : left;
background : #fff;
margin-left : 5px;
border-style : solid;
border-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-color : black;
}
#contentheader {
background : #fff;
}
p , h1 , pre {
margin : 0 10px 10px;
}
h1 {
font-size : 14px;
padding-top : 5px;
}
#contentheader {
font-size : 20px;
padding : 0;
margin : 0;
margin-bottom : 5px;
}
a.button {
font-weight : bold;
font-size : 9px;
font-family : Verdana, Arial, Helvetica, sans-serif;
padding : 2px 6px;
border-top : 1px solid white;
border-right : 1px solid black;
border-bottom : 1px solid black;
border-left : 1px solid white;
text-align : center;
min-width : 75px;
text-transform : uppercase;
}
a.button:link {
background-color : #82a5df;
color : #fff;
text-decoration : none;
}
a.button:visited {
background-color : #82a5df;
color : #fff;
text-decoration : none;
}
a.button:hover {
background-color : #82a5df;
color : red;
border-color : black white white black;
text-decoration : none;
}
a.button:active {
background-color : #369;
color : #ccc;
text-decoration : none;
}
li {
padding : 5px;
list-style : none;
}
ul {
padding-bottom : 10px;
}

Endret 10. juni 2005 av ToxicMan

Orbo · 10. juni 2005

Et eksempel som vil gjør koden mer oversiktlig.

border-style : solid;
border-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-color : black;

Feil

border: 1px solid #000;

Rett

Edit: Ikke bruk px når du skal sette størrelse på skrift, ettersom de forsjellige bowserene ikke gir samme resultat.

Bruk 'em' eller 'pt'.

Edit2: Du kan fjerne 'padding: 0;' på alle div'ene nå. Siden du har:

* {
padding: 0;
margin: 0;
}

Endret 10. juni 2005 av BaX

Nitrius · 10. juni 2005

Takker for de oppryddingene der, virker som bare det =)

Men er fortsatt mest på jakt etter en løsning på det bilde greiene jeg fortalte om litt over her...

Endret 10. juni 2005 av ToxicMan

Orbo · 10. juni 2005

Ehh, glem det..

Endret 10. juni 2005 av BaX

Nitrius · 10. juni 2005

Hmm, det der bilde greiene som jeg snakka om litt lengere opp på siden var vrient, har prøvd det meste nå vil jeg si til ingen nytte, den vil bare ikke strekke seg helt ut, hmm må være noe jeg overser...

Men men kansje jeg bare skal droppe det, orker ikke å streve med en ting for lenge, men selfølgelig vis noen skulle vist hvordan det gjøres så si det.

Takk så langt hvertfall, fint at dere er så hjelpsomme, tror jeg kommer til å bruke denne tråden vidre vis det skulle dukke opp fler spørsmål

Endret 10. juni 2005 av ToxicMan

Nitrius · 12. juni 2005

Okay et lite spørsmål http://home.no.net/ymerx se siden så trykker dere på navigasjonene, og når man trykker på navigasjon "test 3" så ser man at hele siden flytter seg litt mot venstre, tror det har noe med at jeg tester med mye mer test i midten der enn på de andre.

Men lurer da på om det er noe jeg kan forhindre at dette skjer? det ser jo ikke akkurat noe godt ut at hele sideen flytter seg litt mot venstre liksom :-/

Noen som kan hjelpe meg?

Edit: la merke til at dette ikke skjer i IE, men i Opera og Firefox så skjer det.

En liten annen ting jeg har kommet til å lagt merke til er at høyre "boks" ser ut til å lastes på nytt vær gang man bytter/trykker på knappene for å komme seg til et annet sted, ser nemlig at den "blinker" eller hva jeg skal si vær gang jeg bruker navigasjons knappene, eller er det sånn det er bare?

Edit2: hahah så morsomt, så dum jeg er, bare glem første spørsmål, grunnen til at det skjer er jo at siden den er så lang så dukker den scroll saken opp på siden, det er jo derfor alt blir dyttet litt mot venstre

Endret 12. juni 2005 av ToxicMan

Nybegynner, ser etter veiledning...

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer