header en menu

marc 05 · 21 sep 2010

Beste csshunter,

Ik heb het header menu (menu1 genoemd) en gelijk naast het logo geplaatst zonder dat ik het in css een absolute waarde heb meegegeven... dit lukte me niet of is dit evengoed een correcte wijze... ik kan het logo nu wel zien maar ik weet niet of dat in iedere browser zo is, anders staat mijn menu over het logo heen?

Mijn site is nu zo opgebouwd dat wanneer ik de site heel klein maak in het content pas een scroll komt als de min- width wordt bereikt.

Maar als ik nu het scherm zo klein maak dan blijft mijn logo digitreport mooi staan.. het rechterlogo en header menu schuiven dan achter mekaar door en verwijnen dan opeens.

Welke instelling kan ik veranderen dat wanneer ik de site zodanig klein maak toch alles in de header zichtbaar blijft.

link naar de site: www.digitreport.com

Verder wil ik een hele div in het midden plaatsen kan dit als je <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> gebruikt?

Heb geprobeerd om met <p class="middenin">midden</p> mijn contact script in het midden te zetten... hierin staat php en html door mekaar. Het blijkt dan niet te werken op deze manier!

Alvast bedankt.

Groeten, Marc

csshunter · 25 sep 2010

Hoi Marc,
Ik denk dat we 'm eerst even langs de html-validator moeten jagen. Er zitten 3 foutjes in.
En ook nog even langs de css-validator: 4 foutjes.

html-errors:

HTML:

<script language=JavaScript>
   moet zijn:
<script type="javascript">
   en:
<img src="images/pic1.jpg" align="right" ...>
   mag niet; uitlijnen moet met een style-eigenschap, hier bv.:
<img class="floatR" src="images/pic1.jpg" ...>

en dan in de css:

Code:

.floatR {
	float: right;
	}

css-errors:
Het schaduw-filter voor (alleen) Internet Explorer is geen geldige css. De kan verdoezeld wordenm door er een "Conditional Comment" van te maken: een "voorwaardelijk commentaar".

HTML:

<!--[if IE]>
   <style type="text/css">
	.afbeelding {
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#444444, direction=135, strength=5); 
	} 
   </style>
<![endif]-->

Het voorwaardelijke zit 'm er in, dat Internet Explorer het [if IE] kan herkennen, en dan toepast wat er in binnen de commentaarregels staat. Er zijn ook varianten, bv. [if IE 6], of [if lte IE 7]; "lte" = "less then or equal to" = hier IE7 of eerdere versie.
Normaal gesproken begin een html-commentaar met . Alles wat daar tussen zit, mag niet uitgevoerd worden. Alle andere browsers voeren opdrachten binnen zo'n commentaar-blok dan ook niet uit; IE is hier een uitzondering.

Als de foutjes er uit gehaald zijn, hebben we klaar voor diagnose:

digitreport_test-01.htm

Tip: Het handigste is om tijdens het ontwerpen de schermresolutie op 1024x768px te zetten: dan zie je meteen of er iets fout gaat bij deze maat.

In onze testpagina staat:

HTML:

<div id="header">
	<a id="logo" href="index.php"><img 
	src="logo/logo_top.jpg" width="315" height="99" alt="logo"></a>
	
	<a id="logo1" href="index.php"><img 
	src="logo/logo1_top.jpg " width="275" height="99" alt="logo_right"></a>
	
	<div id="menu1">
		<a href="contact.php">Contact</a>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&gt;&gt;&gt;
	</div>
</div>

Van #menu1 zien we nu inderdaad weinig: onder het Digitreport-logo zien we nog net twee witte streepjes, verder niets.
Dan gaan we eens rekenen.
De <body> heeft een breedte van 90%. Bij resolutie 1024x768px is dat dus een breedte van ca. 920px.
De #header bestaat uit de twee drijvende logo's: #logo is 315px breed, en heeft een {margin-right: 20px;} > samen 335px.
#logo1 is 275px breed, en heeft ook een {margin-right: 20px;} > samen 295px.
Voor #menu1 blijft dan 920-335-295 = 290px over.

Gaan we kijken hoe breed #menu1 is (bij standaard lettergrootte), door de twee logo's uit te zetten en #menu1 even een border te geven:

digitreport_test-02.htm

Met de Webdeveloper Toolbar in Firefox zien we nu snel (via menu Information > optie "Display Element Information") dat de #menu1 <div> precies 324px breed is.
Juist! Dat is te breed voor de beschikbare ruimte, en dan duikt ie naar de eerstvolgende plek onder de floats.

Terzijde: als de bezoeker inzoomt op de lettergrootte, gaat 't mis met de background:

In de huidige constellatie lijken me een paar oplossingen mogelijk:

De breedte zodanig maken, dat deze er ook bij kleine resoluties tussen past; bv. door het rechterdeel met de >>> weg te laten. Als er ipv de >>> nog 1 of meer links moeten komen, gaat dat niet op.
Geen (tekst + achtergrondfiguur) gebruiken, maar er een button-image in de voorgrond van maken, met juiste maat, zodat lettergrootte-zoomen geen invloed kan hebben.
Het #logo1 aan de rechterkant als achtergrond-img van de #header instellen ipv als voorgrond-afbeelding; de link naar "home" komt hier dan te vervallen, maar die is toch al veelvuldig aanwezig, en werkt hier m.i. alleen maar verwarrend. Verder kan de contact-link ook naar links floaten voor de goede positie.

Ik zou voor optie 3 gaan (in combi met nr.2 te maken), dan schuiven de bollekes er gewoon achter langs als er een tekort aan breedte is:

digitreport_test-03.htm

Met vriendelijke groet,
CSShunter

marc 05 · 30 sep 2010

Beste csshunter,

Sorry voor mijn late reactie.... ik ga hiermee aan de slag en ik meld me opnieuw... ik kom net uit het ziekenhuis en heb er weer even tijd voor.

Groeten, Marc

marc 05 · 1 okt 2010

Beste csshunter,

Dient onderstaande nu in iedere pagina afzonderlijk te komen staan waar ik dit wil gebruiken?

<!--[if IE]>
<style type="text/css">
.afbeelding {
filter

rogid

XImageTransform.Microsoft.Shadow(color=#444444, direction=135, strength=5);
}
</style>
<![endif]-->

Dan nog wanneer je een button image maakt.... en ik wil de tekst er overheen zetten... is de beste oplossing dan een layer maken?

Je kunt het scherm dan evengoed niet kleiner maken dan aan b.v. de eeste button waar nu zeg maar contact op staat. De rest erachter verdwijnt evengoed als je het scherm te klein maakt....zou kunnen bij een notebook 10inch.

Groeten, Marc

csshunter · 1 okt 2010

Hoi Marc,

Sorry voor mijn late reactie....

No problem, 't is toch binnen een week?

Dient onderstaande nu in iedere pagina afzonderlijk te komen staan waar ik dit wil gebruiken? <!--[if IE]> ... enz.

Ja, die zet je in de <head>, na de link naar je gewone stylesheet.

Dan nog wanneer je een button image maakt.... en ik wil de tekst er overheen zetten... is de beste oplossing dan een layer maken?

Ja, maar dan wel een layer in je tekenprogramma, bedoelde ik. En daarna samen opslaan als plaatje. Dan kan de tekst nooit buiten de button komen: de tekst zit er gewoon in getekend.

(...) De rest erachter verdwijnt evengoed als je het scherm te klein maakt....zou kunnen bij een notebook 10inch.

Ik heb geen idee hoeveel pixels een 10inch notebook heeft. Als dat minder dan 800px breed is, zou het inderdaad misschien kunnen. Dat zou dan vermeden kunnen worden door de body een min-width te geven die groot genoeg is.
Aan de andere kant, als ik mijn testpagina "digitreport_test-03.htm" in Firefox (links) of Opera (rechts) bekijk in de SmallScreen-weergave:

... gaat het in beide gevallen goed.

Met vriendelijke groet,
CSShunter

marc 05 · 1 okt 2010

Beter laat dan nooit he :thumb:

Als ik onderstaande plak in de pagina`s werkt het dan puur alleen maar voor IE of kunnen andere browsers er ook mee weg?

HTML:

<!--[if IE]>
<style type="text/css">
.afbeelding {
filterrogidXImageTransform.Microsoft.Shadow(color=#444444, direction=135, strength=5); 
} 
</style>
<![endif]-->

In css heb ik volgende opgenomen:

Code:

#header {
	overflow: hidden;
	background: url(logo/logo1_top.jpg) no-repeat 100% 0;

Wat doet hier 100% 0 precies want ik zie niet direct een verschil?

Verder had ik nog dat ik het contact sript in het midden zou willen zetten net als de plaatje in b.v. vakantie 2010... heb dit geprobeer met ..middenin { text-align: center; }

Dit lukt niet komt dat omdat het contact script voor een groot gedeelte bestaat uit een php script?

Hartelijk bedankt al tot nu toe!!

Groeten, Marc

csshunter · 3 okt 2010

Hoi Marc,
Ja, die <!--[if IE]> werkt (a) alleen maar voor IE; en zonder dat <!--[if IE]> omhulsel werkt 't (b) óók alleen maar voor IE; omdat het filter: progid... enz. een eigengereide code is die Microsoft in z'n IE's gestopt heeft, maar die andere browsers gewoon niet kunnen gebruiken. Het is ook geen geldige html.
Met de <!--[if IE]> eromheen zorg je ervoor dat andere browsers geen last van deze code hebben (die zien het dan als een commentaar). En tegelijkertijd zorg je er zo voor, dat de html-validator het ook als commentaar-regels ziet (die geen uitvoerbare code bevatten) en het dus als valid html beoordeelt.

background: url(logo/logo1_top.jpg) no-repeat 100% 0;
Wat doet hier 100% 0 precies want ik zie niet direct een verschil?

De getallen hier (in percentages of px) geven de horizontale en verticale positie van het background-image aan.
Zet maar eens op 50% 0, en je ziet de bolletjes naar het midden verhuizen.

Artikeltje met meer hierover: De patrijspoort-theorie: plaatsing van achtergrond-figuren in css.

Verder had ik nog dat ik het contact script in het midden zou willen zetten net als de plaatje in b.v. vakantie 2010... heb dit geprobeerd met ..middenin { text-align: center; }
Dit lukt niet, komt dat omdat het contact script voor een groot gedeelte bestaat uit een php script?

Nee, dat is het niet. Een php-fragment kan je hier zien als normale html.
Centreren lukt hier niet omdat het #menu1 met de contact-button erin een {float:left;} heeft. Deze drijft zoveel mogelijk links tegen het Digitreport-logo aan, om er nog op te passen bij een klein beeldscherm.
Zou je de float laten vervallen en 'm centreren, dan zou ie het logo gaan overlappen bij een kleine resolutie > maar dat mag niet, en dan duikt ie eronder (zoals we eerder hadden).

Maar is het niet een idee om de hele button op die plek weg te laten, en er bovenin een mooie gecentreerde link van te maken? Die kan (met een beetje aanvullende css) in de #topline div opgenomen worden die er toch al is.

Testpagina: www.developerscorner.nl/csshunter/tests/digitreport_test-04.htm (zie broncode)

Met vriendelijke groet,
CSShunter

marc 05 · 4 okt 2010

Hallo csshunter,

We hebben even een miscommunicatie... ik bedoelde het contactformulier in het midden zetten... niet de header maar het formulier dat je kunt benaderen nadat je op de knop contact hebt geklikt, dat krijg ik niet in het midden.

Dat is dus een php script en laat zich niet middenin plaatsen.

De contact buttons wil ik graag behouden, nu is dit nog de achtergrondafbeelding maar deze ga ik nog omzetten naar button. Trouwens als ik op je voorbeeld klik dan staat de link in #topline bij mij gewoon helemaal links... maar dit maakt niets als ik de buttons wil behouden.

Hoop dat je een oplossing hebt voor het formulier om dat te kunnen centreren.

Moet dit trouwens ook vermeld worden:

}
/* ================== naar Conditional Comment voor IE ======
.afbeelding {
filter: progid

XImageTransform.Microsoft.Shadow(color=#444444, direction=135, strength=5);
}
*/

/* ================== toegevoegd: =========================== */

Of heeft dat verder geen waarde voor de <!--[if IE]>?

Groeten, Marc

csshunter · 5 okt 2010

ik bedoelde het contactformulier in het midden zetten...
Dat is dus een php script en laat zich niet middenin plaatsen.

Aha! Maar ook dat heeft niets met php te maken. Het zit 'm in de tabel die daarin verstopt zit:

HTML:

<table width="500"> ... enz.

Als je in de css doet:

Code:

#formuliertabel { 
    width: 500px;
    margin: 0 auto;
    }

en dan

HTML:

<table id="formuliertabel"> ... enz.

... dan komt het formulier-blok precies in het midden te staan (t.o.v. de minimale breedte van 650px van de #content).

De contact buttons wil ik graag behouden

Ook prima, toch?

Trouwens als ik op je voorbeeld klik dan staat de link in #topline bij mij gewoon helemaal links...

Ja, in Internet Explorer was dat waar. Een missertje van mij: ik had bij de css aanroep staan:

HTML:

<style type="">
i.p.v.
<style type="text/css">

Kwam omdat ik op mijn toetsenbord altijd de twee aanhalingstekens tegelijk moet intoetsen, wil er wat op scherm komen; dan ga ik voor het gemak maar meteen verder tikken; was daarna vergeten de lettertjes ertussen te zetten. Firefox deed het goed, en daarna had ik de pagina, foei!

, niet meer gecheckt met de html-validator. Maar snel hersteld, mocht er hier nog iemand willen kijken.

Moet dit trouwens ook vermeld worden:
}
/* ================== naar Conditional Comment voor IE ======
...enz.

Nee hoor, dat had ik er alleen nog in laten staan ter illustratie.
Alles wat in css tussen een /* en de eerstvolgende */ staat, is commentaar en kan weggelaten worden zonder invloed op iets anders.
De accolade er vlak boven moet wel blijven, want die hoorde nog als afsluiting bij het voorafgaande.

Met vriendelijke groet,
CSShunter

marc 05 · 6 okt 2010

Hallo csshunter,

ik kom hier nog op terrug... heb wat problemen met pc zelf.

Groeten, Marc

marc 05 · 20 okt 2010

Hallo csshunter,

Na een langere tijd ben ik er weer...

onderstaand een stukje script bestaande uit gewoon tekst en het object. Is het ook mogelijk zulk gedeelte juist niet zichtbaar te maken voor b.v. opera mini op de mobile telefoon. Het object youtube wordt in deze browser toch al niet weergegeven... alleen krijg ik wel de tekst te zien impressie jaufenpass en deel1

Is dit op een of andere manier mogelijk met de <!--[if IE]> maar dan gericht op opera mini en hoe moet ik dat dan doen?

Code:

<p class="middenin">Impressie Jaufenpass </P>
	<p class="middenin">(deel 1) </P>
	<p class="middenin">&nbsp;</P>
	<p class="middenin"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/RcCtecN4afk?fs=1&amp;hl=nl_NL"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RcCtecN4afk?fs=1&amp;hl=nl_NL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></P>

Groeten, Marc

csshunter · 20 okt 2010

Nop, een <!--[if OPmini] bestaat niet.
Je zou het in css met een @media rule kunnen doen:

Code:

@media handheld {
    .nomobiel { display: none; }
  }

En dan in de html voor alle voor mobieltjes te verbergen elementen die class erbij opnemen:

HTML:

<p class="middenin nomobiel">Impressie Jaufenpass </P>
	<p class="middenin nomobiel">(deel 1) </P>
	<p class="middenin nomobiel">&nbsp;</P>
	<p class="middenin nomobiel"><object width="480" ... enz.

... maar dan worden de YouTube'jes in geen enkel mobieltje afgespeeld, wat ook weer niet de bedoeling lijkt. Bovendien schijnen sommige mobieltjes zich niet aan de "handheld" voorschriften te houden (doen net of die niet bestaan, om mooiere pixeltjes binnen te halen; zie deze discussie: precies jouw vraag!), en ik weet niet of dat ook voor de Opera Mini geldt.

Als ik het goed begrijp, schijnt ook de combinatie van een bepaald merk/type mobieltje en de browser van invloed te zijn op het al/niet weergeven van YouTube-objecten (zie deze).
Dat betekent dat "browser-sniffing" via javascript ook niet goed hoeft te werken.

Blijft over het server-side opvragen en dirigeren van de OperaMini-styles, daar heeft Opera een heel bosje artikelen over geschreven.
Ik kan geen garantie geven dat in 1 ervan staat wat je zoekt!

Al met al lijkt het me het makkelijkste om een "helaas" boodschapje in de html op te nemen:

HTML:

<object width="480" ... enz.
    ....
    </embed>
    Helaas, uw browser kan geen YouTube-filmpjes laten zien.
</object>

Dat regeltje wordt dan automatisch getoond als het voorafgaande niet werkt. Diverse alternatieven staan hier in dit artikel.

Met vriendelijke groet,
CSShunter

marc 05 · 21 okt 2010

Hallo csshunter,

HTML:

<object width="480" ... enz.
    ....
    </embed>
    Helaas, uw browser kan geen YouTube-filmpjes laten zien.
</object>

Als ik bovenstaande code gebruik als oplossing blijft deze zichtbaar in IE op moment dat ik toch de filmpjes krijg.

Hoe kan ik dit dan doen?

csshunter · 21 okt 2010

Misschien een achtergrondplaatje met het "jammer" erop, dat zichtbaar wordt als de YouTube 't niet doet?

Test: www.developerscorner.nl/csshunter/tests/test-youtube.htm

marc 05 · 22 okt 2010

Hallo csshunter,

oh dit vind ik lastig te maken aangezien ik geen goed foto bewerkingsprogramma heb... is er niet iets zoals je eerder omschreef met alleen tekst??

Tekst op de plaats waar normaal het filmpje staat.

Bovendien werkt de fullscreen functie dan niet meer in eigen site..en begrijp ik het gedeelte niet zo goed  aangezien het filmpje toch 385 hoog blijft.

HTML:

<object width="480" ... enz.
    ....
    </embed>
    Helaas, uw browser kan geen YouTube-filmpjes laten zien.
</object

marc 05 · 22 nov 2010

Hallo csshunter,

Tijdje geleden dat ik vanuit deze topic een vraag gesteld heb.... we hebben het hier ook vaker over doctypes gehad. Wanneer ik onderstaande youtube filmpje plaats wat dus al enige tijd op mijn website staat krijg ik tijdens valideren altijd één of meerdere fout meldingen. Het maakt niet uit welk doctype ik kies.

Hoe kun je dit oplossen... we hebben standaar gekozen voor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<p class="middenin"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/RcCtecN4afk?fs=1&hl=nl_NL"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RcCtecN4afk?fs=1&hl=nl_NL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></P>
<p class="middenin"> </P>

Groeten, Marc

csshunter · 23 nov 2010

Ah, je moet weten: de html-4.01 validatie kan bij een YouTube-filmpje nooit goed gekregen worden.
Dat zit 'm in de <embed>-tag, die niet door de validator getolereerd wordt.
Maar dat is in feite loos alarm: in het in aantocht zijnde html-5 mag <embed> weer gewoon wel:
www.w3.org/TR/2010/WD-html5-20100624/the-iframe-element.html#the-embed-element.

Met vriendelijke groet,
CSShunter

marc 05 · 23 nov 2010

Hallo csshunter,

Kan ik de youtube-filmpjes toch gebruiken in Html 4.01 met een strict doctype wat ik zo ongeveer voor iedere pagina gebruik.

Verder wou ik ook wat andere site`s wel eens aanbieden iets in <iframe> zetten maar dit wordt ook niet ondersteund door html-4.01

Rest me nog de vraag iframe in html 4.01.... kan ik voor onderstaande code ook de fouten gewoon negeren?

<IFRAME SRC="http://gratisweerdata.buienradar.nl/buienradar.php?type=256x256" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=320></IFRAME>

is er eventueel een alternatief voor het het plaatsen van een website in iframe..... iets wat gelijk te zien is in dat frame zonder dat ik er eerst naar hoef te linken?

Groeten, Marc

header en menu

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

marc 05

Gebruiker

csshunter

Meubilair

marc 05

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy