Gå til innhold

Nybegynner, ser etter veiledning...

Nitrius

Anbefalte innlegg

Steinmann

Steinmann

Skrevet
Skrevet (endret)

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 av orsus

Videoannonse

Videoannonse
Annonse
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 :p

 

 

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 :p

Endret av ToxicMan
Steinmann

Steinmann

Skrevet
Skrevet (endret)

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 av orsus
Steinmann

Steinmann

Skrevet
Skrevet

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

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 av ToxicMan
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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å :p

Endret av ToxicMan
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet

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 =)

post-76-1118426981_thumb.jpg

Steinmann

Steinmann

Skrevet
Skrevet

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

Nitrius

Skrevet
  • Forfatter
Skrevet

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?

post-76-1118429673_thumb.jpg

Steinmann

Steinmann

Skrevet
Skrevet

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

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 :p finner den nemlig ikke...

Endret av ToxicMan
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 :p

 

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 av ToxicMan
Orbo

Orbo

Skrevet
Skrevet (endret)

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 av BaX
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 av ToxicMan
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 av ToxicMan
Nitrius

Nitrius

Skrevet
  • Forfatter
Skrevet (endret)

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 :p

Endret av ToxicMan

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...