Autor Zpráva
mara
Profil *
#1 · Zasláno: 29. 5. 2013, 18:48:44
Odpovědět Citovat
Celý den řeším jak udělat jednoduchý a co nejlépe vyřešený tlačítka. Představa je takováto: http://teststranek.kvalitne.cz/menu4/ jen si jinak vyhraji s barvami. Nejsem schopen to ale integrovat do zdrojáku. Zkoušel jsem to psát od začátku a pochopit ty jednotlivý funkce. Když jsem napsal odkaz a dal mu barvu pozadí a nastavil šířku tlačítka paddingem tak to tlačítko bylo veliký podle textu a nemělo fixní velikost. Když jsem mu dal jako pozadí obrázek tak sem nebyl schopen mu nastavit velikost (po pročtení pár témat jsem zjistil, že to asi nefunguje spolehlivě).

Jak tedy na to? Rád bych docílil přesně toho co mám v přiloženém odkazu.

Berte prosím na vědomí, že div s menu má nadefinovaný skript, který s ním při rolování hýbe.

Kdyby mi to nějaká dobrá duše zakomponovala budu moc rád, ale za jaké koliv vodítko budu rád.

Ve zdrojáku je tam teď jako pozadí tlačítka obrázek.
Stylopis: 
div {border:no}
body {background-image: URL('pozadi.jpg');background-attachment: fixed;}
body {margin: 0;}
div {padding: 0%;}
.banner {position: absolute; left: 0px; top: 0px;}
.text {position: absolute; left: 193px; top: 275px; width:690}

.menu {position: relative; height: 300px; margin-left: -441; top: 15px; left:50% ; width: 250px; z-index:30;}
.fixed {position: fixed; right: 0; top: 15px;}
a    {font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:15pt;}
a.menici {background-image: url('uvod.gif'); width: 60px; height: 60px;}
a.menici:hover {background-image: url('uvod1.gif'); width: 60px; height: 60px;}
a:link    {color: black}
a:visited    {color: black}
a:active    {color: black}
p  {color: black; font-family: Arial, Helvetica, sans-serif;  font-size:10pt;}
h5 {color: black; font-family: Arial; font-size:4pt; font-weight: normal; font-style: italic}
Zdroják: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="stylopis.css">
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>2.SSU Vyškov</title> 
  </head>
  
<body style="text-align: center"> 
 
<div style="position: relative; width: 902px; height:2000; text-align: left; margin: auto; background-image: url(barva.jpg); border: 1px solid DimGray">

<div id="banner"><img src="banner.jpg"></div> 

<div id="menu" class="menu">

<p><a class="menici" href="index">Vystroj</a>

<p><a class="menici" href="index">O nahbbiunj</a>

</div>

<div id="text" class="text">
LOREM IPSUM
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit anim id est laborum.
<p><img src="14.jpg" width="100%" height="25%"></div>

<script>
var text = document.getElementById('text');
var menu = document.getElementById('menu');
window.onscroll = function () {menu.className = (document.documentElement.scrollTop + document.body.scrollTop  > text.offsetTop && document.documentElement.clientHeight > menu.offsetHeight) ? "menu fixed" : "menu";}
</script>


</div>
  </body>
</html>
margin
Profil *
#2 · Zasláno: 29. 5. 2013, 20:24:35
Odpovědět Citovat
mara:
„Když jsem mu dal jako pozadí obrázek tak sem nebyl schopen mu nastavit velikost (po pročtení pár témat jsem zjistil, že to asi nefunguje spolehlivě).“
Deklarace velikosti nefunguje pro inline elementy (pominu nestandardní chování IE ve qiurk režimu), u elementů s blokovým chováním není žádný problém.
Display
mara
Profil *
#3 · Zasláno: 29. 5. 2013, 20:36:24 · Upravil/a: mara
Odpovědět Citovat
Super to bychom měli :) Přesto ještě zkusím použít víc z toho co jsem dal na ukázku snad se mi to podaří. Už vím jak používat display :) Díky ještě jednou


Můžu se ještě zeptat jak ten text napozicovat v tom bloku? Tak aby byl kousek od kraje a taky se nelepil na horní okraj? Pomocí absolutní pozice v nadefinování stylu písma mi to nejde.
Trejpa
Profil
#4 · Zasláno: 29. 5. 2013, 20:51:39
Odpovědět Citovat
mara:
Vnitřní odsazení bloků se dělá pomocí paddingu.
mara
Profil *
#5 · Zasláno: 29. 5. 2013, 21:06:57
Odpovědět Citovat
Díky, ale když se tím snažím ten text posunout tak mi to zvětšuje ten block. Dělám něco špatně?
Trejpa
Profil
#6 · Zasláno: 29. 5. 2013, 21:17:49
Odpovědět Citovat
mara:
Ano, to je běžné chování. Padding, stejně jako rámeček, se k rozměrům bloku připočítává navíc. Takže si zmenši zadaný rozměr (width, height). Pokud není rozměr potřeba, tak ho ani nezadávej a nech tam jen padding. Také můžeš výšku jednořádkového obsahu nadefinovat pomocí line-height.
mara
Profil *
#7 · Zasláno: 30. 5. 2013, 13:11:13
Odpovědět Citovat
Díky už se mi to podařilo poměrně hezky napozicovat. Mám ale ještě jeden problém. Nejde mi změnit barva písma. Kam ji mám napsat? 
div {border:no}
body {background-image: URL('pozadi.jpg');background-attachment: fixed;}
body {margin: 0;}
div {padding: 0%;}
.banner {position: absolute; left: 0px; top: 0px;}
.text {position: absolute; left: 193px; top: 275px; width:690}

.menu {position: relative; height: 300px; margin-left: -441; top: 10px; left:50% ; width: 250px; z-index:30;}
.fixed {position: fixed; right: 0; top: 10px;}
a    {font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: blue;line-height: 190%; font-size:11pt;padding: 0px 0px 0px 17px;}
a.menici {background-color: #222; width: 153px; height: 26px;display: block;}
a.menici:hover {background-color: #777; width: 153px; height: 26px;display: block;}
a:link    {color: black}
a:visited    {color: black}
a:active    {color: black}
p  {color: black; font-family: Arial, Helvetica, sans-serif;  font-size:10pt;}
h1 {color: black; font-family: Arial, Helvetica, sans-serif;  font-size:5pt;}
h5 {color: black; font-family: Arial; font-size:4pt; font-weight: normal; font-style: italic}
Trejpa
Profil
#8 · Zasláno: 30. 5. 2013, 13:22:58
Odpovědět Citovat
mara:
Pokud ti jde o barvu běžného textu, tak se nastavuje obvykle pro body. 
body { color: darkblue; }

Jinak odkazy jsi už nabarvil modře a potom jejich barvu změnil na černou: 
a    {font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: blue;line-height: 190%; font-size:11pt;padding: 0px 0px 0px 17px;}

a:link    {color: black}
a:visited    {color: black}
a:active    {color: black}
Stačilo je ale obarvit pouze tím prvním nastavením na požadovanou barvu a další tři deklarace jako zbytečné vypustit.
mara
Profil *
#9 · Zasláno: 30. 5. 2013, 13:36:01
Odpovědět Citovat
Aháá to mi uniklo, že tam mám ty tři deklarace. Kvůli tomu mi to nebralo tu barvu :)
Časová prodleva: 11 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