44 válasz erre a témára

[Kattka]

Sziasztok!
Szeretnék segítséget kérni,a fejlécem betűi helyének a megváltoztatásához.Nagyon sokat próbálgattam,volt amikor a fél oldalam eltűnt,annyira sikerült lejjebb vinnem.Próbáltam a fő és alcímet egy sorba rakni,az sikerült is az inline- beszúrásával a block elé,de sehogysem jutottam dűlőre.
A CSS-ben ez a header rész.

/* header */
#header { background: url(../../images/header.jpg); border-bottom: 0px solid #000040; height:150px; }
#branding { width: 960px; margin: 0 auto; }
.logo { max-width: 590px; float: left; margin: 20px 0 0 10px; }
.blog-name { font-weight: bold; font-size: 11px; margin: 0; line-height: 1em; display: block; text-transform: uppercase; }
.blog-name a:link, .blog-name a:visited { color: #000040; text-decoration: none; }
/*.blog-name a:link, .blog-name a:visited { text-indent: -9000px; background: url(../../images/icons/logo.png) no-repeat; width: 450px; height: 22px; display: block; }*/
.blog-name a:hover { }
.blog-description { line-height: 1em; display: block; font-size: 11px; font-weight: bold; color: #313131; margin: 0; padding: 5px 0 0; text-transform: uppercase; }

Alulra szeretném kis méretű 8px betűkkel a weblapcímet és alcímet,mivel a Fejlécen már képben szerepel.Ezt az alsó sort szeretném végigírni a névvel,alcímmel e-mail-el.(csatolt képen)

A másik kérdésem szintén fejléc témában lenne,980px széles a fejlécem.Ha nem a teljes képernyőmön van,szétcsúszik az egész ahogy a képen jelöltem.Nem rugalmas és nem alkalmazkodik az ablak méretéhez.Hogyan segíthetnék ezen?
Köszönöm szépen az esetleges válaszokat.

Csatolt fájl:

•  fejléc elcsúszva1.jpg   21,58K   21 Letöltések:

[ati024]

Szia Kattka.
Nem volt idöm vele foglalkoznom igy nem birok kész megoldást adni.
De elsö ranézésre amit meg álapithatam az az hogy az alábbi rész felelös a szöveg helyzetért

#branding { width: 960px; margin: 0 auto; }

ezen kelene modositani valami hasonlora

#branding {float:right;  margin: 0 auto;padding-top:41px; padding-left:150px;}

.

Azért azt leszögezném rögtön hogy nem ez a megoldás de velami ehez hasonlo.

Ha estig nem sikerül megoldani akor majd jobban átnézem kodot és megoldom a gondot.

[varnyu]

Kattka: megnéztem a témád, de ez nekem túl nagy falat

[chiara]

Szia Kattka! Azért csúszik szét, mert a fejléced nem 980px széles, hanem 100% széles, vagyis akkorára nyúlik széltében, amekkora a képernyő. Gondolom a #header-nek kéne szélességet is megadni, hogy ez ne így legyen.

[Kattka]

Köszönöm a válaszokat!Tegnap du. óta nem voltam gépközelben,de nem sokára próbálkozom a tanácsoltak mindegyikével és beszámolok róla.
Köszönöm a válaszokat

[Kattka]

ati 024!
Valahol ott lehet ahol írtad.
A fejléc így már nem csúszik jobbra balra,legalábbis a kereső nem megy ki belőle.Viszont a betük még nem jó helyen vannak.
Próbálkoztam vele,más paraméterekkel is.
Úgy néz ki,mintha az egész fejlécet nyomná le az írás lejjebb vitele.A kép ott marad,mivel az egy rögzített hely,de kereső is és a felirat is együtt mozog le vagy fel.A padding-top állásban lefele vitte,de nyomta le az egészet,a padding-right és /vagy left állásban a fejléc tetején jelent meg a cím és alcím.Ha kiszedtem a display:block-ot akkor is.Ha átírtam inline-block-ra akkor legalább egy sorban jelent meg,de már a padding 80px-nél(3.alsó kép) szétnyomta az alatta levő menüsort lefelé.

Csatolt fájl:

•  szétesett fejléc.jpg   54,61K   13 Letöltések:

[Summer]

Helló Kattka!

Elsőnek javasolnék egy kis kiegészítést a body-hoz:

body {
  width: 960px;
  margin: 0 auto; /* ha középre akarod igazítani az oldalt a böngészőben */
}

Ezzel nem fog ismétlődni a fejléc x irányban. Nálam 1920x1200-as felbontásban elég csúnya, hogy a fejléc széthúzódik meg ismétlődik.
Ekkor viszont a main div-nek érdemes levenni a padding-ját 0-ra és csak fent hagyni neki egy kis távolságot, mert különben eltolódna a fejléchez képest:

#main {
  padding: 15px 0 0 0;
}

A keresőform és a szöveg igazításához először meg kell cserélned a <div class="logo clearfix">...</div> és a <div id="searchbar">...</div> sorrendjét és be kell szúrnod egy div-et így: <div id="searchbar">...</div><div class="clear"></div><div class="logo clearfix">...</div>

Ezután jön a css:
A #branding-nek nem kell padding és width: 960px.
A #searchbar-nak pedig kell egy kis kiegészítés:

#searchbar {
  float: right;
  height: 95px;
  display: inline;
}

A .logo kiegészítése, továbbá nem kell neki a max-width tulajdonság:

.logo {
  float: right;
  display: inline;
}

Lehet, hogy menet közben kihagytam valamit de segítek ha nem megy valami. A csatolt képen meg tudod nézni, hogy néz ki az átalakítások után az oldal fejléce (firefox-ban), nem tudom így gondoltad-e.

 portal.jpg   51,33K   7 Letöltések:

Szerkesztve Summer által: 2010-03-20 - 21:37

[ati024]

Szia!Végre volt egy kis idöm ezt is megnéznem. Megoldás egy kicsit más mint amit elsöre irtam de azért jóhelyen tapogatam. Tehát jöjön a megoldás.
Egy kicsit belle kell nyulni a header.php-be is az alábbi részt komenteld ki

<div id="branding" class="clearfix">
        <div class="logo clearfix">

Ami pedig a css-t ileti a csatolt képen látható megoldás kodja ez:

#header					{ background: url(../../images/header.jpg); border-bottom: 0px solid #000040; height:150px; }
/*#branding                           {float:right;  margin: 0 auto;padding-top; padding-left:150px;}*/
.logo					{ max-width: 590px;  margin: 120px 0 0 10px; }
.blog-name				{ font-weight: bold; font-size: 11px;margin-top:115px; margin-left: 240px; display: inline-block;line-height: 1em;  text-transform: uppercase; }
.blog-name a:link, .blog-name a:visited	{ color: red; text-decoration: none; }
/*.blog-name a:link, .blog-name a:visited	{  text-indent: -9000px; background: url(../../images/icons/logo.png) no-repeat; width: 450px; height: 22px; display: block; }*/
.blog-name a:hover		{ }
.blog-description		{ line-height: 1em; font-size: 11px; font-weight: bold; color: red; margin: 0; display: inline-block;padding: 5px 0 0; text-transform: uppercase; }

 untitled.gif   37,27K   9 Letöltések:

[Kattka]

Idézés: Summer - Dátum: 2010-03-20 - 21:33

Helló Kattka!

Elsőnek javasolnék egy kis kiegészítést a body-hoz:

body {
  width: 960px;
  margin: 0 auto; /* ha középre akarod igazítani az oldalt a böngészőben */
}

.....................

Lehet, hogy menet közben kihagytam valamit de segítek ha nem megy valami. A csatolt képen meg tudod nézni, hogy néz ki az átalakítások után az oldal fejléce (firefox-ban), nem tudom így gondoltad-e.

portal.jpg

Kedves Summer!
Nagyon köszönöm ,hogy ilyen részletesen válaszoltál,ill.segítettél.
A megoldás jól néz ki,viszont Neked is ott van az a kék csík a fejléc alatti menüsor alatt,ami eddig nem volt ott,tehát Neked is lenyomta a body részt,vagy a fejléc lett magasabb ezáltal?Eredetiben nincs a fejléc alatt levő menüsor alatt kék alap.


Kedves ati024!
Köszönöm,hogy nem feledkeztél meg
A példádnál az a baj még,hogy nem az erre a célra készített kis aranysávon lettek a betük,hanem fölötte.Gondolom Nálad is szétcsúszott volna akkor a menü sor alatti rész,ha a betük lejjebb vannak.Feljebb raknám a csíkot,de akkor meg benne van a képben.Nem tudom,hogy lehetne megvariálni,,hogy a kecske is jól lakjon és a káposzta is megmaradjon

[Summer]

Az a kék csík már a #nav div-hez tartozik és azért van ott mert a menüben van egy 8. elem (<li>) a telek menüpont után "Kiemelt" névvel, csak mivel megtört az <ul> ezért nem látszik.

Ehez az alábbi css-t kell módosítani:

.sf-menu a {
  padding: 0 14px;
}

Eredtileg itt 15px van a padding-nál, de azzal már nem fér ki egy sorban az összes menüpont. Ha átírod a fenti 14-re vagy kevesebbre akkor már ki fog és nem lesz ott a kék csík.

 portal2.jpg   28K   8 Letöltések:

[Kattka]

Summer!
Köszönöm szépen.Sikerült a pontos útmutatásaid szerint megcsinálni,viszont mire jó lett,a lebomló menüim eltűntek,mintha a slide show alá kerültek volna.Azt hiszem,hogy az egész lapot át lehetne írni a fejléc miatt .
Megpróbálok inkább valamit kitalálni,hogy feljebb legyenek a betűk,és ne menjen mindig valami gallyra.
Nagyon-nagyon köszönöm ezt a sok segítséget,valahogy még meghálálom.
Pedig úgy örültem,hogy sikerült.

Átírtam a #main{ padding: 15px 0 0 0; }-t
#main{ padding: 60px 0 0 0; }-ra
így lejjebb csúszott a lap és már látszott a kibomló menük nagy része,de még mindig takarja egy részét a slide show.Így viszont nagy lett a távolság a tartalom és menüsor között.Hm....
Van valami javaslat,hogyan lehetne a slide show elé hozni a lebomló menüket?
Köszönöm szépen,ha válaszolsz rá,vagy valaki, aki tudja a megoldást.
Vidám Vasárnapot!!!
Kattka

[Summer]

Idézés: Kattka - Dátum: 2010-03-21 - 01:23

Summer!
Köszönöm szépen.Sikerült a pontos útmutatásaid szerint megcsinálni,viszont mire jó lett,a lebomló menüim eltűntek,mintha a slide show alá kerültek volna.Azt hiszem,hogy az egész lapot át lehetne írni a fejléc miatt .
Megpróbálok inkább valamit kitalálni,hogy feljebb legyenek a betűk,és ne menjen mindig valami gallyra.
Nagyon-nagyon köszönöm ezt a sok segítséget,valahogy még meghálálom.
Pedig úgy örültem,hogy sikerült.

Átírtam a #main{ padding: 15px 0 0 0; }-t
#main{ padding: 60px 0 0 0; }-ra
így lejjebb csúszott a lap és már látszott a kibomló menük nagy része,de még mindig takarja egy részét a slide show.Így viszont nagy lett a távolság a tartalom és menüsor között.Hm....
Van valami javaslat,hogyan lehetne a slide show elé hozni a lebomló menüket?
Köszönöm szépen,ha válaszolsz rá,vagy valaki, aki tudja a megoldást.
Vidám Vasárnapot!!!
Kattka

Hozz létre egy új szabályt ha még nincs:

.sf-menu ul.children {
z-index: 1000;
}

Na mára ennyi, neked is vidám vasárnapot!

[Kattka]

ezt hová?

[Summer]

Idézés: Kattka - Dátum: 2010-03-21 - 01:43

ezt hová?

Természetesen a css fájlba. Szerintem még nincs ilyen, úgyhogy nyugodtan írd bele így egy az egyben.

[Kattka]

beírtam,mert rájöttem,de semmi nem változott

[Summer]

#myGallery, #myGallerySet, #flickrGallery {
z-index:0;
}

Próbáld még ezt hozzáadni a css-hez.
Ha így sem megy akkor a Featured Content Gallery plugin css-ébe kell majd belenyúlni.

[Kattka]

Idézés: Summer - Dátum: 2010-03-21 - 02:07

#myGallery, #myGallerySet, #flickrGallery {
z-index:0;
}

Próbáld még ezt hozzáadni a css-hez.
Ha így sem megy akkor a Featured Content Gallery plugin css-ébe kell majd belenyúlni.

Sajna nem lett jó
Jóéjszakát.Gondolkodok én is holnapig,hogyan lehet egyszerűbben megoldani,hogy ne kelljen mindent átírni.Hátha okosabbak leszünk.Szia és nagyon köszönöm

[Kattka]

Ez van a CSS-ben a slide showwról.
/* featured slideshow */
.featured { background: url(http://ingatlanporta...ntent-bg-13.png) repeat-x #CCBA70; <!--border: 1px solid #CCC; padding: 10px; margin: 0 10px 10px 0; height: 250px; -->}
#controls { position: absolute; float: left; z-index: 100; width: 630px; padding-top: 75px; }

#controls .next, #controls .prev { text-indent: -9000px; width: 30px; height: 30px; display: block; z-index: 1000; }
#controls .prev { background: url(../../images/prev.png) no-repeat; float: left; }
#controls .next { background: url(../../images/next.png) no-repeat; float: right; }


#featured-slideshow { position: relative; height: 250px; margin-right: 20px; }

.featured-article { display: block; width: 630px; height: 250px; text-decoration: none !important; }
.featured-entry { position: relative; top: 165px; overflow: hidden; background: url(../../images/overlay.png); height: 85px; color: #C3C3C3; padding: 0; display: block; }
.featured-entry .entry-title { color: #FFF; padding: 10px 15px 5px; display: block; font-size: 16px; font-weight: bold; }
.featured-entry .entry-summary { padding: 0 15px; margin: 0; display: block; }

Szerkesztve Kattka által: 2010-03-21 - 02:28

[Summer]

Helló Kattka!

#featured-slideshow { position: relative; height: 250px; margin-right: 20px; }
Ehhez írd hozzá még a "z-index: 0;"-t és akkor ha minden igaz jóra fordul a dolog.

A #branding {}-ből pedig töröld a padding-ot, mert most két sorba töri emiatt a logo alatti kis szöveget.

[ati024]

szia ahoz hogy ne bujon el a menü a slide show mögé adj a következö sorban

.sf-menu li:hover ul, .sf-menu li li:hover ul, .sf-menu li li li:hover ul, .sf-menu li li li li:hover ul, .sf-menu li.sfhover ul, .sf-menu li li.sfhover ul, .sf-menu li li li.sfhover ul, .sf-menu li li li li.sfhover ul { left: auto; z-index: 2; }

lévö z-index:2; helyett z-index:10;-t és már nem is bujik el