css background
4 naročniki
4 naročniki
17 odgovorov
oziroma, če se da div-header, div-content in div-foter v div container,...
kako se pozicionira div-container? px, points, in, cm, mm, picas, ems, exs, % ?
lp
Živijo,
nov sem tule, mam pa že eno vprašanje :-)
Narejen imam en meni s CSS, kjer bi rad, da se mi opcija, na kateri je miška, označi, zako da se ozadje besedila opcije obarva z drugo barvo. Do sem vse OK, to še znam narediti, problem pa je, da mi obarva samo neposredno ozadje teksta, jaz bi pa rad, da mi obarva malo večjo površino, torej malo več spodaj, zgoraj in na straneh. A ma kdo kakšno idejo? Kako razširiti "ozadje teksta", ampak brez uporabe tabel? Hvala!
Narediš padding za link in background recimo takole
#menu a { background: #eee; padding : 5px; }
#menu a:hover { background: #ccc; }
Pol se lahko še malo igraš za margin na linkih da bo vsak malo oddaljen in bodo ozadja posebej ....
Tko čisto na kratko
Če imaš kako kodo samo postaj da vidimo kako si se lotil rešitve ....
Ej, ful hvala, mi je pomagalo rešit zadevo!!! Nekaj je bilo to, da sem dodal padding, drugo pa, da sem uporabil line-height.
Tule spodaj je koda, ki sedaj deluje po pričakovanjih. Nisem glih sam vsega napisal, sem povzel po internetu in prilagodil za svoje potrebe... Koda je malo vzeta iz konteksta (layouta strani), ampak bi morala delat...
<html>
<head>
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
.menu {
position : absolute;
left: 12px;
top: 103px;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 24px;
width: 900px;
}
.menu dt, dd, ul, dl {
list-style-type: none;
padding:0;
float: left; margin-left:0; margin-right:7px; margin-top:0; margin-bottom:0;
display: inline;
}
.menu li {
list-style-type: none;
margin: 0 15px 0 0;
padding: 0;
display: inline;
}
.menu a {
color: #FFFFFF;
text-decoration: none;
padding: 5px;
}
.menu a:hover {
text-decoration: none;
color: #FFFFFF;
background: #C87130;
}
.smenu {
position: absolute;
left: 0;
top: 24;
width: 900px;
}
.smenu a:hover {
text-decoration: none;
color: #FFFFFF;
background: #E4BD6F;
}
-->
</style>
</head>
<body>
<div class="menu" id="menu">
<dl>
<dt onmouseover="show('smenu1');">Menu 1</dt>
<dd class="smenu" id="smenu1">
<ul>
[*]Menu 1.1
[*]Menu 1.2
[*]Menu 1.3
</dd>
</dl>
<dl>
<dt onmouseover="show('smenu2');">[Menu 2](#)</dt>
<dd class="smenu" id="smenu2">
<ul>
[*][Menu 2.1](#)
[*][Menu 2.2](#)
</dd>
</dl>
<dl>
<dt onmouseover="show('smenu3');">[Menu 3](#)</dt>
<dd class="smenu" id="smenu3">
<ul>
[*][Menu 3.1](#)
[*][Menu 3.2](#)
[*][Menu 3.3](#)
[*][Menu 3.4](#)
[*][Menu 3.5](#)
</dd>
</dl>
<dl>
<dt onmouseover="show('smenu4');">[Menu 4](#)</dt>
<dd class="smenu" id="smenu4">
<ul>
[*][Menu 4.1](#)
[*][Menu 4.2](#)
[*][Menu 4.3](#)
</dd>
</dl>
</div>
</body>
</html>