CSS a scrolling

dsljohn · Napísal **dsljohn**: 28.08.2008 21:25

no chcem pridať do css suboru aj take aby sa mi z klasickeho prehladavacskeho rolovacej sipky použil moj vlastny aky si vytvorim
css subor:

Kód:

body { 
margin:114px 0 0 0; 
line-height:16px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
a { color:#018BC1;}
a:hover { text-decoration:none;}
#header {}
#logo { padding:30px 0 120px 0;color:#fff; text-align:center;}
#logo a{ color:#fff; text-decoration:none; font-weight:bold; font-size:24px; text-transform:uppercase; }
#menu {color:#fff; text-align:center; margin-bottom:62px;}
#menu ul {text-align:center;list-style:none; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#f26513;}
#main {background: url(images/body_all_bckg.jpg) repeat-y top center;}
#content {width:780px; margin:0 auto;}
#text { width:520px;}
#text p { margin:7px 0 7px 0;}
#text li {background:url(images/li.gif) no-repeat 0px 7px;}
#sidebar {float:right; width:227px; background-color:#0b0e10; margin:10px 10px 0 0; }
#sidebar_top { width:227px; height:40px; background:url(images/sidebar_top.jpg) no-repeat;}
#sidebar_text { padding: 0 30px;}
#sidebar_text p { margin:5px 0 5px 0;}
#sidebar_bottom { width:227px; height:57px; background:url(images/sidebar_bottom.jpg) no-repeat;}
#sidebar h2 { font-size:13px; text-transform:uppercase; color:#fff; margin:20px 0 0 0; padding:0; background:none;}
h1 {margin:30px 0 0 0; padding:5px 0 7px 45px; text-transform:uppercase; font-size:24px; color:#fff; background:url(images/h1_bckg.jpg) no-repeat;}

#footer {background:url(images/footer_bckg.jpg) no-repeat top center; height:102px; clear:both; width:780px; margin:0 auto; }
#left_footer { float:left; padding:60px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:60px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}

a css rolovacej sípky

Kód:

scrollbar-face-color:#808080;
scrollbar-arrow-color:#000000;
scrollbar-highlight-color:#CCCCCC;
scrollbar-3dlight-color:#999999;
scrollbar-shadow-color:#666666;
scrollbar-darkshadow-color:#000000;
scrollbar-track-color:#F2F2F2;
}

kam mam vložiť ten kod rolovacej sipky aby fungoval?
skusal som jednu verzii ale nesla tak pls poradte.

stenley · Napísal **stenley**: 28.08.2008 21:39

ze by do body?

dsljohn · Napísal autor témy **dsljohn**: 28.08.2008 21:51

no ale kam presne lebo ja som to tam dal ale nesiel mi
nemohol by si to sem capiť ako to ma vyzerať?

neutronmind · Napísal **neutronmind**: 28.08.2008 21:53

Nj, tusim sa to da nastavit aj tagu <html>, ale to je uz jedno. Inak moc by som ti to neoporucil pouzivat, v niektorych prehliadacoch to nejde (Mozzila, Netscape Navigator), a taktiez su tieto vlastnosti oznacovane ako nevalidne...

//hopla, no tu to mas

Kód:

body {
scrollbar-face-color:#808080; 
scrollbar-arrow-color:#000000; 
scrollbar-highlight-color:#CCCCCC; 
scrollbar-3dlight-color:#999999; 
scrollbar-shadow-color:#666666; 
scrollbar-darkshadow-color:#000000; 
scrollbar-track-color:#F2F2F2; 
}

a das to normalne do suboru s priponou .css

pepek92 · Napísal **pepek92**: 29.08.2008 12:43

Ani by som to nedoporučoval, mne osobne sa páči klasický posuvník a nie taký farebný.

dsljohn · Napísal autor témy **dsljohn**: 01.09.2008 10:17

neutronmind píše:

Nj, tusim sa to da nastavit aj tagu <html>, ale to je uz jedno. Inak moc by som ti to neoporucil pouzivat, v niektorych prehliadacoch to nejde (Mozzila, Netscape Navigator), a taktiez su tieto vlastnosti oznacovane ako nevalidne...

//hopla, no tu to mas

Kód:

body {
scrollbar-face-color:#808080; 
scrollbar-arrow-color:#000000; 
scrollbar-highlight-color:#CCCCCC; 
scrollbar-3dlight-color:#999999; 
scrollbar-shadow-color:#666666; 
scrollbar-darkshadow-color:#000000; 
scrollbar-track-color:#F2F2F2; 
}

a das to normalne do suboru s priponou .css

no ano tam kde mam len tento css tak funguje ale neviem to skumbinovať s tym dlhsim css suborom co je mojom v uvodnom prispevku.

stenley · Napísal **stenley**: 01.09.2008 10:42

proste tych 7 novych riadkov pridas do body... inak, chyba ti tam ukoncovacia zatvorka...

dsljohn · Napísal autor témy **dsljohn**: 01.09.2008 11:08

nefunguje prave to som skusal
teraz subor style.css vyzera takto

Kód:

body { 
margin:114px 0 0 0; 
line-height:16px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
scrollbar-face-color:#808080; 
scrollbar-arrow-color:#000000; 
scrollbar-highlight-color:#CCCCCC; 
scrollbar-3dlight-color:#999999; 
scrollbar-shadow-color:#666666; 
scrollbar-darkshadow-color:#000000; 
scrollbar-track-color:#F2F2F2;
}
a { color:#018BC1;}
a:hover { text-decoration:none;}
#header {}
#logo { padding:30px 0 120px 0;color:#fff; text-align:center;}
#logo a{ color:#fff; text-decoration:none; font-weight:bold; font-size:24px; text-transform:uppercase; }
#menu {color:#fff; text-align:center; margin-bottom:62px;}
#menu ul {text-align:center;list-style:none; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#f26513;}
#main {background: url(images/body_all_bckg.jpg) repeat-y top center;}
#content {width:780px; margin:0 auto;}
#text { width:520px;}
#text p { margin:7px 0 7px 0;}
#text li {background:url(images/li.gif) no-repeat 0px 7px;}
#sidebar {float:right; width:227px; background-color:#0b0e10; margin:10px 10px 0 0; }
#sidebar_top { width:227px; height:40px; background:url(images/sidebar_top.jpg) no-repeat;}
#sidebar_text { padding: 0 30px;}
#sidebar_text p { margin:5px 0 5px 0;}
#sidebar_bottom { width:227px; height:57px; background:url(images/sidebar_bottom.jpg) no-repeat;}
#sidebar h2 { font-size:13px; text-transform:uppercase; color:#fff; margin:20px 0 0 0; padding:0; background:none;}
h1 {margin:30px 0 0 0; padding:5px 0 7px 45px; text-transform:uppercase; font-size:24px; color:#fff; background:url(images/h1_bckg.jpg) no-repeat;}

#footer {background:url(images/footer_bckg.jpg) no-repeat top center; height:102px; clear:both; width:780px; margin:0 auto; }
#left_footer { float:left; padding:60px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:60px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}

skusal som aj hore dať tych sedem riadkov ale nepomohlo.

p.s použivam operu takže tam by to malo isť

stenley · Napísal **stenley**: 01.09.2008 11:12

mne to funguje (tvoj kod)

dsljohn · Napísal autor témy **dsljohn**: 01.09.2008 11:14

mne nie :-( potm kde može byť problem,
lebo napr mam na niektory casti stranky v css subore len ten scroll a nic ine a tam to ide bez problemov ale v tomto kde mam aj formatovanie srtranky pismo, pozadie, ....... tak tam nechce vobec

stenley · Napísal **stenley**: 01.09.2008 11:21

ostatne css z toho suboru ti funguje spravne? ak nie, tak mas nastavenu zlu cestu... ale to asi mas ok, tak potom daj cely kod, ktory pouzivas (tu hlavnu cast)

dsljohn · Napísal autor témy **dsljohn**: 01.09.2008 11:30

jj ostatne teoreticky funguje spravne aspon vyzera to tak,
tak davam kde to ako funguje takže:
index.html

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oficiálna web stránka bývalej 9B triedy</title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body style="background-color: #000000">
   <!-- header -->
    <div id="header">
       <div id="logo">
          <div style="position: absolute; width: 702px; height: 29px; z-index: 2; left: 155px; top: 154px" id="vrstva2">
            <a href="#">Bývalá 9.B trieda 2006/2007</a><sup><a href=><span style="text-transform: none; text-decoration: blink"><font size="3">ZŠ 
            Pohraničná č.9, 945 01 Komárno</font></span></a></sup></div>
&nbsp;</div>
        <div id="menu">
           <ul>
            <li>
            <br>
            <br>
            <br>
            <br>
            <br>
           <br>
            <table border="0" width="100%" id="table1">
              <tr>
                <td>
           <ul>
            <li><a href="index.html">Domov</a></li>
            <li><a href="foto.html">Fotogaléria</a></li>
            <li><a href="download.html">Download</a></li>
            <li><a href="zoznam.html">Zoznam žiakov</a></li>
            <li><a href="kontakty.html">Kontakty</a></li>
       <li><a href="guestbook.html">Kniha návštev</a></li>
            <li><a href="http://dutesudyforum.tym.sk">Fórum</a></li>
            <li><a href="http://dutesudy.tym.sk/chat.htm">Chat</a></li>
            </ul>
                <p>&nbsp;</td>
              </tr>
            </table>
            </li>
            </ul>
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">
    <div id="sidebar" style="width: 206px; height: 792px">
       <div id="sidebar_top"></div>
        <div id="sidebar_text">
<embed src="http://www.clocklink.com/clocks/5005-blue.swf?TimeZone=GMT0200&"  width="120" height="40" wmode="transparent" type="application/x-shockwave-flash">        <table border="0" height="300" width="150" style="border-style: groove; border-width: 3px">
<br>   
 <h2>Novinky</h2>                   
  <tr>
                            <td align="left" valign="top">
 Pribudol guestbook pre <b>všetkých</b><br>
_____________________
<br>
Fotogaléria z výletu:<br>
30.7.2008 <a href="foto2.html">>>>>>>>>></a><br>
_____________________
<br>

Triedny výlet:<br>
od <b>28.6.2008</b> do <b>2.7.2008</b><br>
_____________________
<br>
Stretnutie 22.6.2008<br>
Peniaze za výlet<br>
_____________________
<br>
Nová fotogaléria:<br>
Stretnutie 10.5.2008<br>
_____________________
<br>
ARCHÍV noviniek<br>
                            si pozrieš<br>
                            <a href="http://www.dutesudy9b.szm.sk/archiv/index.htm">
                            <b>kliknutím sem</b> </a></td>
                          </tr>
                        </table>

        <h2>Počítadlo prístupov</h2>
        <!-- BlueBoard.cz Pocitadlo -->
<span id="bbpocitadlo-span-ou7ubuecn56vmrjxvm9jc8axdncavi"><a id="bbpocitadlo-ou7ubuecn56vmrjxvm9jc8axdncavi" href="http://blueboard.cz"></a></span>
<script type="text/javascript" src="http://blueboard.cz/counter_1.php?jid=ou7ubuecn56vmrjxvm9jc8axdncavi"></script><br>
<!-- BlueBoard.cz Pocitadlo KONEC -->
             &nbsp;</div>
         <div id="sidebar_bottom" style="width: 227px; height: 52px"></div>
   </div>
          <div id="text" style="width: 520px; height: 604px">
                <h1><span style="font-size: 15pt"> Vitajte na stránke bývalej 9.B triedy</span></h1>
                <p style="line-height: 18px; margin-top: 9px">
                <span style="font-size: 13pt">Bránu školy sme opustili 29.6.2007 
                <br>so slovami:<b><font color="#FFFFFF"> &quot;Viete, čo nám môžete 
                ... zamávať!&quot; </font></b>a s presvedčením, že "Duté sudy nepotopíš!"<br>Bolo nás 27 (pre našu triednu) pekných a dobrých detí, niekedy<br>obludy, žubrienky či nočné motýle.</p>
                <div style="position: absolute; left: 105px"><script type="text/javascript"> 
  <!-- 
  Pics = new Array(3); 
  Pics[0] = '<A href="http://www.dutesudy9b.tym.sk/blackedition/index.html">'+ 
    '<img src="images/text1.jpg" alt="SVITÁ" Border=0></a>'; 
  Pics[1] = '<a href="http://www.dutesudy9b.tym.sk/blackedition/index.html">'+ 
    '<img src="images/text2.jpg" alt="ĽÚTOSŤ" Border=0></a>'; 
  Pics[2] = '<a href="http://www.dutesudy9b.tym.sk/blackedition/index.html">'+ 
    '<img src="images/text3.jpg" alt="RUŽE" border=0></a>'; 
  // --> 
</script> 



<script type="text/javascript"> 
  <!-- 
  document.write("<center>"); 
  document.write(Pics[Math.floor(Math.random() * Pics.length)]); 
  document.write("<br><SMALL></small><br>"); 
  document.write("</center>"); 
  // --> 
</script> </div>               <div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 51px; top: 1063px" id="vrstva1" align="center">
                  <span style="font-size: 13pt"> 
    <div id="footer">
    <div id="left_footer" style="width: 249px; height: 92px">© Copyright 2008 :: 
      Zoltán Kelemen </div>
    <div id="right_footer">
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality 
Software</a>
    </div>
    </div>

    </span>
                  <p>&nbsp;</div>
          </div>
         </div><span style="font-size: 13pt"> 
    <!-- end footer -->
    </div>
    <!-- end main -->

    </span>

</body>
</html>

prosim nekritozovať <br> to som sa nas*** preto je to tak
takže k tomuto patri ten dlhy css subor ciže style.css

toto je kde to funguje spravne index.html

Kód:

<html lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Oficiálna web stránka bývalej 9b triedy</title>
<meta name="copyright" content="© 2008 Zoltán KELEMEN ">
<link rel="stylesheet" type="text/css" href="style.css"><base target="I1">
</head>
<body  topmargin="0" leftmargin="0" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<style type="text/css">
body {font-family: Verdana; font-size: 10pt; color: #FFFFFF; background-color:#000000}
a {text-decoration: none; #FFFFFF; } {}
a:hover {text-decoration: underline; cursor:crosshair}
div {font-size:10pt}
</style>
<img border="0" src="layout.jpg" width="941" height="250">
<div style="position: absolute; left: 25; top: 260; width: 162; height: 475" id="left">
<b>:: Archív noviniek ::</b><br>
<br>
<a href="08jan.htm">Január 2008</a><br>
<a href="08feb.htm">Február2008 </a><br>
<a href="08mar.htm">Marec 2008</a><br>
<a href="08apr.htm">Apríl 2008</a><br>
<a href="08maj.htm">Máj 2008</a><br>
<a href="08jun.htm">Jún 2008</a><br>
<a href="08jul.htm">Júl 2008</a><br>
<a href="08aug.htm">August 2008</a><br>
</div>
<div style="position: absolute; left: 145px; top: 72px " align="center">
<b><a href="http://www.dutesudy9b.tym.sk/"><font size="6">Vitajte na stránke 
bývalej 9b triedy</font></a></b></div>
<div style="position: absolute; left: 214; top: 260" id="right">
<iframe name="I1" src="right.htm" width="720" height="473" border="0" frameborder="0" target="I1">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></div>
<div style="position: absolute; left: 35px; top: 750px; width: 249px; height: 130px" align="center">
   <img border="0" src="end.jpg" width="923" height="59">
   <p>© Copyright 2008 :: Zoltán Kelemen</p></div>

</body></html>

a kratky css subor
style.css

Kód:

BODY {
   scrollbar-face-color:#808080;
   scrollbar-arrow-color:#000000;
   scrollbar-highlight-color:#CCCCCC;
   scrollbar-3dlight-color:#999999;
   scrollbar-shadow-color:#666666;
   scrollbar-darkshadow-color:#000000;
   scrollbar-track-color:#F2F2F2;
  }
  

stenley · Napísal **stenley**: 01.09.2008 11:38

je to sposobene tymto:

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

zahada je vyriesena

dsljohn · Napísal autor témy **dsljohn**: 01.09.2008 11:39

takže mam to odstraniť vsak?

stenley · Napísal **stenley**: 01.09.2008 11:42

ked to nahradis

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

tak ti to pojde

dsljohn · Napísal autor témy **dsljohn**: 01.09.2008 14:43

jej diki funguje to takto

Blackshadow · Napísal **Blackshadow**: 04.09.2008 14:00

xhtml to nepodporuje, alebo co je vlastne podstata problemu ?

CSS a scrolling

Podobné témy