Hej!
Jag undrar hur jag lägger in individuella tumnagelbilder i en lista. Nån som kan hjälpa mig? Använder Drupal (CMS) och där genereras listorna med php, men jag kan styra dem med css. Vill ha små bilder i en sidonavigationsmeny.
Tack
Med tanke på din rubrik så är din fråga förmodligen mer komplicerad än vad mitt svar är. Men om du sätter width på ul som är den bredd som du vill ha på menyn och sedan lägger in tumnaglarna/bilder i de li där du vill ha dina rubriker... är vi på rätt spår då?
Med tanke på att användaren i dag kan zooma sidor är det kanske inte så bra att skapa tumnaglar i en meny utan i stället låta css få dem att se ut som tumnaglar...
Eller menar du som många har på http://www.csszengarden.com/
där de sätter en class på <h3> en för varje bakgrundsbild om du tittar på det där det står select a design, archive och resources på rubrikerna.
Hade det varit fråga om en egenskriven lista (<ul>) så hade jag ju kunnat ange en id för varje <li>-element (som här ).
Men nu är det ju Drupal som via php-kommandon skapar listan.
Hmm, kanske är lite överkurs, får nog dryfta det bland php-folket på Drupal.org (misstror inte era förmågor utan inser bara att det behövs lite drupalvana för detta)
Tack så länge
/U
Hmm...
... du kan ju också testa att lägga upp ett kodexempel du skrapat från en av sidorna som Drupal genererat så att vi kan se vilka genereringsbegränsningar du måste leva med (eller tala om vilken Drupalmodul som genererar listan alternativt vilket tema det gäller ;) )
En annan sak som är bra att veta när vi pratar Drupal är om du kan tänka dig att rådda i temamallarna så att koden som "genereras av Drupal" ändras eller ej ;)
... men det är inte *säkert* att det krävs Drupalvana (beroende, som sagt, av hur koden som genereras idag ser ut ;) )
Hallå gamle vän!
Var inte meningen att komma "von oben" på något sätt. Jag är ju nybörjare som du vet... :) När jag skriver överkurs inkluderar jag mig själv... Men jag tar genast till mig dina synpunkter och ska se om jag kan underlätta genom att vaska fram lite mer info.
PS. Här infogas en stor eloge :birp till jarvklo för hans tålmodiga hjälp i drupalhantering! Diplom! (jarvklo - ta gärna en titt på min sajt https://www.redbluefilm.com ;))
De två php-moduler som jag misstänker genererar koden är system.module och menu.module. Jag klistrar nedan in ett avsnitt ur system.module.
Bifogar även hela menymodulen som fil, men jag vet inte om den har så stor betydelse i sammanhanget.
Så här ser det ut i system.module:
/**
* This function formats the content of an administrative block.
*
* @param $block
* An array containing information about the block. It should
* include a 'title', a 'description' and a formatted 'content'.
* @themeable
*/
function theme_admin_block_content($content) {
if (!$content) {
return '';
}
if (system_admin_compact_mode()) {
$output = '<ul class="menu">';
foreach ($content as $item) {
$output .= '<li class="leaf">'. l($item['title'], $item['path'], array('title' => $item['description'])) .'</li>';
}
$output .= '</ul>';
}
else {
$output = '<dl class="admin-list">';
foreach ($content as $item) {
$output .= '<dt>'. l($item['title'], $item['path']) .'</dt>';
$output .= '<dd>'. $item['description'] .'</dd>';
}
$output .= '</dl>';
}
return $output;
}
Det *går* att lösa i CSS om man inte oroar sig så mycket för att alla menyer lär få samma ikon i MSIE6 (som inte stöder "+" i CSS-selektorer) genom att infoga bilden som en bakgrundsbild i a samtidigt som man "utökar" a till att bete sig som ett block-element.
Här är ett exempel som belyser principen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ett av jarvklos exempel</title>
<style type="text/css">
ul.menu {
display:block;
width: 400px; /* breden på menyn. Resten är "block" som automagiskt tar upp all bredd ;) */
border:1px solid green;
margin:0;padding:0;
}
.menu li {
border:1px solid blue;
display:block;
margin:0;padding:0;
}
.menu li a {
display:block;
/* definiera höjden (28+4 = 32 i detta fall eftersom ikonerna är 32x32)*/
height:28px;
padding-top: 4px;
border:1px solid red;
/* Indrag så att ikonen får plats (OBS! du behöver ingen width här !!!) */
padding-left: 36px;
background-repeat:no-repeat;
background-position: top left;
/* default-ikon */
background-image:url('cold-reboot_32.gif');
}
.menu li+li a { /* andra menypinnen */
background-image:url('snow-duck_32.gif');
}
.menu li+li+li a { /* tredje menypinnen */
background-image:url('misfortune_32.gif');
}
.menu li+li+li+li a { /* fjärde menypinnen */
background-image:url('headshot_32.gif');
}
.menu li+li+li+li+li a { /* femte menypinnen */
background-image:url('snow-shortage_32.gif');
}
.menu li+li+li+li+li+li a { /* sjätte menypinnen */
background-image:url('hobo_32.gif');
}
.menu li+li+li+li+li+li+li a { /* sjunde menypinnen */
background-image:url('snowtem_32.gif');
}
.menu li+li+li+li+li+li+li+li a { /* Åttonde menypinnen */
background-image:url('hard-target_32.gif');
}
</style>
</head>
<body>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/brollop" title="Bröllopsfilm">Bröllopsfilm</a></li>
<li class="leaf"><a href="/familjefilm" title="Familjefilm">Familjefilm</a></li>
<li class="leaf"><a href="/frisbee" title="Frisbee">Frisbee - ny novellfilm</a></li>
<li class="leaf"><a href="/konfrontation" title="Konfrontation">Konfrontation - kortfilm</a></li>
<li class="leaf"><a href="/webbfilm" title="Webbfilm">Webbfilm</a></li>
<li class="leaf"><a href="/webbdesign_webdesign_hemsidor" title="Webbproduktion">Webbproduktion</a></li>
<li class="leaf"><a href="/english" title="In English">In English</a></li>
<li class="leaf"><a href="/veckansfraga">Veckans fråga</a></li>
</ul>
Ikoner från <a href="http://iconbuffet.com">IconBuffet</a>
</div></body>
</html>
fast det är klart, sedan beror det ju lite på vilka andra stilar som påverkar din meny förstås ;) testa :bire
