WN - CSS mjukvara/editor

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS mjukvara/editor (https://www.wn.se/forum/showthread.php?t=34909)

Tjena.

Jag har aldrig riktigt användt css till mina sidor men tänkte att det är dags nu istället för att köpa in den tjänsten hela tiden. Har tyvärr 2 fötter i en table och har fastnat där rätt länge, men vill liksom dra mig ur det sättet att forma en hemsida.

Har kollat lite på olika webbsidor där dom förklarar hur man använder CSS men det är ganska rörigt ändå. Hur lärde ni er CSS? Var det genom en mjukvara (Topstyle, Rapid, Dreamweaver) eller var det genom traditionella Notepad?

Har ni något tips på någon sajt som förklarar steg för steg, gärna med olika exempel och bilder på exemplen.

Vilken mjukvara skulle ni rekommendera?

Tacksam för svar!

// AnOn

Jag använder notepad++ för min kodning. Om du frågar mig så är det långt ifrån rörigt när du väl kommer in i det.

För att lära dig kan jag inte komma på mer än att kolla på grunderna och göra några tutorials. Dem här länkarna kanske hjälper dig lite på vägen..

70 Expert Ideas For Better CSS Coding
http://www.smashingmagazine.com/2007/05/10...ter-css-coding/

CSS Editors Reviewed
http://www.smashingmagazine.com/2008/06/19...itors-reviewed/

EDIT: stavning :P

Med denna sida kommer du långt:

http://w3schools.com/css/default.asp

För OS/X rekommenderas Textmate eller Coda.

Kolla på efterföljaren till frontpage (microsoft expression web)

Tror du kan hitta lite tips o trix där kanske

Har du Mac så ska du köra Coda, klockrent program. Annars skulle jag nog välja Dreamweaver.

Ska du lära dig CSS så följ lite olika bloggar med inriktning på CSS, läs lite varje dag och du kommer såklart att lära dig. Pröva även att använda dig av CSS, gör en mockup för en layout och bestäm dig för att göra den med block och CSS.

Du kommer att stöta på många problem, men det finns minst lika många fixar och du kommer lära dig att Google är din vän. Det finns alltid någon annan som har stött på samma problem tidigare och du kan faktiskt göra allting med CSS, men det är "hur" som ibland kan vara problemet.

Lycka till!

Tack för alla svar.

KarlRoos: ja det är väl just det som är problemet, att man ständigt stöter på problem. Jag tror jag behöver grunden i "hur" man bygger med CSS, finns det några generella regler? Jag har redan design och sådan klart, men att sedan bygga det efter en CSS-mall visade sig vara riktigt svårt.

Måste ju vara rätt eftertraktat efter "videos" eller "tutorials" där man bygger en komplett sida och sedan visar varför man måste lägga in dom ena och dom andra blocken osv, och vad som styr vad.

Följ detta flödesschema.
1. Gör endast html / markup. Använd semantiska element och gör det helt utan tanke på design, utan endast med tanke på vad som är logiskt. Ha en <div> samt ett id per modul, samt omslutare för de olika delarna, exempelvis: <div id="wrapper"><div id="header"></div><div id="content"></div><div id="footer"></div>.
Döp dina "boxar" med logiska och designbefriade namn. Exempel på dåligt namn: #right-to-header. Bättre namn: #information.
Sen med att göra html:en "designbefriad" innebär också en förändring av hur du använder bilder. Alla bilder som är designrelaterade (exempelvis logotypen) kommer du fixa med css. Så gör bara en <h1>Sidnamn</h1>, alltså det du ska använda <img> på är typ, banners, annonser, ja. Sånt som du inte egentligen skulle ändra på ifall du skulle byta design.

2. Nu gör du css, då kommer du ha en utmaning de första gångerna. Du ska nämligen (i den mån du lyckas med) göra hela designen med css. Det kan vara lite jobbigt i början. Och vissa saker kan du vara tvungen att lägga till några små klasser i html-koden i efterhand. Men ju färre sånt du behöver använda, desto bättre. Du kan kolla lite på pseudo-element som typ :after :last-child. Så kan du lösa många problem. Du kan ju dra in nån dean edwards IE js om du vill att IE ska ha stöd med det (cross-browser stöd blir lite jobbigt när man precis börjat med css).

Förövrigt är det FÖRBJUDET att använda designrelaterade taggar såsom <font> etc.

Här finns två "starta-guider" som kanske kan hjälpa, inte så nygjorda men grunden lär du dig bra där.
http://exscale.se/archives/2006/03/2...-website-pt-1/
http://exscale.se/archives/2006/04/0...-website-pt-2/

Hoppas detta hjälpte någonting, mvh

Firebug i Firefox, du ser i realtid hur det ser ut när du ändrar koden. Sen måste du skriva in ändringarna i din sida.

Mycket bra tips, terbon.

Själv använder jag Notepad++ med Vibrant Ink styles.xml'en, som går att hitta på Notepad++ download-sida. (Skärmdump)

terbon: vad menar du med "Förövrigt är det FÖRBJUDET att använda designrelaterade taggar såsom <font> etc."
Du menar att jag inte ska sätta div="font" eller var det ngt annat du syftade på?

Jag har påbörjat en design och kommit förbi headern, navigeringen, och ska snart påbörja content. En sak jag funderade på när det gäller nagivering. Man brukar ju sätta en border eller | som "separator" mellan länk1 och länk2, men går det att sätta
en img imellan som går ända ut till kanten på ett navigeringsfält?

Jag vill bara ha imagen till höger om varje länktitel, men problemet är att den bara sätter sig bakom just länktexten, och inte till marginen till höger.
Det enda som definierar att det är en ny "knapp"/"länkt" är ju[*], hur göra?

glömde att lägga till attach..

http://www.ge.nu/problem.jpg

Citat:

Originally posted by AnOnYmUs@Feb 8 2009, 20:38
Jag har påbörjat en design och kommit förbi headern, navigeringen, och ska snart påbörja content. En sak jag funderade på när det gäller nagivering. Man brukar ju sätta en border eller | som "separator" mellan länk1 och länk2, men går det att sätta en img imellan som går ända ut till kanten på ett navigeringsfält?

Ska du göra det så korrekt som Terbon beskrivit så bör du använda exempelvis
a {border-left: 1px solid black}
a:first-child {border-left: none}
(Andra raden ser till att du inte har något "mellantecken" före första länken.)

Bilder, dvs. <img/> ska du inte använda till detta, använd i så fall background med lämplig padding.

Du bör alltid använda en CSS reset, http://meyerweb.com/eric/thoughts/2007/05/...reset-reloaded/
Det underlättar väldigt mycket och det blir någorlunda lättare att få det att fungera i alla webbläsare ;)

I Coda (program) så har jag två klipp som jag alltid brukar använda när jag startar ett nytt projekt, något jag kallar "XHTML+CSS structure" som ser ut såhär:

Kod:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

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

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

</head>

<body>

</body>

</html

Sedan skapar jag style.css och börjar alltid med klassen .clear som har attributen "clear: both;".
Den används när du har flytande element och vill att det ska "fixas till". Exempel:

Kod:

<div id="main">

<div id="content">Innehåll</div>

<div id="sidebar">Sidebar</div>

<div class="clear"></div>

</div>

Och CSS:

Kod:

#content

{width: 700px; float: left;}



#sidebar

{width: 200px; float: left;}

Så får du en två kolumns layout.

Angående navigeringen så ska du göra precis som martine sa, jag antar att du har bilder, och då bör det se ut såhär:

Kod:

<ul id="menu">

<li class="start"><a href="http://something.com">Titel för första</a></li>

<li class="about"><a href="http://example.com">Titel för andra</a></li>

</ul>

Kod:

#menu li

{display: inline;}



#menu li a

{border-left: 1px solid black; height: 50px; width: 100px; display: block; text-indent: -10000px;}



#menu li a:first-child

{border-left: 0px;}



#menu .start a

{background: url(url till start alternativets bild) no-repeat;}



#menu .about a

{background: url(url till about alternativets bild) no-repeat;}

Och ska du ha hover på något alternativ, exempel ".start" så...

Kod:

#menu .start a:hover

{background: url(url till hover bild..) no-repeat;}

osv..

Hoppas att något var till hjälp :D

Tack för svaren. Ska kolla lite på det nu inatt. Problemet för mig var att bordern inte räckte ända ut till kanten, alltså det blev bara en border i samma storlek som text-fonten, eller några pix till.