logo plaatsen in een header

[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.....

Ik gebruik kompozer en doe de aanpassingen in de bron.

Han.

[Hannes57]

Niemand? Help... Ik kan niet verder.

H.

[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.

[nirwana]

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

[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]

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]

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]

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]

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]

bedankt voor je antwoord. Probeer het eens uit.

Han

[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

[nirwana]

#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.

[nirwana]

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>

[Janusz2018]

#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.