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)

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.