Autor Zpráva
jefitto44
Profil
#1 · Zasláno: 2. 12. 2013, 15:08:19 · Upravil/a: jefitto44 o 3 minuty později
Odpovědět Citovat
Při zpracování BB značek došlo k samovolnému sežrání celého příspěvku. Pardon.
Zdravím... mám stránku http://myjava.fara.sk/
ale nech pozerám ako pozerám a nech skúšam ako skúšam, tak nijako neviem prísť na to, ako mám urobiť, aby mi v id #content fungoval border. Border je tam 2px solid blue (je to kus iná blue, ale to je jedno) a ako môžete vidieť na stránke, tak to pretŕča... kde v CSS by som to mal hľadať? Vôbec netušim... tu je obsah celého style.css: 

{
    padding:0px;
    margin:0px;
    line-height:100%;
}
body {
    background:url(images/background.png) #ebebeb;
    font-family: sans-serif, verdana, helvetica, arial;
    font-weight: 400;
    font-size:14px;
    color:#555;
}
/* Layout */
#container {
    width:80%;
    margin:25px auto 0 auto;
}
#header {
    padding:50px 25px;
    margin:0 0 35px 25px;
    background:#fff;
border-left: 2px solid #86bdc4;
border-right: 2px solid #86bdc4;
border-bottom: 2px solid #86bdc4;
border-top: 2px solid #86bdc4;
}
#content {
    float: left;
    width:80%;
border-left: 2px solid #86bdc4;
border-right: 2px solid #86bdc4;
border-bottom: 2px solid #86bdc4;
border-top: 2px solid #86bdc4;
}
#sidebar {
    width:18%;
    float:right;
    margin-top:-20px;
border-left: 2px solid #86bdc4;
border-right: 2px solid #86bdc4;
border-bottom: 2px solid #86bdc4;
border-top: 2px solid #86bdc4;
}
#footer {
    text-align:center;
    font-size:11px;
    color:#777;
    margin:20px 0;
border-left: 2px solid #86bdc4;
border-right: 2px solid #86bdc4;
border-bottom: 2px solid #86bdc4;
border-top: 2px solid #86bdc4;
}
/* Header */
#header div#title {
    float:left;
    display:inline;
}
#header h1 {
    font-family: sans-serif, verdana, helvetica, arial;
    font-weight: 300;
    font-size:50px;
    margin:0px;
    line-height:100%;
    color:#86bdc4;
    text-transform:uppercase;
}
#header h1 a {
    color:#86bdc4;
    text-decoration:none;
}
#header h1 a:hover {
    text-decoration:none;
}
.description {
    font-size:15px;
    font-family: sans-serif, verdana, helvetica, arial;
    font-weight:400;
    color:#898989;
}
#header #navigation {
    float:right;
    line-height:100%;
    font-size:12px;
    font-family: sans-serif, verdana, hlevetica, arial;
    font-weight: 400;
    margin-top:38px;
    display:inline;
    bottom: 0px;
}
#header #navigation ul {
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
}
#header #navigation ul li {
    margin-left:0px;
}
#header #navigation li {
    float: left;
    position: relative;
}
#header #navigation a {
    color: #333;
    display: block;
    line-height: 3.333em;
    padding: 0 10px;
    text-decoration: none;
}
#header #navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
    text-align:left;
}
#header #navigation ul ul ul {
    left: 100%;
    top: 0;
}
#header #navigation ul ul a {
    background: #86bdc4;
    border-bottom: 1px dashed #a4ced3;
    color: #fff;
    font-size:12px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
}
#header #navigation li:hover > a,
#header #navigation ul ul :hover > a,
#header #navigation a:focus {
    background: #86bdc4;
}
#header #navigation li:hover > a,
#header #navigation a:focus {
    background: #86bdc4;
    color: #fff;
}
#header #navigation ul li:hover > ul {
    display: block;
}
#header #navigation .current-menu-item > a,
#header #navigation .current-menu-ancestor > a,
#header #navigation .current_page_item > a,
#header #navigation .current_page_ancestor > a {
    background: #86bdc4;
    color:#fff;
}
/* Content */
.post {
    margin-bottom:35px;
}
.entry {
    clear:both;
    background:#fff;
    padding:20px 20px 20px 80px;
    margin:-110px 0 0 25px;
    min-height:85px;
}
body.page .entry {
margin-top:-20px;
    padding-left:20px;    
}
div.date {
    position:relative;
    background:url(images/bg_date.png) left bottom no-repeat;
    left:0px;
    width:60px;
    color:#fff;
    padding:10px 0 25px 25px;
    text-align:center;
    font-size:16px;
    text-transform:uppercase;
    font-family: font-family: sans-serif, verdana, helvetica, arial;
    font-weight: 700;
    color:#cfe5e7;
}
div.date span {
    display:block;
    font-size:24px;
}
.post-meta {
    font-size:13px;
    color:#888;
    margin:10px 0 0px 0px;
    font-size:12px;
}
.post-meta a:link {
    color:#888;
}
a.more-link {
    text-transform:uppercase;
    font-style:italic;
    font-weight:bold;
    font-size:13px;
    float:right;
    margin:10px 0;
}
.bypostauthor {
    text-decoration:underline;
}
ed11
Profil
#2 · Zasláno: 2. 12. 2013, 15:23:29 · Upravil/a: ed11 o minutu později
Odpovědět Citovat
Nejprve odstraň levý margin u div.entry (teď 25px)
-----------------------
a pak taky u #comments...
jefitto44
Profil
#3 · Zasláno: 2. 12. 2013, 15:26:11
Odpovědět Citovat
Ktorý riadok kódu prosím? :)
ed11
Profil
#4 · Zasláno: 2. 12. 2013, 15:27:09 · Upravil/a: ed11 o okamžik později
Odpovědět Citovat
style.css
#177
+
#722


Jo a když už budeš u toho, taky tu 110px na 177. řádku


A protože předpokládám, že sidebar budeš chtít mít ve stejné rovině, tak odstraň taky margin-top:-20px; někde kolem řádku 45
jefitto44
Profil
#5 · Zasláno: 2. 12. 2013, 15:32:10
Odpovědět Citovat
U #comments to čiastočne pomohlo. To znamená, že sa tie komenty natiahli na väčšiu šírku. To je dobre, lebo ten rámik mi tam k tomu presne pasuje. Problém je ten, že je to teraz širšie ako header, takže potrebujem asi rozšíriť header?

A vymazanie margin-left:0px; v riadku 177 nespravilo nič :(
ed11
Profil
#6 · Zasláno: 2. 12. 2013, 15:34:08 · Upravil/a: ed11 o 4 minuty později
Odpovědět Citovat
U header smaž padding levý, který má taky 25px


řádek 29


Takto to vypadá, když to tak uděláš




Možná jsem ti to předtím napsal nerozumně, na řádku 177 smazat 25px ne 0
jefitto44
Profil
#7 · Zasláno: 2. 12. 2013, 15:46:19
Odpovědět Citovat
No už to skoro mám, len tá Ukážka strany mi tam nepasuje... čo som tam neurobil? Akosi to neviem nájsť
ed11
Profil
#8 · Zasláno: 2. 12. 2013, 15:46:46 · Upravil/a: ed11 o minutu později
Odpovědět Citovat
Dokážeš se vrátit na začátek? (tam k té první úpravě), myslím tím CTRL+Z až k první úpravě, kterou jsem ti doporučil


Teď momentálně co máš na serveru ti stačí změnit jen 25px a nahradit nulou na 177. řádku
jefitto44
Profil
#9 · Zasláno: 2. 12. 2013, 15:58:30
Odpovědět Citovat
Dobre, toto už mám.

Problém č.2
Súčasťou headera je hlavné menu. Lenže toto menu je zrobené úplne zle. Chcel by som to urobiť tak, aby odkazy menu boli nalepené na spodnom borderi headera (potom si ich nastylujem tak, aby hover odkazy splývali s borderom, ale to je teraz jedno). Otázka je, ako ich tam presunuť... keď dam float: left, presunie mi to hneď za text MYJAVA, ale ja ich chcem dať až dole. Ako na to?
ed11
Profil
#10 · Zasláno: 2. 12. 2013, 16:08:20 · Upravil/a: ed11 o 3 minuty později
Odpovědět Citovat
Odstraň .title display:inline; a taky float:left;
Taky smaž .navigation float:right;

Tím způsobíš, že se tyto dva divy budou chovat jako normální divy / vykreslí se pod sebe
display:inline; k .navigation taky nepatří


A co teď?


Řádek 29 nahraď 50px 25px 0 25px místo 50px 25px, pokud chceš mít menu v úrovni borderu hlavičky
jefitto44
Profil
#11 · Zasláno: 2. 12. 2013, 16:16:42
Odpovědět Citovat
Teraz už sa dá na to pozerať. Len ešte potrebujem prilepiť odkaz "Ukážka strany" na spodný border toho headera... ktorý margin/padding to je?
ed11
Profil
#12 · Zasláno: 2. 12. 2013, 16:18:12
Odpovědět Citovat
"Teraz už sa dá na to pozerať. Len ešte potrebujem prilepiť odkaz "Ukážka strany" na spodný border toho headera... ktorý margin/padding to je?"

- viz [#10] výše
juriad
Profil
#13 · Zasláno: 2. 12. 2013, 16:20:28
Odpovědět Citovat 
#header {
padding:50px 25px 0; /* zajistí, že padding se nebude vztahovat na spodní okraj headeru */
}
jefitto44
Profil
#14 · Zasláno: 2. 12. 2013, 16:20:40
Odpovědět Citovat
Krása. Úprimne Ďakujem.
Možno keby sa ešte dala zmenšiť tá diera medzi headerom a contentom so sidebarom
juriad
Profil
#15 · Zasláno: 2. 12. 2013, 16:22:43
Odpovědět Citovat
Změň si případně 15 na jinou hodnotu. 
#header {
margin: 0 0 15px;
}
ed11
Profil
#16 · Zasláno: 2. 12. 2013, 16:23:00 · Upravil/a: ed11 o 2 minuty později
Odpovědět Citovat 
#header #navigation a {
border: 2px solid rgb(134, 189, 196);
border-bottom:  none;
}

smazat nebo upravit: 
#header {
margin: 0 0 35px 0;
}
pokud budeš mazat tento margin, taky smaž { 
border-bottom:....;
}
jefitto44
Profil
#17 · Zasláno: 2. 12. 2013, 16:44:01
Odpovědět Citovat
Funguje všetko tak ako som chcel. ďakujem vám :)
ed11
Profil
#18 · Zasláno: 2. 12. 2013, 16:58:41
Odpovědět Citovat
To je dobře :) Není za co
jefitto44
Profil
#19 · Zasláno: 3. 12. 2013, 09:29:25
Odpovědět Citovat
Ďalší problém... pri zobrazení článkov sa mi to opäť celé posunie a nelepí sa na menu, teda nie je tam tých 15px padding

http://myjava.fara.sk/
juriad
Profil
#20 · Zasláno: 3. 12. 2013, 09:43:38 · Upravil/a: juriad
Odpovědět Citovat
Popis, proč to funguje: Position » Zanořená pozice
Snaž se nepoužívat relativní pozicovaní; takové stránky pak bývají křehké (zvětšení písma, jiné rozlišení obrazovky je můžou úplně rozbít). 
.post {
  position: relative; /* přidej */
}

.entry {
  padding: 20px 20px 20px 105px; /* změň na 105px */
  margin: 0px 0px 0px 25px; /* odstraň */
 }

div.date {
  position: absolute; /* bylo relative */
}



Nastuduj http://jecas.cz/vyvojarske-nastroje. Především část:
Po vybrání prvku se potom v levé části rozbalí umístění prvku v HTML stromu a v pravé části lze prohlížet, editovat, vypínat a přidávat kaskádové styly.
A začni ty nástroje používat. Jak jinak myslíš, že bychom ti dokázali poradit během několika málo minut/sekund.
jefitto44
Profil
#21 · Zasláno: 3. 12. 2013, 10:31:42
Odpovědět Citovat
F12 :)
Diky. Opravené

Teraz je taká vec: Nahodil som do menu border-left aj border-top po 2px solid #86bcd4;
ibaže mi to urobilo to, že pri poslednej položke menu sa ten border nezobrazí a ja ho tam chcem. Dá sa nastaviť border-right tak isto, aby mi ho zobrazilo iba pri poslednej položke menu? Lebo ako to dám na všetky, tak tie, kde mám 2px budem mať dokopy 4px (pravý s ľavým sa budú dotýkať) a to nechcem
juriad
Profil
#22 · Zasláno: 3. 12. 2013, 11:14:22
Odpovědět Citovat
Přesně tak; poslenímu přidat třídu třeba .last, která bude mít nastavený border-right.
Nebo to můžeš provést opačně (to může být jednodušší): všechny položky budou mít border-right a první položce menu přidáš třídu .first, která bude mít nastavený border-left.

Nebo nemusíš přidávat třídu .first a zacílit první odkaz pomocí pokročilejších selectorů CSS; můžeš použít pseudo-selector :first-child (pozor ve starých prohlížečích nefunguje) a všem nastavit border-right: 
#header #navigation #menu-hlavne-menu > li:first-child a {
  border-left: 2px solid #86bcd4;
}

Neznám WP; tak nevím, která z těchto možností je nejlepší.
Pozor také na to, že existuje i :last-child, ale ten pseudo-selector je hůře podporovaný; raději se mu vyhni.
Také budeš muset opravit zobrazování položek v podmenu.
jefitto44
Profil
#23 · Zasláno: 3. 12. 2013, 16:16:23
Odpovědět Citovat
Dúfam, že posledný problém je toto: http://myjava.fara.sk/?cat=6
Ten text, čo je vlastne nadpis s označením kategórie mi presahuje cez border. Chcel by som to zmeniť, ale neviem ako. Odkaz od juriada som si ešte nestihol naštudovať :(
Ďakujem za pomoc ;)
jefitto44
Profil
#24 · Zasláno: 4. 12. 2013, 08:20:25
Odpovědět Citovat
Hotov, zvládol som to aj sám napokon :)
Časová prodleva: 12 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0