Afbeelding uitlijnen ?

[clioke]

Hoi,

Ten 1ste.. Ik heb geen verstand en kennis van CSS .

Maar toch wou ik graag weten of ik een afbeelding zomaar ergens op een bepaalde plek op een website kan plaatsen waar ik maar wil.
Zo ja, hoe doe je dit dan in css ?

In de pagina-info staat dit:
(plaatje is dus de afbeelding)
Deze staan een paar pixels te ver naar rechts en zou +/-1mm meer naar links moeten komen.

</div>
<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>
<td><a href="./index.php"><img src="./styles/DVGFX2/imageset/plaatje.jpg" width="1000" height="180" alt="" title="" /></a></td>
<td width="100%" align="center"><h1></h1><span class="gen"></span></td>
</tr>
</table>
</div>



Bedankt,

 

[csshunter]

Hoi clioke,

Maar toch wou ik graag weten of ik een afbeelding zomaar ergens op een bepaalde plek op een website kan plaatsen waar ik maar wil.

Ja, met css moet dat kunnen.

Deze staan een paar pixels te ver naar rechts en zou +/-1mm meer naar links moeten komen.

Hoe het in dit geval moet, is van buiten af niet te zeggen. Het kan bv. samenhangen met allerlei andere dingen in de al bestaande css. Het zou ook nog het plaatje zelf kunnen zijn.

Heb je een link naar een testpagina, waarop we dat te-ver-naar-rechts plaatje kunnen zien?

Met vriendelijke groet,
CSShunter

 

[clioke]

Het gaat om onze banner op onderstaand forum...
KLIK HIER

Je ziet dat deze niet mooi gelijk staat met de header van de pagina.
Staat iets te ver naar rechts en dat zou schijnbaar niet zomaar via het panel te wijzigen zijn.

 

[csshunter]

Hoi clioke,
Zet dit in je stylesheet:

#logodesc td { padding: 0; }

... en: floeps!

Toelichting:
Via de styleregel td {padding: 2px;} hebben alle tabelcellen o.a. een padding-left (loze opvulling) van 2px gekregen, zodat letters niet pal tegen de zijkant staan.

Het logo zit ook in een tabelcel, en die cel weet niet dat het voor dit img niet hoeft. Daarom een uitzonderingsregel voor deze cel, die de enige cel is in de table die in de <div id="logodesc"> zit.

Met vriendelijke groet,
CSShunter

 

[clioke]

Bedankt,

Ik ben hier op een knip alweer wat wijzer geworden :thumb:

In de stylesheet staat momenteel hetvolgende:

#logodesc {
margin:0 0 10px 0;
padding: 5px 0 5px 0;
background-image: url("./images/head.png");
background-repeat: repeat-x;
background-color: #2E2E31;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
float: left;
width: 100%;

 

[csshunter]

In de stylesheet staat momenteel het volgende: ...

Ja, dat klopt helemaal.
De <div id="logodesc"> heeft een {padding: 5px 0 5px 0;}, d.w.z. onder en boven 5px, en links en rechts niets.
Maar dat geldt alléén voor de <div id="logodesc"> zelf, en niet persé ook voor wat er binnen die <div> staat.

• De eigenschappen van een padding worden namelijk niet geërfd door elementen die binnen een element met die padding zitten. Volgens de css-specificatie voor de padding-eigenschappen: "inherited: no".

Binnen de <div id="logodesc"> staat in ons geval een <td> (= "table data" = tabelgegevens = inhoud van een tabelcel). En die <td> had, net als de andere <td>'s op de pagina, een {padding: 2px;}, dus 2px aan alle kanten.

Vandaar dat de uitzondering voor alleen die <td> die binnen de <div id="logodesc"> staat, in dit geval de oplossing is. *)
En dat moet dus in een aparte style-regel komen te staan: #logodesc td {padding: 0;} die toegevoegd moet worden aan het stylesheet (geeft niet waar).

__________
*) Er zijn nog de tussenliggende elementen <table> en <tr>, waar de <td> in zit. Maar die hebben geen padding aan de linkerkant, als je dat gaat uitpluizen. Daar hoeft dus niets mee te gebeuren.

 

[clioke]

Fijn,

We proberen het eens.

Bedankt voor je duidelijke toelichting :thumb: