Autor Zpráva
martin05
Profil *
#1 · Zasláno: 18. 1. 2009, 02:54:04
Odpovědět Citovat
HTML:

<div id="mainmenu1">
</div>
<div id="mainmenu2">
</div>

CSS:

#mainmenu1 {
background:url(../obrazky/menu_1.png) no-repeat;
height:31px;
position:relative;
}

#mainmenu2 {
background:url(../obrazky/menu_2.png) no-repeat;
height:31px;
position:relative;
}

Zdravím. Má to byť menu. Toto sú dve položky menu, ktoré majú byť vedľa seba, ale sú pod sebou. Skúšal som aj float so všetkými možnými parametrami ale vtedy mi oba divy zmizli. A ešte by som potreboval aby bol každý z divov klikateľný odkaz, len do nich nechcem pridávať obsah. Obrázok na pozadí totiž už obsahuje aj názov položky menu, čiže to nechcem písať do divu. Za pomoc ďakujem.
tiso
Profil
#2 · Zasláno: 18. 1. 2009, 03:42:56
Odpovědět Citovat
martin05 - keď majú byť vedľa seba, tak im nastav width a float
martin05
Profil *
#3 · Zasláno: 18. 1. 2009, 08:56:32
Odpovědět Citovat
Vďaka za odpoveď, funguje to :) Len nastal taký problém, mám spravené horizontálne menu pod bannerom, lenže div, ktorý mal byť už pod ním je vedľa neho. Riešil som to tak, že som spravil ďalší div s transparentným pozadím a tam som float nedal. FF aj GoogleChrome to zobrazia dobre, len IE štrajkuje. Ten neviditeľný div mi hodil na ďalší riadok a celý obsah pod menu je tým pádom posunutý. Niesom až tak skúsený v oblasti CSS tak predpokladám, že moje riešenie bolo úplné zlé :)
panther
Profil
#4 · Zasláno: 18. 1. 2009, 09:06:44
Odpovědět Citovat
martin05
a jak máme vědět, proč ti to štrajkuje, když neznáme tvůj kód? Nejlepší bude odkaz.
martin05
Profil *
#5 · Zasláno: 18. 1. 2009, 09:13:59
Odpovědět Citovat
HTML: 

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
?>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<?php 
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>
<?php if($this->get('template_width') == 0) { ?>
<style type="text/css">#wrap {width:750px;!important}</style>
<?php } ?>
<?php if($this->get('template_width') == 1) { ?>
<style type="text/css">#wrap {width:960px;!important}</style>
<?php } ?>
<?php if($this->get('template_width') == 2) { ?>
<style type="text/css">#wrap {min-width:760px;max-width:960px;width:auto !important;width:960px;}</style>
<?php } ?>
</head>
<body>
<div id="wrap">
  <?php if($this->countModules('left')) : ?>
  <div id="leftfauxcol">
    <?php endif; ?>
    <?php if($this->countModules('right')) : ?>
    <div id="rightfauxcol">
      <?php endif; ?>
      <div id="header">
        <div class="inside">
          <h1><?php echo $mainframe->getCfg('sitename');?></h1>
          <jdoc:include type="modules" name="user1" style="raw" />
        </div>
      </div>
      <jdoc:include type="modules" name="user2" style="xhtml" /> <!--This is tab menu-->
      
      <div id="mainmenu1">
       	</div>
      <div id="mainmenu2">
		</div>
      <div id="mainmenu3">
       	</div>
      <div id="mainmenu4">
       	</div>
      <div id="mainmenu5">
       	</div>
      <div id="mainmenu6">
       	</div>
      <div id="mainmenuend">
       	</div>
        
      <div id="wrap_top">
      </div>
       <?php if($this->countModules('top')) : ?> <!--This is the teaser module-->
      <div id="top">
        <div class="inside">
          <jdoc:include type="modules" name="top" style="xhtml" />
        </div>
      </div>
	  <?php else : ?>
	  
      <?php endif; ?>
      <?php if($this->countModules('left')) : ?>
      <div id="sidebar">
        <div class="inside">
          <jdoc:include type="modules" name="left" style="xhtml" />
        </div>
      </div>
      <?php endif; ?>
      <div id="content<?php echo $contentwidth; ?>">
      <div id="top">&nbsp;</div>	
        <div class="inside">
          <div id="pathway">
            <jdoc:include type="module" name="breadcrumbs" />
          </div>
          <jdoc:include type="component" style="xhtml" />
        </div>
      </div>
      <?php if($this->countModules('right')) : ?>
      <div id="sidebar-2">
        <div class="inside">
          <jdoc:include type="modules" name="right" style="xhtml" />
        </div>
      </div>
      <?php endif; ?>
      <?php if($this->countModules('footer')) : ?>
      <div id="footer">
        <div class="inside">
          <jdoc:include type="modules" name="footer" style="raw" />
        </div>
      </div>
      <?php endif; ?>
      <?php if($this->countModules('bottom')) : ?>
      <div id="bottom">
        <div class="inside">
          <jdoc:include type="modules" name="bottom" style="xhtml" />
        </div>
      </div>
      <?php endif; ?>
      <?php if($this->countModules('left')) : ?>
    </div>
    <!--end of leftfauxcol-->
    <?php endif; ?>
    <?php if($this->countModules('right')) : ?>
  </div>
  <!--end of rightfauxcol-->
  <?php endif; ?>
  <div class="design">
    <?php require(YOURBASEPATH .DS."/js/template.css.php"); ?>
  </div>
</div>
<!--end of wrap-->
</body>
</html>


CSS: 

* {

margin:0;

padding:0;

}



body {

text-align:center;

font-size:76%;

font-family:Tahoma, Arial, Helvetica, sans-serif;

line-height:1.3;

background:url(../obrazky/background.png) top center repeat-y;;

}



#wrap {

background:url(../obrazky/wrapper.png) top center repeat-y;;

text-align:left;

margin:0 auto;

}





#header {

color:#fff;

background:#212121 url(../obrazky/header.png) no-repeat;

height: 150px;

position:relative;

}



#header h1 {

font-family:Arial, Helvetica, sans-serif small-caps;

font-variant:small-caps;

font-stretch:expanded;

padding-left:20px;

}



#header input {

background:url(../images/search.png) no-repeat;

border:0;

height:22px;

width:168px;

font:12px Arial, Helvetica, sans-serif;

padding:2px;

}



#header .search {

position:absolute;

top:20px;

right:20px;

}



#mainmenu1 {

background:url(../obrazky/menu_1.png) no-repeat;

width:125px;

height:31px;

float:left;

position:relative;

}



#mainmenu2 {

background:url(../obrazky/menu_1.png) no-repeat;

width:125px;

height:31px;

float:left;

position:relative;

}



#mainmenu3 {

background:url(../obrazky/menu_1.png) no-repeat;

width:125px;

height:31px;

float:left;

position:relative;

}



#mainmenu4 {

background:url(../obrazky/menu_1.png) no-repeat;

width:125px;

height:31px;

float:left;

position:relative;

}



#mainmenu5 {

background:url(../obrazky/menu_1.png) no-repeat;

width:125px;

height:31px;

float:left;

position:relative;

}



#mainmenu6 {

background:url(../obrazky/menu_1.png) no-repeat;

width:125px;

height:31px;

float:left;

position:relative;

}



#mainmenuend {

background:transparent;

width:125px;

height:31px;

position:relative;

}



#wrap_top {

background:url(../obrazky/wrapper_top.png) no-repeat;

height:7px;

position:relative;

}



#top {

background:url(../images/banner.png) no-repeat;

width:390px;

height:70px;

margin:auto;

position:relative;

}



#top .moduletable h3 {

color:#fff;

background:none;

text-align:left;

font:2.5em Arial, Helvetica, sans-serif normal;

font-stretch:expanded;

margin:10px 10px 0 10px;

padding:10px;

}



#top .moduletable {

font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;

color:#fff;

border:0;

margin:0;

padding:0;

}



#footer {

background:#212121;

color:#fff;

text-align:right;

clear:both;

}



#bottom {

background:#333;

color:#666;

padding:10px 50px;

}



#sidebar {

float:left;

width:170px;

}



#content60 {

float:left;

width:410px;

overflow:hidden;

background:transparent;

}



#content80 {

float:left;

width:410px;

overflow:hidden;

background:transparent;

}



#content100 {

float:left;

width:410px;

overflow:hidden;

background:transparent;

}



#sidebar-2 {

float:left;

width:170px;

}



.inside {

padding:10px;

}



#sidebar .inside,#sidebar-2 .inside {

padding-top:0;

}



h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address,.componentheading,.contentheading {

margin:0.75em 0;

}



li,dd {

margin-left:1em;

}



fieldset {

padding:.5em;

}



a:link,a:visited {

text-decoration:none;

color:#fff;

font-weight:bold;

}



a:hover {

text-decoration:underline;

}

#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {

color:#000;

}



h1,.componentheading {

font-size:1.8em;

}



h2,.contentheading {

font-size:1.6em;

}



h3 {

font-size:1.3em;

}



h4 {

font-size:1.2em;

}



h5 {

font-size:1.1em;

}



h6 {

font-size:1em;

font-weight:700;

}



.button {

border:#000 solid 1px;

background:#fff url(../images/buttonbackground.png) repeat-x;

height:25px;

line-height:25px

font-size:14px;

margin:4px 0;

padding:0 4px;

cursor:hand;

}



.small,.createdate,.modifydate,.mosimage_caption {

font:0.8em Arial,Helvetica,sans-serif;

color:#999;

}



.sectiontableheader {

background:url(../images/teaser.png);

color:#fff;

font:1.2em bold Arial, Helvetica, sans-seri
panther
Profil
#6 · Zasláno: 18. 1. 2009, 09:19:10 · Upravil/a: panther
Odpovědět Citovat
martin05
myslel jsem spíše odkaz, 500-ti řádkový kód se mi studovat nechce.

Nezbyde mi, než tedy tipovat podle tvého předvhozího příspěvku [#3].
„že som spravil ďalší div s transparentným pozadím a tam som float nedal.“
chybějící cleaner?

Hoď celý web někam na wz.cz, pokud to již někde nemáš..
martin05
Profil *
#7 · Zasláno: 18. 1. 2009, 09:35:11
Odpovědět Citovat
Vďaka, že ma to nenapadlo O:) Ešte by som sa chcel spýtať na to či sa dá spraviť z divu odkaz bez toho aby som do neho vkladal nejaký (viditeľný) obsah. Má to byť totiž menu, no každá položka je obrázok už aj s textom. Takže chcem aby na to užívateľ len klikol a presunulo ho to na príslušný odkaz. 

<div id="mainmenu1">
           </div>
      <div id="mainmenu2">
        </div>
      <div id="mainmenu3">
           </div>
      <div id="mainmenu4">
           </div>
      <div id="mainmenu5">
           </div>
      <div id="mainmenu6">
           </div>
      <div id="mainmenuend">
           </div>


#mainmenu1 {
background:url(../obrazky/menu_1.png) no-repeat;
width:125px;
height:31px;
float:left;
position:relative;
}

#mainmenu2 {
background:url(../obrazky/menu_1.png) no-repeat;
width:125px;
height:31px;
float:left;
position:relative;
}

#mainmenu3 {
background:url(../obrazky/menu_1.png) no-repeat;
width:125px;
height:31px;
float:left;
position:relative;
}

#mainmenu4 {
background:url(../obrazky/menu_1.png) no-repeat;
width:125px;
height:31px;
float:left;
position:relative;
}

#mainmenu5 {
background:url(../obrazky/menu_1.png) no-repeat;
width:125px;
height:31px;
float:left;
position:relative;
}

#mainmenu6 {
background:url(../obrazky/menu_1.png) no-repeat;
width:125px;
height:31px;
float:left;
position:relative;
}

#mainmenuend {
background:transparent;
width:125px;
height:31px;
position:relative;
}
panther
Profil
#8 · Zasláno: 18. 1. 2009, 09:39:48
Odpovědět Citovat
martin05
já bych jen rád podotkl, že se jedná o „menu“, tak nepoužívat na každou položku „div“,a le <menu> nebo <ul>, obojí s položkami <li>
panther
Profil
#9 · Zasláno: 18. 1. 2009, 09:41:35
Odpovědět Citovat
martin05
ještě dodám, že tady máš, jak správně tvořit obrázkové odkazy (tady je to logo, ale stejně i menu a cokoliv jiného) a menu pro lepší pochopení třeba na intervalu
martin05
Profil *
#10 · Zasláno: 19. 1. 2009, 13:45:09
Odpovědět Citovat
Vďaka, ten posledný odkaz mi pomohol. Mám ale teraz ďalší problém. Každá položka menu má okolo seba voľné miesto. prikladám obrázok. To dolné menu je menu spravené cez divy. tak by malo vyzerať aj to horné. [img]http://dc45.file.qip.ru/download/72228261/af8755de/menupomoc.jpg?tsid=20090119-154011-491b7fe7[/img]

HTML: 

 <ul class="menu">
        <li class="item"><a href="#"></a></li>
        <li class="item"><a href="#"></a></li>
        <li class="item"><a href="#"></a></li>
        <li class="item"><a href="#"></a></li>
        <li class="item"><a href="#"></a></li>
        <li class="item"><a href="#"></a></li>
        <li class="cl"></li>
        </ul>


CSS: 

ul, li
{
margin: 0;
padding: 0;
}

.cl
{
clear: both;
}


ul.menu
{
font-size: 15px;
font-family: sans-serif;
}

ul.menu li
{
list-style-type: none;
}

ul.menu li.item
{
float: left;
width: 125px;
height: 31px;
margin-right: 0px;
margin-bottom: 0px;
}

ul.menu li.item a
{
display: block;
width: 125px;
height: 31px;
line-height: auto; /* svisle centrovani */
text-align: center; /* vodorovne centrovani */
background:url(../obrazky/menu_1.png);
color: #333;
font-weight: bold;
text-decoration: none;
font-style: italic;
}

ul.menu li.item a:hover
{
background-image: url('81-2.jpg ');
color: black;
border-color: #000;
}
martin05
Profil *
#11 · Zasláno: 19. 1. 2009, 13:52:44
Odpovědět Citovat
Tak už som našiel chybu. Bolo to v inej časti CSS. Tak vďaka za pomoc :)
martin05
Profil *
#12 · Zasláno: 19. 1. 2009, 13:59:36
Odpovědět Citovat
A tak predsalen by som ešte niečo poterboval. Ako dosiahnem aby mala každá položka menu iný obrázok pozadia?
imploder
Profil
#13 · Zasláno: 19. 1. 2009, 14:03:05
Odpovědět Citovat
martin05
„Ako dosiahnem aby mala každá položka menu iný obrázok pozadia?“
Dáš každé položce 
style="background:url('../obrazky/pozadipolozky.png')"
martin05
Profil *
#14 · Zasláno: 19. 1. 2009, 21:32:05
Odpovědět Citovat
Ak si to myslel takto, tak to nefunguje: 

<ul class="menu">
        <style="background:url('../obrazky/menu2.png')">
        <li class="item"><a href="#"></a></li></style>
        <li class="cl"></li>
        </ul>
Bubák
Profil
#15 · Zasláno: 19. 1. 2009, 21:57:17 · Upravil/a: Bubák
Odpovědět Citovat
Normálně nemusíš dávat každé položce menu třídu, zaměříš je kontextem: 
.menu li {tvoje deklarace}
.menu cl {tvoje deklarace}


line-height: auto;

Taková hodnota pro line-height neexistuje, ani prohlížeče ji neznají, jde použít:
normal | <number> | <length> | <percentage> | inherit

Ty ale chceš pro každou položku jiné pozadí, použij třídy (nebo ID), nějak takto:
CSS: 
.menu a
{
display: block;
width: 125px;
height: 31px;
line-height: 31px; /* svisle centrovani */
text-align: center; /* vodorovne centrovani */
color: #333;
font-weight: bold;
text-decoration: none;
font-style: italic;
}

.menu item1 a
{
background: gray url(../obrazky/menu_1.png);
}
.menu item1 a:hover
{
background: silver url(../obrazky/menu-hover_1.png);
}
.menu item2 a
{
background: gray url(../obrazky/menu_2.png);
}
.menu item2 a:hover
{
background: silver url(../obrazky/menu-hover_2.png);
}


HTML: 
 <ul class="menu">
        <li class="item1"><a href="#"></a></li>
        <li class="item2"><a href="#"></a></li>
SwimX
Profil
#16 · Zasláno: 19. 1. 2009, 22:03:52
Odpovědět Citovat
martin05
„Ak si to myslel takto, tak to nefunguje:“
ne. Myslel toto: 
<ul class="menu">
        <li class="item" style="background:url('../obrazky/menu2.png')"><a href="#"></a></li></style>
        <li class="cl" style="background:url('../obrazky/menu3.png')"></li>
        </ul>


Nebo čistší zápis je to co napsal Bubák
Bubák
Profil
#17 · Zasláno: 19. 1. 2009, 22:26:32
Odpovědět Citovat
Jejen že to je čistší, ale do přímého stylu nejde zapsat hover, to by byla u menu podstatná vada na kráse.
martin05
Profil *
#18 · Zasláno: 19. 1. 2009, 23:44:14
Odpovědět Citovat
Díky, Bubák, funguje to, len som to ešte upravil. Dávam tu kód, niekomu sa to možno zíde. Ale mám ešte jeden problém a to s IE. FF aj Google Chrome mi to zobrazujú korektne ale IE spraví takéto "schodíky": OBRÁZOK

CSS: 

ul, li
{
margin: 0;
padding: 0;
}

.cl
{
clear: both;
}


ul.menu
{
font-size: 15px;
font-family: sans-serif;
}

ul.menu li
{
list-style-type: none;
}

ul.menu li.item
{
float: left;
width: 125px;
height: 31px;
margin-right: 0px;
margin-bottom: 0px;
}

ul.menu li.item a
{
display: block;
width: 125px;
height: 31px;
line-height: normal; /* svisle centrovani */
text-align: center; /* vodorovne centrovani */
background:gray;
color: #333;
font-weight: bold;
text-decoration: none;
font-style: italic;
}

ul.menu li.item1 a
{
background: url(../obrazky/menu1.png);
display: block;
width: 125px;
height: 31px;
float:left;
}

ul.menu li.item1 a:hover
{
background: silver url(../obrazky/menu-hover1.png);
display: block;
width: 125px;
height: 31px;
}

ul.menu li.item2 a
{
background: url(../obrazky/menu2.png);
display: block;
width: 125px;
height: 31px;
float:left;
}

ul.menu li.item2 a:hover
{
background: silver url(../obrazky/menu-hover2.png);
display: block;
width: 125px;
height: 31px;
}

ul.menu li.item3 a
{
background: url(../obrazky/menu3.png);
display: block;
width: 125px;
height: 31px;
float:left;
}

ul.menu li.item3 a:hover
{
background: silver url(../obrazky/menu-hover3.png);
display: block;
width: 125px;
height: 31px;
}

ul.menu li.item4 a
{
background: url(../obrazky/menu4.png);
display: block;
width: 125px;
height: 31px;
float:left;
}

ul.menu li.item4 a:hover
{
background: silver url(../obrazky/menu-hover4.png);
display: block;
width: 125px;
height: 31px;
}

ul.menu li.item5 a
{
background: url(../obrazky/menu5.png);
display: block;
width: 125px;
height: 31px;
float:left;
}

ul.menu li.item5 a:hover
{
background: silver url(../obrazky/menu-hover5.png);
display: block;
width: 125px;
height: 31px;
}

ul.menu li.item6 a
{
background: url(../obrazky/menu6.png);
display: block;
width: 125px;
height: 31px;
float:left;
}

ul.menu li.item6 a:hover
{
background: silver url(../obrazky/menu-hover6.png);
display: block;
width: 125px;
height: 31px;
}

ul.menu li.item a:hover
{
background-image: url(../obrazky/menu1.png);
color: black;
border-color: #000;
}
martin05
Profil *
#19 · Zasláno: 20. 1. 2009, 00:04:02
Odpovědět Citovat
Tak aj to vyriešené. treba do CSS pridať: 

ul.menu li.item1, li.item2, li.item3, li.item4, li.item5, li.item6
{
float: left;
width: 125px;
height: 31px;
margin-right: 0px;
margin-bottom: 0px;
}
Rreall
Profil *
#20 · Zasláno: 20. 1. 2009, 20:15:00
Odpovědět Citovat
nechtel by my nekdo poslat htm a css na menu pls na icq 231 382 329 nbebo na mila krovak2@email.cz
panther
Profil
#21 · Zasláno: 20. 1. 2009, 20:24:55
Odpovědět Citovat
Rreall
„nechtel by my nekdo poslat htm a css na menu pls na icq 231 382 329 nbebo na mila krovak2@email.cz“
nechtěl.
Bubák
Profil
#22 · Zasláno: 20. 1. 2009, 23:54:54 · Upravil/a: Bubák
Odpovědět Citovat
Rreall
Plevelíš cizí vlákno, a protože nemáš CSS, ale kulové, tak tvůj dotaz příště dej do "Práce a zakázky".
Najdi si menu třeba tady: http://css.interval.cz/menu/ nebo tady: http://teststranek.kvalitne.cz/

Dodatek: odkdy jsou v mailové adrese dovolené mezery?
Časová prodleva: 15 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0