PDA

Zobacz pełną wersję : [CSS] Obramowanie menu - problem


diskordis133
27-08-2010, 16:09
Witam,

Jakiś czas już próbuję rozwiązać mały problem z menu, a właściwie z jego obramowaniem. Problem polega na tym, iż obramowania boczne mają być wypełniane jednym kolorem, ale pod koniec dolnych obramowań bocznych, mają przejść od koloru fioletowego do białego, takiego jak będzie na obramowaniu dolnym. Chodzi mi o taki efekt:
http://img839.imageshack.us/i/ramkad.png/

Aktualnie kod CSS dla menu głównego wygląda tak:

.moduletable_menu {
background-image: url(../images/background.png);
padding-bottom:2%;
margin-bottom:10%;
border-style:ridge;
border-style: solid;
border-color: #6e4b9f;

Więc daje to całkowicie fioletową ramę w okół menu.

Cała strona jest postawiona na Joomla! 1.5.20, a szablon którego używam jest w pełni kompatybilny z tą wersją.

Dlatego, jak można zrobić taki efekt jak na obrazku?
Sam nie mam już pojęcia w jaki sposób to mogę zrobić.

Jeśli trzeba będzie więcej kodu to dajcie znać, zamieszczę.

Znalazłem temat częściowo nawiązujący do mojego pytania (http://www.forumweb.pl/viewtopic.php?t=55023&highlight=obramowanie), jednak jak to zaimplementować do Joomla! ?

Zaznaczam, iż szukałem tutaj na forum rozwiązania, jednak go nie znalazłem (może jest, ale go przeoczyłem).


Podaję również kod z index.php


<!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; ?>" >

<head>

<jdoc:include type="head" />

<title>Kolo Naukowe Mysli Nieliniowej</title>

<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";

?>



</head>

<body class="width_<?php echo $this->params->get('template_width'); ?>">

<div id="wrap">

<div id="header">

<div class="inside">

<h1><?php echo $mainframe->getCfg('');?></h1>

<jdoc:include type="modules" name="user1" style="raw" />

</div>

</div><!--[if lte IE 7]>

<script type="text/javascript">

sfHover = function() {

var sfEls = document.getElementById("tabs").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+="sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload",sfHover);

</script>

<![endif]-->

<jdoc:include type="modules" name="user2" style="xhtml" /> <!--This is tab menu-->

<?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 : ?>

<div id="top">&nbsp;</div>

<?php endif; ?>

<?php if($this->countModules('left')) : ?>

<div id="sidebar">

<div class="ramka">

<div class="inside">

<jdoc:include type="modules" name="left" style="xhtml" />

</div>

</div>

</div>

<?php endif; ?>

<div id="content<?php echo $contentwidth; ?>">

<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="ramka">

<div class="inside">

<jdoc:include type="modules" name="right" style="xhtml" />

</div>

</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="horz" />

</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"><a href="http://www.compassdesigns.net" title="Joomla Templates By Compass Design">Joomla Design By Compass</a></div>

</div>

<!--end of wrap-->

</body>

</html>


PS: jeśli obrazek będzie za duży to zmniejszę.
a_m
27-08-2010, 18:16
rozwiązanie niebawem będzie archaiczne, ale zadziała we wszystkich przeglądarkach 1. pozycję modułów ustawiasz na rounded; 2; moduletable_menu musi mieć gradientowe tło i padding takiej wielkości, jaki chcesz mieć "obrys"/border 3. moduletable_menu div div div musi mieć takie tło jak obecnie Twoje moduletable_menu
diskordis133
27-08-2010, 19:10
Witam,

Dzięki za odpowiedź a_m, ale dostałem inne rozwiązanie na innym forum.
Oto wersja oryginalna:

<html>
<head>
<title>SZABLON 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
*{margin:0;padding:0;}
body {

margin: 100px auto;
width:300px;
}

#modultable{
width:169px;
border:1px solid #5f4c7a;
background:url(http://www.abload.de/img/1ixfy.png) repeat-x top left;
height:266px;
}
h3{text-align:center;margin:10px 0;}

ul {width:160px;
margin:0 auto;
background:url(http://www.abload.de/img/2iz6u.png) repeat-x top left;
height:212px;
}

ul li {
list-style:none;
width:100px;
text-align:center;
margin:15px auto 0;}
</style>
</head>

<body >

<div id="modultable">

<h3>menu</h3>
<ul>
<li><a href="#">O firmie</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">Opinie</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div> <!-- modultable -->

</body>
</html>

A tutaj moja modyfikacja by całość się rozszerzała automatycznie w miarę potrzeb (tylko przyciąłem grafiki; pierwszą o prawie połowę, a z drugiej zrobiłem bloczek 1x1px):

.moduletable_menu {
width:auto;
margin:auto;
background: url(../images/ramka-menu.png) repeat-x bottom left;
background-color:#6e4b9f;
height:auto;
padding-bottom:1%;

}

.moduletable_menu h3 {
font:16px "Times New Roman", Times, serif;
color:#ccc;
text-align:left;
margin:0 auto;
padding: 5% 6%;
}

.moduletable_menu ul {
width:auto;
margin:0px 5px;
background: url(../images/ramka-menu-tlo.png) repeat top left;
height:auto;
list-style-type:disc;
padding-left:2%;
}

Pozdrawiam i dziękuję za pomoc,
diskordis

PS: można zamknąć.