Naar aanleiding van mijn eerdere topic; een simpele lijn maken.
CSS_Hunter was zou vriendelijk geweest om mijn website eens grondig onder de loep te nemen. Het bleek dat mijn "designer" er een potje van het gemaakt. Inmiddels heb ik dan ook geen designer meer, omdat die vond dat ik zeurde.
Goed, website betaald, blijkt dat ik met een halve website zit. Ik als website dummy heb voor mijn niveau al best wat voor elkaar gekregen, maar er zijn een aantal dingetjes waar ik niet uit kom.
CSS_Hunter heeft bijna alle problemen voor mij opgelost, máár ik krijg ze met geen mogelijkheid in mijn eigen CSS en HTML code. Hunter had een hele nieuwe code aangemaakt, maar ik pas liever de oude code aan, omdat daar bepaalde elementen in zitten die bij hem niet terug komen (logisch).
Wie kan mij een schop in de goede richting geven?
Dit heb ik nu:
http://www.equiphotography.nl/test4/
De vreselijk onoverzichtelijke code, kan vast ook veel eenvoudiger, ik weet alleen niet hoe:
En de CSS:
CSS_Hunter heeft dit veel slimmer aangepakt:
Hunter is zelfs zo vriendelijk geweest een hele waslijst met problemen op te lossen. Echter krijg ik het dus niet voor elkaar deze in de oude code te integreren omdat ik gewoon geen idee heb wat er staat.
Dit heeft hij veranderd en kreeg ik niet in de oude code:
1. De pagina's staan altijd horizontaal gecentreerd bij een resolutie van 1024x768px of groter.
2. Verticaal gaat de positie van het menu en het middendeel mee met de hoogte van het scherm. Zodanig afgeregeld dat het er bij een resolutie van 1024x768px precies allemaal op past.
3. Bij resoluties van groter dan 800x600px is er geen normale scrollbar aan de rechterkant. De pagina's staan er helemaal op.
4. Bij schermbreedtes of windowbreedtes van minder dan 1024px breed begint de pagina nu gewoon aan de linkerkant, en de rechterkant is met een horizontale scrollbar te bereiken.
5. Bij 800x600px is er een normale scrollbar aan de rechterkant. Deze is dan alleen nodig om de regel van het copyright helemaal onderop te zien. Zonder naar beneden scrollen is de rest van de pagina verticaal helemaal te zien.
6. De achtergrond-afbeelding met het lichtschijnsel is aangepast, schaalt mee met de breedte, en is nu bij elke resolutie beeldvullend.
7. Het menu kan op elke pagina exact hetzelfde blijven. De <body>-tag krijgt een ID, en dan zorgt de css automatisch dat de actuele pagina er uitspringt in het menu (zie de html-broncode). inmiddels snap ik daar iets meer van, maar alleen als ik het handmatig instel bij < selecte"> ik krijg alleen bij "info" de submenu's niet goed...voorbeeld http://www.equiphotography.nl/test4/fotografe.html
8. De tekst van de nieuwsbalk moet nog een stukje omhoog, zodat NIEUWS op het lichtere stuk valt en de tekst in het donkere stuk
Het echte werk heeft CSS_Hunter al gedaan, maar hoé integreer ik dit nou in mn oude, bestaande website?
Ook kwam Hunter met de tip dat het submenu "info" en "portfolio" niet aanklikbaar moet zijn, hier heb ik ook een poging bij gewaagd, tevergeefs...
Wie geeft me een schop in de goede richting?
CSS_Hunter was zou vriendelijk geweest om mijn website eens grondig onder de loep te nemen. Het bleek dat mijn "designer" er een potje van het gemaakt. Inmiddels heb ik dan ook geen designer meer, omdat die vond dat ik zeurde.
Goed, website betaald, blijkt dat ik met een halve website zit. Ik als website dummy heb voor mijn niveau al best wat voor elkaar gekregen, maar er zijn een aantal dingetjes waar ik niet uit kom.
CSS_Hunter heeft bijna alle problemen voor mij opgelost, máár ik krijg ze met geen mogelijkheid in mijn eigen CSS en HTML code. Hunter had een hele nieuwe code aangemaakt, maar ik pas liever de oude code aan, omdat daar bepaalde elementen in zitten die bij hem niet terug komen (logisch).
Wie kan mij een schop in de goede richting geven?
Dit heb ik nu:
http://www.equiphotography.nl/test4/
De vreselijk onoverzichtelijke code, kan vast ook veel eenvoudiger, ik weet alleen niet hoe:
HTML:
<!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" lang="en">
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<title>Equi Photography</title>
<style> BODY { scrollbar-arrow-color:#606060; scrollbar-track-color:#180314; scrollbar-face-color:#000000; scrollbar-highlight-color:#e2e2e2; scrollbar-3dlight-color:#585858; scrollbar-darkshadow-color:#414141; scrollbar-shadow-color:#6b6b6b;overflow: scroll; overflow-y:scroll; overflow-x: hidden; }
" </style>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252" />
<!-- style sheet links -->
<link rel="stylesheet" type="text/css"
href="style.css" />
<link rel="stylesheet" type="text/css"
href="menu.css" />
<style type="text/css">
.style1 {
font-family: Arial;
}
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
.style2 {
font-size: 8px;
}
.style3 {
font-size: 9px;
}
body {background-image:url('100.jpg');}
background-repeat:no-repeat;
.style4 {
background-color: #000000;
}
.style5 {
text-align: left;
}
.style6 {
font-size: 7pt;
}
.style7 {
margin-right: 0px;
}
.style8 {
text-align: center;#170314
}
</style>
</head>
<body>
<div id="centrecontainer">
<div id="outercontainer"
style="left: 50%; top: -236px; height: 600px;">
<div id="header" style="width: 1015px; height: 800px;"
class="style7">
<div id="cssmenu" style="width: 910px;">
<hr
style="border: 0px solid rgb(51, 102, 153); width: 100%; height: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);" /><br />
<div id="nav">
<ul class="sf-menu dropdown">
<li class="selected"><a href="index.html">Home</a></li>
<li><a class="has_submenu" href="">Info</a>
<ul>
<li><a href="fotografe.html">De fotografe</a></li>
<li><a href="werkwijze.html">Werkwijze</a></li>
<li><a href="tarieven.html">Tarieven</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="gezocht.html">Gezocht</a></li>
</ul>
</li>
<li><a href="reportages.html">Reportages</a></li>
<li><a class="has_submenu" href="">Portfolio</a>
<ul>
<li><a href="paarden.html">Paarden</a></li>
<li><a href="overige.html">Overige</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<br />
</div>
<div id="container" style="width: 935px;">
<div id="containerleft" style="width: 481px; height: 440px;">
<h2 style="width: 477px; height: 178px;"></h2>
<h2 style="width: 477px; height: 195px;"></h2>
<table style="width: 100%; height: 70px;">
<tbody>
<tr>
<td class="style8">NIEUWS
Teksttekstteksttekst......</td>
<td class="style8">NIEUWS
<br />
Teksttekstteksttekst.......</td>
<td style="width: 152px;">Volg ons <img alt=""
src="twitter.png" height="20" width="20" />
<img alt="" src="facebook.png" height="20"
width="20" /> asla <img alt=""
src="flickr.png" height="20" width="20" /> </td>
</tr>
</tbody>
</table>
</div>
<div id="containerright" style="width: 395px; height: 440px;">
<div style="text-align: center;"></div>
<h1 style="color: rgb(231, 215, 255); text-align: right;"><br />
<span style="font-family: Times New Roman; font-weight: bold;"></span></h1>
<h1 style="color: rgb(231, 215, 255); text-align: right;"><span
style="font-family: Times New Roman; font-weight: bold;">.:W
E L K O M</span>:.<br />
</h1>
<p style="color: rgb(231, 215, 255);" class="style1">
------------------------------------------------------------------------</p>
<div id="oDiv"
style="height: 120px; color: rgb(219, 166, 232); text-align: left;"
{background-image:url('image4.jpg="" class="style1"><span
style="color: rgb(231, 215, 255);">Welkom op de website van
Equi Photography!<br />
Hier
kunt u onder andere informatie vinden over fotoshoots
door </span><strong
style="font-weight: normal; color: rgb(231, 215, 255);">Equi
Photography</strong><span style="color: rgb(231, 215, 255);">,
tarieven, tips en een aantal voorbeeld foto's.
</span>
<p style="color: rgb(231, 215, 255);">Heeft u vragen,
opmerkingen of
bent u geintresseerd in
een fotoshoot? <br />
<br />
U kunt dan altijd vrijblijvend contact opnemen, zie hiervoor de pagina
'Contact' in het menu. </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer" style="width: 917px;" class="style2">
<div class="style5"> <span class="style3"><br />
<hr
style="border: 0px solid rgb(51, 102, 153); width: 54%; height: 11px; color: rgb(0, 0, 0);"
class="style4" /> </span></div>
<hr
style="border: 0px solid rgb(51, 102, 153); width: 100%; height: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);" />
<span class="style6">Copyright © 2012 Equi
Photography | Algemene Voorwaarden
<br />
Niets van deze site mag worden overgenomen zonder schriftelijke
toestemming.</span><span class="style3"> <br />
<br />
</span></div>
</div>
</div>
</div>
</body>
</html>En de CSS:
HTML:
body
{
padding: 0;
margin: 0;
background: position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #FFF;
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size: 77%;
line-height: 150%;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #FF80A8;
}
a:hover
{
text-decoration: none;
color: #FFF;
}
#centrecontainer
{
position: absolute;
top: 40%;
left: -130px;
width: 100%;
}
#outercontainer
{
margin-left: -400px;
position: absolute;
top: -236px;
left: 50%;
}
#header {
padding: 0px 15px;
margin: 0 auto;
height: 112px;
}
#header h1 {
padding: 0;
}
#header h1 a {
color: #fff;
padding-top: 40px;
font-size: 40px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: -3px;
float: left;
text-shadow: 1px 1px #111;
}
#header h2 {
color: #999;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
margin-left: 5px;
margin-top: 50px;
padding-bottom: 0;
padding-left: 4px;
}
#nav {
height: 74px;
width: 960px;
position: relative;
z-index: 999;
}
#nav ul {
list-style: none;
padding: 16px 0 0;
margin: 0;
height: 36px;
}
#nav ul ul {
padding-top: 0;
}
#nav ul li {
display: block;
float: left;
}
#nav ul li a {
display: block;
color: #FFF;
display: block;
font-size: 11px;
font-weight: bold;
float: left;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 13px 15px 12px;
text-decoration: none;
margin-right: 10px;
}
#nav ul li a.has_submenu {
background: transparent url('images/submenu-item.gif') no-repeat scroll right center;
padding-right: 30px;
}
#nav ul li.sfHover a.has_submenu {
background-image: url('images/submenu-item-hover.gif');
}
#nav ul li a.has_submenu:hover {
background-image: url('images/submenu-item-hover.gif');
}
#nav ul ul li a {
float: none;
width: 170px;
}
#nav ul li.selected li a {
text-decoration: none;
color: #ddd;
}
#nav ul li.selected li.selected a {
color: #000;
background-color: #FFF;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
#nav ul li.selected a:hover {
color: #fff;
background-color: #000;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
#nav ul li.selected a {
color: #000;
background-color: #FFF;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
#nav ul ul li.selected a:hover {
text-decoration: underline;
border: none;
}
#nav ul ul li.selected a {
text-decoration: underline;
border: none;
}
#nav ul ul a {
color: #000;
background-color: #FFF;
}
#nav ul li.sfHover a {
color: #000;
background-color: #FFF;
}
#nav ul li a:hover {
color: #FFF;
background-color: #000;
}
#nav ul li li a:hover {
background-color: #000;
}
/*** ESSENTIAL STYLES ***/
.sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px; /* left offset of submenus need to match (see below) */
margin-top: 10px;
padding-top: 0;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
.sf-menu li:hover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li:hover li ul {
top: -999em;
}
ul.sf-menu li li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover ul {
left: 200px; /* match ul width */
top: 0;
}
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover li ul {
top: -999em;
}
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li li:hover ul {
left: 10em; /* match ul width */
top: 0;
}
/* front page slider styles */
div#jFlowSlide {
margin:0 auto;
}
div#slides-container {
height: 271px;
overflow: hidden;
width: 960px;
padding-top: 40px;
}
div#slides-container div#jFlowSlide {
height: 315px;
}
div#slides-container div.jFlowSlideContainer img {
margin:auto;
}
div#slides-container div.jFlowSlideContainer div {
}
div#slides-container div.jFlowSlideContainer div.slide-image {
float:left;
width: 370px;
padding-top: 0px;
}
span.jFlowNext {
background-image:url('images/slide-prev.gif');
background-repeat:no-repeat;
display:block;
height:41px;
width:24px;
float:left;
margin:0;
cursor:pointer;
}
span.jFlowPrev {
background-image:url('images/slide-prev.gif');
background-repeat:no-repeat;
display:block;
height:41px;
width:24px;
float:left;
margin:0;
cursor:pointer;
}
span.jFlowNext span { display:none; }
span.jFlowPrev span { display:none; }
span.jFlowNext {
background-image:url('images/slide-next.gif');
float:right;
}
div#slides-container div.controls {
position:relative;
top:-220px;
width:960px;
margin:0 auto;
}
div#slides-container p {
padding-top: 10px;
color: #eee;
}
div#slides-container a {
color: #eee;
}
div#sub-header h2 {
font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
color: #fff;
text-shadow: 1px 1px #21441D;
font-weight: normal;
}
div#slides-container h2 {
font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
color: #fff;
text-shadow: 1px 1px #21441D;
font-weight: normal;
}
div.slide-text {
padding-top: 10px;
}
.hidden { display:none; }
div#sub-header {
height: 101px;
}
div#sub-header h2 {
padding-top: 27px;
}
#header
{
width: 1080px;
height: 75px;
letter-spacing: 1px;
}
#container
{
border: 0px solid #FFF;
width: 760px;
height: 370px;
}
#containerleft
{
float: left;
width: 350px;
height: 350px;
background-image:url('containerright-image.jpg');
border-right: 0px solid #FFF;
padding: 10px;
}
#containerleft a
{
text-decoration: none;
color: #FFF;
}
#containerleft a:hover
{
text-decoration: none;
color: #FFF;
}
#containerleft h2
{
margin: 0;
padding: 0;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
letter-spacing: -3px;
font-size: 250%;
text-align: right;
}
#containerright
{
float: left;
width: 350px;
height: 30px;
background-image:url('Image5.jpg');
overflow: auto;
padding: 10px;
padding-left:10px;
color: #fff
}
#containerright h2
{
margin: 0;
padding: 0;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
letter-spacing: -2px;
font-size: 200%;
border-bottom: 1px solid #FFF;
padding-bottom: 5px;
width: 75%;
}
#footer
{
width: 800px;
text-align: right;
padding: 5px 0px;
color: #fff;
}
#footer a
{
text-decoration: none;
color: #fff;
}
#footer a:hover
{
text-decoration: none;
color: #FFF;
}
#footer {
clear: both;
font-size: 0.8em;
padding-top: 20px;
}
#bovenlijn {
border-top: 4px solid white;
height: 10px;
}
#onderlijn {
border-bottom: 3px solid #340a2c;
height: 10px;
margin: 0px -50px;
}CSS_Hunter heeft dit veel slimmer aangepakt:
HTML:
<!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" lang="nl" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- alleen voor deze testpagina uitgeschakeld--><!-- <meta name="robots" content="index, follow" /> -->
<!-- alleen voor deze testpagina ingeschakeld --><meta name="robots" content="noindex, nofollow" />
<!-- http://www.helpmij.nl/forum/showthread.php/729469-Simpele-lijn-maken -->
<!-- volgende 3 per pagina aanpassen -->
<title>Equi Photography voor uw mooie paardenfoto's</title>
<meta name="KEYWORDS" content="invullen: trefwoorden, tussen, kommas" />
<meta name="DESCRIPTION" content="invullen: pagina-beschrijving in 1 zin" />
<link rel="stylesheet" type="text/css" href="http://bliksekaters.nl/tests/stylesheets/equi-styles.css" />
</head>
<!-- de id van de body geeft de actuele pagina in het menu aan
**** voor de homepage................: id="home"
**** voor de pagina's onder Info.....: id="info"
**** voor de Evenementen-pagina......: id="evenementen"
**** voor de pagina's onder Portfolio: id="portfolio"
**** voor de Contact-pagina..........: id="contact"
-->
<body id="home">
<div id="background">
<img src="http://bliksekaters.nl/tests/images/equi-bg.jpg" width="100%" alt="" />
</div>
<div id="inhoud">
<div id="rechterkolomWrapper">
<div id="rechterkolom">
<h1>Welkom op de site van<br />Equi Photography</h1>
<h2>specialist in paardenfoto's</h2>
<p>Equi Photography, gevestigd in ... en werkzaam in heel Nederland, heeft zich
in de loop der jaren gespecialiseerd in het fotograferen van paarden en ruiters. Zie
hiervoor de informatie-pagina <a href="http://bliksekaters.nl/tests/equi-fotografie.html">Fotografie</a></p>
<h3>Informatie en tips</h3>
<p>Verder kunt u op deze site o.a. vinden hoe de fotoshoots door Equi Photography
in hun werk gaan, onze prijzen en een aantal voorbeeld-foto's.<br />
Op de pagina <a href="tips.html">Tips</a> geven wij een aantal suggesties die u
wellicht van pas zullen komen.</p>
<p>Heeft u vragen, opmerkingen of bent u geinteresseerd in een fotoshoot? U kunt dan
altijd vrijblijvend contact opnemen, zie hiervoor de pagina <a href="contact.html">Contact</a>.</p>
<p><a href="http://validator.w3.org/check?uri=referer">Valid xhtml1.0 Strict</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid css3</a></p>
</div>
</div>
<div id="beautyfier"></div>
<div id="linkerkolom">
<div id="social">
Volg ons:
<div>
<a href="#"><img alt="" src="http://www.equiphotography.nl/home/test11/twitter.png" height="20" width="20" /></a>
<a href="#"><img alt="" src="http://www.equiphotography.nl/home/test11/facebook.png" height="20" width="20" /></a>
<a href="#"><img alt="" src="http://www.equiphotography.nl/home/test11/flickr.png" height="20" width="20" /></a>
</div>
</div>
<div class="nieuwsblok">
<h3>Nieuws:</h3>
<p>15 okt. 2012 houdt Equi Photography een fotosessie bij ...</p>
<p class="textR"><a href="nieuws.html">Lees verder!</a></p>
</div>
<div id="nieuwsblok-rechts" class="nieuwsblok">
<h3>Nieuws:</h3>
<p>29 sept. 2012 maakte Equi Photography een fotoverslag van de ...</p>
<p class="textR"><a href="nieuws.html">Lees verder!</a></p>
</div>
</div>
<div id="footer">Copyright © 2012 Equi Photography | <a href="algemene-voorwaarden.html">Algemene Voorwaarden</a></div>
</div>
<div id="menu">
<ul>
<li class="home"><a href="equi-index.html">Home</a></li>
<li class="info"><a href="#">Info</a>
<ul>
<li><a href="equi-fotografie.html">De fotografie</a></li>
<li><a href="werkwijze.html">Werkwijze</a></li>
<li><a href="tarieven.html">Tarieven</a></li>
<li><a href="tips.html">Tips</a></li>
<li><a href="nieuws.html">Nieuws</a></li>
</ul>
</li>
<li class="evenementen"><a href="evenementen.html">Evenementen</a></li>
<li class="portfolio"><a href="#">Portfolio</a>
<ul>
<li><a href="paarden.html">Paarden</a></li>
<li><a href="overige.html">Overige</a></li>
</ul>
</li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>
<div class="clearB"></div>
</div>
</body>
</html>Hunter is zelfs zo vriendelijk geweest een hele waslijst met problemen op te lossen. Echter krijg ik het dus niet voor elkaar deze in de oude code te integreren omdat ik gewoon geen idee heb wat er staat.
Dit heeft hij veranderd en kreeg ik niet in de oude code:
1. De pagina's staan altijd horizontaal gecentreerd bij een resolutie van 1024x768px of groter.
2. Verticaal gaat de positie van het menu en het middendeel mee met de hoogte van het scherm. Zodanig afgeregeld dat het er bij een resolutie van 1024x768px precies allemaal op past.
3. Bij resoluties van groter dan 800x600px is er geen normale scrollbar aan de rechterkant. De pagina's staan er helemaal op.
4. Bij schermbreedtes of windowbreedtes van minder dan 1024px breed begint de pagina nu gewoon aan de linkerkant, en de rechterkant is met een horizontale scrollbar te bereiken.
5. Bij 800x600px is er een normale scrollbar aan de rechterkant. Deze is dan alleen nodig om de regel van het copyright helemaal onderop te zien. Zonder naar beneden scrollen is de rest van de pagina verticaal helemaal te zien.
6. De achtergrond-afbeelding met het lichtschijnsel is aangepast, schaalt mee met de breedte, en is nu bij elke resolutie beeldvullend.
7. Het menu kan op elke pagina exact hetzelfde blijven. De <body>-tag krijgt een ID, en dan zorgt de css automatisch dat de actuele pagina er uitspringt in het menu (zie de html-broncode). inmiddels snap ik daar iets meer van, maar alleen als ik het handmatig instel bij < selecte"> ik krijg alleen bij "info" de submenu's niet goed...voorbeeld http://www.equiphotography.nl/test4/fotografe.html
8. De tekst van de nieuwsbalk moet nog een stukje omhoog, zodat NIEUWS op het lichtere stuk valt en de tekst in het donkere stuk
Het echte werk heeft CSS_Hunter al gedaan, maar hoé integreer ik dit nou in mn oude, bestaande website?
Ook kwam Hunter met de tip dat het submenu "info" en "portfolio" niet aanklikbaar moet zijn, hier heb ik ook een poging bij gewaagd, tevergeefs...
Wie geeft me een schop in de goede richting?
Laatst bewerkt:
(designlijnen vind ik mooi, evenals lettertype, kleuren, hoogte enzovoorts)
Ik had hem per ongeluk geopend met kladblok ipd notepad, en bij kladblok kreeg ik alles over 3 regels; bij notepad uiteraard niet.
