1. Tudásbázis
  2. Sminkek
  3. Node title kép mellé helyezése

Node title kép mellé helyezése

Beküldte tomee - 2011. szeptember 17. 15.03
tomee képe

Kedves Fórumozók!

Szeretném segítségeteket kérni a következő problémában:

Az oldalam híreit elrendeztem Views és Panels segítségével több szakaszba, és szeretném a legfelső (legelső) cikkemet külön kiemelni az oldalon. Ez sikerült is, csak elég kuszán néz ki az, hogy a cím alatt van a kép, és az alatt vagy mellett a bevezető szöveg. Szeretném úgy megcsinálni, hogy minden szöveg (a cím és bevezető is) a kép mellett lenne jobb oldalon (lásd például a technet.hu oldalán a fő cikket). Sajnos sehogy nem sikerül, a képen is látszik meddig jutottam.

Köszönöm előre is!
Tamás

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
node
Fórum: 
Sminkek
CsatolmányMéret
Kép ikon panel.jpg43.89 KB
Nagy Gusztáv képe

Beküldte Nagy Gusztáv - 2011. szeptember 17. 17.33

egy kép alapján nem lehet megmondani, hogy mit írj a cas-be. Talán egy link jó lenne.

0
0

Nagy Gusztáv

tomee képe

Beküldte tomee - 2011. szeptember 17. 22.56

Localhost-on csináltam, nincs online linkem, ezért bemásolom:

a node.tpl.php tartalma:

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
 
  <?php if ($page == 0): ?>
    <h1 class="title"><a href="<?php print $node_url ?>"><?php print $title ?></a></h1>
  <?php endif; ?>
 
  <?php if ($page != 0): ?>
      <div class="submitted">
      <?php print t('<b>Szerzõ: </b>') . theme('username', $node) . t(' | ') . format_date($node->created, 'custom', "Y. F j.");?>
      </div> 
  <?php endif; ?>
 
  <div class="content"><?php print $content ?></div>
 
  <?php if ($page != 0) : ?>
  <div class="links">
  <?php print $links ?>
  </div>
  <?php endif; ?>
</div>

A CSS pedig itt található (a smink egy erősen módosított arthemia): http://upfone.hu/style.css

Itt a css alján található a "kiemelt" nézet, amelyben van az első node, és ebben a kép mellé raknám a címet és bevezetőt is.

0
0
dyra képe

Beküldte dyra - 2011. szeptember 18. 07.20

Ha nem akarsz bele piszkálni a forrásba a legegyszerűbb ha csinálsz egy új nézetet a Views-al (lehet oldal vagy blokk). Ott mezőket használsz a kép mezőt állítod az első helyre majd css-ben dobsz rá egy float: left; formázást. Ezek után minden elem a képet akarja majd körbe folyni úgy, hogy a kép lesz bal oldalt. Pontosan azt kapod amit a technet.hu is látni.

0
0

honlapom http://dyra.eu/

tomee képe

Beküldte tomee - 2011. szeptember 18. 12.44

Köszönöm a választ, most már a kép mellett jelenik meg minden szöveg, viszont a CSS-ben sehogy nem tudom formázni a bevezető szöveget (field_szoveg). A képet és címet lehet, de a szöveg stílusa nem változik.

A kép és cím erre reagál rendesen...

div.view-kiemelt img{
border: 3px solid #ccc;
padding: 0px;
margin-bottom: 16px;
float:right;

div.view-kiemelt .views-field-title{
font-weight: bold;
font-size: 1.6em !important;
color: #444;
background: transparent;
line-height: 1.1em;
}

A field_szoveg viszont nem...

div.view-kiemelt .views-field-szoveg{
background: #999;
font-size: 1.9em;
}

Továbbá az egymás alatt elhelykedő NODE-ok (cikkek) egybefolynak, ezt hogyan tudnám CSS-ben formázni?

0
0
szantog képe

Beküldte szantog - 2011. szeptember 18. 13.33

nem drupal kérdés.
azon kívül: http://www.tutorial.hu/html5-es-css3/
ennek a megértése nélkül teljesen felesleges bármilyen sminket is bántani.

0
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

dyra képe

Beküldte dyra - 2011. szeptember 18. 15.06

Ha valami összetettebb sminket dolgozol át az elképzelhető, hogy innen onnan behúz formázásokat. Használd a css utasítás végén a !important ez felül ír minden korábbi formázást tehát pl float: left !important; ebben az esetben az adott elemre mindenképp ez a CSS utasítás fog érvényesülni!

"Továbbá az egymás alatt elhelykedő NODE-ok (cikkek) egybefolynak, ezt hogyan tudnám CSS-ben formázni?"

Elemezd ki a sminket amin ténykedsz nézd meg, hogy az oldal mely részeiért a CSS-be milyen formázások felelnek. Ez sem ördöngös picit sem. Jó magam az Opera böngészőt preferálom ebben a böngészőben jobb egér klikkre előjön egy olyan menüpont, hogy "Elem vizsgálata" az egérkét ráviszed a kívánt elemre és már köpi is ki neked a CSS infókat.

Amúgy szeretik egyesek túllihegni ezt az egész CSS mizériát nekem a legnagyobb támaszom egy 1200 FT-ba kerülő CSS zsebkönyv (a Google mellet), tartalmazza az összes fontosabb formázási parancsot amúgy a "nyelv" tök logikus. Szóval én bátorítalak, hogy simán akár minimális tudással is ess neki egy egy CSS-nek mentés úgyis van ha más nem újra lehúzod a sminket. Tanulni meg csak abból fogsz ha élesben csinálod. A legjobb ha csinálsz egy terebélyes saját oldalt mint a mágnes úgy fogod behúzni a fontosabb infókat. Good luck!

0
0

honlapom http://dyra.eu/

tomee képe

Beküldte tomee - 2011. szeptember 19. 10.54

Szia, köszönöm. Én is csak Operát használok, de nem ismertem az "elem vizsgálata" menüt. Ezzel most már megtaláltam az azonosítókat, melyek a CSS-be írva már működnek. A könyv nekem is megvan, csak kölcsönadtam :)

Köszönöm!

0
0