| Autor | Zpráva | ||
|---|---|---|---|
| noteat Profil |
#1 · Zasláno: 28. 3. 2014, 08:28:12
Zdravím všechny, jsem totální panic a zkoušel jsem (dost prasácky) dát dohromady nějaký jednoduchý kód. Nakonec mě to vzhledem k mým představám koplo i částečně do css. Mno k věci... níže jsem vložil mnou slepený kód z rad a tipů ostatních chytřejších a částečně jsem se jej snažil upravit a částečně i s úspěchem. Co, ale nejsem schopen dohledat : mám nastavenou pevnou pozici pro menu a v podstatě ostatní veškeré texty atd jsem zachoval pod backgroundem. pozici jsem nadefinoval dle aktuálního zobrazení prohlížeče (náhledový v PSpadu v4.5.7). Pokud však použiju Ctrl+scroll >> menu a ikona zůstanou na pozici ale pozadí je stále na "center"... výsledek je logický, ale netuším jak správně nastavovat pozici menu aby se celé zobrazení včetně backgroundu chovalo kompaktně. Pokud jste mi schopni poradit i všeobecně pro pozicování, budu rád.
Předem všem moc děkuji za radu. <meta name="viewport" content="width=1250; user-scalable=yes" />
<link href="style.css" rel="stylesheet" type="text/css" />
<H1> <center> <img src="homepage.png"> </center> </H1>
<menu>
<span style="position: absolute; top: 25px; left: 480px; z-index: 1">
<!-- Main Navigation -->
<div class="nav_container">
<ul id="navMenu">
<li><a href="#" class="navLair" title="Lair" onclick="href='homepage.html'"></a></li>
<li><a href="#" class="navAbout" title="About" onclick="href='aboutus.html'"></a></li>
<li><a href="#" class="navDogpack" title="Dogpack" onclick="href='dogpack.html'"></a></li>
<li><a href="#" class="navLawbook" title="Lawbook" onclick="href='lawbook.html'"></a></li>
<li><a href="#" class="navContact" title="Contact" onclick="href='contactus.html'"></a></li>
<li><a href="#" class="navNews" title="News" onclick="href='news.html'"></a></li>
</span>
</MENU>
<body>
<BODY bgcolor="white"; text="105;25;25" style="background-repeat: no-repeat;background-position:fixed;
background-position=center"
<a href="homepage.html">
<img src="headwhite1.png" border=0 name="zo1" onMouseOver="document.zo1.src='headred1.png' " onMouseOut="document.zo1.src='headwhite1.png'"
style="position:absolute; top:1050px; left:480px; z-index:1">
</a>
</ul>
</div>
</p>
</BODY>
</HTML> |
||
| juriad Profil |
noteat:
To co jsi stvořil je absolutně nepoužitelné. To, že web nefunguje při zvětšení/zmenšení je jen důsledek. Dodej ještě svůj style.css, jsem ochoten se ti věnovat a web zkulturnit. Chyby: Celá stránka má vypadat: <!doctype html> <html> <head> ... sem přijdou všechna <meta>, <link>, <title> </head> <body> ... jediné body. Obsahuje celý obsah stránky </body> </html> Hlavička: Pomocí <meta charset> nastavíš kódování češtiny. Pomocí <title> nastavíš titulek stránky (to co se zobrazuje v liště prohlížeče). Tělo: Zapomeň na to, že existuje position: absolute. Tobě způsobí jen problémy. Tagy mají nějaký význam, dodržuj ho. 4. řádek lze lépe zapsat jako: <h1><a href="homepage.html"><img src="homepage.png" alt="nápis pro lidi, kterým se nezobrazí obrázek"></a></h1> U loga je dobrým zvykem, aby bylo odkazem na úvodní stránku webu. Celé menu zapiš takto: <menu>
<li><a href="homepage.html" class="navLair">Úvod</a></li>
<li><a href="aboutus.html" class="navAbout">O nás</a></li>
<li><a href="dogpack.html" class="navDogpack">Dogpack</a></li>
<li><a href="lawbook.html" class="navLawbook">Lawbook</a></li>
<li><a href="contactus.html" class="navContact">Kontakt</a></li>
<li><a href="news.html" class="navNews">Novinky</a></li>
</menu>Žádné spany, divy, ul nepotřebuješ, celé menu můžeš stylovat přímo. Nevím však, jak tvůj web má vypadat. Pokud ukážeš jak má web vypadat, ukážu ti, jak docílit toho, aby jednotlivé prvky byly tam, kde mají. Samotné HTML nemá obsahovat žádnou definici vzhledu. Mělo by být čitelné a vyjadřovat úmysl - toto je nadpis obsahující obrázek, který je zároveň odkazem - toto je menu, které obsahuje seznam odkazů Tedy ne: Toto je obrázek, který má být uprostřed stránky. Toto je menu, 25px od horní hrany stránky a 480px od levé. Toto je tělo stránky bílé barvy, jehož pozadí se nemá pohybovat, nemá se opakovat a má být vycentrované. Doufám, že rozumíš tomu rozdílu. |
||
| noteat Profil |
Rozumím a děkuju za rady....tak tady vkládám ještě css (kopírováno + pokus o použitelnou úpravu) ten obrázek je v podstatě celé pozadí stránky tak jak bych chtěl aby vypadala bez ovládacího menu a linku na vrácení zpět na homepage... ve spodní části... menu by mělo být cca ve třetině celého pozadí (na výšku) cca 260 px od topu a vycentrované celé na středu tak aby pokrývalo celé menu vodorovně background s výškou cca 110 px... velikost menu si kdyžtak upravím, ale nevím jak na tu pozici.... co jsi viděl u "absolute" byly jen pokusy jak to dostat tam kde by mělo být... snažím se vycucat co možná nejvíce o základních pro mne použitelných tags a jejich atributech, ale přestože jsem četl celý týden(za pochodu) rady a zákady a vše možné okolo jak v čestině (jakpsatweb.cz ad.) tak i angl. přesto se v tom nějak ztrácím. Nikde nemohu najít základní schéma stránky (s použitelnými tagy pro začátečníka a vysvětlením "a" je na tohle ale v menu to nepoužívej nebo třeba s href viz. tvá odpověď. prostě jsem to bral, že ve spojení s css to tak musí být zapsáno :) ) s nastavením pozic menu a případně dalších objektů... vždy jen kousek kódu určený již pro pokročilejší. Takže se stylem pokus omyl dobírám použitelnému řešení. Asi nejhorší je odfiltrovat to co bych ještě jako panic neměl vůbec používat. Na začátku jsem myslel, že mi bude stačit se naučit html abych byl schopen dát dohromady nějakou stránku, postupně mne to však kope dále do css apod. Moc díky z čas.
chtěl jsem vložit screen schránky ale jsem tukan, takže mi to nejde... body,
h1, h2, h3,
p, ul, li,
form {
border:0;
margin:0px;
padding:0px;
background-image:navmenu.png;
background-repeat:repeat-x;
}
/* -----------------------------
STANDARD HTML TAG DEFINITION
-------------------------------- */
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/* ---------------------------
PAGE ELEMENTS
------------------------------ */
.clear {
clear:both;
}
/* -----------------------------
MAIN NAVIGATION */
.nav_container {
margin:0 auto;
width: 1200px;
padding-top:220px;
}
#navMenu{
display: inline;
margin: 0 auto
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}
a.navLair, a.navLair_a{
display:block;
float:left;
width:158px;
height:110px;
background: url("menulairhome.png");
background-repeat:no-repeat;
}
a.navLair:hover{
background: url("menulairhome.png") 158 110px;
}
a.navLair_a{
background: url("menulairhome.png") 0 158px;
}
a.navAbout, a.navAbout_a{
display:block;
float:left;
width:158px;
height:110px;
background: url("menuaboutus.png");
background-repeat:no-repeat;
}
a.navAbout:hover{
background: url("menuaboutus.png") 158 110px;
}
a.navAbout_a{
background: url("../images/services_button.jpg") 0 158px;
}
a.navDogpack, a.navDogpack_a{
display:block;
float:left;
width:158px;
height:110px;
background: url("menudogpack.png");
background-repeat:no-repeat;
}
a.navDogpack:hover{
background: url("menudogpack.png") 158 110px;
}
a.navDogpack_a{
background: url("menudogpack.png") 0 158px;
}
a.navLawbook, a.navLawbook_a{
display:block;
float:left;
width:158px;
height:110px;
background: url("menulawbook.png");
background-repeat:no-repeat;
}
a.navLawbook:hover{
background: url("menulawbook.png") 158 110px;
}
a.navLawbook_a{
background: url("menulawbook.png") 0 158px;
}
a.navContact, a.navContact_a{
display:block;
float:left;
width:158px;
height:110px;
background: url("menucontact.png");
background-repeat:no-repeat;
}
a.navContact:hover{
background: url("menucontact.png") 158 110px;
}
a.navContact_a{
background: url("menucontact.png") 0 158px;
}
a.navNews, a.navNews_a{
display:block;
float:left;
width:158px;
height:110px;
background: url("menunews.png");
background-repeat:no-repeat;
}
a.navNews:hover{
background: url("menunews.png") 158 110px;
}
a.navNews_a{
background: url("menunews.png") 0 158px;
} |
||
| juriad Profil |
#4 · Zasláno: 28. 3. 2014, 11:34:41
Nemáš náhodou tu stránku někde na webu? Viz živá ukázka. Jinak fakt nepsat víc moc nejde.
Celé to CSS pro menu máš strašně roztahané. Přece vsechny položky mají většinu vlastností shodných, liší se jen obrázkem. |
||
| noteat Profil |
#5 · Zasláno: 28. 3. 2014, 11:40:43
pošlu screen na email? na webu to nemám, dokud to nebude použitelné, tak to tam nechci dávat...já mám noteat@email.cz
|
||
| jenikkozak Profil |
#6 · Zasláno: 28. 3. 2014, 11:52:23
Během tří hodin toto vlákno zaujalo 16 registrovaných uživatelů. Budeš každému zvlášť posílat obrázky a zdrojové kódy na e-mail? Zatím to můžeš někam umístit provizorně. Pokud chceš pomoci.
|
||
| noteat Profil |
tak třeba takto?...... http://noteat.rajce.idnes.cz/nastenka#jakma.jpg
|
||
| noteat Profil |
#8 · Zasláno: 28. 3. 2014, 19:39:58
to juriad ... takže z toho obecného pohledu bych měl hlavní strukturu psát v html a vše ostatní jako pozice a formáty a fonty v css? Nebo jak vypadá správná struktura?
|
||
| juriad Profil |
#9 · Zasláno: 28. 3. 2014, 20:10:52
Ano, přesně tak.
Pěkný příklad jednoduché stránky je http://qu.wu.cz/webtest/jednoduche-schema-stranky.htm. Podívej se na HTML a CSS. Ale s tou tvou stránkou je to složitější, u ní to vypadá, že záleží víc na formě než na obsahu. Je docela těžké to vymyslet tak, aby všechny části na sebe nevazovaly. Ty fakt máš pevně definované pozice, takže ti nic moc jiného nezbývá. Pokud chceš pomoc, dej to někam na web. |
||
| _es Profil |
#10 · Zasláno: 28. 3. 2014, 20:16:56
|
||
|
Časová prodleva: 4 dny
|
|||
| noteat Profil |
#11 · Zasláno: 1. 4. 2014, 09:50:39
Neumřel jsem, jen se pokouším zprovoznit hosting, který byl již v provozu ale nevyzkoušen.... vyzkoušel jsem jej ale nefunguje... řeším to teď s adminy a pak hned připravím živou ukázku... omluva za čekání, vina je na straně hostingu :/
Díky za trpělivost n |
||
| noteat Profil |
#12 · Zasláno: 1. 4. 2014, 11:10:39
Tak jukněte na www.thereservoirdogs.eu mělo by to fungovat... chtěl bych alespoň přibližně zachovat vodorovnou linii umístění menu a ve spodní části je ikona (pokus) pro přesměrování zpět na index stránku. ta by měla být umístěna ve spodním levém rohu pod nohami figury....
Stránku bych chtěl zachovat vycentrovanou, následně změním pozadí z bílé na jinou vhodnější barvu, ale to teď není podstatné. Zajímá mne jak správně pozicovat objekty a přitom neměnily pozici při změně velikosti stránky (ctrl+scroll mouse) Nechal jsem původní kód jelikož při pročištění dle rady se mi začaly zobrazovat položky jako značený seznam s tečkami a každá položka byla kaskádovitě posunuta o cca 10px níže oproti předchozí v menu. Což znamená, že jsem to podělal ještě více než to bylo předtím. Pokusím se to pak přepsat celé a řádně zkulturnit, ale to až na závěr. Moc Vám děkuji předem za rady. noteat |
||
| noteat Profil |
#13 · Zasláno: 3. 4. 2014, 07:59:33
tak to vypadá, že moje vlákno už je po smrti :/
|
||
| Tomáš123 Profil |
#14 · Zasláno: 3. 4. 2014, 15:57:24
Tvoj kód je nejako divný-prečo tam nemáš Hlavičku, menu máš definované mimo body, krížia sa ti tam tagy, začínaš <menu> a končíš </MENU>?
<body>
<BODY bgcolor="white"; text="105;25;25" style="background-repeat: no-repeat;background-position:fixed;
background-position=center" Obsah <BODY> môžeš pripojiť na <body>.
.nav_container {
margin:0 auto;
width: 1200px; /* Preboha načo, veď je to ešte širšie ako obsah*/
padding-top:220px;<li><a href="#" class="navLair" title="Lair" onclick="href='homepage.html'"></a></li> To onclick vymaž, veď kliknúť na to musíš aj bez tej funkcie. Problém tvojho menu je tu: <span style="position: absolute; top: 25px; left: 480px; z-index: 1"> Tvoju stránku by som prerobil asi do takejto podoby: <html>
<head>
<metaveci>
<metaveci>
</head>
<body>
<div id="cela_stranka">
<div class="menu"></div>
<div class="obsah"></div>
</div>
</body>
</html>A css aby si mal menu v strede by muselo mať: .menu {
margin: 0 auto;
width: XXpx; /*alebo percentá, použiješ podľa potreby*/
} |
||
|
Časová prodleva: 10 let
|
|||
0