Ú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ó/

■

HTML, CSS, JavaScript, Ajax

csirip

nem értem

gex · 2009. Már. 4. (Sze), 12.33

passzoljon valamihez. mi az a valami, mert ezt nem írtad le.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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! :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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??

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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á.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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; ?>


<?php print($content) ?>

<?php print $feed_icons; ?>
</td>
<?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>
<?php print $closure;?>
</body>
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

HTML

Poetro · 2009. Már. 4. (Sze), 16.51

Ebből a generált HTML kellene, nem a PHP forrás.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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[//><!]]>
</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">


<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> 

</td>
<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>
</body>
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés