dropdownmenu met ZIP

[herman]

Ik zie dat je gepost hebt.
Ik wilde je net een mail sturen, dus die kan ik deleten.

Ik heb alle vertrouwen in je. Ik houd ook van grondigheid (germanisme?), al zal dat wel niet zo te merken zijn geweest.
Ga je gang.

Wat betreft de center uitlijning van de plaatjes in de kolommen had ik al iets geconstrueerd maar dat staat in de css.
Die zal ik hier dan maar toevoegen.
Of werkt het beter met het ww van de hosting zodat je het on-line kunt doen?

Ik denk dat er nog veel overbodigs instaat, dat er dingen zijn die veel korter gecodeerd kunnen worden, maar voor mij was het zo overzichtelijker.
Er staan ook nog dingen in tussen /* en */ waarvan ik nog niet weet of ik ze nog nodig heb.

grt herman.

css-code: schrik niet:

Code: Selecteer alles

body, html{
        margin: 0;
        height: 100%;
}
 
#main_container{
        background-color: #363636; 
        float: left;
        width: 100%;
        min-height: 100%;
        margin: -34px 0 0 0;
}
 
/* SUB MAIN_CONTAINER BOXEN */
#logo_container{
        float: left;
        width: 25%;
        padding: 34px 0 0 0;
        text-align: center;
}
 
#title_container{
        padding: 34px 0 0 0;
}
 
#nav {
        background-color: silver;
        height: 0; /* hoogte van de zilveren mouse over was 30pc*/
        font-size: 0.55em;
        font-family: arial, helvetica, sans-serif;
        margin: 0 25%;
}
 
#taal_container{
        float: right;
        width: 25%;
        padding: 34px 0 0 0;
        text-align: center;
}
 
#links_container{
        background: #363636; /*orange;*/ 
        float: left;
        clear: both;
        width: 25%;
        margin-top: -10px; /* wat doet dit? En geldt dit dan ook niet voor de content_container? Veroorzaakt dit het probleem van de omhoogkomende content-box als ik title-box 100px ipv 90px wil geven? */
}
 
#content_container{
        margin: 0 25% 0 25%;
				background-color: #363636;
}
 
#rechts_container{
        background: orange; 
        margin-top: -10px; /* ???*/
        float: right;
        width: 25%;
}
 
#footer_container{
        background: #ee9522;
        clear: both;
        height: 40px; /*waarom 40px en geen 34px?*/
        width: 100%;
        text-align: center; /*right;*/
        position: fixed;
        bottom: 0;
}
 
/* CONTENT BOXEN */
#logo {
        background-color: #363636;
        height: 120px;
        padding: 0; 
        text-align: left;
}
 
#title {
        background: #363636; navy;
        height: 90px;
        padding: 0; 
        text-align: center;
}
 
#taal{
        background-color: #363636;
        height: 120px;
        padding: 0;
        text-align: right;
}
 
#links {
        background-color:  #363636;
				padding: 10px 15px 10px 15px;
}
 
#content{
        background-color: #9ACD32;
        padding: 0 0 0 0;
        margin-bottom: 45px;
}
#content-p {
        background-color: #363636;
        padding: 0 0 0 0;
        margin-bottom: 45px;
}

#rechts {
        background-color: #363636;
        padding: 10px 15px 10px 15px;
}
 
#footer{
        background-color: grey;
        height: 23px;
        text-align: center;
}

#footer_linxs {
        background-color: grey;
        height: 40px;
        width: 300px;
        float: left;
}

/* DE CODE VOOR HET NAVIGATIE-MENU */
#nav a {
        height: 10px; /* was 16px; verschuiving van ...?*/
        text-align: center; /*left;*/ 
        display: block;
        border: 0; 
        white-space: nowrap;
        padding: 7px; /* beter in em ?; */
}
/* menu at rest */
#nav a:link, #nav a:visited, #nav a:active {
        background-color: silver;
        color: black; 
        text-decoration:none;
}
/* menu on mouse-over */
#nav a:hover {
        color: #ffffff;
        background-color: grey;
        text-decoration: none;
}
 
#nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
}
 
#nav li {
        float: left;
        position: relative;
        height: 40px;
        width: 19.5%;
				background-image: url(trans-gif-1x1.gif);/* space-1x1.gif: voorkomt dichtklappen menu*/
}

#nav li.smal {width: 10.98%;} /* toegevoegd voor kleiner menu-blok voor "home" en "contact" */

#nav ul ul {
        position: absolute;
        display: none;
}
 
#nav ul ul li {
        display: block;
        width: 100%;
}
 
#nav li:hover {
        cursor:pointer;
				
}
 
#nav li:hover ul {
        display:block;
}

/* FONTS_LETTERS*/
.h1titel {
font-family: "verdana", arial, helvetica, sans-serif;
text-align: center;
letter-spacing:1.5em ;
color: #daa520;
font-weight: bold;
font-size: 160%;
margin:0 0 0 0;
border: 0;
padding: 5px 0 5px 20px;
}

.h2subtitel {
font-family: "arial", helvetica, sans-serif;
text-align: center;
letter-spacing:0.5em;
color: #c0c0c0;
font-size: 90%;
margin: 5px 0 10px 0;
border: 0;
padding: 0;
}

.h3subsubtitel{
font-family: "arial", helvetica, sans-serif;
text-align: center;
letter-spacing:0.4em;
color: #daa520;
font-style: italic;
font-size: 70%;
margin:0 0 0 0;
border: 0;
padding: 0;
}

.tekst-linx {
font-family: "arial", helvetica, sans-serif;
text-align: center;
letter-spacing:0.2em;
color: #daa520;
font-style: italic;
font-size: 100%;
margin:0 0 0 0;
text-decoration: none;
padding: 0;
}

.h2contenttitel {
font-family: "arial", helvetica, sans-serif;
letter-spacing:0.2em;
color: #000000;
font-size: 110%;
margin: 30px 0 10px 70px;
border: 0;
padding: 0;
}

/*worden deze nog gebruikt? 
.h2caption {
font-family: "helvetica", arial, sans-serif;
text-align: left;
letter-spacing:0.1em;
line-height: 20px;
color: #c0c0c0;
font-size: 90%;
margin: 5px 0 5px 0;
border: 0;
padding: 0;
}

.h2tabel-V {
font-family: "arial", helvetica, sans-serif;
text-align: left;
letter-spacing:0em;
color: #daa520;
font-size: 80%;
margin: 5px 0 5px 0;
border: 0;
padding: 0;
}

.tabeltekst {
font-family:  arial, sans-serif;
color: #ffffff;
text-align: right;
font-size: 80%;
margin:0 0 0 0;
border: none;
}
*/

.medewerkers {
font-family: helvetica, sans-serif; 
font-style: italic; 
font-size: 90%; 
font-weight: bold; 
color: grey;
margin: 10px 0 10px 80px; 
text-decoration: none;
}

.h4_kolom-onderschrift {
font-family: "helvetica" , verdana, arial, sans-serif;
color: #595999;
font: bold;
font-size: 0.8em;
margin:0 0 0 0;
border: 0;
padding: 10px 0 5px 20px;
text-decoration: none;
}

.h4_opera-onderschrift {
font-family: "helvetica" , verdana, arial, sans-serif;
color: #595999;
font: bold;
font-size: 0.8em;
margin:0 0 0 0;
border: 0;
padding: 10px 0 5px 35%;
text-decoration: none;
}

.h4_comp-tekst {
font-family: "helvetica" , verdana, arial, sans-serif;
color: #daa520; /*#f5f5f5;*/
font: bold;
font-size: 0.8em;
margin:0 0 0 0;
border: 0;
padding: 10px 0 5px 12px;
text-decoration: none;
text-align: center;
}

.contenttekst {
font-family: "helvetica" , arial, sans-serif;
line-height: 17px;
text-align: justify; 
color: #000000;
font: normal;
font-size: 80%;
margin:0 0 0 0;
border: none;
padding: 10px 60px 10px 60px;
}

.form-kopje {
font-family: "Times New Roman", Garamond, arial, helvetica, sans-serif;
text-align: left;
letter-spacing: 0;
color: blue;
font-style: bold;
font-size: 1.7em;
margin:0 0 0 0;
border: 0;
padding: 0;
}

.form-tekst {
font-family: "helvetica", Times New Roman, Garamond, sans-serif;
text-align: left;
letter-spacing: 0;
/*word-spacing: 0.5em*/
line-height: 17px;
color: black;
font-size: 1.4em;
margin:0 10px 0 0;
border: 0;
padding: 0;
}

.footertekst-boven {
font-family: verdana, "arial", helvetica, sans-serif;
color: #363636;
font-size: 80%;
font-style: bold;
margin: 0 0 0 0;
border: 0;
padding: 0;
}

.footertekst-onder {
font-family: "arial", helvetica, sans-serif;
color: #000000;
font-style: italic;
font-size: 75%;
margin: 5px 0 0 0px;
border: 0;
padding: 3px 0 0 0;
}

/* TAAL-VLAGGEN*/
img.catvlag {
	padding: 0;
	margin:10px 30px 5px 20px;
	border: 10px;
}

img.duitsvlag {
	padding: 0;
	margin:10px 30px 5px 20px;
	border: 10px;
}

img.nedvlag {
	padding: 0;
	margin: 10px 30px 5px 20px;
	border: 10px;
}

img.engvlag {
	padding: 0;
	margin: 10px 30px 5px 20px;
	border: 10px;
}

img.fravlag {
	padding: 0;
	margin: 10px 30px 5px 20px;
	border: 10px;
}

img.casvlag {
	padding: 0;
	margin:10px 30px 5px 20px;
	border: 10px;
}

/* LINKER-KOLOM FOTO´s
als ik van .lk_foto1 img.lk_foto1 maak dan valt de border weg.
a = voorgrond-foto; b = achtergrond-foto */
.lk_foto1a {
	padding: 5px;
	border: #daa520 10px ridge;
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.lk_foto1b {
	padding: 0;
	border: #daa520 10px ridge;
	margin-top: 20px; 
	margin-right: 0;
	margin-bottom: 45px;
	margin-left: 0;
}

.lk_foto2a {
	padding: 5px;
	border: #daa520 10px ridge;
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.lk_foto2b {
	padding: 0;
	border: #daa520 10px ridge;
	margin-top: 39px; 
	margin-right: 0;
	margin-bottom: 45px;
	margin-left: 0;
}

.lk_foto3a {
	padding: 5px;
	border:#daa520 10px ridge; 
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.lk_foto3b {
	padding: 0;
	border: #daa520 10px ridge;
	margin-top: 39px; 
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
}

/* POGING om de foto´s in de linker- en rechterkolom bij elke schermgrootte te centreren; maar ik krijg nu geen verticale ruimte tussen de foto´s.
.lk_foto1a {
	padding: 5px;
	border: #daa520 10px ridge;
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}

.lk_foto1b {
	padding: 0;
	border: #daa520 10px ridge;
	display: block;
	margin: 0 auto;
  text-align: center;
}

.lk_foto2a {
	padding: 5px;
	border: #daa520 10px ridge;
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.lk_foto2b {
	padding: 0;
	border: #daa520 10px ridge;
	display: block;
	margin: 0 auto;
  text-align: center;
}

.lk_foto3a {
	padding: 5px;
	border:#daa520 10px ridge; 
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.lk_foto3b {
	padding: 0;
	border: #daa520 10px ridge;
	display: block;
	margin: 0 auto;
  text-align: center;
}*/

/* code voor muisover naar detail*/
div#links a {display: block; width: 190px; height: 111px;}
div#links a:hover img {display: none;}
a.lk_foto1b:hover {background: url(detail_stieren.jpg);}


div#links a {display: block; width: 190px; height: 111px;}
div#links a:hover img {display: none;}
a.lk_foto2b:hover {background: url(detail_hooischelf.jpg);}

div#links a {display: block; width: 190px; height: 111px;}
div#links a:hover img {display: none;}
a.lk_foto3b:hover {background: url(detail_stratenmaker.jpg);}

/* RECHTER-KOLOM FOTO´s*/
.rk_foto1a {
	padding: 5px;
	border:  grey 10px solid;
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px; /* pm -75px; voor >1300 resolutie-schermen; 2b dan ook aanpassen */
}
.rk_foto1b {
	padding: 0;
	border:  grey 10px solid;
	margin-top: 20px; 
	margin-right: 0;
	margin-bottom: 45px;
	margin-left: 0;
}

.rk_foto2a {
	padding: 5px;
	border:  grey 10px solid;
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.rk_foto2b {
padding: 0;
	border:  grey 10px solid;
	margin-top: 39px; 
	margin-right: 0;
	margin-bottom: 45px;
	margin-left: 0;
}

.rk_foto3a {
	padding: 5px;
	border: grey 10px solid; 
	margin-top: -10px; 
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}
.rk_foto3b {
	padding: 0;
	border:  grey 10px solid;
	margin-top: 39px; 
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
}

div#rechts a {display: block; width: 190px; height: 111px;}
div#rechts a:hover img {display: none;}
a.rk_foto1b:hover {background: url(DC_muisover.jpg);}

div#rechts a {display: block; width: 190px; height: 111px;}
div#rechts a:hover img {display: none;}
a.rk_foto2b:hover {background: url(detail_sarsuela.jpg);}

div#rechts a {display: block; width: 190px; height: 111px;}
div#rechts a:hover img {display: none;}
a.rk_foto3b:hover {background: url(detail_cab.jpg);}

.foto-talen {
		display:block;
   	margin:0 auto;
   	text-align:center;
}

/* MUIS-OVERS*/
.muisoverlogo{
border: none;
padding: 0 0 0 0;
repeat: no; 
position: absolute;
left: 0%;
top: 2%; }

div#logo a {
display: block; 
width: 70px; 
height: 70px; 
margin:0 0 0 20px;} /* margin zet het 1e plaatje 20px van de linkerrand */

div#logo a:hover img {display: none;}
a.muisoverlogo:hover {background: url(earth_M.jpg); }

#content .muisoverdiafragma {
		padding: 0; /* hulpmiddel: 1px solid yellow;*/
		border: none;
		margin-top: 12px; /*Plaatsing diafragmaplaatje in de CONTENT */
		margin-left: 30px;
		position: absolute;
	
}
/* Plaatsing vh diafragmaplaatje in de CONTENT */
#content .godver {
		padding: 0; /* hulpmiddel: 1px solid red;*/
		border: none;
		position: absolute;
		top: 42%;/*35%; */
		left: 39%; /*41%;*/
}

div#content a {display: block; width: 220px; height: 180px;}
div#content a:hover img {display: none;}
a.godver:hover {background: url(earth_HH&F2.jpg);}

/* DE FOTO-LINKS van submenu "COMPOSITIES" naar de foto-video´s*/
img.foto-video-link {
		padding: 0;
		border: 0;
		display:block; /* laatste 3 regels voor foto centreren */
   	margin:0 auto;
   	text-align:center;
}

/*.muisoverfilosofie3{
border: grey 6px solid;
float: left;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}

div#content a {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.muisoverfilosofie3:hover {background: url(detail_tokyo-museum.jpg);
position: relative;
}*/

	/* CODE MAIL_LINK orgineel zie: orgineel_GB_H1_copie*/
#footer_linxs .mail-link {font-family: helvetica, sans-serif; font-style: italic; 
font-size: 110%; 
font-weight: bold; 
color: #daa520; 
text-decoration: none;
}
#footer_linxs a:hover{
font-size: 130%;
}
/* kleurverandering van email-link bij activeren link*/
#footer_linxs a:active{
color: blue;
} 

/* CONTENT: TEKST-OMLOOP EN (DETAIL) FOTO´s*/
#content img.tekstomloop {
float: right;
padding: 0;
border: 5px grey solid;
margin: 0;
margin-top: -5px; 
margin-right: -5px;
margin-bottom: 0;
margin-left: 0;
}

#content .foto-niepce{
border: grey 5px solid;
float: right;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
#content a.foto-niepce {display: block; width: 160px; height: 120px;}
#content a:hover img {display: none;}
a.foto-niepce:hover {background: url(detail_Niepce.jpg);
position: relative;
}

#content .foto-berlijn{
border: grey 5px solid;
float: left;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-berlijn {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-berlijn:hover {background: url(detail_berlijnsemuur.jpg);
position: relative;
}

#content .foto-people{
border: grey 5px solid;
float: right;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-people {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-people:hover {background: url(detail_people.jpg);
position: relative;
}

#content .foto-vrouwen-vinger{
border: grey 5px solid;
float: right;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-vrouwen-vinger {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-vrouwen-vinger:hover {background: url(detail_vrouwen-vinger.jpg);
position: relative;
}

#content .foto-tokyo{
border: grey 5px solid;
float: left;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-tokyo {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-tokyo:hover {background: url(detail_tokyo-museum.jpg);
position: relative;
}

#content .foto-wasvrouwen{
border: grey 5px solid;
float: right;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-wasvrouwen {display: block; width: 160px; height: 120px;}
div#content a:hover img {display: none;}
a.foto-wasvrouwen:hover {background: url(detail_wasvrouwen.jpg);
position: relative;
}

#content .foto-lubitel{
border: grey 5px solid;
float: right;
margin-top: 20px; 
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
div#content a.foto-lubitel {display: block; width: 100px; height: 133px;}
div#content a:hover img {display: none;}
a.foto-lubitel:hover {background: url(herman_detail.jpg);
position: relative;
}
/* CONTENT: verandering kleur en grootte vd LINK´s BIJ CONTENT-TEKSTEN zie orgineel_GG_H1_copie*/
#content .content-link {
display: inline;
font-family: helvetica, sans-serif;
font-style: italic;
font-size: 110%;
font-weight: bold;
color: #2E8B57; /*#daa520;*/
text-decoration: none;
text-align: right;}

#content a:hover{
font-size: 120%;
}

#content a:active{
color: blue;
}

#content .content-link2 {
display: inline;
font-family: helvetica, sans-serif; 
font-style: italic; 
font-size: 100%; 
font-weight: bold; 
color: black; 
text-decoration: none;
}

/* ARRANGEMENTEN TABEL
table{
width: 650px;
}

td, th{
border: 1px solid black;
}*/

/* FORMULIER 
Eerst gemaaktin aparte html en css en dat werkte, maar geplakt in de content van het MOVIMAG-formulier, werkt het niet.*/
.label {
display: block;
}

.regel {
width: 16px;
padding: 4px 4px 4px 4px;
display: inline;
margin: 5px 20px 5px 5px; /* 2de afstand tussen 2 items; 4de: afstand tussen tekst en blokje*/
} 

/* fieldset: de omlijsting van de groep*/
fieldset{
width: 420px;
margin: 0 0 10px 30px; /* de afstand van de borderlijn tot de contentbox */
padding: 5px 0 10px 10px; /* de afstand van de blokjes tot de rand */
border: 1px solid black;
font-family: verdana;
font-size: 0.6em; /* grootte van alle letters in fieldset */
}
/* legend gaat alleen over het kopje */
legend{
background-color: #daa520;
color: black; /* tekstkleur van kopje */
font-weight: bold;
padding: 4px 6px 4px 6px; /* padding van kopje in zijn blokje */
text-transform: uppercase;
margin: 0 0 5px 0;
font-size: 1.4em; /* grootte van kopje; gerelateerd aan font-size fieldset */
}

input{
margin: 2px 0 9px 10px; /* positie van invulblokje tov de koptekst */
padding: 1px 0 2px 3px; /* positie van invultekst in invulblokje */
border: 1px solid #daa520; /*dikte, stijl en randkleur van invulblokje */
background-color: #DDD; /*binnen-kleur van invulblokje */
width: 200px; /*grootte van alle tekstblokjes; ook van "cook" en "wissen" */
}

.px-ratio {
margin: 2px 0 9px 10px;
padding: 1px 0 2px 3px;
border: 1px solid #daa520;
background-color: #f5f5f5;
width: 85px; /* grootte van pixel-ratio tekstveld*/
}

/*.doel-instelling {
margin: 2px 0 9px 10px;
padding: 1px 0 2px 3px;
border: 1px solid #daa520;
background-color: #f5f5f5;
width: 350px;
}*/

.bg-kleur {
margin: 2px 0 9px 10px;
padding: 1px 0 2px 3px;
border: 1px solid #daa520;
background-color: #f5f5f5;
width: 350px;
}

.button{
background-color: #000;
color: #daa520; /* kleur van tekst in kopje */
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
} 

select{ /* code alleen voor het aanhef-blokje */
margin: 2px 0 15px 0;
padding: 1px 0 2px 3px;
border: 3px solid purple;
background-color: yellow;
display: block;
}
/* EINDE FORMULIER*/

/* CSS VOOR FLASH-video */
<script> type="text/javascript">
jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf",
file: "/uploads/video.mp4",
height: 270,
width: 480
});
</script>

[herman]

Mocht je ook inhoudelijk commentaar hebben (tekst), daar sta ik open voor.
grt herman

[herman]

Helaas, ik moet nu naar mijn optrekje op "el campo".
Mijn tijd zit er op. Mijn gastvrouw wil haar prive.
Tot maandag.
Als ik kan kijk ik morgen nog even naar de mail.
grt herman.

[Goeroeboeroe]

Dat ziet er hartstikke goed uit. Complimenten! Ik kan zien dat je erg netjes en gestructureerd hebt gewerkt, dat heb ik wel 'ns anders gezien. En dat html-kit is inderdaad goed, want er wordt niet allerlei troep toegevoegd zoals in tig peperdure programma's. De meeste dingen die ik heb te melden zijn cosmetisch van aard. Het staat enigszins door elkaar heen, maar dat lijkt me geen probleem.
Het ziet er in Firefox, Opera, Google Chrome, Internet Explorer 8 en 9 en Safari (Op Windows XP en 7 en op OS X) vrijwel hetzelfde uit, dus dezelfde oplossingen zullen overal werken, met 'n beetje geluk. In IE 7 ziet het er redelijk uit, maar er zijn wel afwijkingen. Maar die browser wordt steeds minder ondersteund, dus dat lijkt me niet zo'n probleem. Het gaat om kleinere afwijkingen in de marges en zo, en 'n grote, maar daar volgt 'n reparatie voor.
Schrik niet van de lengte: het gaat meestal om hele kleine dingetjes.
O ja, de code hier neerzetten hoeft wat mij betreft niet meer. Ik kan het nu online bekijken, en inmiddels heeft elke browser hulpmiddelen om dingen gelijk uit te proberen. Daarbij wordt gebruik gemaakt van de code op je site. Dat werkt met veel meer zekerheid (en veel sneller en makkelijker) dan het hier te bekijken. De ervaring heeft me geleerd dat ik hier dan bloedig zit te zweten op code, die jij inmiddels net hebt veranderd. Als ik iets bekijk en jij wijzigt het, merk ik dat gelijk omdat het in beide gevallen om de code op je site gaat. Daarmee voorkom je dat langs elkaar heen werken grotendeels.
Het beste werkt het als jij deze veranderingen aanbrengt (of niet natuurlijk, als je niet wilt). Als het dan gewijzigd op de site staat, kan ik het eventueel nog 'ns bekijken, enz.

* Het werkt op 'n iPad in Safari en Opera Mini, en op Android 4.03 ('n tablet) in Firefox, Android browser, Google Chrome en Opera Mobile. Ook het menu werkt. Het werkt dus, enigszins tot mijn verbazing, gewoon goed en ziet er ook nog prima uit.

* Het werkt zelfs op 'n smartphone van 320x240 px in Opera Mini en Android browser (Android 2.3.6). Niet echt handig op zo'n priegelding, maar het kan. Dat verbaast me nog meer, aangezien er niets is aangepast voor zo'n klein touchscreen. Ik heb dit mini-ding verder niet echt goed bekeken: het werkt, en meer kun je er niet van verwachten.

* Het uitklapmenu verdwijnt, op een kleiner scherm, achter de afbeelding in het midden. Dat kun je verhelpen door aan de css bij #nav ul toe te voegen:

Code: Selecteer alles

position: relative;
z-index: 100;

De position heeft geen enkele invloed, maar is nodig om de z-index te kunnen gebruiken. De z-index is naast breedte en hoogte de derde dimensie: wat boven wat komt te staan. Door die te verhogen, komt het uitklapmenu nu óver de afbeelding te staan.

* In vensters smaller dan ongeveer 900 px komen de thumbs over de tekst in het midden te staan, die daardoor niet meer is te lezen. Als je aan #main_container toevoegt

Code: Selecteer alles

min-width: 900px;

gebeurt dit niet meer. Op een kleiner scherm verschijnt nu 'n horizontale scrollbalk.

* De thumbs links en rechts kun je heel simpel netjes horizontaal uitlijnen. Voor de thumbs links aan div#links a toevoegen:

Code: Selecteer alles

margin: 40px auto 0;

De marge van 40 px is voor de bovenkant, anders komen ze tegen elkaar te staan. Links is niets ingevuld, dus dat krijgt hetzelfde als rechts: auto. Dat betekent hier: evenveel. De marge links en rechts is nu altijd even groot (dit werkt alleen als het te centreren blok-element een breedte heeft, zoals hier het geval is. De <a> is een inline-element, maar er is met display: block; een blok-element van gemaakt, en dan werkt dit.)
Rechts net zo. Aan div#rechts a toevoegen

Code: Selecteer alles

margin: 40px auto 0;

* De thumbs linken naar de muisover-afbeelding. Als je klikt op 'n thumb, zie je de muisover op 'n nieuwe pagina. Als je (voorbeeld)

Code: Selecteer alles

<a href="detail_stieren.jpg" title="bulls on the street" class="lk_foto1b">
<img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" border="none" class="lk_foto1a">

verandert naar

Code: Selecteer alles

<a href="#" title="bulls on the street" class="lk_foto1b"><img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a">

gebeurt dit niet meer. (De verdwenen border="0" kom ik later nog op.)
Title mag weg, mag je ook laten staan. Die verschijnt bij 'n muisover, meer niet. Alt 'moet' wel.
Je kunt ook in de href de naam van de grote afbeelding zetten, dan wordt die geopend als je op de thumb klikt.

* In Internet Explorer 7 staan sommige ingangen van het dropdownmenu niet onder elkaar, maar naast elkaar. Het werkt wel, maar het is verwarrend, dus dit is meer dan 'n afwijking in de marge of zo. De oplossing:

Code: Selecteer alles

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<[endif]-->

Dit moet ónder de link naar je normale css komen, zodat het die eventueel overrulet.
Dit zien alle browsers als commentaar, omdat het tussen commentaartags staat. Maar Microsoft gebruikt het om dingen voor IE te kunnen toevoegen, hier alleen versie 7.
Maak 'n nieuw css-bestand met als naam ie7.css (of wat je wilt, hierboven dan ook even veranderen).
Dat bestand werkt vervolgens helemaal normaal, maar het is alleen voor IE 7 te vinden. Daarin zet je:

Code: Selecteer alles

#nav ul ul {width: 100%;}

Nu toont ook deze door een sadist ontworpen browser het onder elkaar.

* De <title> tag in de <head>. Die moet véél langer, ongeveer even lang als de description. Erin kan het beste de omschrijving van de pagina staan: voor elke pagina 'n (iets) andere omschrijving. De title is van belang voor zoekmachines, die hechten er enige waarde aan.

* De <description> is wat betreft lengte goed, maar levert 'n fikse kans op 'n straf op bij Google (en anderen?) omdat het als keyword stuffing kan worden gezien. De description is wat je vaak ziet als je zoekt in een zoekmachine: de korte tekst bij de resultaten. (Kan ook andere tekst zijn, maar dit wordt vaak door Google c.s. gebruikt.) De lengte is goed, maar het moet normale menselijke tekst zijn. Bij jou staan aan het eind losse woorden, en dat soort dingen wordt vaak gebruikt door mensen die een hogere positie proberen te halen. Dat lukt heel vaak, maar uiteindelijk wordt het opgemerkt en dan zak je enorm omlaag of je wordt helemaal uit de zoekindex gegooid.
Dus gewoon 'n normale menselijke zin, op elke pagina aangepast voor die pagina. Die zin mag hetzelfde zijn als die in <title> is gebruikt, maar dat hoeft niet. En geen woorden als 'corporate_images', want dat wordt alleen gevonden als mensen daar létterlijk op zoeken. Dat moet 'corporate images' zijn of 'corporate-images'. Weinig mensen zullen op dat woord met _ zoeken. (Tenzij je natuurlijk op exact corporate_images met _ wilt worden gevonden...)

* In je <head> kun je nog 'n meta-tag toevoegen:

Code: Selecteer alles

<meta name="keywords" content="film, movie, sinterklaas, kerstman">

Hierin kun je sleutelwoorden zettten. Hierin komen ook de losse woorden aan het eind van je <description>. Tussen de woorden een komma, max. ongeveer 20 woorden. Mogen per pagina verschillen. Google negeert ze, maar Bing en Yahoo! niet.

.h1titel heeft een letter-spacing van 1.5em. Die zou ik 1.3em maken, want op iets kleinere schermen past de titel nu niet meer tussen de vlaggen en de M links, waardoor hij onder de tekst in het midden floept. Met 1.3em blijf hij gewoon staan.

* Op regel 29 (bij mij) in de html staat een <br> tussen de bovenste en onderste drie vlaggen. Die moet weg. Links en afbeeldingen zijn inline-elementen: als het niet meer op de regel past, wordt het op de volgende regel gezet. Op een smaller scherm passen twee vlaggen naast elkaar. Maar die <br> zorgt ervoor, dat op de tweede regel maar één vlag komt.

* Eigenlijk is de <h1> voor de belangrijkste titel. Jij hebt hem voor het logo gebruikt. Zelfde geldt voor de ondertitels daar. Maar je hoort eigenlijk ook de volgorde van <h1>, <h2>, enz. aan te houden. Je kunt die <h1> dus niet zonder meer voor de paginatitel gebruiken. Daar moet je even over nadenken, of dat beter kan. Maar om dat te veranderen, moet je dus gigantisch aan de pagina gaan sleutelen. Het is slechts één van de ongeveer 200 dingen die bij Google meespelen, en jouw pagina is al veel beter dan de gemiddelde, dus of dat de moeite waard is.
(Om de volgorde van <h1>, <h2>, enz. aan te houden, moeten waarschijnlijk de linker- en rechterkolom met thumbs omlaag. Dan werkt floaten niet meer goed. Ken je dat verhaal over die tafel die één te lange poot had, die moest worden afgezaagd? Zoiets.)

* Nog 'n nadenksel, en 'n vraag aan exposureroom mogelijk: kan die site van hun niet in 'n iframe worden geplaatst? Dan blijven mensen op jouw site, het filmpje word in 'n venster getoond. Ik denk niet dat ze dat willen, want dan zie je hun site niet meer, en zij moeten ook ergens van leven. Maar je zou kunnen vragen of dat kan, en of ze daar dan 'n stukje code voor hebben, want daar zal dan wel van allerlei exotisch in moeten staan.
Overigens is dit ook niet ongebruikelijk, zoals je het nu hebt. En om dit zelf te maken... Zelfs op die smartphone werkt het goed, de filmpjes. Het zijn niet alleen de maten. Als je naar iemand in 'n Spaans bergdorp met 'n smartphone en krakkemikkige verbinding 'n film op bioscoopformaat stuur, levert dat mogelijk geen enthousiaste klant op. Ik bedoel maar: je moet ook de maat van de film aanpassen enz. Dat doet die site allemaal keurig. Je kunt dat wel zelf maken, maar dat is héél ingewikkeld. Ik neem aan dat die site dat wel goed doet, want die doet alleen maar dat. En wat ik zag werkt prima.

* De validator had nog wat te klagen. Een validator kijkt naar syntactische fouten in de code. Vaak zijn die niet ernstig, maar soms wel. Als het kan, is gevalideerde code beter. Je weet dan redelijk zeker dat het altijd goed blijft werken.
De html:

Op regel 18 (bij mij) staat in de <a> een width en een height. Dat kan niet. De <img> in die <a> heeft een width en een height en dat is prima. Bij de <a> moeten width en height weg.

Op regel 19 staat bij <img src="logo_M_70-gr.jpg" border="none". Die border moet weg. Waarschijnlijk kan dat probleemloos, en anders moet dat in de css worden aangegeven. Maar volgens mij staat dat al ergens in je css. Mocht er 'n border verschijnen, dan merken we dat wel.

Op regel 126 staat als naam van een afbeelding earth_HH&F2.jpg
Het teken & kan grote problemen geven in namen van bestanden. Je kunt het beter weghalen. (Als je het besllist wilt gebruiken, moet je geen & maar & gebruiken, maar weghalen is echt beter. & is een gereserveerd teken, vandaar.)
Bij overlezen twijfel ik, omdat ik dit nooit gebruik. In de html zou je & moeten gebruiken, maar in een bestandsnaam moet je waarschijnlijk 'n andere code gebruiken. Virtuele multipele persoonlijkheid, vrees ik, echt beter weg dat teken.

Regel 135. Er staat

Code: Selecteer alles

class="mail-link"><!--  code voor de tekst: <h3 class="tekst-linx">--> movimag@gmail.com</h3>

Dat is verkeerd genest. De openings <h3> is weggecommentarieerd, maar de </h3> niet. Of allebei gebruiken, of de <h3> ook wegcommentariëren.

* De laatste serie, in de css.
Regel 80 (steeds bij mij, kan 'n regeltje schelen).
Bij #title staan als tweede kleur navy. Die moet weg. Of de eerste moet weg, dat kan ook.

Regel 289 bij h4_kolom-onderschrift. font: bold; moet zijn: font-weight: bold;

Regel 300 bij .h4_opera-onderschrift idem.

Regel 311 bij .h4_comp-tekst idem.

Regel 325 bij .contenttekst idem.

Regel 337 bij .form-kopje. font-style: bold; moet zijn: font-weight: bold;

Regel 361 bij .footertekst-boven idem.

Regel 606 bij .muisoverlogo. repeat: no moet weg. Dat is voor een <img>, niet voor 'n <a>

Helemaal onderaan, onder /* EINDE FORMULIER */ staat JavaScript in de css. Dat is een vergissing, neem ik aan? Omdat het helemaal onderaan staat zal het waarschijnlijk geen problemen opleveren, maar het hoort er niet.

Nou, je hebt even wat te lezen. En nogmaals: dit valt dus heel erg mee. Er zit eigenlijk niets in wat echt vreselijk verkeerd is. Nogmaals complimenten.

[herman]

Bedankt voor je commentaar, GB.
En ook complimenten voor jou, dat je mijn wrakke bootje langs de klippen van de "Straat van Magellaan hebt geleid (net het boek van Bruce Chatwin gelezen).
Wat betreft de css code. Ik wist niet dat jij die ook kon zien (ik dacht alleen de html-broncode). Daarom heb ik hem op je site gezet.
Mijn foutje dat het de 1e keer via de hosting niet werkte, was dat ik index-movimag had gebruikt.
Dat was ik vergeten te veranderen.

Wat betreft je commentaar:
- Een nieuw css bestand. > Als ik het goed begrijp maak ik dus 2 css bestanden. Een "normale" en een voor ie7.
- wat de vlaggen betreft wilde ik dat er bij elke schermgrootte 2 rijen staan. Zonder <br> kunnen ze dus allemaal naast elkaar kunnen staan. Op zich vind ik dat ook geen erg groot probleem.
- de h1 laat ik nog even zo, evenals de "description" en de "title" in alle paginas, die verander ik als alles goed werkt (ik verander al wel de index).
- wat betreft de "formulieren" (om efficient te werken heb ik die nodig): Ik heb van mijn hosting inmiddels ook een e-mail adres gekregen: webmail.movimag.com maar ik weet niet of het verstandig is dat te gebruiken (bvb bij evt. overgang naar andere host -en dus andere-mailadres-. Wat ik niet hoop overigens.) Maar ik heb natuurlijk wel hun php nodig. Dus ...

- Het verhaal over die tafel ken ik: ... drie keer gezaagd en nog te kort, zei de klusjesman met het zweet des aanschijns op zijn voorhoofd.
- X-room had ik al benaderd maar nog geen reactie gehad. Om een iframe vragen dus.
- JavaScript in de css. Dat was bedoeld voor mijn video-site. Die had ik er nog niet ingezet. Maar ik zal hem er nu in coderen.
Wat video betreft weet ik nog steeds wat ik het beste kan doen. Ik wil graag enkele voorbeelden op mijn site, pm 5 compilaties van zo´n 30 sec., maar dan van "hoge" kwaliteit. Met de decodeer kwaliteit van flash heb ik niet zo´n goede ervaring (kan ook aan mij liggen). Die gebruiken ze ook bij X-posure-room. Het werkt zo: Ik maak een "render" met de voorgeschreven instellingen van XR, upload de video naar XR, zij decoderen hem weer en maken een geautomatiseerde flash versie (in 3 formaten). En die Flash codering is voor mijn composities niet altijd gunstig.
Ik gebruik het liefste H264/acc voor mpeg4 "video/mp4", redelijk goede kwaliteit met weinig data. Maar dan, is mij verteld, moet ik voor de bereikbaarheid nog 2 andere codeer-containers gebruiken: "video/ogg" en "video/webm". Dat betekent dus drie bestanden op de browser. Ik denk nu wel dat dat kan qua MB ruimte.
Ik heb toch stevig wat kritiek gekregen op de kwaliteit van mijn producten op X-room. En ik deel die kritiek: het is een beetje schokkerig, niet vloeiend en dat schrikt toch af. Op DVD kan ik een bitrate gebruiken van zo´n 8 milj. bps maar dan schiet de bestandsgrootte natuurlijk ook omhoog. Wat mijn compilaties op mijn site betreft moet ik daarmee nog een beetje experimenteren.
- Wat bedoel je met weggecommentarieerd? In ieder geval ga ik die overbodige h3 er uithalen.
Ik ga de veranderingen nu doorvoeren.

Groetjes Herman

[Goeroeboeroe]

- Een nieuw css bestand. > Als ik het goed begrijp maak ik dus 2 css bestanden. Een "normale" en een voor ie7.

Klopt. Vaak heb je aparte bestanden nodig voor IE 6/7/8/9. Wel steeds minder, gelukkig.

wat de vlaggen betreft wilde ik dat er bij elke schermgrootte 2 rijen staan. Zonder <br> kunnen ze dus allemaal naast elkaar kunnen staan. Op zich vind ik dat ook geen erg groot probleem.

Op een smal scherm ziet het er nu zo uit:

vlaggen.jpg (1.72 KiB) 43746 keer bekeken

Je kunt het op een breder scherm in twee rijen houden door een maximumbreedte te geven aan #taal_container. Daar staat nu een breedte van 25%. Als je daar max-width: 200px; aan toevoegt, is er nooit genoeg ruimte voor de vlaggen om naast elkaar te staan en zul je dus altijd twee rijen hebben (en drie op 'n smaller scherm). Even uitproberen hoeveel px dat moet zijn om de vierde vlag altijd op 'n nieuwe regel te krijgen, 200 px is zomaar 'n wild getal.

webmail.movimag.com maar ik weet niet of het verstandig is dat te gebruiken (bvb bij evt. overgang naar andere host -en dus andere-mailadres-. Wat ik niet hoop overigens.)

Dat lijkt inderdaad 'n adres van je hoster. Je zou het op je site gewoon kunnen gebruiken bij het formulier, lijkt me, want als je ooit verandert van hoster, kun je het adres bij het formulier op je site ook gewoon veranderen naar 'n nieuwe hoster. Als e-mail-adres, tja. Dan loop je tegen dezelfde problemen aan als bij 'n verandering van provider. Dat kun je voorkomen door hotmail of gmail of zo, maar ik heb het persoonlijk niet zo op dat soort diensten.
Bij mij heb ik ingesteld dat mail naar info@css-voorbeelden. nl wordt doorgestuurd naar mijn eigen e-mail-adres. Meestal kun je bij 'n hoster eigen e-mail-adressen aanmaken. Dat zou je ook kunnen doen, en die dan doorsturen naar 'n eigen e-mail-adres.
Als je dan van hoster verandert, kun je bij die nieuwe hoster via het controlpanel gewoon weer opgeven dat mail moet worden doorgestuurd.

Over video kan ik helaas dus niet veel zeggen. Is een van de eerste dingen die ik weer ga oppikken, nu het iets rustiger is geworden op het formaten-front. Maar dat van die meerdere formaten, dat klopt helaas. Overigens gebruikt die videosite niet alleen flash, want het werkt ook op de iPad in Safari, en die weigert flash. Het blijft hoe dan ook 'n hoop werk, want eigenlijk moet je voor kleinere schermen ook nog kleinere filmpjes hebben. Maar die kwaliteit, dat is natuurlijk belangrijk, voor 'n demo. Ik heb daar niet zo op gelet, ik kijk meer als 'kijker', niet als opdrachtgever.
Ik denk trouwens dat je op 'n meer gespecialiseerde site (misschien het forum van die videosite?) meer kans hebt op goede antwoorden. Op de meeste forum zal de kwaliteit van 'n opname veel minder belangrijk zijn dan voor jou. Meestal zijn mensen al tevreden als het beweegt, terwijl het voor jou natuurlijk 'n visitekaartje is van wat je kunt.

Wat bedoel je met weggecommentarieerd? In ieder geval ga ik die overbodige h3 er uithalen.

Dat een deel van de <h3> tussen <!-- en --> staat, en 'n deel niet. Dat heet wegcommentariëren (ofuitcommentariëren, of andere fantasienamen die mijn spellingchecker geen van alle blijkt te kennen).

[Goeroeboeroe]

Wat ik nog vergeet: ja, ik kan je css bekijken. En JavaScript, en je html. Alleen dingen als php niet, want dat wordt op de server afgehandeld, en ik kan alleen zien wat er in mijn browser aankomt. Dat geldt trouwens voor iedereen. In het verleden kwam het nogal 'ns voor dat mensen opmerkingen in css of zo hadden staan, niet wetend dat dat gewoon openbaar is...
(Terzijde: diensten die tegen betaling het zogenaamd versleutelen, dat is echt doodordinaire oplichterij. Dat kan gewoon niet. Om het op je scherm te tonen, móét het worden gedownload. Je kunt het wel iets lastiger maken, maar meer niet.)
Als het bij jou kan vanwege installatieproblemen, zou je kunnen proberen om in Firefox de extensies
https://addons.mozilla.org/nl/firefox/addon/firebug/
en
https://addons.mozilla.org/nl/firefox/a ... developer/
te installeren.
Je kunt css en zo altijd bekijken. Maar deze extensies geven de mogelijkheid om dat op 'n zinvolle manier te doen. Bovendien kun je de css/html veranderen en zie je gelijk het resultaat. Waardoor het heel simpel is dingen uit te proberen, voordat je ze echt verandert. Zoals die max-width voor de vlaggen. Je verandert het aantal px net zolang, tot er maar drie naast elkaar kunnen.

[herman]

Verdomme, het is me niet gelukt vandaag.
Te lang met de video liggen klooien.
Niet met html en css maar om binnen een min. een leuke compilatie te maken.
Morgen dus.

groet Herman

[herman]

Buenos dias GB,

Met "frisse" moed gaan we weer aan de slag. " ", want fris is het hier niet meer. De zomer, alhoewel laat, is nu toch echt begonnen. Dwz dat de zon al om 9.30 begint te "branden"

Wat ik gisteren nog vergeten had te melden was dat het weghalen van "border=none" (in de html) er inderdaad een blauwe border verschijnt ook al staat bij de betreffende "class" in de css
.muisoverlogo{
border: none;
etc.
Ik heb wat geexperimenteerd maar kreeg hem niet weg.

... wordt doorgestuurd naar mijn eigen e-mail-adres. Meestal kun je bij 'n hoster eigen e-mail-adressen aanmaken.

Dat zou je ook kunnen doen, en die dan doorsturen naar 'n eigen e-mail-adres.

- Ehhh... hoe doe je dat, je eigen e-mail-adres maken? Ik snap niet goed hoe dat dan werkt.

- Ik weet niet of jij het al gezien hebt, maar als ik van de home-pag naar bvb "what is" ga, dan schuift het menu iets in elkaar (wordt iets kleiner). Van "home" naar "contact" gebeurt dat niet. Zou dat komen omdat in sommige paginas in de "content" te veel inhoud staat?

- En wat betreft de versleuteling van de css. Die hoef ik niet zo nodig geheim te houden. Ik was niet van plan daar onbetamelijke taal in te gebruiken. Of zijn aan openbaarheid nadelen verbonden?

Er is vandaag van alles tussendoor gekomen. Helaas.
Deze mail had ik vanmorgen geschreven maar nog niet gepost zie ik. Bij deze.
Dat "buenos dias" is dus niet meer zo van toepassing. Buenos noche is nu beter.
Morgen ga ik de verbeteringen opnieuw op de host zetten.
"Als god het wil", zeggen ze hier.

groeten Herman

PS: misschien handig om te weten: ik tik bij KIT wel erg veel zelf in.

[Goeroeboeroe]

Hoi,

Je hebt nu in de css bij .muisoverlogo staan: border: medium none;
O, ik zie dat dat trouwen op meer plaatsen staat. 'medium' geeft een middeldikke border, en none geeft geen border, dus dat kan niet samen.
Maar je moet de border niet weghalen bij de link .muisoverlogo, maar bij de <img>, want daar staat hij.

Die regels border: medium none; moet je óf weghalen (als ze niet nodig zijn); óf vervangen door alleen: border: none;

Voor .muisoverlogo wordt het dan:

Code: Selecteer alles

.muisoverlogo img {border: none;}

De <img> die binnnen het element met de class "muisoverlogo" zit, haal daar de border weg.
Je kunt proberen of 'n algemene regel ergens in je css werkt:

Code: Selecteer alles

img {border: none;}

Als er nergens bij 'n <img> 'n border wordt opgegeven, zou in principe deze regel álle borders moeten weghalen. Ben je in één keer klaar met alle afbeeldingen binnen links.
Je kunt ook proberen

Code: Selecteer alles

a img {border: none;}

Alleen de <img> 's die binnen een <a> staan.

Dat eigen e-mail-adres: ik heb een controlepaneel gekregen van mijn hoster, voor mijn site. Waarschijnlijk heb jij dat ook. Ik heb even gekeken, jij hebt cpanel, volgens de site van HostEasy. Dat ken ik niet, maar ik zie wel dat het kan daarin. (Kan trouwens denk ik inmiddels bij élke hoster.)
Het idee is dat je mensen 'n mogelijkheid geeft om e-mail te sturen naar 'n adres op jouw site, zoals bij mij i n f o@ c s s-v o o r b e e l d e n.nl
(De spaties staan erin tegen de spambots). Dat e-mail-adres staat op 'n paar plaatsen op mijn site. Dat voorkomt dat ik op mijn privé-adres allemaal vragen en zo krijg. (Dat doe ik soms wel, maar heel selectief.)
Dat e-mail-aders info...enz. staat dus gewoon in de html. (Maar drie keer of zo, alleen voor foto's van mensen die ik heb gebruikt). Vaak wordt het versleuteld tegen spambots, of het wordt geschreven zoals ik het hierboven deed.
In de html staat dus gewoon dat e-mail-adres, in tekstvorm of met 'n mailto (dat is dus niet voor 'n formulier, maar voor 'n gewone mail. Die mail wordt dan verzonden naar bijvoorbeeld film@m o v i m a g .com (zonder spaties), of welke naam je ook voor @zet (sommige woorden zijn vaak gereserveerd, zoals abuse om misbruik aan je hoster te melden.)
Nu heeft je site dus het e-mail-adres film@m o v i m a g.com. In cpanel moet je nu dat e-mail-adres aanmaken, zodat het echt bestaat. En vervolgens kun je in cpanel opgeven, dat mail die daar aankomt automatisch naar je échte mail moet worden doorgestuurd. Dus bijvoorbeeld gmail, of als je upc hebt als provider (zoals ik), naam-van-mij@upcmail.nl
Dit wordt dus door je hoster afgehandeld, jij stelt het alleen maar in.
Als je nou van hoster verandert, blijft het e-mail-adres van de site hetzelfde. Want je neemt de naam m o vim ag.com gewoon mee, dus ook film@m ovi mag .com (ik háát inmiddels spaties.) Het enige dat je bij 'n verhuizing naar 'nieuwe hoster moet doen, is weer in het controlepaneel van die nieuwe hoster het e-mail-adres aanmaken, zodat het werkt bij je nieuwe hoster, en weer laten doorsturen naar je échte mail-adres. Zo'n adres verhuist dus gewoon mee met je site.

Ik weet niet precies wat je bedoelt met dat het menu kleiner wordt, als je naar 'what is' gaat. Althans: ik weet het niet zeker. Bedoel je dat er dan rechts een scrollbalk verschijnt, waardoor het venster iets smaller wordt en dus een aantal onderdelen naar links schuiven? Als ik het venster iets lager maak, zie ik dat gebeuren. Als dat het is, kun je dat op twee manieren oplossen (nog wel meer, denk ik, maar even voor de vuist weg). Zorgt dat de content altijd ongeveer evenveel is, zodat er altijd of nooit een scrolbalk is. Dat is niet echt 'n ideale oplossing, denk ik.
Je kunt die scrollbalk rechts voorkomen, door te zorgen dat er bij meer tekst een scrollbalk direct naast de tekst komt te staan. Dat maakt in principe voor het scrollen niet uit, maar dan wordt het venster niet kleiner.
Als het dat is, moet je dat maar even laten weten, want dat is wat lastig, dus daar moet ik even voor puzzelen.

Nee, je kúnt je css juist niet versleutelen. Althans: niet echt goed. Toen mensen net begonnen met sites maken, was niet bekend dat je de broncode heel simpel kunt zien. Dus toen kwam het inderdaad wel 'ns voor dat er een of andere scheldkanonnade over 'n collega in stond, of zo.

Nou, ik hoor wel of die scrollbalk de boosdoener is.

[herman]

Goedemorgen GB,

back on the track.
Ik heb je post gelezen.

Je hebt nu in de css bij .muisoverlogo staan: border: medium none;

medium? (op meerdere plaatsen?) Dat staat er bij mij niet (bij de versie die ik nu op mij pc heb staan). En op de host heb ik nog niks veranderd want tot nu toe heb ik nog maar 1x geupload.

De <img> die binnnen het element met de class "muisoverlogo" zit, haal daar de border weg.

Je bedoelt in de html? Dit snap ik niet goed.

Ik heb .muisoverlogo img {border: none;} gedaan maar toen stond de bovenste foto (de maansverduistering) niet meer op dezelfde plek. Hij stond nu tegen de rand van de site aan.
Vervolgens heb ik dit weggehaald:
left: 0%;
top: 2%;
En nu staan ze weer boven elkaar.
Die "left" en "top" heb ik er eerder ingeschreven om de bovenste en de onderste foto op dezelfde plek te houden.
Overbodig dus met jouw toevoeging.

a img {border: none;} (zonder de eerdere toevoeging van "img" bij .muisoverlogo, werkt ook. Bedankt.

Het e-mail verhaal.
Oke, dus ik moet bij mijn hoster (cpanel) een e-mail adres aanmaken. Misschien handig als ik dat maar direct doe, dan kan ik ´m in de site zetten. Maar het probleem met gmail (en bvb hotmail) blijft dus. Ik ben er ook niet zo happig op. Iedereen moest eigenlijk een vast adres krijgen, zoals je belastingnr.

Het verspringen van de containers (scrollbalk).
Sorry ik heb me verkeerd uitgedrukt met "... menu kleiner wordt".
Het volgend gebeurt:
(alleen niet bij de sites onder de submenus: "conditions" (onder movimag) en "conditions" (onder arrangements. Toeval?)
De title_container en de content_container verspringen (als je van de home-pagina via het menu/submenu de betreffende site activeert) iets naar links. Ook de logo-container en de linker-kolom verspringen dan een heel klein piepje.
Ik dacht dat het misschien aan de inhoud van de bijbehorende "content" zou kunnen liggen. Heb daar iets mee geprobeerd maar geen succes.

En nog iets anders.
Bij een schermbreedte van pm 1000 tot 1300 px staat de titel "MOVIMAG" in het midden. Als ik de site vergroot naar mijn totale schermbreedte (1920 px), staat het tamelijk naar rechts. Toch staat in
.h1titel en .h2subtitel en .h3subsubtitel (css): text-align: center;
De niet symetrisch gedefinieerde padding weghalen haalt niets uit voor de centrering (wel voor de afstand tot de bovenste site-rand). Hoe krijg ik dat goed?

Poeh, dit was het voor even.
Heb gisteren een denkfout mbt de video sites gemaakt, ga dat nu corrigeren en vanmiddag ga ik uitgaande van de index-pag weer copie en past-en. En dan gaat ie opnieuw naar de host.

Groeten Herman

[Goeroeboeroe]

Hoi,

Ik werk vanaf jouw site, zeg maar. Dus alles wat ik zeg, heeft betrekking op wat er op de site staat. Dat schrijf ik nog even voor de zekerheid, om misverstanden te voorkomen.
Ik beken dat ik je geheel valselijk heb beschuldigd van het gebruik van 'medium none' bij border. Ik heb me gek gezocht, maar ik heb de verklaring nu. Bij mij stond het namelijk echt in de css, als ik keek. En ik kijk dus in de css die op jouw site staat.
Het komt doordat je bij 'border: none;" gebruikt. De meeste mensen gebruiken 'border: 0;', omdat dat iets korter is. Beide mogen. Zodra je echter border gebruikt zonder breedte, wordt een standaardbreedte aangenomen: medium. Ook als daarna 'none' volgt, maakt niet uit. 'n Computer is nogal dogmatisch.
En een van mijn geweldige debugprogramma's is zo behulpzaam om daar $E$#*(&% spontaan 'medium' aan toe te voegen. Nou ja, behulpzaam: volgens mij is het 'n bug. Heb 'm in ieder geval als zodanig gerapporteerd, want ik wil wel de css zien zoals die er staat, en niet zoals die volgens 'n theoretische standaard zou moeten zijn.
Goed, weer wat geleerd. Was dit nog nooit tegengekomen. Wel 'n hele puzzel.

Je bericht.
Ik bedoelde dat je bij de <img> de border zou moeten weghalen. Niet dat er 'n al border was neergezet die je moest weghalen. Ja haalde de border bij de <a> weg, en je moet hem weghalen bij de <img>.
Maar ik begrijp dat die border nu is opgelost.


De mail. Hier krijg je automatisch 'n mail-adres als je 'n provider hebt. Heb jij dan geen eigen provider voor internetverbinding? Overigens kun je ook dat simpel wijzigen. Als je nu door laat sturen (forwarden) naar gmail, en je hebt later 'n echt eigen adres bij 'n provider, verander je gewoon het doorstuur-adres naar je nieuwe e-mail-adres. Op de site merkt niemand daar wat van, want dat adres blijft gewoon hetzelfde.
Houdt er wel rekening mee dat je 'n heel grote kans op (bergen) spam loopt als je echt 'n e-mail-adres op je site zet. Om die reden heb ik geen mailto op mijn site, maar het e-mail-adres in normale tekst. Mensen moeten het dan even kopiëren, de meeste spambots herkennen zo'n e-mail-adres in normale tekst niet.

Dat verspringen ligt volgens mij inderdaad aan de content. Die twee waar het niet gebeurt, die jij noemt, die hebben minder content. Bij alle andere staat een tekst, die verder naar onder doorloopt. Kennelijk heb jij een grotere letter dan ik, of een lager scherm. Bij mij verschijnt nergens een scrollbalk. Maar als ik het scherm kleiner maak, dan wel. De thumbs en het menu en zo staan in het midden van het scherm. Als er nou 'n scrollbalk verschijnt, is dat scherm opeens ongeveer 16 px smaller. Dus 100 px links van het midden is dan plotsklaps 108 px links van het midden, vergeleken met een pagina zonder scrollbalk.
Dus menu en thumbs schuiven 8 px naar links. Dat is het springen dat je ziet. Een bekend probleem.
Een écht goede oplossing is hier eigenlijk niet voor, omdat het ingebakken zit in de manier waarop 'n site wordt weergegeven.
Het meest gangbare is om de scrollbalk altijd aan te zetten (dat kan heel simpel). Dan is het venster overal even breed. Ik was dat gisteren vergeten te melden als oplossing. Dit is op heel veel sites zo ingesteld, alleen valt dat nooit op. Als je het wilt proberen. In de css toevoegen:

Code: Selecteer alles

body {overflow-y: scroll;}

Dit is verreweg de simpelste oplossing. overflow-y: in verticale richting. scroll: zet altijd de scrollbalk aan, ook als dat niet nodig is.
Een tweede oplossing is om overal zoveel of zo weinig tekst e.d. neer te zetten, dat op hetzelfde scherm (dat is dus altijd even hoog) overal of nergens een scrollbalk staat.
Een derde mogelijkheid, maar dat is ingewikkelder, is om alleen waar nodig een scrollbalk te laten verschijnen, dus net zoals nu, maar dan rechts van de tekst in plaats van rechts van het scherm. Dat moet wel even grondig worden getest, want dat kan soms onverwachte bijwerkingen hebben. Omdat die scrollbalk rechts van de tekst staat (in de een van de divs waar de tekst in staat), wordt het scherm niet smaller door het verschijnen van die scrollbalk. Dus de thumbs en het menu en zo verspringen dan niet meer. Ik denk dat deze oplossing bij jou wel mogelijk zou zijn.
De vierde mogelijkheid is trouwens om het gewoon negeren. Het valt je nu sterk op, omdat het jouw site is die je aan het maken bent, maar dit verschijnsel komt op behoorlijk wat sites voor.
Maar goed, het is netter als het niet gebeurt. Bovendien heeft jouw site met iets grafisch te maken, en dan is 'n nette site nog wat meer van belang.

Ik stel voor dat je eerst die andere dingen in orde maakt, en dat we dan naar die scrollbalk kijken. Het zou kunnen dat gaandeweg dat probleem zichzelf oplost, omdat er toch wat meer tekst in komt of zo.

Die titels die te ver naar rechts staan, dat kan niet, dus dat gebeurt niet
Ik kan dat niet reproduceren. Mogelijk komt het door iets dat je in je computer hebt veranderd, maar dat nog niet op de site staat. In principe is dat heel simpele css: gewoon centreren en verder moeten die <h>'s hun kop houden. Als je de wijzigingen op de site hebt staan, mogelijk kan ik het probleem dan wel reproduceren. (Zonder reproduceren is het heel lastig de oorzaak te vinden).

Nou, tot de volgende keer maar weer.

[herman]

... en de volgende keer is er al snel.

Blij dat het "medium" probleem is opgelost. Ik heb me ook wat afgezocht en -piekerd.
En vewrdomme, die hele scrollbalk had ik nog helemaal niet gezien. Je code van "overflow" toegevoegd en probleem opgelost.

Wat de mail betreft; nee ik heb geen provider, ik werk voorlopig bij een Hollandse vrouw in huis. Tot het weekend, daarna moet ik weer verder zien. Dan wordt het voorlopig even de bieb maar die heeft niet zoveel faciliteiten. En het is Spanje, hombre. Het gaat hier allemaal wat langzamer, ook internet (verder niks mis mee, als je je verlangens er maar aan aanpast). Ik zeg wel eens: met de fiets gaat het sneller.
En ik woon 6 km van het dorp op "el campo", geen stromend water, geen electriciteit, niks van dat alles. Maar wel een hele mooie locatie.
Het is niet anders.

Over dat mailadres moet ik nog even nadenken. Ik denk dat het voorlopig dan maar gmail moet worden.

Ik ga nu copieren en plakken. En daarna hosten.

Groetjes Herman

[herman]

Mijn tijd zit er weer op.
Manana dus.

Ze kunnen zeggen wat ze willen maar ik pas me wel aan aan dit land.

Groetjes Herman

[Goeroeboeroe]

Ooooh, zo heb ik ooit nog 'ns in Frankrijk gewoond! Geen stromend water, ergens (laag) in de bergen, eigen put. Water kon je gewoon drinken!
Nu vind ik Amsterdam hartstikke leuk, maar dat platteland had ook wel wat.
Daar werd trouwens toen net elektriciteit aangelegd. Aarde? Wat is dat nou voor onzin, vond de plaatselijke elektricien... Dat was wel even wennen (heb ooit in de elektriek gewerkt, en dan sta je als Nederlander toch even te kijken als ze aarde onzin vinden.)

[herman]

hoi GB,

net een hele tekst geschreven maar internet sloeg er weer eens uit.
Dus snel dit berichtje.

De nieuwe versie staat er op.

Morgen verder.

Groet Herman

[herman]

Hoi GB, (nog een restje tekst van de vorige)

ik kan je het heugelijke feit mededelen dat de nieuwe versie er op staat.
Na drie pogingen.
De upload snelheid hier was tussen de 30 en 35 KB/s. Dat lijkt me niet erg snel.
Er zijn dus een aantal probleempjes bij het centreren. De 3 titels en ook het diafragma in de home.
Die krijg ik maar niet goed.

En ik heb een kleine video gezet onder "arrangements" > webtrailers: "logo test Movimag."
Klein bestand om wat uit te proberen.

Ik ben benieuwd of ie onder de betreffende foto-link komt, maar dat zal wel niet.

En nu snel naar mijn stulpje.

Groet Herman.

ps: aarde vinden ze hier ook maar overbodig. Ik heb 2 zonnepanelen en doe het meeste op 12V. Net genoeg voor wat comfort.

[Goeroeboeroe]

Hoi,

Dat ziet er 'n stuk beter uit. Het zijn maar kleine veranderingen, maar die thumbs in het midden en zo is veel netter.
Dat filmpje staat bij mij keurig onder de afbeelding. Alleen had je de verkeerde pagina opgegeven, grinnik, heb me ongans gezocht naar die link.

Als je bij de css aan #title_container toevoegt: margin: 0 25%;
staan de titels in het midden. Wat er gebeurt: naar links float je die afbeelding 'M'. Naar rechts float je de vlaggen.
Tekst die daar tussen komt te staan, komt in principe tussen die twee gefloate divs te staan. Dat is meestal ook de bedoeling. Alleen: die vlaggen zijn smaller dan de div met de afbeelding 'M'. Dus die titels staan perfect midden tussen de 'M' en de vlaggen. En dus niet midden boven het menu...
Met die toevoeging in de css maak je div#title_container exact even breed als het menu. Nu staan de titels nog steeds in het midden, maardiv#title_container beslaat nu niet meer de volle breedte van het venster, maar precies evenveel als het menu. Als je nu de titels in het midden van de smallere #title_container zet, staan ze in het midden van die smallere div. En die is - niet toevallig - nu even breed als het menu. Ze staan dus gelijk midden boven het menu. Ik moet weer iets opstarten voor een breder scherm, dus dat mag jij even testen, maar in principe moet het daar ook werken.

En het klopte dus dat ik het niet zag, want het had met de verandering in de vlaggen te maken. Daarom werkt het ook zo prettig met code op de server: als jij iets verandert, zie ik ook gelijk het effect.

Behalve de h1. Daar moet je nog iets veranderen bij .h1titel:
padding: 5px 0 5px 20px;
moet worden
padding: 5px 0 5px 0; (of padding: 5px 0; dat is hetzelfde, want onder en links worden dan automatisch hetzelfde als boven en rechts).
Door die padding rechts van 20 px, wordt het midden van de h1 gemeten op 20 px vanaf de linkerkant.

Toch elke keer weer leuk te zien hoe zo'n site met wat simpele veranderingen zo opknapt!

[herman]

Ere aan wie ere toekomt.
Je hebt me erg goed geholpen.
Dat is ook het leuke van zelf "dingen" ontwerpen en maken. Dat heb ik nou met mijn "moving images". Het is hard werken, soms vervelende klusjes, bvb maskers maken, maar het reultaat maakt alles goed.

"arrangements" > webtrailers had moeten zijn "compositions" > webtrailers .
Mea culpa (3x met "maxima" in de laatste). Het zal de haast zijn geweest.

Met jouw toevoegingen staat "Movimag" nu goed gecentreerd (in KIT tenminste).
Alleen de afbeelding van het diafragma (en de onderliggende aardbol) nog niet.
Ik heb in jouw aanwijzing geen manier gevonden om dat zelf op te lossen. Het zal wel kinderlijk eenvoudig zijn maar ... En dat is het (mijn) probleem: ik kan je uitleg goed volgen, klinkt logisch, maar zelf zoiets oplossen is nog net een brug te ver. Zoals ik al eerder zei, moet je ook flink wat ervaring opdoen in "try and error".

Dus jij krijgt de video van "logo test movimag" in de link-foto (met firefox dus).
Ik (IE-8) krijg een (nieuw) wit scherm met daarin wel gecentreerd de QuickTime-video.
Niet de bedoeling maar ook weer geen ramp. Het is alleen jammer dat de bezoeker van de site is.
Maar oke, dat komt nog wel een keer goed.
Zo ook de pop-up van de formulieren. Ik heb er een teksje ingevoegd dat ze voorlopig niet werken.

Alleen hoop ik, ivm met de hoognodig gewenste contacten, dat de "automatische" link (links-onder) naar m o v i m a g @ g m a i l . c o m (ja, erg vervelend dat gespacificeer) werkt. Dat kan ik zelf niet controleren.

Ik hoop dat ik hem morgenvroeg nog een keer kan uploaden, het is mijn laatste dag dat ik gebruik kan maken van mijn "studio" en dus internet via mijn pc.
Maar ik ben al naar een andere oplossing aan het zoeken. En anders de bieb. Maar dan moet je wachten op je beurt. Officieel max. een half uurtje. Ja, het is crisis hier.

In Spanje staan ongelooflijk veel gebouwen leeg, ook hier. In al die leegstand zit het kapitaal van Spanje. Maar ze doen (kunnen) er niks mee. Als ze die konden exporteren hadden ze geen geld van het noorden nodig. Verloren kapitaal en arbeid. Triest om te zien.

Heb gisteren een schema gemaakt voor de talen. In elke (gelijkliggende) map een taal en een aparte map voor de afbeeldingen en video´s. Maar ik snap niet goed hoe je dat codeert als je naar bvb een map lager of hoger of gelijkliggend wil verwijzen. De engelse versie heeft nu mijn prioriteit.

Ik ga nu verder met wat correcties.
En ik hoop nog snel een "highlight" van een docu te maken.

Groetjes Herman

[Goeroeboeroe]

Hoi,

Dat centreren en zo is ook een van de lastigste dingen, vooral als er floats bij komen kijken. Ik heb nog even snel naar dat diafragma gekeken.
#godver (prachtig id trouwens, grinnik, lukte het niet?) staat absoluut gepositioneerd. Een absoluut gepositioneerd element is hetzelfde als een absoluut heerser: trekt zich nergens iets van aan en walst over alle andere elementen heen. Soms heel handig (nou ja, bij sites, niet in de politiek).
a#godver is een link, dat is een inline-element. Om er iets mee te kunnen, moet het een breedte krijgen. En daarvoor moet het weer in een blok-element worden veranderd. Maar dat gebeurt al voor álle links bij div#content a, dus dat is al geregeld.
Haal alle css weg bij #content .godver en vervang het door

Code: Selecteer alles

#godver .content {margin: 47% auto 0; text-align: center;}

Bij div#content a hebben álle links een breedte van 320 px gekregen, deze dus ook.

margin: 47% auto 0: 47% vanaf de bovenkant. auto (links krijgt ook auto, omdat er niets is ingevuld): zet in het midden (daarvoor is die breedte noodzakelijk, als je de breedte niet weet, kun je iets ook niet in het midden zetten). 0: liever geen marge van 47% aan de onderkant, is nergens voor nodig, kan alleen maar problemen geven.

text-align: center
centreer inline-elementen die in #godver staan. Dat is niet alleen tekst, maar ook een <img> is een inline-element. Dus nu staat de <img> altijd in het midden van #godver, en omdat #godver altijd in het midden staat, staat alles nu netjes in het midden.

Bij #content .muisoverdiafragma moet je dan ook nog wel even alle css weghalen, want ook dat is absoluut gepositioneerd, en dan werkt die truc hierboven niet. Alle css weg en vervangen door

Code: Selecteer alles

#content .muisoverdiafragma {border: none; margin-top: 12px;}

Bij mij opent die film ook in een nieuw scherm, dat wel. Maar dat klopt, want je hebt die film er gewoon als een link in gezet. Als je linkt naar 'n afbeelding, opent die afbeelding, als je linkt naar 'n film, opent die film. Ik dacht eigenlijk dat dat de bedoeling was.
Dat kan anders, maar dat is dus precies waar ik me eerst zelf weer even in moet gaan verdiepen. Je moet dan op een of andere manier 'n opdracht tot afspelen geven, en dat heb ik even verwaarloosd, omdat het zo snel veranderde. Een van de komende weken ga ik daar mee aan de slag, maar nu durf ik daar nog niets over te zeggen. Behalve de links naar andere sites, maar die had je al.

Als het (min of meer) af is, moet je dat nog maar even laten weten, dan kan ik het nog 'ns in alle browsers en zo grondig testen.

Ik heb je even 'n mail gestuurd via die link. Hij is in ieder geval verzonden, als hij net zo betrouwbaar is als de postbode tegenwoordig hier, dan weet ik niet zeker of hij wel aankomt.