CSS

aughostino

mam na stranke obrazok a potreboval by som spravit v css pomocou a:hover aby sa zobrazil iny skusal som to ale dako sa mi nedari

index.html:

Kód: Vybrať všetko

<div id="eng"><a href="eng/indexeng.html"><img src="img/eng.jpg"></a></div>

style.css

Kód: Vybrať všetko

#eng {
   display: inline;
   width: 200px;
   height: 134px;
   margin-left: 30px;
}

skusal som

Kód: Vybrať všetko

#eng{
   background-image: eng2.jpg
}

ale nepmohlo

Shakal

Ked to uz robit cez CSS asi by som postupoval nejak takto:

nejaky.html

Kód: Vybrať všetko

<div id="obr1"><a href="#"> </a></div>

Styl.css

Kód: Vybrať všetko

#obr1 a {
background: url(obrazok1.jpg) center center no-repeat;
width: sirka obrazku px;
height: vyska obrazku px;
}

#obr1 a:hover {
background: url(obrazok2.jpg) center center no-repeat;
width: sirka obrazku px;
height: vyska obrazku px;
}

Samozrejme treba to vyskusat. Toto som vypotil ale v zivote som to neskusal. Mozno by tam nebolo treba ani <a> stacilo by samortne <div> alebo opacne.
Urcite sa na tom da co zlepsovat.

aughostino

ale ten obrazok je zaroven aj odkazom tak myslil ze to a tam bude potrebne

sprav to cez javascript, eventom onmouseover

aughostino

vdaka audiotrack na javascript som uplne zabudol

aughostino

nechcem zakladat novu temu tak to dam sem:
Mam dalsi problem, vlastne to ani neni problem je to skor vylepsenie na stranku ale neviem ako dalej. Ide v podstate o vytvorenie dvoch stlpcov textu vedla seba. Nieco som uz zacal

CSS:

Kód: Vybrať všetko

#uvod {
   color: #ffcc00;
   font-weight: bold;
   font-size: 15px;
   width: 150px;
   margin-left: 20px;
}

#stlpec {
   color: yellow;
   font-size: 14px;
   font-family: Century Gothic;
   font-weight: bold;
   width: 150px;
   margin-left: 300px;
   top: -100px;
}

Kód: Vybrať všetko

<div id="uvod"> Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit tristique et enim malesuada lacinia a auctor ac dapibus. 
</div>

<div id="stlpec">Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit tristique et enim malesuada lacinia a auctor ac dapibus. 
    </div>

zaggi

margin-left si mozes upravit podla potreby, ale vedla seba su

Kód: Vybrať všetko

<html>
<head>
    <style type="text/css">
        #uvod
        {
            color: #ffcc00;
            font-weight: bold;
            font-size: 15px;
            width: 150px;
            /*margin-left: 20px;*/
            float: left;
        }
        #stlpec
        {
            color: yellow;
            font-size: 14px;
            font-family: Century Gothic;
            font-weight: bold;
            width: 150px;
            /*margin-left: 300px;*/
            float: left;
        }
    </style>
</head>
<body>
    <div id="uvod">
        Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit
        tristique et enim malesuada lacinia a auctor ac dapibus.
    </div>
    <div id="stlpec">
        Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit
        tristique et enim malesuada lacinia a auctor ac dapibus.
    </div>
</body>
</html>

aughostino

diki funguje to ale mam este jeden maly problemik kebyze tam mam aj treti div (napriklad text) a chcem aby sa zobrazoval normalne pod divmi stlpec a uvod. Vid obrazok (to ako je to nakreslene si nevsimajte nikdy som nemal rad vytvarnu vychovu

) som zufaly

zaggi

Kód: Vybrať všetko

<html>
<head>
    <style type="text/css">
        body
        {
            font-size: 15px;
            font-family: Verdana, Times New Roman;
            background-color: Gray;
            margin: 0px;
            padding: 0px;
            text-align: justify;
        }
        #stlpce
        {
            position: relative;
            width: 40%;
            left: 30%;
        }
        #lavyStlpec
        {
            color: Red;
            position: absolute;
            width: 50%;
            top: 0;
            left: 0;
        }
        #pravyStlpec
        {
            color: Blue;
            position: absolute;
            width: 50%;
            top: 0;
            right: 0;
        }
        #hlavnyText
        {
            color: Green;
            position: absolute;
            width: 40%;
            left: 30%;
            top: 10%;
        }
    </style>
</head>
<body>
    <div id="stlpce">
        <div id="lavyStlpec">
            Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit
            tristique et enim malesuada lacinia a auctor ac dapibus.
        </div>
        <div id="pravyStlpec">
            Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit
            tristique et enim malesuada lacinia a auctor ac dapibus.
        </div>
    </div>
    <div id="hlavnyText">
        Lorem ipsum dolor sit amet consectetuer tempor condimentum hac quis a. Nulla elit
        tristique et enim malesuada lacinia a auctor ac dapibus. Lorem ipsum dolor sit amet
        consectetuer tempor condimentum hac quis a. Nulla elit tristique et enim malesuada
        lacinia a auctor ac dapibus.
    </div>
</body>
</html>

ryty

sry aughostino ze sa ti hrabem do temy ved ja ti to vynahradim cez vikend pivom

ale k veci

mam na stranke panel a v nom text ale ked tam ten text napisem tak ho zobrazi v jednom riadku a chcel by som aby ked pride text na koniec panela tak aby sa zalomil a isiel do druheho riadku

Kód: Vybrať všetko

#lavypanel{
   width: 200px;
   height: 540px;
   display: block;
   border: solid #000000 2px;
   position: absolute;
   left: 5px;
   margin-bottom: 25px;
}

KaktusBR

asi by to chcelo cely kod lebo iba tato cast kodu funguje tak ze ho zalamuje. nezalomi ti iba ak je slovo dlhsie ako riadok

ryty · Príspevok od používateľa **ryty** » 13 máj 2008, 6:33

Tu to je ked som to skusal vo firefoxe tak mi text nezalomilo do noveho riadku.

//edit: uz je to upravene

sry

KaktusBR

nenaslo stranku "Požadovaná stránka /new.index.html nebyla nalezena."

//edit

nemozem ti pomoct lebo mne to zalamuje. skusil som to dat hned pod

Kód: Vybrať všetko

  <div id="lavypanel">
	  	 asdfsds dfsdffffffffffffff fffffffffffff ffffffffffff ffffffffffffffff

a spravilo to do riadkov

ale pozrel som ti stranku aj v IE a tam je to kus rozhadzane ten vrchny obrazok ti lieta po stranke. asi preto ze to tam nemas tak ako ma byt. este tam toho nemas vela tak ti tu mozem dat nejaku zakladnu sablonu aby ti to zobrazovalo spravne.

dobre ze je to bez tabuliek, ze je to prehladne ale mas tam zopar veci navyse alebo niedobre ktore ti budu robit skor ci neskor sarapatu

ryty

KaktusBR napísal:....

Viem v IE to sa este zatial spravi mozno ak sa mi to podari ked nie tak napisem. rozmyslal som nad externym stylom css vyhradne pre IE este uvidim.

ktore veci si mal na mysli, ze tam budu robit sarapatu? prezrel som si kod este raz a nic som nezbadal.

KaktusBR

no ved uz ti robi. mas uplny zaklad a uz ti to IE rozhadzuje. napr. ten header neviem preco je na konci kodu ked ho zobrazujes na zaciatku obsahovej casti, tiez neviem preco by mal byt ako pozadie a nie normalny obrazok.

dalej si tam vytvoril ten matersky div id="page" - keby si ho dal prec a namiesto toho urcl relativnu poziiciu (aj sirku celej stranky) pre body tak by sa ti lahsie robilo. napr. ked by si chcel vycentrovat stranku alebo prilepit ju uplne na roh...

nehovorim ze to mas zle len si to podla mojho nazoru komplikujes.

stale ti nezalamuje ten text?

ryty

KaktusBR napísal:no ved uz ti robi. mas uplny zaklad a uz ti to IE rozhadzuje. napr. ten header neviem preco je na konci kodu ked ho zobrazujes na zaciatku obsahovej casti, tiez neviem preco by mal byt ako pozadie a nie normalny obrazok.

dalej si tam vytvoril ten matersky div id="page" - keby si ho dal prec a namiesto toho urcl relativnu poziiciu (aj sirku celej stranky) pre body tak by sa ti lahsie robilo. napr. ked by si chcel vycentrovat stranku alebo prilepit ju uplne na roh...

nehovorim ze to mas zle len si to podla mojho nazoru komplikujes.

stale ti nezalamuje ten text?

vdaka za pripomienky, trosku som to upravil, <div id="page"> som dal prec a nastavil som sirku body, <div id="header"> som dal na zaciatok kodu a tie panely mi skocili dole pozri stranku.

KaktusBR

do prilohy som dal upraveny subor, aj css je v nom.

Ti tam robil ten header zlobu a to ze si chcel vsetko poziciovat. Som pomazal to poziciovanie a este trochu upravil body, header som dal tam kde ma byt a premazal marginy, . Nechcel som ti do tych borderov zasahovat a celkovo do konstrukcie len som tam dal pevnu sirku – ak to chces roztahovat na celu stranku tak to ries cez percenta.

Este sa ti mozem na to pozret ak to neni to co si chcel

//edit. co som ret, nejako neviem dat prilohu do prispevku ci co. tak dufam ze do code mozem aj ked je to dlhsie

Kód: Vybrať všetko

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <link href="style/news.css" rel="stylesheet" type="text/css" />
    <title>
    </title>
	
	<style>
body {
   font-size: 15px;
   font-family: Verdana, Times New Roman;
   background-color: Gray;
   margin-top: 20px;
   padding: 0px;
   width: 985px;
   min-height: 910px;
   border: solid #FFFFFF 3px;
}

a {
 
}

h1 {
   font-weight: bold;
   font-family: Comic sans MS; 
   font-size: 15px;
   margin-left: 15px;
   margin-top: 20px;
   margin-bottom: 20px;
   width: 300px;
   height: 22px;
   background: #ffffff;
   color: #666666;
}

h2 {
   font-weight: bold;
   font-family: Times new Roman; 
   font-size: 25px;
   text-align: center;
   
}

#secound { width:386px; }
#third { width:150px;}

h3 {
   font-weight: bold;
   font-family: arial; 
   font-size: 17px;
   margin-bottom: 20px;
}

#lavypanel{
   width: 200px;
   text-align: center;
   border: solid #000000 2px;
   min-height: 700px;
   float:left;
}

#container {
   width: 563px;
   min-height: 500px;
   display: block;
   border: solid #000000 2px;
   top: 240px;
	float:left; 
	margin-left:0px; 
   text-align: left;
   background: #ffffff;
}

#obsah {
   margin: 5px;
   padding: 5px;
   min-width: 400px;
}

#pravypanel {
   width: 200px;
   min-height: 700px;
   border: solid #000000 2px;
   padding-bottom: 25px;
   text-align: center;
   
    float:left; margin-left:7px;  border:1px solid #6599FF;
}
#header {
   width: 563px;
   height: 177px;   
   margin-bottom: 10px;
   background: url(http://thefishbusters.tym.sk/new/images/banner.jpg) no-repeat;
   border: solid #000000 2px;  
}

/*hl. menu*/
#lmenu {  
   font-size: 15px;
   font-weight: bold;
   margin: 10px;
   margin-bottom: 25px;
}

#lmenu li a:hover {
   background-color: white;
}

#lmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
}

#lmenu ul li {
   display: block;
   margin-bottom: 8px;
   text-align: left;
}

#lmenu li a { 
   text-decoration: none; 
   padding: .2em .8em;
   color: #000000;
   background-color: #666666;
} 
/*koniec hl. menu*/

/*podmenu*/
#podmenu {  
   font-size: 15px;
   font-weight: bold;
   margin: 10px;
}

#podmenu li a:hover {
   background-color: white;
}

#podmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
}

#podmenu ul li {
   display: inline;
   margin-bottom: 5px;
   text-align: left;
}

#podmenu li a { 
   text-decoration: none; 
   padding: .2em .8em;
   color: #000000;
   background-color: #666666;
} 

/*koniec podmenu*/

#leftlogo {
   margin-bottom: 70px;
   margin-left: 5px;
   margin-top: 5px;
}

#rightlogo {
   margin-bottom: 70px;
   margin-left: 35px;
   margin-top: 5px;
}
/*left box novinky*/
#leftbox
	{
	height: 25px;
	padding: 5px;
	width: 200px;
	margin-bottom: 20px;
	}
.top
	{
	border-right: 1px solid black;
	color: black;
	height: 8px;
	line-height: 8px;
	width: 200px;
	}
#leftcolumn
	{
	font-size: 12px;
	height: 150px;
	padding: 0px 4px 0px 4px;
	text-align: left;
	width: 150px;
	}
ul
	{
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
.date
	{
	color: #006464;
	font-weight: bold;
	}
a.more:link, a.more:visited
	{
	border-bottom: 0px;
	color: #8C8C8C;
	text-decoration: none;
	}
a.more:hover, a.more:active
	{
	border-bottom: 0px;
	color: #505050;
	text-decoration: none;
	}
.bottom
	{
	color: black;
	height: 8px;
	line-height: 8px;
	width: 201px;
	}
#more{
   font-size: 10px;
}
/*KONIEC Left box novinky*/

	</style>
	
  </head>
  <body>

<script type="text/javascript" src="http://img.ic.cz/3/lista.blue.utf.js"></script>

    <div id="lavypanel">
      <div id="leftlogo">
        <img src="images/zander.gif">
      </div>
      <h2>Menu</h2>

      <div id="lmenu">
        <ul>
          <li>
          <a href="index.html">Domov</a></li>
          <li>
          <a href="krajec.html">Členovia</a></li>
          <li>
          <a href="clanky/index.html.html">Články</a></li>

          <li>
          <a href="novinky.html">Akcie</a></li>
          <li>
          <a href="galeria/index.html">Fotogaléria</a></li>
          <li>
          <a href="kontakt.html">Kontakt</a></li>
        </ul>

      </div>
      <h3>Novinky</h3>
      <div id="leftbox">
        <div class="top">
        </div>
        <div id="leftcolumn">
          <ul>
            <b></b>

            <b></b>
            <b></b>
            <b>11. máj 2008</b><br /> Druhá rybačka
            <div id="more">
              <a href="clanky/novinky/prve_rybacky.html">VIAC>></a>
            </div><br />
            <b>8. máj 2008</b><br /> Prvá rybačka
            <div id="more">

              <a href="clanky/novinky/prve_rybacky.html">VIAC>></a>
            </div>
          </ul>
        </div>
        <div class="bottom">
        </div>
      </div>
    </div>

    <div id="container">
	
	    <div id="header">
    </div>
	
      <h1>&nbsp;Vitajte</h1>
      <div id="obsah"> afs
      </div>
    </div>
    <div id="pravypanel">
      <div id="rightlogo">
        <img src="images/silurus.jpg">

      </div>
      <h3>Posledný úlovok</h3>
      <div id="img">
        <a href="novinky.html">
          <img src="novinky/02.jpg" alt="" width="110" height="90" /></a>
        <div id="desc"> Zubáč 70cm, 3,3 kg
        </div>
      </div>

    </div> 
    <div id="podmenu">
      <ul>
        <li>
        <a href="chat.html">Chat</a></li>
        <li>
        <a href="novinky.html">Novinky</a></li>
      </ul>

    </div>
  </body>
</html>

ryty

vdaka je to presne to co som chcel, ale to "podmenu" by malo byt pod headerom ale to si ja dako uz spravim.

DIKI

edit://

este otazocka dalo by sa to spravit tak, ze ked je container dlhsi ako min-height: 500px; tak by aj tie 2 panely isli spolu s nim?

blbo to vyznelo

KaktusBR

skusil som to ale nepodarilo sa mi to spravit prestne. to by potom bolo treba zmenit kus usporiadanie asi.

ak tam chces nechavat tie ramceky tak ako to mas tak to mozes kus oklamat tym ze spravis border celej stranke (takze nazad ten div co si tam mal

) a potom obsahovej casti das border-left a border-right. a ostatne bordre zrusis bude to vyzerat skoro tak isto a ked bude viac textu tak bude ten border aj po stranach.