<div> probleem

Status
Niet open voor verdere reacties.
Misschien is dit helemaal overbodig, maar wie weet. Als 'n woord te lang is en je wilt het BINNEN het woord geforceerd afbreken, kan dat door 'n css3-eigenschap. Werkt al in alle browsers (ook IE 6), behalve Firefox ouder dan versie 3.5 en Opera.
Code: 
word-wrap: break-word;
Hiermee wordt hoe dan ook voor tekst de breedte gerespecteerd en dus desnoods midden in 'n woord afgebroken.
Als ik nou overbodige verwarring schep, dan daarvoor bij voorbaat mijn hartelijke verontschuldigingen :D
 
Ik snap er niets meer van zo heb ik de index.html pagina gemaakt als hier beneden.

Klopt het vetgedrukte <?php include("menu.header"); ?> .... krijg de header en het menu niet in beeld.

Heb php scripts even header en menu genoemd. en gelijk in de root gestopt maar het werkt niet?

Krijg alles te zien behalve de header en het menu.


<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digitreport - Welkom</title>

<link rel="stylesheet" type="text/css" href="css/frames.css">
</head>

<body>
<?php include("header.php"); ?>



<div id="wrapper">
<div id="content">
<h2>Welkom op de website <strong><em>Digitreport </em></strong></h2>
<p>&nbsp;</p>
<p><img src="images/pic1.jpg" align="right" alt="pic1" width="224" height="380">Binnenkort treft u hier foto`s met verslagen aan van onze vakanties,<br>dagjes uit en tal van andere zaken.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Marcel &amp; Anjo </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

<?php include("menu.php"); ?>

</body>
</html>


Groeten, Marcel
 
Laatst bewerkt:
Hoi Marc,
'nszeven kijken...
Ik geloof dat 't probleem intussen is opgelost (door de index.htm te hernoemen tot index.php; anders weet de server niet dat hij er eerst php op moet loslaten).
Nog een paar puntjes:
  • De link van het logo gaat nog naar href="pure-css-frames.htm" > zou ik index.php van maken.
  • Idem dito voor de Home-link in het menu (gaat nog naar de niet-bestaande index.htm).
PS:
Voor het driedubbele-scrollbar-in-IE verschijnsel op m'n php-voorbeeld-pagina kan je inderdaad (zoals Goeroeboeroe aangeeft) de code met css dwingen om af te breken, als er spatie-loze lange regels staan. Kan wel eens goed van pas komen!
Omdat ik de code-regel op het schoolbord juist niet wilde breken, liet ik de scrollbar L-R komen.

Maar een nadeel van deze manier is (behalve die extra OpNeer scrollbar van IE) dat als het stuk wat LinksRechts moet kunnen scrollen hoog op de pagina staat, de L-R scrollbar toch helemaal onderop komt. En je kan 'm dan pas zien als je eerst tot helemaal beneden in dat venstertje scrollt. :confused:

Oplossing is om niet alles wat in de #content staat met de L-R scrollbar te laten scrollen, maar alleen de elementen die problemen opleveren.
Hier: het schoolbord element <pre> een ID geven, en aan dat ID in de css de eigenschap { overflow: auto; } meegeven.

Om van de extra rechter-scrollbar in IE af te komen, kan je het element een "vaste vloeibare hoogte" geven, d.w.z. een hoogte in de eenheid em als er tekstregels in het element zitten (bij alleen een te groot img kan het in px). De em's vormen een percentage van de lettergrootte (1em = 100% lettergrootte, maar je kunt ook meer opgeven). Wat het bij een bepaald element precies moet zijn, kan je proefondervindelijk vaststellen. Bij IE moet je dan behalve bij de normale lettergrootte ook even bij de grootste en de kleinste kijken of er nog speling genoeg is totaan de L-R scrollbar.
  • Zo heb ik m'n voorbeeld php-versie pure-css-frames.php maar eens aangepast (en het bijbehorende css-bestand ook): je kunt nu alleen het schoolbord heen en weer schuiven, terwijl de rest op zijn plaats blijft staan.
Het is niet het eenvoudigste soort sjabloon om mee te beginnen! :D

Met vriendelijke groet,
CSShunter
 
Hey css hunter


Daar ben ik weer.... inderdaad niet het eenvoudigste sjabloon, maar het is wel een uitdaging en ik ben er zeker blij mee.

De #htcode is wel iets wat een heel goed idee is.

De #htcode alleen voor een plaatje gebruiken en aangeven in px....moet ik dan alleen de hoogte opgeven in px of hoe doe je dat. Wil een plaatje mee laten schalen maar niet ieder plaatje zal dezelfde afmeting krijgen.

Even nog wat anders... kan ik dat ook oplossen met de #htcode.... ik had even een paar regels tekst offline geprobeer en een paar plaatjes. Schuift de "images/pic1.jpg" over de tekst heen als ik het schermpje dus heel erg klein maak. ( dit was nog zonder een #htcode ergens. Ik vraag dit omdat ik binnen dezelfde alinea zowel tekst links al rechts een plaatje.


Verder zie je ook dat ik heel vaak de <p> </p> regel heb moeten invoeren om het plaatje
"images/meran_01.jpg" niet over het eerste plaatje te plaatsen... deze heeft een afmeting die hoger is dan dat die breed is.

Ik dacht altijd bij een nieuwe alinea dat het heel makkelijk ging zonder dat er iets over mekaar zou gaan.



<div id="wrapper">
<div id="content">
<h2>Welkom op de website <strong><em>Digitreport </em></strong></h2>
<p>&nbsp;</p>
<p><img src="images/pic1.jpg" align="right" alt="pic1" width="224" height="380">Binnenkort treft u hier foto`s met verslagen aan van onze vakanties,<br>dagjes uit en tal van andere zaken.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Marcel &amp; Anjo </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p><img src="images/meran_01.jpg" align="right" alt="pic1" width="512" height="341"></p>
<p>&nbsp;</p>
</div>
</div>


Nog even een vraag gewoon om te weten... welk code css zorgt er feitelijk voor dat de scroll nu verschijnt in het schermpje en niet meer aan de zijkant - fijn om te weten?


En ik snap nog niet hoe het kan dat het menu dus automatisch over de border-with van 190px gezet wordt van de #wrapper.
Je hoeft een <dv> geen z-index te geven dan?


Een hoop vragen van mijn kant.:D


Groeten, Marc
 
Hoi Marc,
Ik begin even met de laatste:
En ik snap nog niet hoe het kan dat het menu dus automatisch over de border-with van 190px gezet wordt van de #wrapper.
Je hoeft een <div> geen z-index te geven dan?
Klik om te vergroten...
Dat komt omdat het menu het laatst in de html staat. Als er dingen op dezelfde positie staan (het #menu doet dat vanwege de { position: absolute; } en de opgegeven afstanden van zowel de #wrapper als het #menu), dan komt normaal gesproken de laatste in de html er vanzelf bovenop.
  • Als één van de twee een absolute positie heeft en de ander niet, kan het heel anders komen te liggen: want het gebruik van "position" is aardig gecompliceerd!

Nog even een vraag gewoon om te weten... welk code css zorgt er feitelijk voor dat de scroll nu verschijnt in het schermpje en niet meer aan de zijkant - fijn om te weten?
Klik om te vergroten...
Dat komt omdat het schermpje (de div #content) opgesloten zit in de div #wrapper. Die #wrapper heeft een bepaalde hoogte, hebben we opgegeven: met { top: 130px; } staat ie 130px van de bovenrand, en met { bottom: 20px; } staat ie 20px vanaf de onderrand. De "bepaalde hoogte" van de #wrapper (incl. z'n borders boven & beneden) is dan de rest van de schermhoogte. Dit vormt de boven- en benedengrens van de #content.
Zou je verder niets doen, dan zou een te hoge #content gewoon over de onderborder van de #wrapper heen lopen, en komt er een normale scrollbar aan de rechterkant om 'm helemaal te kunnen zien.
Nu zijn er in css een paar commando's om deze "overflow" (het over de rand heen vloeien) in de hand te houden:
  • #wrapper { overflow: visible; } > dan wordt over de #wrapper heen getoond wat in de #content zit en niet in de #wrapper past. Dit is de begin-waarde: hetzelfde als weglaten.
  • #wrapper { overflow: hidden; } > dan wordt verborgen wat in de #content zit en niet in de #wrapper past.
  • #wrapper { overflow: scroll; } > dan worden er altijd scrollbars om de #content heen gezet (ook als er ruimte genoeg is binnen de #wrapper): zowel een horizontale als een verticale scrollbar.
  • #wrapper { overflow: auto; } > dan worden er alleen een scrollbar om de #content heen gezet als er géén ruimte genoeg is binnen de #wrapper: een horizontale en/of een verticale scrollbar. Dit is de overflow die hier gebruikt is voor de verticale scrollbar binnen het schermpje.
  • Hetzelfde is gedaan met het element #htcode binnen de #content: #htcode { overflow: auto; }, zodat deze de horizontale scrollbar kan krijgen, als nodig.
    Om 'm geen dubbele verticale scrollbar te laten krijgen in IE, moet bovendien de hoogte opgegeven worden: zodat die geen oorzaak van die dubbele IE-scrollbar kan zijn.
Probeer maar! :)
De originele uitleg staat hier in de CSS 2.01-standaard.
  • NB: In de aankomende CSS3 wordt ook nog onderscheid gemaakt tussen overflow-x (horizontaal) en overflow-y (verticaal); maar daar hoeven browsers zich nu nog niet aan te houden, want CSS 3 is nog geen standaard die CSS 2.01 vervangt.

Voor de plaatjes naast tekst: wordt vervolgd!
CSShunter
 
Hallo csshunter,

Eg fijne uitleg... het wordt me wat dat betreft al veel duidelijker.:D

Kan ik toch nog een <div> onder de #wrapper opnemen zonder dat het menu in gevaar komt. Het menu staat ten slotte als laatste geplaatst. Maar zou graag nog een <div> willen onder de wrapper met daar een afbeelding die telkens in beeld moet blijven. Maar dan klopt volgens mij de afstand #wrapper vanaf onderzijde niet meer.



Code: 
Voor de plaatjes naast tekst: wordt vervolgd!
CSShunter

Ben benieuwd wat hier mogelijk is.

Even ter aanvulling.

Op sommige pagina`s komt er eerst tekst in het midden... eronder twee plaatjes naast mekaar.

dan b.v. weer tekst en eronder een plaatje met een behoorlijke breedte.... totaal net zo breed als de twee plaatjes naast mekaar.

Dit zal het probleem niet zijn denk ik... maar de vraag van de vorige mail....het plaatsen van een hoger plaatje rechst naast de tekst en dan vervolgens een stuk lager een plaatje zetten over de breedte wat niet over het andere of tekst uit de vorige alinea heen mag liggen.

Groeten, Marc
 
Hoi Marc,
Ja hoor! En ook wat druk. :)
En je laatste mail stond nog mooi met een geel sterretje nog iets mee doen in m'n gmail-Inbox. Alleen door een stapeltje later binnengekomen mails was dit gele sterretje onder de scrollgrens doorgezakt. ;)
Even kijken wat je laatste vraag ook alweer was.
zou graag nog een <div> willen onder de #wrapper met daar een afbeelding in
Klik om te vergroten...
Dat zou moeten kunnen: dan de #wrapper { top: 130px; } en de #menu { top: 130px; } ophogen met de hoogte van de afbeeldings-div. En voor dit soort dingen: niet wachten op CSShunter of iemand anders, maar gewoon proberen (wel in een los test-bestandje om niets te kunnen verprutsen). ;)
Op sommige pagina`s komt er eerst tekst in het midden... eronder twee plaatjes naast mekaar.
en eronder een plaatje met een behoorlijke breedte.... totaal net zo breed als de twee plaatjes naast mekaar.
Klik om te vergroten...
Zal iets moeten worden als:
Code: 
[FONT="Courier New"][SIZE="2"].middenin { text-align: center; }[/SIZE][/FONT]
HTML: 
<p>Dit is de tekstregel boven de plaatjes, links uitlijnend.</p>
<p class="middenin"><img src="images/plaatje1.png" 
   width="100" height="200" alt="">&nbsp;<img src="images/plaatje2.png" 
   width="100" height="200" alt=""></p>
<p class="middenin">Dit is een gecentreerde tekstregel onder de plaatjes</p>
<p class="middenin"><img src="images/dubbelplaatje.png" 
   width="400" height="300" alt=""></p>
<p>Dit is de eerste regel onder het dubbelplaatje, 
   nu weer gewoon links uitlijnend</p>

Dit zal het probleem niet zijn denk ik... maar de vraag van de vorige mail....het plaatsen van een hoger plaatje rechst naast de tekst en dan vervolgens een stuk lager een plaatje zetten over de breedte wat niet over het andere of tekst uit de vorige alinea heen mag liggen?
Klik om te vergroten...
Dat kan met het laten drijven ("float") van het plaatje, met daarna de opdracht om de float weer vrij te maken. Je begint altijd eerst met de float, en dan de tekst die ernaast moet komen (en de rest van de ruimte gaat opvullen). Tot slot komt er een "clear" om de float op te schonen = om wat onder het totaal van (tekst + plaatje) komt weer op een regel eronder te kunnen laten beginnen. Gaat in grote lijnen als volgt:
Code: 
[FONT="Courier New"][SIZE="2"].floatRight { 
   float: right;
   margin-left: 10px; /* wat tussenruimte zodat tekst er niet tegenaan komt */
   }
.clearRight {
   clear: right;
   height: 1px; /* zonder hoogte doen sommige browsers alsof de div niet bestaat */
   margin-bottom: -1px; /* nu heeft de div optisch toch geen hoogte */
   }[/SIZE][/FONT]
HTML: 
<img class="floatRight" src="images/plaatje3.png" 
   width="75" height="100" alt="">
<p>Dit is de tekst die links naast het plaatje komt, 
   en als deze tekst groot is, onder het plaatje gaat doorlopen.</p>
<div class="clearRight"><!-- dit is de waterscheiding --></div>
<p>Hier begint prettig een nieuwe alinea die niets overlapt 
   en ook niet naast het plaatje komt te staan als de eerste 
   tekst naast het plaatje klein was.</p>
Op deze manier kan je alle verticaal ruimtewinnende, maar loze <p>&nbsp;</p>'s missen.
Was dat 'm?

Met vriendelijke groet,
CSShunter
 
Hallo csshunter,

ja, dit is inderdaad wat ik bedoel. Ik ga hier eerst eens mee aan de slag.

Trouwens ik heb ik de txt bestanden waarnaar ik verwijs vanuit PHP... een Doctype en <html> en dergelijke opgenomen... is dit wel nodig voor de bereikbaarheid?
Dacht zelf van niet.

Heb ik ook metatags nodig om beter gevonden te worden of is dit totaal overbodig?

Groeten, Marc
 
Je vraag over PHP en txt kan ik niet beantwoorden.
Er zijn twee metatags van belang:
description: deze moet voor elke pagina eigenlijk (iets) anders zijn en de inhoud van de pagina weergeven. Deze is belangrijk voor zoekmachines. Woorden die hierin staan, kunnen het best ook nog terugkomen op de pagina zelf. 'Bloembollen' in description en ook nog 'n aantal keren in de tekst is 'n redelijk overtuigend bewijs dat de pagina over bloembollen gaat en niet over Obama. (Tenzij Obama van bloembollen houdt, wat is 't leven toch ingewikkeld...)
De description wordt vaak, maar niet altijd, getoond in de zoekindex.

keywords: Google gebruikt die helemaal niet meer vanwege misbruik in het verleden. Maar Bing en Yahoo schijnen ze nog wel (enigszins) te gebruiken, en andere zoekmachines ook. Geldt weer hetzelfde: ze moeten ook weer op pagina terugkomen. En niet meer dan hooguit zo'n 20.

Daarnaast is de title van groot belang voor zoekmachines. Ook die moet bij elke pagina (iets) verschillen. Dit is wat je bovenaan in de browser ziet. En liefst ook weer met 'n aantal woorden die terugkomen op de pagina.

En 'n <h1> is ook heel belangrijk. De belangrijkste kop van de pagina. Die kan het beste hetzelfde zijn als de title. Ook weer vanwege misbruik in het verleden.

Dat terugkomen van woorden op de pagina is omdat in het verleden mensen 'n populaire zoekterm in title, description, e.d. zetten, waar de pagina verder niets mee te maken had.
 
Trouwens ik heb ik de txt bestanden waarnaar ik verwijs vanuit PHP... een Doctype en <html> en dergelijke opgenomen... is dit wel nodig voor de bereikbaarheid?
Dacht zelf van niet.
Klik om te vergroten...
Dacht zelf ook van niet. :)
Als je met PHP een code-fragment binnenhaalt (met .txt extensie of een andere extensie; maakt niet uit), dan monteert de php-machine op de server dat code-fragment letterlijk in de pagina, op de plaats waar je dat besteld hebt.
Zou je er een complete html-pagina van maken (met Doctype, <html>, enz.) dan zou dat allemaal binnen de pagina gemonteerd worden, en dat gaat wat lastig: er kan geen html-document binnen een ander html-document zitten. Geen twee <head>'s, geen twee <body>'s: veelkoppige monsters worden niet toegestaan!
  • Wat dit betreft werkt een php-include dus essentieel anders (en: veel makkelijker) dan een iframe of ander frame, waarin juist wel een aparte complete pagina getoond wordt.
Conclusie: je kunt dat Doctype, <html> enz. er weer afschroeven, want dat zou wel eens toch onverwachte effecten kunnen leiden!

Met vriendelijke groet,
CSShunter
 
ok, dank je Goeroeboeroe en csshunter.

Wil trouwens nog een contactformulier in PHP erop zetten.... iemand van jullie een pasklare oplossing hiervoor die ik eventueel kan aanpassen?

Dit omdat PHP studie me op zo`n korte termijn nog niet gaat lukken :D

Zou graag een PHP script hebben zodat alle velden ingevuld zouden moeten worden en dat ik terug kan reageren zonder dat iedereen mijn mailadres kan zien.

Ik zie vaker in een PHP formulier dat je het mailadres niet kunt zien maar als je daar dan een antwoord op krijgt heb je het vervolgens nog.


Liefst op onderstaand sjabloon:

Contactformulier

Naam: *
E-mailadres:*
Adres:
Postcode:
Woonplaats:
Telefoon:

Vragen en/of opmerkingen*:


Velden met * zijn verplicht.


Groeten, Marc
 
Hallo csshunter,

Nog een paar dingen proberen voordat ik de site ga opbouwen.

Ik heb onderstaande code gebruikt op een plaatje, het plaatje dat ik gebruik heeft een formaat van 512* 341... hierdoor krijg ik een horizontale scrolbar als ik het scherm kleiner maak maar ook weer een dubbele wanneer het scherm te klein wordt. Denk alleen niet dat het vaak voorkomt.

Is het juist wat ik heb gedaan en wat ik moet ik gebruiken wanneer ik een combinatie van tekste en plaatje binnen de #htcode heb staan height in px of in em?

#htcode {
background: #2C273D;
color: white;
padding: 5px;
height: 370px;
overflow: auto;


Verder heb ik in de root dus de eerste pagina staan index.php...vanuit hier verwijs ik naar de txt bestanden voor header en menu.

Maar wat te doen als ik vanuit de index.php een link ga zetten naar b.v. diversen/autosport.html... deze wil ik ook gebruik laten maken van de header.txt dat had ik wel gevonden dat ik dan ../header.txt kan gebruiken.

Maar aangezien in de header een plaatje staat in de root logo/logo.jpg kan dit plaatje dus niet aangesproken worden vanuit het zelfde txt header bestand.

Dus zou ik nog een header meoten maken binnen de map diversen of daar nog een logo neer moeten zetten


Groeten, Marc
}
 
Hoi Marc,
Eerst even de laatste vraag.
... Maar aangezien in de header een plaatje staat in de root logo/logo.jpg kan dit plaatje dus niet aangesproken worden vanuit het zelfde txt header bestand.
Dus zou ik nog een header moeten maken binnen de map diversen of daar nog een logo neer moeten zetten?
Klik om te vergroten...
Nee, gelukkig hoeft dat niet (anders was ook het hele voordeel van 1 gezamenlijk php codefragment verdwenen).
Als je in de header.txt niet het relatieve pad naar het logo opgeeft, maar het absolute pad (dus vanaf het begin van de site), dan gaat het altijd goed.
Dus bv. niet:
HTML: 
<img src="logo/logo_top.jpg" width="315" height="99" alt="">
maar:
HTML: 
<img src="http://www.digitreport.com/logo/logo_top.jpg" width="315" height="99" alt="">
Tot zover,
Met vriendelijke groet,
CSShunter
 
Hallo csshunter,

Het onderdstaande heb ik begrepen.

Code: 
HTML Code:
1
 <img src="http://www.digitreport.com/logo/logo_top.jpg" width="315" height="99" alt="">


Tot zover alvast bedankt... mocht je een antwoord hebben op de #htcode hoor ik het graag van je.



Groeten, Marc
 
Voor een combinatie van tekst en plaatje in één "rij" kan je een serie <div>'s aanmaken waarbinnen een tekstkolom van een bepaalde breedte en de bijbehorende afbeelding zit. De tekst is "links drijvend" gemaakt met { float: left; }, dan komen ze naast elkaar te staan. Deze combi-<div> moet in de css de breedte meekrijgen van de tekstkolom + de breedte van de grootste afbeelding + de aangebrachte paddingen links-rechts (die zijn aangebracht om wat afstand te creëren). Anders duikt het img er alsnog onder!
  • Een voorbeeld staat hier. Zie de broncode voor hoe het precies gedaan is.
(getest in FF3 en IE7)

Met vriendelijke groet,
CSShunter
 
Dank je csshunter,

Ik ga er zo snel mogelijk eens naar kijken. Eerst even zo wat pc problemen herstellen hier.

Ik kom er nog op terug.


Groeten, Marc
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan