Willkommen auf dem Portal für Mediengestalter

DesignKater · **Verfasst** Mi 02.02.2011 16:02 **Titel**

BonBoni · Threadersteller

hier mein css:

/* CSS Document */

html, body{
height:100%;
}

#mainmenue{
width:713px;
height:93px;
background-image:url(../images/Navi.png);
background-repeat:repeat-x;
position:absolute; margin-left:50%; left:-236px; top:33px;
}

#logo{
width:241px;
height:112px;
background-image:url(../images/logo.png);
position:absolute; margin-left:50%; left:-475px; top:0px;
background-repeat:no-repeat;

}

#slide{
width:954px;
height:252px;
background-image:url(../images/slide.png);
position:absolute; margin-left:50%; left:-477px; top:113px;

}

#submenu{
width:214px;
min-height:100%;
max-height:inherit;
background-image:url(../images/submenu.png);
position:absolute; margin-left:50%; left:-477px; top:365px;

}

#right{
width:220px;
min-height:100%;
background-image:url(../images/right.png);
position:absolute; margin-left:50%; left:257px; top:365px;
}

#wrap{
min-height:100%;
}

#content{
position:relative;
top:400px;
margin-left:50%;
left: -265px;
width:533px;
overflow:533px;
padding-bottom:167px;
}

#footer{
position:relative;
margin-top: -167px;
height:167px;
clear:both;
width:954px;
margin-left: 50%;
left: -477px;
clear:both;
background-color:#CFE0EF;

}

/* Styles */

.moduletable_about{
min-height:100%;
padding-bottom:380px;
}

.latestnews a{
font-family:Arial,sans-serif;
font-weight:normal;
color:#6099CA;
text-decoration:none;
font-size:12px;

}

/* Content - WILLKOMMEN BEI ORGADATA */
.moduletable{

font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#6099CA;
text-decoration:none;
}

.mainlevel_menue{
padding-left:40px;
font-size:14px;
text-decoration:none;
white-space:20px;
color:#6099CA;
position:relative; left:-18px; top:30px;
}

.moduletable_content{
color:#6099CA;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
}

.moduletable_logiKal{
color:#6099CA;
font-size:14px;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
}

.moduletable_slide{
position:relative; top:-17px; left:1px;
}

.moduletable_menumodul{
color:#6099CA;
text-decoration:none;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
position:relative; top:-10px; left:10px;
}

.mainlevel_menusub{
color:#6099CA;
text-decoration:none;
}

.moduletable_support{
position:relative; top:-16px;
}

.moduletable_contact{
position:relative; top:-16px;
}

.moduletable_footer{
position:relative; top:5px; left:1px;
color:#999999;
font-size:12px;
}

.mainlevel_menuehome{
color:#6099CA;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position:relative; left:25px;
}

.moduletable_modulhome{
color:#6099CA;
font-size:14px;
position:relative; left:15px; top:30px;
}

.moduletable_maske{
position:absolute;
left:-70px;
top:40px;
}

.mainlevel_menupro{
color:#6099CA;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
position:relative;
left:30px;
}

.moduletable_modulpro{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#6099CA;
position:absolute;
left:15px;
top:30px;
}

.moduletable_slidelogikal{
position:absolute;
left:1px;
top: -16px;
}

und die html bzw. php:

<?php
/**
* @copyright Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

?>
<!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>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div id="mainmenue">

<jdoc:include type="modules" name="user3" style="beezDivision" headerLevel="3" />

</div>

<div id="logo">

</div>

<div id="slide">
<jdoc:include type="modules" name="user1" style="beezDivision" headerLevel="3" />
</div>

<div id="submenu">
<jdoc:include type="modules" name="left" style="xhtml"/>
</div>
<div id="right">
<jdoc:include type="component" />
<jdoc:include type="modules" name="top" style="xhtml"/>
<jdoc:include type="modules" name="user2" style="xhtml"/>
<jdoc:include type="modules" name="right" style="xhtml"/>
</div>

<div id="wrap">
<div id="content">
<jdoc:include type="modules" name="breadcrumb" style="beezDivision" headerLevel="3" />
<jdoc:include type="modules" name="bottom" style="beezDivision" headerLevel="3" />
</div>
</div>

<div id="footer">
<jdoc:include type="modules" name="user5" style="beezDivision" headerLevel="3" />
</div>

<div id="impressum">

</div>
</div>

</body>
</html>

buddha-brot · **Verfasst** Mi 02.02.2011 16:22 **Titel**

Schön und gut, aber es bleibt dabei:

BonBoni · Threadersteller

ich kenne mich mit css aus...

ich will doch nur wissen wie ich die einzelnen menüpunkte ansprechen kann um sie zu ändern

ich kann für das gesamte menu eine class suffix setzen.. über dieses suffix kann ich dann im css das aussehen ändern.

Meine Frage ist wie ich das auch mit den einzelnen Menüpunkten hinkriege.

DesignKater · **Verfasst** Fr 04.02.2011 12:49 **Titel**

BonBoni · Threadersteller

@design kater

du warst mir keine große Hilfe
erst gibst du mir falsche angaben denn die ID's der Menüpunkte haben erstmal mit der Gestaltung in der css überhaupt nichts zu tun.

Mir dann auch noch beweisen zu müssen ich kenne mich nicht mit css aus war aucht echt arm von dir.

Ich hatte eine simple Frage die du nicht beantworten konntest also solltest du besser garnicht erst schreiben, und erst recht nicht andere runtermachen wenn sie ratlos sind. Deine Kommentare waren für'n a****!!!

Damit dieses Thema noch einen Sinn bekommt ist hier die lösung für mein problem:

mein menü ist in der div id "header" also kann ich das gesamte menü so ansprechen:

#header ul
{
bla bla
}

jetzt kommen die einzelnen menüpunkte das mache ich mit:

#header ul li
{
bla bla
}

wenn mann ihnen jetzt ein hover verpassen will also dass sich zum beispiel die farbe ändert dann gibt man folgendes ein:

#header ul li a:hover
{

}

und damit man sieht in welchem menüpunkt man gerade ist, dann sagt ihr "visited":

#header ul li a:visited
{

}

jetzt kann man die punkte positionieren, färben, ihnen bilder geben und noch vieles mehr.

Ich hoffe das hat euch geholfen

immerIch · **Verfasst** Mi 16.02.2011 12:46 **Titel**

Willkommen auf dem Portal für Mediengestalter

Thema: einzelne Menüpunkte gestalten vom 02.02.2011