CSS Aanpassen

webpagedesigner · 27 feb 2010

Ik heb een css bestand, die wil ik graag uit bereiden

Zoals: body background color is green
Color: #008800 bijv
Hoe kan ik dat in het hieronder gegeven script toepassen?

ik weet dat je met html kit allemaal standaard knoppen hebt
maar als ik hoe ik het geleerd heb toevoeg dat werkt niks meer?

Code:

/* CSS Document */
*{
	margin:0;
	padding:0;
}
#menu{
	width:150%;
	margin:25px auto;
}
#menu ul{
	list-style:none;
}
#menu li{
	display:block;
	float:left;
}
#menu li a{
	background:#749b10 url(images/menu_bg.gif) repeat-x;
	border:2px solid #80a225;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	height: 50px;
}
#menu li a span{
	color:#52651f;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}
#menu li a:hover{
	background:#e46825 url(images/menu_hover.gif) repeat-x;
	border:2px solid #c04118;
	text-decoration:none;
}
#menu li a:hover span{
	color:#ffd9c7;
}
.current{
	background:#e46825 url(images/menu_hover.gif) repeat-x;
	border:2px solid #c04118;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	cursor:pointer;
	font-weight:bold;
	height: 50px;
}
.current span{
	color:#ffd9c7;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}

defietser · 27 feb 2010

een vb:

Code:

body{
                background-color: #008800 ;/* Dit is de achtergrondkleur*/
	color: #666666;/* Dit is de kleur van de tekst*/

}

webpagedesigner · 28 feb 2010

helaas

dat had ik al geprobeerd

/* CSS Document */
*{
margin:0;
padding:0;
}
#menu{
width:150%;
margin:25px auto;
}
#menu ul{
list-style:none;
}
#menu li{
display:block;
float:left;
}
#menu li a{
background:#749b10 url(images/menu_bg.gif) repeat-x;
border:2px solid #80a225;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu li a span{
color:#52651f;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu li a:hover{
background:#e46825 url(images/menu_hover.gif) repeat-x;
border:2px solid #c04118;
text-decoration:none;
}
#menu li a:hover span{
color:#ffd9c7;
}
.current{
background:#e46825 url(images/menu_hover.gif) repeat-x;
border:2px solid #c04118;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor

ointer;
font-weight:bold;
height: 50px;
}
.current span{
color:#ffd9c7;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
body: {background-color: #749b10; }

Moet ik missch

<style type="text/css">

</style>

Bij mij werkt het niet

peter vazed · 28 feb 2010

Zoiets?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Sunday, February 28, 2010 00:30:56 -->

<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="screen">

*{
	margin:0;
	padding:0;
}
#menu{
	width:100px;
	margin: 25px auto;
border:solid 2px #ff0000;
float:left;

}
#menu ul{
	list-style:none;
}
#menu li{
	display:block;
	float:left;
}
#menu li a{
	background-color:#749b10;
background-image: url(images/menu_bg.gif) repeat-x;
	border:2px solid #80a225;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	height: 50px;
}
#menu li a span{
	color:#52651f;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}
#menu li a:hover{
	background-color:#e46825;
background-image:  url(images/menu_hover.gif) repeat-x;
	border:2px solid #c04118;
	text-decoration:none;
}
#menu li a:hover span{
	color:#ffd9c7;
}
.current{
	background-color:#e46825;
background-image:  url(images/menu_hover.gif) repeat-x;
	border:2px solid #c04118;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	cursor:pointer;
	font-weight:bold;
	height: 50px;
border:solid 2px #ff0000;

}
.current span{
	color:#ffd9c7;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}
</style>
</head>

<body >

<br>
<br><div id="menu">Menu
<ul >
	<li><a href="">een</a>
	<li><a href="">twee</a>
	<li><a href="">drie</a>
	<li><a href="">vier</a>
</ul>

</div>
<div class="current"><br>Current
<br><span>span</span>
<br>
</div>


</body>

</html>

Let even op:
background-color:#e46825;
background-image: url(images/menu_hover.gif) repeat-x;

webpagedesigner · 28 feb 2010

eey

ik ben een proef site aan het maken

gewoon kijken wat er allemaal kan

het werkt nog steeds niet de door u gegeven code

het menu zonder die door mij toegevoegde toepassing zoals background color, color, en dergelijke werkt wel

ga ik in dat script veranderingen toebrengen gaat het mis

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>(Type a title for your page here)</title>


<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="screen">

*{
margin:0;
padding:0;
}
#menu{
width:100px;
margin: 25px auto;
border:solid 2px #ff0000;
float:left;

}
#menu ul{
list-style:none;
}
#menu li{
display:block;
float:left;
}
#menu li a{
background-color:#749b10;
background-image: url(images/menu_bg.gif) repeat-x;
border:2px solid #80a225;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu li a span{
color:#52651f;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu li a:hover{
background-color:#e46825;
background-image: url(images/menu_hover.gif) repeat-x;
border:2px solid #c04118;
text-decoration:none;
}
#menu li a:hover span{
color:#ffd9c7;
}
.current{
background-color:#e46825;
background-image: url(images/menu_hover.gif) repeat-x;
border:2px solid #c04118;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor

ointer;
font-weight:bold;
height: 50px;
border:solid 2px #ff0000;

}
.current span{
color:#ffd9c7;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
</style>
</head>

<body >

<br>
<br><div id="menu">Menu
<ul >
<li><a href="">een</a>
<li><a href="">twee</a>
<li><a href="">drie</a>
<li><a href="">vier</a>
</ul>

</div>
<div class="current"><br>Current
<br><span>span</span>
<br>
</div>

</body>

</html>Let even op:

En ik roep het css bestand aan in het hoofdpagina.htm

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Green Menu</title>
<link href="stylesheet\menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="current">Home<br /><span>ga naar<br /> home </span></li>
<li><a href="#">Over ons<br /><span>ga naar<br />over ons</span></a></li>
<li><a href="#">Prijslijst<br /><span>ga naar<br />prijslijst</span></a></li>
<li><a href="#">Partners<br /><span>ga naar<br />partners</span></a></li>
<li><a href="#">Contact<br /><span>ga naar<br />contact</span></a></li>
</ul>
</div>
<table width="100%">
<tr>
<td align="right"><img src="afbeeldingen\tijger.jpg"width="20%"height="200"></td>

</table>
</body>
</html>

Alle mapnamen kloppen, ook <link href naar het css bestand klopt, ik zie uiteraad een menu maar als ik achtergrond groen wil vind hij het niet in het css bestand

Goeroeboeroe · 28 feb 2010

Ik zie eigenlijk niet wat je nou gekleurd wilt hebben. De body? De achtergrond van het menu?
Probeer je vraag 'ns zo duidelijk mogelijk te stellen.
En kun je dan hier alleen de html en de css neerzetten waar jij nu mee werkt? Dus niet het menu zoals dat van de site kwam en zo, alleen 1 html en 1 css-bestand. Als er iets mis is in jouw bestanden, werkt het heel verwarrend als er nog andere code bij zit.
En dan liefst tussen tags. Rechts bovenaan zitten knoppen. Als je daaroverheen hovert, zie je CODE en HTML.
Als je de css selecteert en dan op CODE klikt, wordt het keurig genummerd en zo.
Idem voor de HTML.

webpagedesigner · 28 feb 2010

Sorry

Missch is het beter een tweede css bestand te maken...
een voor het menu een 1 voor de gewenste achtergrond van de pagina's en lettertype's

Kun je trouwens twee css bestanden aanroepen in een zelfde html file?

Als ik het zo doe dan werkt mijn menu niet meer>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Green Menu</title>
<link href="stylesheet\menu.css" rel="stylesheet" type="text/css" />
<link href="stylesheet\body.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="current">Home<br /><span>ga naar<br /> home </span></li>
<li><a href="#">Over ons<br /><span>ga naar<br />over ons</span></a></li>
<li><a href="#">Prijslijst<br /><span>ga naar<br />prijslijst</span></a></li>
<li><a href="#">Partners<br /><span>ga naar<br />partners</span></a></li>
<li><a href="#">Contact<br /><span>ga naar<br />contact</span></a></li>
</ul>
</div>
<table width="100%">
<tr>
<td align="right"><img src="afbeeldingen\tijger.jpg"width="20%"height="200"></td>

</table>
</body>
</html>

Dit css bestand heb ik net gemaakt

<html>
<head>
<style type="text/css">

</style>
<title>Untitled</title>
</head>
<body>

</body>
</html>

Waarom krijg ik dan geen horizontaal menu ?

peter vazed · 28 feb 2010

Nou, ik zie het probleem niet.
Je originele html heb ik in mijn editor gezet.
De css los in dezelfde map.
En het werkt.
Wijziging achtergrondkleur:
background-color:#ffff00;
en het wordt geel.

Vraag:
heb je de kop en staart van je style wel uit je css file gehaald?
Dus
<style type="text/css" />
en
</style>
deleten.

webpagedesigner · 28 feb 2010

echt

het menu werkt
maar als ik een ander css bestand aanroep heb ik geen horizontaal menu

CSS Aanpassen

webpagedesigner

Gebruiker

defietser

Gebruiker

webpagedesigner

Gebruiker

peter vazed

Meubilair

webpagedesigner

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

webpagedesigner

Gebruiker

peter vazed

Meubilair

webpagedesigner

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy