Diskuse

A nebylo by mnohem jednodušší obalit to divem a pak jen upravit odsazení, než to tady honit z plusu do mínusu a přebíjet padding marginem?

<div id="header">
    <div class="sitename">
        <h2><a href="./"><?php echo _title ?></a></h2>
        <h3><?php echo _description ?></h3>
    </div>
<?php _templateUserMenu() ?>
</div>Do CSS přidat novou třídu sitename
.sitename {
    float: left;
}a upravit odsazení u nadpisů
#header h2 {
    float: left;
    padding: 40px 0 0 10px;
    font-size: 33px;
    font-weight: bold;
}

#header h3 {
    float: left;
    padding: 10px 0 0 10px;
    font-size: 11px;
    font-weight: normal;
}

A u toho obrázku by asi stačilo přehodit background z body na #header
body {
    margin: 0;
    padding: 0;
    background: #FFFFFF url(../images/img1.gif) repeat-x;
    text-align: justify;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 11px;
    color: #4E4E4E;
}

#header {
    width: 892px;
    height: 160px;
    margin: 0 auto;
    background: #FFFFFF url(../images/img1.gif) repeat-x;
}
Na mobilních zařízeních je jakýsi problém s opakováním obrázků. To není chyba u tebe 😄, ale mohlo by pomoci přidání <meta name="viewport" content="width=device-width, initial-scale=1">

Tak jsem to udělal takto a přidal jsem ten header v template.php do divu jak si napsal.

.sitename {
float: left;
}
#header h2 {
padding: 40px 0 0 10px;
font-size: 33px;
font-weight: bold;
}
#header h3 {
padding: 10px 0 0 10px;
font-size: 11px;
font-weight: normal;
margin-top: 70px;
margin-left: -175px;
}
A ten obrázek na headeru, nepomohlo to, pořád je obrázek jen na kraji když se dívám na mobilu.
Vše ostatní v pohodě.

Zkus si tam nahrát tento obrázek: https://i.imgur.com/37WllbM.gif a následně si to prohlednout v telefonu nebo stačí v prohlížeči zmenšit okno, ten obrázek v headeru se posune do prava a v levo zůstane volné místo, tím pádem to poškodí i to logo uprostřed a posune ho to.

#header h3 {
padding: 10px 0 0 10px;
font-size: 11px;
font-weight: normal;
margin-top: 70px;
margin-left: -175px; // tohle je tu proč?
}A ten obrázek tam takhle prásknout nemůžeš, ten původní měl rozměry 1x160px a touto vlastností background: #FFFFFF url(../images/img1.gif) repeat-x;se opakoval vodorovně a vyplňoval celou plochu. Takže když tam dáš obrázek celý tak to nemůže fungovat.

Nebylo by lepší, místo takového velkého obrázku vyplnit DIV barvou a napozicovat si to logo? Protože na telefonu se platí za každý kB, takže proč natahovat zbytečnosti.

Už jsem to psal i v jiném tématu, tohle nemá nic společného přímo se systémem Sunlight. Toto jsou základy HTML a CSS, které je třeba si doplnit.

Nastavil jsem ten původní img1.gif jak byl, teď mám ten header roztáhlý na celou stránku

Co já požaduji:

1. Chci aby to bylo pouze uprostřed, ne nacelou šířku.
2. A také potřebují nějakým kódem vložit logo doprostřed toho headeru aby tam drželo pozici.

Je to možné provést ? Řeším to už druhý den, mám celý web hotový ale na tomto jsem se zastavil.

3. A mimo to potřebuji nastavit zvlášť obrázek na pozadí, který bude pod tím headerem img1.gif.
Přečetl jsem si nějaké již založené témata ale týká se to většinou jiných věcí.

A tohle editovat nemůžu jinak přepíšu ten header
body{margin:0;padding:0;background:#FFFFFF url(/plugins/templates/default/images/img1.gif) repeat-x;text-align:justify;font-family: 'Ubuntu', sans-serif;font-size:12px;color:#000000;}

Prosím o radu s tímto, už jsem bezdradný, jinak mám web hotov.

Díky moc

Za mě a nyní se omlouvám i podpoře a vývojáři: Tomáši, toto jsou základy CSS a HTML! Opakovaně Vám to uvedl i pan Daněk... Chcete grafickou úpravu webu? Existují jiná témata a místa... Za mě, pokud sezbírám kódy ale nerozumím tomu, vymýšlím si ale další, je lepší to nedělat! Za práci designéra se platí či odměňuje... Ve slušnosti!

Vámi vznesené 3 požadavky zakázkově 500-1500,- ... Promrhaný čas čekáním bych raději využil studiem základů v tomto případě spíše CSS ;) Bude to chvilka oproti tomu a bude to kouzelnější ;) 😎 😁

@Marty9xxxx Snažím se ve svém volném čase pomoci každému, jak to jen jde, ale nemohu někoho učit od píky, na to nemám čas. Jako perličku uvedu, že za designéra se například vůbec nepovažuji, grafické nadání kolem mě proběhlo a řvalo: "Uhni!" 😁 proto dělám raději "funkční" PHP doplňky systému, ale i pro ně je potřeba umět HTML a CSS kromě jiného... Prostě je to základ, který se nedá přeskočit.

@Tomas.V Na tvé požadavky máš odpovědi v tomto celém tématu.
1. Jak opakovat obrázek jen v hlavičce jsem ti popsal hned v prvním příspěvku, "A u toho obrázku by asi stačilo přehodit background z body na #header"
2. Vložit logo je taky primitivní zásah a pozicování... "A nebylo by mnohem jednodušší obalit to divem a pak jen upravit odsazení"
Že se to týká názvu webu? To je jedno, obalíš a dostyluješ o tom je celé CSS.

Chce to jen číst, experimentovat a projevit trochu iniciativy. Nemůžeš očekávat, že tě někdo povede za ruku.

Je to možné provést ? Řeším to už druhý den, mám celý web hotový ale na tomto jsem se zastavil.
Tohle mě opravdu pobavilo, jestliže máš "celý web hotový" tak jak ses mohl zaseknout na hlavičce? V šablonách je plno i složitějších věci k nastylování. Měl by jsi zvládnout primitivní zásahy jako pozicování a obtékání. Čekal bych spíš popis: "Snažím se upravit hlavičku, zbytek šablony mi vyhovuje a nepotřebuje změny"

Ale nechci psát jen jedovatý komentář.
Tento web https://www.jakpsatweb.cz/ je dobrým zdrojem pro začátečníky i já tam před devatenácti roky začínal. To to letí. 😞 Další inspirací a učební pomůckou by ti mohly být zdejší základní motivy http://sunlight.shira.cz/ke-stazeni/motivy, kde například Redworld se asi bude podobat tomu co požaduješ. Vím, že motivů je zde málo, ale je to tím, že skoro na každý web se dělá specifický motiv, jinak by byli jako přes kopírák.

Nevím co používáš za prohlížeč, ale Firefox i Chrome mají "Vývojářskou konzoli" (klávesa F12), případně klikneš na prvek pravým tlačítkem a zvolí Prozkoumat z kontextového menu. Tam se dají dělat přímé zásahy a cokoliv změníš se ihned projeví na tom co vidíš, takže nemusíš dělat zásahy v CSS naslepo. A pak jen tyto změny a úpravy přepíšeš do své šablony. Pokud nevíš jak to použít, jsou i videa na YT, stačí hledat např. Chrome Devtool

Add to Jirka Daněk: Ano, v podstatě máš pravdu ( bude lepší si tykat, pokud to moc nevadí 🙂 )

Na http://www.jakpsatweb.cz Dušana alias Yuhůa se vracím sem tam pro zdroj, když mi něco vypadne ;) Jako osobně ocenitelnější doporučím www.itnetwork.cz , kde schopně zasvětí i amatéra a je jen na něm, kam až půjde ;)

Jinak systém dobrý, má vychytávky, něco mě napadá, to ale jinde ;)