ugrás a tartalomhoz

Újabb CSS feladvány

Kispi92 · 2009. Már. 4. (Sze), 12.25
Adva vagyon egy (drupal alapú) weboldal, és annak tetején egy "középre igazítatlan" logóként funkcionáló kép. Na már most! :D Hogyan tudnám azt kivitelezni, hogy ez az oldalteteji kép valahogy elfogadhatóan passzoljon legalább 1-2 különböző felbontásra beállított képernyőn. Lehetséges ez egyáltalán? :)

A beküldött válaszokat előre is köszönöm...

Üdv:
Kispi92
/egy nagyon amatőr css programozó/
‹ Child and adjacent sibling selectors Táblázat előtt nagy üresség ie alatt ›
 ■
1

nem értem

gex · 2009. Már. 4. (Sze), 12.33
passzoljon valamihez. mi az a valami, mert ezt nem írtad le.
2

mármint a felbontáshoz

Kispi92 · 2009. Már. 4. (Sze), 12.49
mármint a felbontáshoz passzoljon, szóval így értettem! ;) Például legyen mondjuk elfogadható kinézete az oldal fejlécnek 1024*768-ban, 1152*864-ben, és talán 1280*768-ban is...
3

példa

gex · 2009. Már. 4. (Sze), 12.59
egy példa sokat segítene. azt mondod, hogy a logó nincs középre igazítva. akkor valószínűleg a bal felső sarokban van. én minden felbontáson a bal felső sarokban van. hadd ne kelljen már tippelgetni, hogy mi a problémád.
4

nos akkor konkrétum

Kispi92 · 2009. Már. 4. (Sze), 13.14
Nos akkor íme egy kis konkrétum, alábbi sorok szerepelnek a jelenleg használt style.css fájlban:

body {
color: #000;
background: #FFF;
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
font-size: 84%;
padding: 0;
margin: 0;
}

p, .book .body {
padding: 0 0 0.5em 0;
margin: 0;
text-indent: 1.6em;
font-size: 1em;
line-height: 1.6em;
}

pre {
background: #ddd;
border: 1px solid #aaa;
padding: 0.75em 1.5em;
font-size: 12px;
}

form {
padding: 0;
margin: 0;
}

blockquote {
border: 1px #ddd solid;
border-left-width: 0;
border-right-width: 0;
margin: 0.5em 1em;
padding: 0.3em;
font-style: italic;
}

img {
border: 0;
}

#header {
background: #000;
position: relative;
padding: 0 0 0 0;
margin: 0;
}

#header img {
margin: 0 0 0 0;
float: left;
}

Azt hiszem nagyjából kiollóztam belőle a nem ide vonatkozó részeket!!! :D
5

Link

Poetro · 2009. Már. 4. (Sze), 13.24
Egy működő linkkel igencsak meg tudnád könnyíteni a dolgot, ugyanis nem tudjuk hogyan néz ki a HTML oldalad, és ahhoz hogyan passzol a fenti CSS.
6

oldalkép

Kispi92 · 2009. Már. 4. (Sze), 14.39
Oldalképpel tudok szolgálni, ha az is megfelel:

Oldalkép

A fejlécben látható kép háttere (pontosabban a fejléc háttere) a képhez passzoló módon szintén feketére van állítva! :)
7

rakd középre

gex · 2009. Már. 4. (Sze), 14.47
és ez miért nem jó középre igazítva?

szerk: sőt ezt akárhova igazíthatod, gyakorlatilag mindegy neki.
8

ez így persze okés

Kispi92 · 2009. Már. 4. (Sze), 14.54
Mivel ez így (1152x864 képernyő felbontásnál) tényleg tutin néz ki, de ha ugyanezt megnézem bármilyen más felbontásban, akkor a kép már elcsúszik. :S

Az a bajom, hogy nem tudom hogy kell ezt a logót középre igazítani, mivel az "align: center" beállításra nem reagál a kép. Valamit biztos rosszul csinálok! :) Hova és milyen paramétert kell megadni a css-nek (a fent látott style.css-ben) hogy a logo-kép a 'header' rész közepére kerüljön??
9

css background

gex · 2009. Már. 4. (Sze), 15.02
hát ha már eloroztad a css feladvány nevet, akkor átnézhetted volna az előző részt. nagyon egyszerű a megoldás, nem képként kell berakni a képet, hanem a fejléc háttereként. css-ben ez a background tulajdonság. élő példákat a css feladvány hozzászólásai között találsz.
10

nem megfelelő

Kispi92 · 2009. Már. 4. (Sze), 15.40
Az említett forrás nem megfelelő sajnos. A background-os kivitelezést én is fontolgattam már, de sajnos nekem nem tűnik jó megoldásnak. :( Főleg két okból sem:

1. hiába írom be a css #header részébe a backgroundba való beállítást {background: url(sites/default/files/logo.png) no-repeat center 0;} a kép nekem továbbra is balra igazítva látszik.

2. a logo valamiért linkként jelenik meg (talán a drupal felület kezeli így) azaz ez nem egy sima kép, hanem egy linkkel ellátott kép??? :o

Na erre mit felelsz?! :D
11

meguntam

gex · 2009. Már. 4. (Sze), 16.15
Na erre mit felelsz?! :D
valami olyasmit hogy meguntam. Poetro is kért linket, én is, kitalálni senki nem fogja a html forrásod, anélkül meg felesleges css-t írni. azért további sok sikert hozzá.
12

dehát nem figyelsz?

Kispi92 · 2009. Már. 4. (Sze), 16.41
Az egész oldal gyakorlatilag php alapon működik, szóval nem értem hogy milyen html-forrást vársz tőlem. Mivel ez egy Drupal oldal amiben híre-hamva sincs semmiféle .html fájlnak!!!!!!

Viszont találtam még egy ilyen page.tpl.php fájlt a smink fájloknál (ezek felelősek a Drupál oldal kinézetéért!!!) böngészd talán, lehet hogy itt kell keresni a megoldást? Nem tudom... :P


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<title><?php print $head_title; ?></title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
</head>
<body class="<?php print $body_classes; ?>">
<div id="header" class="clear-block">
<?php print $search_box ?>
<?php if ($logo) : ?>
<a href="<?php print url() ?>" title="Index Page"><img src="<?php print($logo) ?>" alt="Logo" /></a>
<?php endif; ?>
<?php if ($site_name) : ?>
<h1 id="site-name"><a href="<?php print url() ?>" title="Index Page"><?php print($site_name) ?></a></h1>
<?php endif;?>
<?php if ($site_slogan) : ?>
<span id="site-slogan"><?php print($site_slogan) ?></span>
<?php endif;?>
<?php print $header ?>
</div>
<div id="top-nav">
<?php if (!empty($secondary_links)): ?>
<?php print theme('links', $secondary_links, array('id' => 'secondary')); ?>
<?php endif; ?>
<?php if (!empty($primary_links)): ?>
<?php print theme('links', $primary_links, array('id' => 'primary')); ?>
<?php endif; ?>
</div>
<table id="content">
<tr>
<?php if (!empty($left)): ?>
<td class="sidebar" id="sidebar-left">
<?php print $left ?>
</td>
<?php endif; ?>
<td class="main-content" id="content-<?php print $layout ?>">
<?php if (!empty($title)): ?>
<h2 class="content-title"><?php print $title ?></h2>
<?php endif; ?>
<?php if (!empty($tabs)): ?>
<?php print $tabs ?>
<?php endif; ?>

<?php if (!empty($mission)): ?>
<div id="mission"><?php print $mission ?></div>
<?php endif; ?>

<?php if (!empty($help)): ?>
<p id="help"><?php print $help ?></p>
<?php endif; ?>

<?php if ($show_messages && $messages): ?>
<div id="message"><?php print $messages ?></div>
<?php endif; ?>

<!-- start main content -->
<?php print($content) ?>
<!-- end main content -->
<?php print $feed_icons; ?>
</td><!-- mainContent -->
<?php if (!empty($right)): ?>
<td class="sidebar" id="sidebar-right">
<?php print $right ?>
</td>
<?php endif; ?>
</tr>
</table>
<?php print $breadcrumb ?>
<div id="footer">
<?php print $footer_message ?>
<?php print $footer ?>
Validate <a href="http://validator.w3.org/check/referer">XHTML</a> or <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</div><!-- footer -->
<?php print $closure;?>
</body>
</html>
13

HTML

Poetro · 2009. Már. 4. (Sze), 16.51
Ebből a generált HTML kellene, nem a PHP forrás.
14

hát

Kispi92 · 2009. Már. 4. (Sze), 17.26
az sem lesz egyszerű feladat (mármint ezt kibogozni :D) de már megy is a generált html-kód:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu" dir="ltr">
<head>
  <title>munkacim </title>
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/drupal/misc/favicon.ico" type="image/x-icon" />
  <link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/node/node.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/poll/poll.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/system/defaults.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/system/system.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/system/system-menus.css?c" />

<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/user/user.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/cck/theme/content-module.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/filefield/filefield.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/imagefield/imagefield.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/thickbox/thickbox.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_order/uc_order.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_product/uc_product.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_store/uc_store.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/forum/forum.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_cart/uc_cart_block.css?c" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/themes/box_grey/style.css?c" />
  <script type="text/javascript" src="/drupal/misc/jquery.js?c"></script>
<script type="text/javascript" src="/drupal/misc/drupal.js?c"></script>
<script type="text/javascript" src="/drupal/sites/default/files/languages/hu_8582a244f490b74610256ab428690e24.js?c"></script>

<script type="text/javascript" src="/drupal/sites/all/modules/thickbox/thickbox.js?c"></script>
<script type="text/javascript" src="/drupal/sites/all/modules/ubercart/uc_cart/uc_cart_block.js?c"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/drupal/", "thickbox": { "close": "Bezárás", "next": "Következő \x3e", "prev": "\x3c Előző", "esc_key": "vagy ESC", "next_close": "Következő / Bezárás az utolsónál", "image_count": "!current/!total kép" }, "ucCollapsedBlock": 0 });
//--><!]]>
</script>
  <script type="text/javascript"> </script>
</head>
<body class="front not-logged-in page-node two-sidebars">
<div id="header" class="clear-block">
      <a href="/drupal/" title="Index Page"><img src="/drupal/sites/default/files/box_grey_logo.jpg" alt="Logo" /></a>
        </div>
<div id="top-nav">

    </div>
<table id="content">
  <tr>
        <td class="sidebar" id="sidebar-left">
        <div id="block-search-0" class="block block-search">

  <div class="content">
    <form action="/drupal/"  accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline">
  <div class="form-item" id="edit-search-block-form-1-wrapper">

 <label for="edit-search-block-form-1">Keresés: </label>
 <input type="text" maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="A keresendő kulcsszavak." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Keresés"  class="form-submit" />
<input type="hidden" name="form_build_id" id="form-6401169cbc863bb1d3806bba17f5678d" value="form-6401169cbc863bb1d3806bba17f5678d"  />
<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  />
</div>

</div></form>
  </div>
</div>
<div id="block-user-1" class="block block-user">
  <h2>Navigáció</h2>

  <div class="content">
    <ul class="menu"><li class="leaf first"><a href="/drupal/content/minden-p%C3%A1ratlan-h%C3%B3napban-rendk%C3%ADv%C3%BCli-akci%C3%B3k-minden-p%C3%A1ros-h%C3%A9ten-%C3%A9rt%C3%A9kes-aj%C3%A1nd%C3%A9kok" title="">Köszöntő</a></li>
<li class="leaf"><a href="/drupal/" title="" class="active">Katalógus</a></li>
<li class="leaf"><a href="/drupal/forumok" title="">Fórumok</a></li>
<li class="leaf last"><a href="/drupal/galeria" title="">Képgalériák</a></li>
</ul>  </div>
</div>
<div id="block-system-0" class="block block-system">

  <div class="content">
    <a href="http://drupal.org"><img src="/drupal/misc/powered-blue-80x15.png" alt="A webhelyet a Drupal - egy nyílt tartalomkezelő rendszer - működteti" title="A webhelyet a Drupal - egy nyílt tartalomkezelő rendszer - működteti" width="80" height="15" /></a>  </div>
</div>
      </td>
            <td class="main-content" id="content-both">
               
       
       
       
        <!-- start main content -->
        <div id="first-time"><h1 class="title">Üdvözlet a frissen telepített Drupal alapú webhelyen!</h1><p>A telepítés befejezéséhez és a használat megkezdéséhez az alábbi lépéseket kell még megtenni:</p><ol><li><strong>A webhely beállítása</strong> Belépés után az <a href="/drupal/admin">adminisztrációs részből</a> érhető el a webhely <a href="/drupal/admin/settings">összes általános beállítása</a>.</li><li><strong>További funkciók bekapcsolása</strong> Következő lépésként érdemes áttekinteni a <a href="/drupal/admin/build/modules">modulok listáját</a> és engedélyezni azokat, amelyekre szükség van. Továbbiak a <a href="http://drupal.org/project/modules">Drupal modulok letöltése oldalon</a> találhatóak.</li><li><strong>A megjelenés megváltoztatása</strong> A webhely kinézetének megváltoztatását a <a href="/drupal/admin/build/themes">smink beállító részben</a> lehet megtenni. Számos beépített smink választható, de újat is le lehet tölteni a <a href="http://drupal.org/project/themes">Drupal sminkek letöltése oldalon</a>.</li><li><strong>Tartalom feltöltése</strong> Végül megkezdhető a <a href="/drupal/hozzaadas">tartalmak beküldése</a>. Ez az üzenet az első címlapra is kerülő tartalom beküldése után eltűnik.</li></ol><p>Az ismerkedést javasolt az adminisztráció menü alapos áttanulmányozásával, a Drupal kínálta számtalan lehetőség felfedezésével kezdeni. Ebben <a href="/drupal/admin/help">a Drupal beépített súgója</a> is segíthet. További információért érdemes felkeresni a <a href="http://drupal.hu/kezikonyv">magyar nyelvű</a> vagy az <a href="http://drupal.org/handbooks">angol nyelvű</a> Drupal kézikönyvet. A felmerült kérdéseket a magyar nyelvű <a href="http://drupal.hu/levelezolistak">levelezési listákon</a> és <a href="http://drupal.hu/forum">fórumon</a> érdemes feltenni.</p></p></div>        <!-- end main content -->

                </td><!-- mainContent -->
        <td class="sidebar" id="sidebar-right">
        <div id="block-user-0" class="block block-user">
  <h2>Belépés</h2>

  <div class="content">
    <form action="/drupal/node?destination=node"  accept-charset="UTF-8" method="post" id="user-login-form">
<div><div class="form-item" id="edit-name-wrapper">
 <label for="edit-name">Felhasználói név: <span class="form-required" title="Szükséges mező.">*</span></label>

 <input type="text" maxlength="60" name="name" id="edit-name" size="15" value="" class="form-text required" />
</div>
<div class="form-item" id="edit-pass-wrapper">
 <label for="edit-pass">Jelszó: <span class="form-required" title="Szükséges mező.">*</span></label>
 <input type="password" name="pass" id="edit-pass"  maxlength="60"  size="15"  class="form-text required" />
</div>
<input type="submit" name="op" id="edit-submit-1" value="Belépés"  class="form-submit" />
<div class="item-list"><ul><li class="first"><a href="/drupal/user/register" title="Új felhasználó regisztrációja.">Felhasználó létrehozása</a></li>
<li class="last"><a href="/drupal/user/password" title="Új jelszó igénylése emailben.">Elfelejtett jelszó</a></li>
</ul></div><input type="hidden" name="form_build_id" id="form-fef0b60f5a43eafbea7aa66b8676d307" value="form-fef0b60f5a43eafbea7aa66b8676d307"  />

<input type="hidden" name="form_id" id="edit-user-login-block" value="user_login_block"  />

</div></form>
  </div>
</div>

      </tr>
</table>
<div id="footer">
    CopyRight | Készült 2009    Validate <a href="http://validator.w3.org/check/referer">XHTML</a> or <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</div><!-- footer -->
   </body>
</html>
15

Ha be lehet még szállni...

Nutec · 2009. Már. 5. (Cs), 00.10
Én az ilyesmit css-sel úgy szoktam megoldani, hogy a képnek megadom a százalékos szélességét, legyen az pl.:70%. A fennmaradó százalékokat elosztom ketté és annyira állítom be a két oldalsó margót 15-15%. Ez sem tökéletes, mert a kép sajnos felbontásonként nyúlik. Van amelyik kép "elbírja"(egy kör alakú logót nem szerencsés így belőni,de ahogy néztem az oldalfotód lehet h. tudnád használni)és nagy kép esetén nem feltétlenül zavaró. Ki lehet sakkozni, hogy jól nézzen ki.

pl.:

#header img {
width: 80%;
margin: 0 10% 0 10%;
}
Üdv.: Nu7ec

Ui: Nem nagyon pörgök cms-eken, remélem lehet használni egy drupal-os oldalnál is.
16

nagyon köszönöm

Kispi92 · 2009. Már. 5. (Cs), 02.02
segítségedet, a helyes megoldás a %-os szélesség megadás lett. Adtam is neki 100%-ot...

(mi lenne, ha néha még a fejemet is használnám egy kicsit... hiszen erre akár én is rájöhettem volna :D)