Jeg lærer meg HTML og CSS! Vekk med WYSIWYG.

[-Teddy-]

Jeg leser for øyeblikket igjennom CSS intermeditate guiden på www.htmldog.com og syns ting egentlig går ganske bra. Har fått til alt de har snakka om og prøver meg på egenhånd underveis. Er jo faktiskt ganske så moro dette.

 

Har ikke lest så mye om disse tablene, tenkte at jeg ikke har så mye bruk for det enda, skal bare lage meg en liten hjemmeside egentlig. Eller bør jeg begynne å lese på de, er det noe jeg får veldig mye bruk for til min enkle hjemmeside?

 

Men så lurer jeg på en annen ting da. Jeg har tittet endel på hjemmesiden til fUzZy^ og sett hvordan han har gjort det, men finner ikke ut diverse ting:

• Hvordan alt skjønner hvor det skal være hen!? I style.css fila hans ser jeg en "clear: both;" på både <h1> og "footer" som er like brede bilder som begge ligger på midten av siden hans. Gjør det at det blir lik klarering på begge sider av det i taggen eller det footer og h1 referer til?
  
• Videre så lurer jeg på hvordan vet linkene (eller navigeringsgreia på venstre side av siden) hvor de skal ligge egentlig på siden til fuzzy?
  

Endret 5. oktober 2005 av -Teddy-

[Torjus]

• 
   
  
• Videre så lurer jeg på hvordan vet linkene (eller navigeringsgreia på venstre side av siden) hvor de skal ligge egentlig på siden til fuzzy?
   
   
  

Det har vel noe med float å gjøre; ikke sikker.

 

Fikk hjemmesiden av Ingve Holmen, etter det så har jeg bare redigert litt på den...

 

EDIT: Altså, jeg kan minimalt med CSS og HTML

Endret 5. oktober 2005 av fUzZy^

[Moonshine]

ze clear css properteh

 

clear: both | right | left

betyr at ingen flytende elementer (float: left | right | none) kan legge seg ved siden av elementet.

 

Jeg foreslår at du bruker w3schools endel også. Jeg slår opp utelukkende på w3schools når jeg lurer på noe som helst.

 

Fint at du tar et tak for å lære dette!

 

edit: tag?

Endret 6. oktober 2005 av Jonas Drange

[mikk-]

Ting vet vel hvor de skal være på grunnlag av høyde, bredde, float, marginer, clear, osv.

[Cucum(r)]

clear tag

Ikkje for å være forferdelig pirkete og sær, men det er ein CSS-egenskap.

[Steinmann]

For å midstille har han nok brukt "margin: 0 auto" og fast bredde.

Dette gir 0 margin på top og bunn og tilpasset margin på hver side.

 

Lykke til!

[Moonshine]

clear tag

Ikkje for å være forferdelig pirkete og sær, men det er ein CSS-egenskap.

 

Jeg må bare beklage!

[-Teddy-]

Hmm, finner nok ut av det etterhvert. Må lære meg litt mer grunnleggende ting først tror jeg, skal prøve meg frem med float og clear senere.

 

Lurer på:

Kan "id" taggen kun brukes til "en ting"?

Mener: Om jeg skriver

 

<span id="test">Blabla</span>

i html

 

og

 

#test
{
color: red
font-weight: bold
}

i css fila, da skjer det jo ingenting med teksten. Bytter jeg ut id med class og # med . så får jeg rød og fet tekst. Men dropper jeg en av linjene (color eller font-weight) så vriker det med id og.

 

Vil ID altså bare ta "en" kommando eller er det jeg som har misforstått bruken av de?

 

EDIT: Jeg må ha misforstått noe totalt, disse span og div'ene er ikke lette å få til.

Endret 6. oktober 2005 av -Teddy-

[Magnus Holm]

Du må ha semikolon ( ; ) bak hver "kommando":

#test
{
color: red;
font-weight: bold;
}

Endret 6. oktober 2005 av Judofyr

[-Teddy-]

Du må ha semikolon ( ; ) bak hver "kommando":

#test
{
color: red;
font-weight: bold;
}

DER HAR VI PROBLEMET! :!:

 

Uff, lett å glemme ting i farten... Har slitt med dette en stund jeg nå, også var det bare det.

[Jakob K]

Validér CSS-filene dine i en CSS-validator eller bruk en editor med syntax-highligthing (Notepad++, Notepad 2) for å unngå slike feil.

W3C har en HTML-Validator også, som sjekker HTML-filene for feil.

[-Teddy-]

Validér CSS-filene dine i en CSS-validator eller bruk en editor med syntax-highligthing (Notepad++, Notepad 2) for å unngå slike feil.

W3C har en HTML-Validator også, som sjekker HTML-filene for feil.

Takker.

 

Har alltid sjekka html fila mi i FireFox men nå sjekka jeg i IE. Der er det jo mellomrom mellom hver linje!

Bruker <br> på hver linje jeg, skal jeg ikke det?

 

Lærer forresten ting hele tiden, :hover var spesielt moro.

[Upsaker]

såvidt jeg vet så er det <br />

[Steinmann]

såvidt jeg vet så er det <br />

og hva vet du egentlig?

 

<br> eller <br/> kommer ann på html el xhtml.

Håper for guds skyld han bruker html.

 

Mellomrom mellom hver linje betyr at du har brukt en rar editor som har lagt til dobbelt. tror det har med chr(10)+chr(13) å gjøre eller lignendel\.

Har ikke noe å si mtp hvordan resultatet blir da.

[-Teddy-]

<br> eller <br/> kommer ann på html el xhtml.

Håper for guds skyld han bruker html.

 

Mellomrom mellom hver linje betyr at du har brukt en rar editor som har lagt til dobbelt. tror det har med chr(10)+chr(13) å gjøre eller lignendel\.

Har ikke noe å si mtp hvordan resultatet blir da.

Jeg pleier å skrive <br>tekst</br>.

Har sett kun <br /> blit brukt og, kan jeg bruke det om hverandre?

 

Editoren min er notepad men det kan vel være rar nok den, den er jo utviklet av Microsoft såvidt jeg vet.

 

I FF er den fin altså, men ikk i IE. I IE ser det ut som jeg bare har brukt <p>Tekst</p>

[Jesper Karsrud]

Og det er faktisk det du skal gjøre... Vanlig tekst skal stå i paragrafer (<p>), men innen for en paragraf kan du jo gjerne ha linjeskift (<br>)... Hvordan en paragraf skal se ut, styler du selvfølgelig med CSS. Om du bruker <br /> eller <br> kommer an på om du skriver HTML eller XHTML, der sistnevnte ikke er nødevendig med mindre du trenger X'ens funksjoner (XML), noe den vanlige mannen i gata ikke trenger.

 

Litt mye parenteser der, men det må man da tåle fra tid til annen.

[-Teddy-]

Har fakta begynt på en side. Laget et design i PS, skal forandre på det, er ikke fornøyd, men vil prøve å sette sammen allikevel.

 

Dette er slik den skal se ut etterhvert:

http://home.no.net/teodor89/WYSIWYG/Web1--Sliced.html

 

Men vil gjerne sette sammen det hele selv, det der er nemlig et ferdig output fra Photoshop. Vet også at doctype osv mangler, arket er stylet litt fra html osv så ikke klag på det, jeg har som sagt ikke forandret koden siden den kom fra PS.

 

Har prøvd nå en stund å få satt sammen noen bilder, men hvordan starter jeg egentlig? Kan jo endel i teorien men det funket ikke så godt i praksis.

 

Bilder og stas ligger her: http://home.no.net/teodor89/WYSIWYG/

 

Noen som kan gi meg et utgangspunkt? Mitt første hinder er at jeg ikke får plassert to bilder uten at det blir en pixels mellomrom mellom dem. Prøver med margin: 0px men det hjelper lite.

 

Håper noen kan hjelpe meg igang.

[-Teddy-]

Vet ikke hvordan, men jeg fikset det.

 

Dette er første gangen jeg prøver på å sette sammen en side i notepad og det ser jo ut til å ha funka!

 

Vet jeg kan gjøre ting på en annen måte slik at jeg slipper all span'inga inne i div taggene men kom på det litt sent og gidder ikke gjøre om akkurat nå.

Husk at jeg ikke startet å lese på dette for mer enn litt over en uke siden da.

 

Vil nå gjerne vite om dette egentlig er en "brukanes" kildekode, og hvordan får jeg alt sentrert på midten av browser siden? Lurer på om jeg må bytte ut en masse tags og sette alt i en div og sentrere div'n elns?

 

Har også sett en på endel andre sider, de bruker en masse display: block, det har ikke jeg sett noe til på min side...

 

Hele pakka: http://home.no.net/teodor89/notepad/

 

HTML Sourcen:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Teddy.moo.no</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<h1><span class="borte"> Teddy ruler </span></h1>
<div id="linje"><span class="borte"> Teddy ruler </span></div>
<div id="blokk"><span class="borte"> Teddy ruler </span></div>
<div id="blog"><span class="borte"> Teddy ruler </span></div>
<div id="bindestrek"><span class="borte"> Teddy ruler </span></div>
<div id="galleri"><span class="borte"> Teddy ruler </span></div>
<div id="bindestrek2"><span class="borte"> Teddy ruler </span></div>
<div id="om_meg"><span class="borte"> Teddy ruler </span></div>
<div id="gress"><span class="borte"> Teddy ruler </span></div>




</body>

</html>

 

CSS Stylesheet

body
{
background: white;
}

/* Bildeoppsett */

h1
{
background: white url(images/header.gif);
width: 500px;
height: 142px;
margin: 0px;
clear: both;
}

#linje
{
background: white url(images/linje.gif);
width: 500px;
height: 14px;
margin: 0px;
clear: both;
}

#blokk
{
background: white url(images/blokk.gif);
width: 29px;
height: 16px;
margin: 0px;
float: left;
}

#blog
{
background: white url(images/blog.gif);
width: 89px;
height: 16px;
margin: 0px;
float: left;
}

#bindestrek
{
background: white url(images/bindestrek.gif);
width: 55px;
height: 16px;
margin: 0px;
float: left;
}

#galleri
{
background: white url(images/galleri.gif);
width: 135px;
height: 16px;
margin: 0px;
float: left;
}

#bindestrek2
{
background: white url(images/bindestrek2.gif);
width: 53px;
height: 16px;
margin: 0px;
float: left;
}

#om_meg
{
background: white url(images/om_meg.gif);
width: 139px;
height: 16px;
margin: 0px;
float: left;
}


#gress
{
background: white url(images/gress.gif);
width: 500px;
height: 503px;
margin: 0px;
clear: both;
display: absolute;
}





/* Diverse */

.borte	
{
display: none
}

 

EDIT: Har senere egentlig tenkt til å ha en iframe over "gress" og derfor er den absolute. Er det egentlig dumt / blir det vanskeligere å sentrere siden og få det til å henge sammen når det er absolute?

Endret 10. oktober 2005 av -Teddy-

[Darkshade]

Jeg pleier å skrive <br>tekst</br>.

 

Du skal bruke "tekst<br>" for linjeskfift ikke "<br>tekst</br>"

[-Teddy-]

Espen hjalp meg.

 

Legge alt i en <div id="wrap"> og slenge inn

#wrap

{

margin: 0 auto;

width: 500px;

}

 

i CSS fila.

 

Fant ut hvordan jeg fikk hele skiten litt lenger ned selv, bare slang på en liten margin på toppen på <h1>. Moro.

 

@kylefj: Takk for påminnelsen, da vet jeg det til jeg skal begynne med skrivinga mi.

 

EDIT:

 

Nå lurer jeg egentlig på hvordan jeg får plassert iframen jeg har tenkt til å ha over det hvitgrønne på midten.

Prøvd å style iframen litt i css fila men det gikk heller dårlig. Hva er alternativet til iframe i tilfelle, vil gjerne ha en frame av noe slag som jeg kan få plassert der jeg vil.

Endret 10. oktober 2005 av -Teddy-