[Solved] Afbeeldingen in Brandsblok worden platgedrukt weergegeven

[Frevab]

Ik heb een aangekocht theme en daar zit volgens mij een foutje in.

Hij toont een slider met merklogo's maar de logo's in de slider hebben een andere hoogte-breedte verhouding dan de afbeeldingen die geupload werden.

De beschrijving geeft aan dat het brand logo in 240x130px geupload moet worden. Maar in de slider worden ze kleiner weergegeven. Op zich gene probleem, maar ze zijn wat plat gedrukt.

 

Als ik in uhubrand.css kijk staat er:

 

quote

 

/* Block uhubrand */

#manufacturers_block_center {

float: left;

margin: 5px;

padding: 0 5px;

width: 960px;

height: 126px;

background: #FAFAFA;

border: none;}

#manufacturers_block_center h4 { color: #E60418;

padding: 0;

width: 961px;

height: 34px;

line-height: 34px;

font-size: 18px;

font-weight: normal;

margin: 0;

text-indent: 15px;

border-bottom: 4px solid #027ACC;

margin-bottom: 10px;

background: none;

}

#manufacturers_block_center .block_content { padding: 0 40px; }

#manufacturers_block_center ul { list-style-type: none; padding: 0 }

#manufacturers_block_center ul li { float: left; width: 149px; height: 50px; margin-top: 0px; margin-left: 0px; overflow: hidden }

#manufacturers_block_center ul li img { width: 131px; height: 48px; padding: 0 18px 0 0; border: 0px solid #EAEAEA }

#manufacturers_block_center ul li.first_item { margin-left: 0 }

 

unquote

 

Om het logo/afbeelding correct weer te geven moet hij in de slider naar 131x71 of 89x48 gezet worden om de afbeelding in de juiste aspectratio te houden.

Nauw heb ik geen kennis van programmeren dus is mijn vraag: kan ik in de css de hoogte gewoon aanpassen? Zo ja, is dat dan de regel met:

#manufacturers_block_center ul li img { width: 131px; height: 48px; padding: 0 18px 0 0; border: 0px solid #EAEAEA }

Die wil ik dan naar 131px en 71px zetten. Kan dat zo maar?

Qua ruimte aan de onderkant van de het blok moet dit kunnen (zie bijlage. heb de achtergrond van lichtgrijs naar geel gezet in deze bijlage anders is het moeilijk te zien). Volgens mij is dit ene programmeerfout want de ruimte aan de onderkant is er voldoende.

Of is er een relatie met de andere bestanden in de module map (zoals config,xml en de tpl en php) waardoor je de afmetingen van de afbeeldingen niet zo maar kan wijzigen.

 

Bij voorbaat dank voor jullie hulp.

 

(PS versie 1.4.9.0.)

Edited January 23, 2013 by Frevab (using 1.4.9.0) (see edit history)

[impressed]

Waarom maak je de afbeeldingen niet op maat die de slider daadwerkelijk weergeeft. Volgens jouw afbeelding (als dat op ware grote is) is dat 129px x 29px. Zo hoef je geen CSS aan te passen.

 

Je kunt natuurlijk zoals je zelf ook aangeeft de CSS aanpassen. Ik download altijd het betreffende css file naar mijn pc open 'm in notepad++ pas aan waar nodig en upload dan. Mocht het niet werken kun je in notepad++ gewoon undo'en en de css weer uploaden. Je kunt natuurlijk ook een kopie maken van het orginele CSS bestand. Vooral als je geen verstand hebt van CSS zou ik even een backup maken van de orginele. Dat voorkomt frustratie.

 

Nog een tip als je firefox hebt kun je firebug als addon toevoegen. Als je dan op de rechtermuisknop klikt en dan op "Inspect element in firebug" krijg je onderaan in de browser een scherm met de code te zien. Links de html en rechts de bijhorende CSS. Je kunt dan ook de CSS en dergelijke hier aanpassen (is niet blijvend. Na laden van pagina is alles weer als het oude). Zo kun je bekijken of het geen je doet ook werkt zoals je dat dacht. Werkt het dan pas je het aan in het CSS file en upload het.

[Frevab]

Ik heb een aangekocht theme en daar zit volgens mij een foutje in.

Hij toont een slider met merklogo's maar de logo's in de slider hebben een andere hoogte-breedte verhouding dan de afbeeldingen die geupload werden.

De beschrijving geeft aan dat het brand logo in 240x130px geupload moet worden. Maar in de slider worden ze kleiner weergegeven. Op zich gene probleem, maar ze zijn wat plat gedrukt.

 

Als ik in uhubrand.css kijk staat er:

 

quote

 

/* Block uhubrand */

#manufacturers_block_center {

float: left;

margin: 5px;

padding: 0 5px;

width: 960px;

height: 126px;

background: #FAFAFA;

border: none;}

#manufacturers_block_center h4 { color: #E60418;

padding: 0;

width: 961px;

height: 34px;

line-height: 34px;

font-size: 18px;

font-weight: normal;

margin: 0;

text-indent: 15px;

border-bottom: 4px solid #027ACC;

margin-bottom: 10px;

background: none;

}

#manufacturers_block_center .block_content { padding: 0 40px; }

#manufacturers_block_center ul { list-style-type: none; padding: 0 }

#manufacturers_block_center ul li { float: left; width: 149px; height: 50px; margin-top: 0px; margin-left: 0px; overflow: hidden }

#manufacturers_block_center ul li img { width: 131px; height: 48px; padding: 0 18px 0 0; border: 0px solid #EAEAEA }

#manufacturers_block_center ul li.first_item { margin-left: 0 }

 

unquote

 

Om het logo/afbeelding correct weer te geven moet hij in de slider naar 131x71 of 89x48 gezet worden om de afbeelding in de juiste aspectratio te houden.

Nauw heb ik geen kennis van programmeren dus is mijn vraag: kan ik in de css de hoogte gewoon aanpassen? Zo ja, is dat dan de regel met:

#manufacturers_block_center ul li img { width: 131px; height: 48px; padding: 0 18px 0 0; border: 0px solid #EAEAEA }

Die wil ik dan naar 131px en 71px zetten. Kan dat zo maar?

Qua ruimte aan de onderkant van de het blok moet dit kunnen (zie bijlage. heb de achtergrond van lichtgrijs naar geel gezet in deze bijlage anders is het moeilijk te zien). Volgens mij is dit ene programmeerfout want de ruimte aan de onderkant is er voldoende.

Of is er een relatie met de andere bestanden in de module map (zoals config,xml en de tpl en php) waardoor je de afmetingen van de afbeeldingen niet zo maar kan wijzigen.

 

Bij voorbaat dank voor jullie hulp.

 

(PS versie 1.4.9.0.)

 

 

Heb dus gewijzigd in:

 

#manufacturers_block_center ul li { float: left; width: 149px; height: 73px; margin-top: 0px; margin-left: 0px; overflow: hidden }

#manufacturers_block_center ul li img { width: 131px; height: 71px; padding: 0 18px 0 0; border: 0px solid #EAEAEA }

 

en nu is het formaat wel goed.