Ändra färg på css meny

26 mars, 2008

Nu har jag spenderat snart en timme för att försöka förstå var jag kan ändra hovereffekten från grå till gul , varit inne i meny och rotat bland bakrunder och annat men hittar inte, pls help

En annan fråga när jag ändå skriver , hur kan man enklast med klick på ex en knapp få all text på sidan att få ett större teckensnitt , skall jag skapa en ny sida som heter ex index_st för detta ? Låter lite långsökt , vad säger ni ?

EDIT det första problemet lyckades jag att läsa

[inlägget ändrat 2008-03-26 18:03:54 av roger_malmö]

26 mars, 2008

(du har redan löst det skriver du, men jag skriver ut lösning ändå)

<style type="text/css">
a { color: black; background-color: #eee;}
a:hover { color: green; background-color: yellow;}

.mindiv a { color: blue; background-color: gray;}
.mindiv a:hover { color: black; background-color: red;}

</style>
</head>
<body>

<div>
<p>
<a href="länk1">Min fina länk</a>
</p>
</div>
<div class="mindiv">
<p>
<a href="länk1">Min fina länk i en annan div</a>
</p>
</div>

Detta exempel (som iofs är fult) ger dig lite perspektiv hur man gör när länkar skall se annorlunda ut beroende på placering(och/eller förälderobjekt)

För fråga två finns det flera tillvägagångssätt. Det ena har med javascript att göra och den andra med serverspråk.

Båda kräver egentligen att din css är bra strukturerad för att det skall vara smidigare för dig att ändra till en ny css-fil (för det är det man gör; ändrar från default-css till en ny, eller applicerar en ytterligare ovan)

Metoden kallas "Stylesheet switcher".

Dock vill jag fråga dig varför du vill göra en egen funktion för det?

Om du har för liten text på din sida rent generellt, så gör det större. Om du vill göra din sida mer tillgänglig för personer med nedsatt syn så har de ofta egna hjälpmedel för detta. (IE7 har t ex som zoom-funktionalitet).

I båda av fallen är korrekt markup (HTML) väldigt viktigt.

27 mars, 2008

Tack för ditt utförliga svar precis som du skriver så behöver texten bli större med anledning av att sidan riktar sig delvis till synskade.

Har en annan fråga om du har lust att hjälpa med den, som du ser på bild har jag en meny där jag vill ha en tunn svart ram runt alla menyvalen, har även här letat som en galning men troligen på fel ställe

27 mars, 2008

behöver se markup(HTML) för att hjälpa, då det beror mycket på hur du gjort.

men ett snabbt svar:

border: 1px solid black;

[inlägget ändrat 2008-03-27 10:33:17 av Jonas_Bo]

27 mars, 2008

Tackar tackar, du är mycket kunnig inom området, skulle du vilja hjälpa mig med att skapa en css mall som ser ut ungefär som på bilden men vill ha 2 sidokolumner och en mitten med all brödtext.

Meny med hovereffekt, självklart betalar jag

du kan maila om du har tid och lust roger.dahlqvist@telia.com

[inlägget ändrat 2008-03-27 11:26:22 av roger_malmö]

[bild bifogad 2008-03-27 11:26:39 av roger_malmö]

27 mars, 2008

nu gjorde jag det snabbt så det kanske saknas en del, men du förstår nog.

master.css

/* 
CSS master for All Access
*/

/*Reset all paddings and margins*/
* {padding:0; margin:0;}

html {font: normal normal 1em/130% Arial, Helvetiva, Sans-serif;}
body {font-size: 82.5%; background: #fff;}

ul,
p {margin: .5em 0 1em;}

#header,
#footer {width: 70em; float:none; clear: both; padding: 1em 0; background:#f5f5f5;}
#wrapper {width: 70em; float: left;}

#header h1{text-align: center; height: 2; padding: 1em 0; }
#footer h5 {text-align: center; margin: 2em 0; }

#wrapper #menu {
width: 14em; 
float: left; 
padding: 0 1em 1em 1em ;}
#wrapper #content {
width: 50em; 
float: right; 
border: 1px solid #aaa; 
padding: 1em;}

#menu ul {list-style: none inside; margin-top:0;}
#menu ul li{margin: 0 0 .5em;}
#menu ul li a{
color: black;
text-decoration: none;
display: block; 
border-left: 5px solid #f90; 
height: 2em; 
line-height: 2em; 
font-size: 120%; 
font-weight: bold;
padding: .3em 0 .3em .5em;}
#menu ul li a:hover{background: #eee; border-color: #f00; text-decoration:underline;}

#menu ul li.indent a{margin-left: 1.5em;}

#home #menu ul #nav-home a,
#our #menu ul #nav-our a,
#about #menu ul #nav-about a,
#contact #menu ul #nav-contact a,
#links #menu ul #nav-links a{background: #eee; border-color: #f00; }

För att det skall indikera vilken sida man är på, så får du ändra id på bodytaggen. "home" för hem, "about" för Om, osv

markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title> All Access </title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta name="generator" content="editplus" />
 <meta name="author" content="Roger" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <link href="master.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body id="home">
 <div id="header"><h1>All Access</h1></div>
 <div id="wrapper">
  <div id="menu">
	<ul>
		<li id="nav-home"><a href="#">Hem</a></li>
		<li id="nav-our"><a href="#">Våra</a></li>
		<li id="nav-about"><a href="#">Om</a></li>
		<li id="nav-contact"><a href="#">Kontakt</a></li>
		<li id="nav-links" class="indent"><a href="#">Länkar</a></li>
		<li id="nav-normaltext" class="indent"><a href="#">Normal text</a></li>
		<li id="nav-largertext" class="indent"><a href="#">Stor text</a></li>
		<li id="nav-largesttext" class="indent"><a href="#">Störst text</a></li>
	</ul>
  </div><!-- #menu end -->
  <div id="content">
	<h2>Etiam vestibulum nibh amet</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam egestas metus vitae leo. Morbi elementum vulputate sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in mi at libero dignissim molestie. In malesuada lacinia nisi. Praesent placerat consequat nisl. Praesent mi nulla, pellentesque quis, mattis vel, iaculis quis, sem. Etiam congue mauris at massa. Nunc massa quam, commodo quis, malesuada non, elementum at, nibh. Nulla erat libero, malesuada id, vestibulum quis, nonummy in, dolor. Ut sapien nunc, placerat vel, faucibus sed, accumsan at, tellus.</p>
	<p>Donec ornare ante semper nisl sollicitudin vulputate. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>
  </div><!-- #content end -->
 </div><!-- #wrapper end -->
 <div id="footer"><h5>&copy; 2008 All Access</h5></div>

</body>
</html>

Sparat som utf-8 <- Viktigt

27 mars, 2008

och titta här; ett förstorningsskript jag skrev som fungerar för FF2 och IE6.

Behövs kanske ändras för att fungera för IE7, Opera, konkeror m fl. samt lägga till stöd för cookies så sidan kommer ihåg ditt val på nästa sida.

<script type="text/javascript">
function normaltext(){
	document.body.style.fontSize="82.5%";
}
function largetext(){
	document.body.style.fontSize="100%";
}
function largesttext(){
	document.body.style.fontSize="120%";
}
 </script>

Och ändra i menyn

<li id="nav-normaltext" class="indent"><a href="javascript:normaltext();">Normal text</a></li>
		<li id="nav-largertext" class="indent"><a href="javascript:largetext();">Stor text</a></li>
		<li id="nav-largesttext" class="indent"><a href="javascript:largesttext();">Störst text</a></li>

[inlägget ändrat 2008-03-27 13:08:23 av Jonas_Bo]

27 mars, 2008

Tusen tack för all hjälp men lägger ner det projektet har inte tillräckligt med kunskap om css än.

27 mars, 2008

Synd, du fick ju allt serverat.

Lite poäng är jag dock värd

27 mars, 2008

Var jag för snål med poängen ?

Ok gör ett försök till , om jag kopierer koderna du skrivit och klistar in i ett tomt dokument blir det inte vackert,gör jag fel som gör på det sättet ?

28 mars, 2008

Nej då, det var du inte. (andra är det dock

Vad är det som inte blir vackert?

cssen skall in i en separat fil (jag har hänvisat till "master.css" från html-filen.

html-filen skall sparas som utf-8. Använd "Spara som..." så kan du välja mellan ANSI, UTF-8, med flera.

28 mars, 2008

Nu tusan...har fått till det så att det ser väldigt bra i när jag jobbbar med Dr men..jag kan inte spara som utf-8 den ändelsen finns inte med i MX eller iallafall inte i mitt

Edit: Löste sig nu har jag en sådan sida, nu är jag dum i huvudet igen

_vad skall jag göra med den ?

[inlägget ändrat 2008-03-28 14:39:48 av roger_malmö]

23 april, 2008

ok, kan du inte spara som utf-8 så ersätt utf-8 i meta-taggen till "iso-8859-1"

sorry för sent svar

Ändra färg på css meny

Rekommendera Poster

roger_malmö

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

roger_malmö

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

roger_malmö

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

roger_malmö

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

roger_malmö

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

roger_malmö

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 41 gäster (Visa hela listan)

Populära medlemmar

Publika meddelanden

Senaste som Tittar

Senaste inlägg

Forum

Aktivitet

pcforalla.se