logo plaatsen in een header

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
Plaats reactie
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

logo plaatsen in een header

Bericht door Hannes57 »

Hallo Allemaal,

Ik ben bezig met een template aan te passen. De template is in XHTML transitional.

Ik wil graag een heel simpele logo in de header plaatsen. Maar ik kom er niet meer uit.

De header is in een Div geplaatst: div id header . In de header staat een tekst met de naam v. d. site. Nu wil ik voor de tekst een logo plaatsen aan de linker kant. De site heeft geen koloms, maar is 60em breed in een wrapper. Heel simpel, als je het snapt.

De header is dus 60em breed met een tekst.
Hoe plaats ik de logo? De logo staat in een map: IMAGES. met als naam: logo.

Moet ik een div class maken of een div logo? Ik kom er even niet uit. En hoe moet ik die noemen?
CSS is geplaatst in een externe map. Maar ik lees dat veel websites een embedded css hebben. Wil ik nog over nadenken..... :D

Ik gebruik kompozer en doe de aanpassingen in de bron.

Han.
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

Niemand? Help... Ik kan niet verder.

H.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Android Firefox
Contacteer:

Re: logo plaatsen in een header

Bericht door nirwana »

Han,

Als je iets op een forum plaatst, verwacht dan niet binnen een paar uur een reactie. Dit forum wordt geheel onderhouden door vrijwilligers, dus dat betekent dat we ook andere dingen te doen hebben. Toch kun je hier wel snel geholpen worden, dus het is maar net wie je hier online treft.

Als je Kompozer vooral gebruikt om HTML in de bron te bewerken, dan kun je net zo goed elke andere teksteditor gebruiken (Notepad, etc). Maar dat moet je uiteraard helemaal zelf weten.

Dan over naar jouw vraag. Ik zou die afbeelding eerst maar eens een align="left" meegeven, zodat die aan de linkerkant van de tekst wordt geplaatst.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Android Firefox
Contacteer:

Re: logo plaatsen in een header

Bericht door nirwana »

Zie ook https://www.w3schools.com/tags/att_img_align.asp over het uitlijnen van afbeeldingen in HTML.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

Sorry, mijn excuses hier voor.

Net terug van Spa-Franchorchamps. Ik heb de site maar in tabellen gemaakt. Binnen 5 minuten was de pagina, de index, klaar. Precies zo als ik hem hebben wil. Simpel, maar doeltreffend.

Het punt is: moet er een div geplaatst worden tussen de div id header met de naam, bijv. div id logo of zo iets. Ik heb het geprobeerd maar is op een mislukking uit gedraaid.

div id="wrapper">
<div id="header">HKV plastic schaalmodellen</div>


Zo ziet het er, momenteel, uit. Om het mij gemakkelijk te maken wil ik het eens proberen in een embedded CSS. Van dat externe snap ik niet zoveel en blijf op de pagina die ik maak. Nogmaals de Template is gemaakt in XHTML Trans. en heb ook op gezocht dat de schrijfwijze iets anders is dan HTML 4 of 5.

Han
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

Ok, wat heb ik gedaan. Een nieuwe div aan gemaakt onder div header via dit: <div id="logo"> --- <src="/images/logo.jpg /> --- </div> .

in de externe css stylesheet: #logo {
width: 100px;
height: 164px;
float: left;
}

Deze staat onder de #header. Zelf gemaakt.

Maar... toch zie ik het logo niet. Wat is er fout gegaan, hier loop ik al een hele tijd tegen aan.

Han
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

Dit heb ik nu geprobeerd. Map; gewoon images. Logo: logo.jpg.

in html: <img src="logo.jpg" alt="logo links" width="100px" height:="164px"></img>

Wat ik nu krijg: in de header staat de tekst: logo links. Maar... geen plaatje.

Han
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

Ok, weer wat anders gedaan. De div id logo verwijderd. Ook uit de css. Kompozer gestart en op de ouderwetse manier het logo geplaatst met hulp van afbeelding knop in K. De afbeelding voor de tekst geplaatst en de tekst in de header iets naar rechts geschoven met hulp van het toetsenbord. KLAAR!!!

Han.
Janusz2018
Berichten: 50
Lid geworden op: 20 augustus 2017, 16:23
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Janusz2018 »

Hai Hannes,

Ik werk in met diverse methodes, maar als ik snel iets wil hebben, kijk ik even bij anderen in de bron die of hetzelfde als ik of bijna hetzelfde hebben.

Soms ben je dan ineens eruit.

Probeer dit eens

#logo {
width: 100px;
height: 164px;
float: left;
Logo: url(./default/jouw logo) ;
}
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

bedankt voor je antwoord. Probeer het eens uit.

Han
Hannes57
Berichten: 17
Lid geworden op: 7 februari 2016, 17:10
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Hannes57 »

Weer in een div geplaatst en weer mislukt. Dit is wat ik krijg:Zie bijlage.

Iedere keer de tekst en geen logo. Wat ik ook lees is dat er de website naam in moet voorkomen?

Han
Bijlagen
website.png
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Android Firefox
Contacteer:

Re: logo plaatsen in een header

Bericht door nirwana »

Janusz2018 schreef:
#logo {
width: 100px;
height: 164px;
float: left;
Logo: url(./default/jouw logo) ;
}
Er bestaat geen logo-eigenschap in CSS, dus ik denk dat die laatste regel niet klopt. Dat zou dan content: moeten zijn volgens https://stackoverflow.com/questions/218 ... tag-in-css

Overigens zou ik de src van de img gewoon in de HTML-code laten staan en niet via CSS te laten lopen. Die methode wordt namelijk door elke browser ondersteund.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Android Firefox
Contacteer:

Re: logo plaatsen in een header

Bericht door nirwana »

Hannes57 schreef:Dit heb ik nu geprobeerd. Map; gewoon images. Logo: logo.jpg.

in html: <img src="logo.jpg" alt="logo links" width="100px" height:="164px"></img>

Wat ik nu krijg: in de header staat de tekst: logo links. Maar... geen plaatje.
Je krijgt hier geen afbeelding omdat je de afbeelding in de Images-map hebt gezet. Dan moet je ook naar die map verwijzen <img src="Images/logo.jpg" alt="logo links" width="100px" height:="164px"></img>
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Janusz2018
Berichten: 50
Lid geworden op: 20 augustus 2017, 16:23
    Windows 10 Firefox

Re: logo plaatsen in een header

Bericht door Janusz2018 »

nirwana schreef:
Janusz2018 schreef:
#logo {
width: 100px;
height: 164px;
float: left;
Logo: url(./default/jouw logo) ;
}
Er bestaat geen logo-eigenschap in CSS, dus ik denk dat die laatste regel niet klopt. Dat zou dan content: moeten zijn volgens https://stackoverflow.com/questions/218 ... tag-in-css

Overigens zou ik de src van de img gewoon in de HTML-code laten staan en niet via CSS te laten lopen. Die methode wordt namelijk door elke browser ondersteund.
Misschien niet n PHP, maar ik gebruik voor Fora het Yabb systeem is Perl en iets anders. Ik heb in wordpress niet gekeken want daar werkt het weer anders. In Yabb gaat er een deel voor een logo in CSS met een verwijzing in Head.
Plaats reactie