Hej
Börjar få lite grepp om hur saker och ting hanteras i Drupal - men får dock fortfarande anses som novis på området, min bakgrund ligger inom Java-utveckling men det har man inte så stor nytta av här.
Till saken nu, jag har skapat två views-sidor som visar bildgallerier, ett som rutnät och ett som slideshow - båda använder sig av lightbox-visning om man klickar miniatyrbilden. Dessutom har jag skapat två ImageCache-presets, en för miniatyr o en för Lightbox. Miniatyren skalar bilden till 120 pt höjd, vilket ju gör att bredden kan variera på miniatyrbilderna mellan varje slide (vill inte beskära, blir inte snyggt), och jag slipper helst att forma om bilderna med transparent utrymme i sidorna vilket annars skulle kunna lösa detta. Jag är mer ute efter att inställningsmässigt i Drupals admin-konsol, eller med ngn CSS-twek kunna centrera miniatyrbildena på sdian dom visas.
Den klass som är aktuell är view-content och underliggande. om jag sätter text-align: center; på en då centreras navigeringsraden under bildspelet men inte miniatyrbilden i bildspelet. Om jag refreshar browsern så ser jag att bilden tillfälligt hoppar till centrerat läge men direkt återgår till vänsterjusterat. Undrar om det är ngt lightbox/jquery-relaterat css-spöke som trollar.
Undrar om ngn har tips på hur man löser detta.
Jag kör Drupal 6.19
/R
Comments
Kan visa CSS och HTML?
Kan du posta HTML eller en länk till källa koden? Jag har precis kämpat med en liknande projekt. Jag är helt säkert att om du använda firebug du hittar buggen. I flesta fall det är nån CSS float problem när sidan hoppar under laddning
Carl McDade
Drupal Source Exchange - alpha
Text-align & IE8
Hej och tack för snabbt svar...
Jag kan plocka ut källkoden med Firebug omgående, lika bra att ta hela sidan...
Vilket visade sig omöjligt, för många tecken förmodligen, så det blir ett utdrag ur den renderade htl-sidan ist
Det fungerar i FF om jag sätter
#views_slideshow_singleframe_main_Gallery_fp-page_2{text-align: -moz-center;
}
men inte med text-align: center; i ngn av webbläsarna (Har dock bara testat IE-8 o FF-3.6.12).
Hmm såg just en annan sak, använder Developer Tools för IE och ändrade till IE-7 läge, och då ser det OK ut... Dessa browser-hack är djävulens verk...
Var tvungen att testa lite mer med de verktyg som finns i IE och kom fram till följande tabell:
- IE7 Mode: Funkar både i Quirks mode & Standard
- IE8 Mode: Funkar i Quirks mode, IE7 Standards (man kan välja det för IE8 mode), men inte för IE8 Standard (Page default)
- IECompat View: Funkar i Quirks mode & IE7 Standard, men inte i IE8 Standard mode
Kan inte hitta ngt liknande för FF, trots att jag kör både Firebuf & Web Developer Tools... men där funkar det ju med -moz-center;
Summa summarum så verkar IE8 strula till det med sin standard mode, och jag som trodde att quirks mode bara fanns för att gamla webbplatser skulle slippa byggas om enligt nya W3C-standarder, det får en att fundera på om Drupal inte använder rätt dokument-modell eller doc-type, men den ser OK ut (Strict)...
Innan jag öser på med källkoden för den renderade webbsidan som inte funkar i IE så kommer först ett utdrag från style.css för det tema jag använder:
#views_slideshow_singleframe_main_Gallery_fp-page_2{
text-align: center;
text-align: -moz-center;
}
.viewsSlideshowSingleFrame-processed{
text-align: center;
}
.views_slideshow_main{
text-align: center;
}
.views_slideshow_singleframe_main{
text-align: center;
}
Och nu den renderade källkoden:
<div class="view-content"><div id="views_slideshow_singleframe_main_Gallery_fp-page_2" class="views_slideshow_singleframe_main views_slideshow_main">
<div id="views_slideshow_singleframe_teaser_section_Gallery_fp-page_2" class="views_slideshow_singleframe_teaser_section">
<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-1 views-row-odd" id="views_slideshow_singleframe_div_Gallery_fp-page_2_0">
<div class="views-row views-row-0 views-row-first views-row-odd">
<span class="views-field-field-image-fid" style='align:center;'>
<span class="field-content">
<a href="http://localhost/drupal-6.19/sites/default/files/imagecache/lightbox/feelinggood.png" rel="lightbox[field_image][Feelin gooood, sooo good!<br /><br /><a href="/drupal-6.19/?q=node/84" id="lightbox2-node-link-text">Bilddetaljer</a>]" class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumbnail imagefield-field_image imagecache imagecache-field_image imagecache-thumbnail imagecache-field_image-thumbnail">
<img src="http://localhost/drupal-6.19/sites/default/files/imagecache/thumbnail/feelinggood.png" alt="Feelin gooood, sooo good!" title="Feelin gooood, sooo good!" width="105" height="80" />
</a>
</span>
</span>
</div>
</div>
<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-2 views_slideshow_singleframe_hidden views-row-even" id="views_slideshow_singleframe_div_Gallery_fp-page_2_1">
<div class="views-row views-row-0 views-row-first views-row-odd">
<span class="views-field-field-image-fid" style='align:center;'>
<span class="field-content">
<a href="http://localhost/drupal-6.19/sites/default/files/imagecache/lightbox/jonatan.png" rel="lightbox[field_image][Porträtt 3<br /><br /><a href="/drupal-6.19/?q=node/88" id="lightbox2-node-link-text">Bilddetaljer</a>]" class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumbnail imagefield-field_image imagecache imagecache-field_image imagecache-thumbnail imagecache-field_image-thumbnail">
<img src="http://localhost/drupal-6.19/sites/default/files/imagecache/thumbnail/jonatan.png" alt="Porträtt 3" title="Porträtt 3" width="70" height="80" />
</a>
</span>
</span>
</div>
</div>
<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-16 views_slideshow_singleframe_hidden views-row-even" id="views_slideshow_singleframe_div_Gallery_fp-page_2_15">
<div class="views-row views-row-0 views-row-first views-row-odd">
<span class="views-field-field-image-fid" style='align:center;'>
<span class="field-content">
<a href="http://localhost/drupal-6.19/sites/default/files/imagecache/lightbox/gray-lady_0.png" rel="lightbox[field_image][Mrs Dandy<br /><br /><a href="/drupal-6.19/?q=node/66" id="lightbox2-node-link-text">Bilddetaljer</a>]" class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumbnail imagefield-field_image imagecache imagecache-field_image imagecache-thumbnail imagecache-field_image-thumbnail">
<img src="http://localhost/drupal-6.19/sites/default/files/imagecache/thumbnail/gray-lady_0.png" alt="Mrs Dandy" title="Mrs Dandy" width="107" height="80" />
</a>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="views-slideshow-controls-bottom clear-block">
<div class="views_slideshow_singleframe_controls views_slideshow_controls" id="views_slideshow_singleframe_controls_Gallery_fp-page_2">
<a href="# " class="views_slideshow_singleframe_previous views_slideshow_previous" id="views_slideshow_singleframe_prev_Gallery_fp-page_2">Previous</a>
<a href="# " class="views_slideshow_singleframe_pause views_slideshow_pause" id="views_slideshow_singleframe_playpause_Gallery_fp-page_2">Pause</a>
<a href="# " class="views_slideshow_singleframe_next views_slideshow_next" id="views_slideshow_singleframe_next_Gallery_fp-page_2">Nästa</a>
</div>
</div>
</div>
/R
Har du provat med typ
Har du provat med typ följande för det omgivande <div>-blocket?
.div_to_center {margin-left: auto;
margin-right: auto;
width: 750px;
}
<div class="div_to_center">...Rendered html...
</div>
width i css:en brukar jag ha men det funkar ev. utan det.
/Thomas
Mest rätt
Lösning från Thomas är mest rätt för alla webbläsare. Text - align: center även med !important kommer inte att funka helatiden.
Carl McDade
Drupal Source Exchange - alpha