[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
Menüabrandung + Mouseover - REDAXO Forum
Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

Menüabrandung + Mouseover

18. Okt 2009, 01:58

Hallo ihr lieben,

ich hab mich soweit schon ganz gut reingefunden in rexado :D
(seh gerade ich kann keinen Dateianhang hochladen)

Aktuell mein Menü:
http://img269.imageshack.us/img269/8755/menuop.jpg

Wie bekomme ich das an den Enden abgerundet in etwa so:
http://img25.imageshack.us/img25/2554/men2v.jpg

Derzeit ist das ein kleines Bildchen das nacheinander kommt, wenn ich das abrunde funktioniert das leider nicht.

Wie mache ich am besten und vor allem wo einen Mouseover :)

Danke im voraus

lg Steffi

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

18. Okt 2009, 17:08

HI,
bissl klein deine Screenshots...
mach die mal größer, dann sieht man auch besser was du
genau meinst.

grz. chris

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

22. Okt 2009, 13:23


Benutzeravatar
Cheffchen
Beiträge: 1809
Registriert: 3. Mär 2009, 13:51
Wohnort: Berlin
Kontaktdaten: Website

22. Okt 2009, 13:49

Hallo,
jetzt sieht man auch was :O).
Dir stört also der 1px strich ganz Links und ganz Rechts, oder?
Ich würde sagen das CSS daran schult ist oder es halt nur das macht was es soll :O).
Ich behaupte mal, das kann man nur beheben wenn man den Code sieht und das am besten online, da können wir das auch gleich testen. (Firebuge oder IE Entwicklertools).

Cheffchen

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

22. Okt 2009, 16:00

Hi ,

nicht direkt der Strich.. Sondern die Umrandung :D

lg

Benutzeravatar
anita
Beiträge: 711
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

23. Okt 2009, 13:15

hallo Steffi,

hast Du's schon mal mit border-radius versucht? Wird allerdings nicht von allen Browsern unterstützt.
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

Benutzeravatar
Cheffchen
Beiträge: 1809
Registriert: 3. Mär 2009, 13:51
Wohnort: Berlin
Kontaktdaten: Website

23. Okt 2009, 17:27

Steffi hat geschrieben:nicht direkt der Strich.. Sondern die Umrandung :D
Wo hängt das nun bei Dir.
Bei dem Anfang und Ende vom Menü das Abgerundete?
oder
Generel am Menü, CSS?

(border-radius geht im IE nicht, also absolut keine alternative)

Cheffchen

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

24. Okt 2009, 10:53

Hallo, ja das hab ich auch gelesen.

Genau es geht nur um die linke und rechte ecke. Derzeit hab ich ein kleines Pic das sich der Größe anpasst und für das komplette Menü ist wenn ich das abrunden würde, würde nicht funktionieren.

Ich könnte mit Photoshop ein Menü machen ^^ Aber wir setzte ich das dann um ? Und ist das überhaupt eine gute idee ?

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

24. Okt 2009, 11:33

Hej Steffi,

das bekommst du am besten mit 2 Grafiken hin.

Erste Grafik bekommt den HIntergrund und rechts die abgerundeten Ecken. Links bleibt die Grafik gerade abgeschnitten. Breite ca. 1200px;

Die zweite Grafik ist ca. 20px breit und hat die linken abgerundeten Ecken.

Jetzt weist du per CSS die erste Grafik dem <ul> zu und die zweite dem ersten <li> Element.

Das wars.

vg Thomas

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

24. Okt 2009, 14:41

Hi,

danke erstmal.
Hör sich leichter an als es ist :roll:

Ich hab die Grafiken jetzt erstellt. Komme mit dem Code aber nicht zurecht.
Währ nett wenn du mir da was hast :P

http://img20.imageshack.us/img20/1448/men1m.jpg

http://img30.imageshack.us/img30/7931/men2n.jpg

Code:

Code: Alles auswählen

#menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFA500 url(images/menubg.gif) repeat-x scroll left top;
height:3.5em;
margin-bottom:2px;
padding:0 1em;
position:relative;
}
Wie muss ich das änder mit Links und Rechts ?

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

24. Okt 2009, 20:15

Hej Steffi,

wie sieht denn dein html des Menüs überhaupt aus?

vg Thomas

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

24. Okt 2009, 21:03

Hallo Thomas.

Das hier ist mein Template

default:

Code: Alles auswählen

<?php

// ------ DESCRIPTION/KEYWORDS
$OOStartArticle = OOArticle::getArticleById($REX['START_ARTICLE_ID'], $REX['CUR_CLANG']);
$meta_beschreibung = $OOStartArticle->getValue("art_description");
$meta_suchbegriffe = $OOStartArticle->getValue("art_keywords");

if($this->getValue("art_description") != "")
   $meta_beschreibung = $this->getValue("art_description");
   
if ($this->getValue("art_keywords") != "")
   $meta_suchbegriffe = $this->getValue("art_keywords");
?>

<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   
   <title><?php print $REX['SERVERNAME'].' | '.$this->getValue("name"); ?></title>
   
   <meta name="keywords" content="<?php print htmlspecialchars($meta_suchbegriffe); ?>" />
   <meta name="description" content="<?php print htmlspecialchars($meta_beschreibung); ?>" />   
   <meta name="robots" content="all" />

   <link rel="shortcut icon" href="<?php echo $REX['HTDOCS_PATH'] ?>favicon.ico" >
   
   <link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>

<div id="upbg"></div>

<div id="outer">


   <div id="header">
      <div id="headercontent">
         <h1>Test<sup>1</sup></h1>
         <h2>!</h2>
      </div>
   </div>


   <form method="post" action="">
      <div id="search">
         <input type="text" class="text" maxlength="64" name="keywords" />
         <input type="submit" class="submit" value="Search" />
      </div>
   </form>


   <div id="headerpic"></div>

   
     <div id="menu">
     
      <!-- Redaxo Menu - Nummer = Template Nummer -->
      REX_TEMPLATE[2]
     
      </div>
      
      
      <div id="content"><div id="normalcontent">
     <div class="contentarea">
            <!-- Normal content area start -->


            <img src="images/pic1.jpg" class="left" alt="A chinese lion statue" />
           
            <!-- Redaxo content area -->
            <?php print $this->getArticle(1); ?>
           
         </div>
      </div>

   
      <div id="secondarycontent"><div>
        <div class="contentarea">
               <ul class="linklist">
                  <li><a href="#">Allgemeine Geschäftsbedingungen</a></li>
               </ul>
        </div>
         </div>

         <!-- Secondary content area end -->
      </div>


   </div>

   <div id="footer">
         <div class="left">&copy; 2009 byme All rights reserved.</div>
         <div class="right">Design by <a href="http://www.domain.com/">byme</a></div>
   </div>
   
</div>

</body>
</html> 
Menü Template:

Code: Alles auswählen

<?php

// navigation generator erstellen
$nav = rex_navigation::factory();

// ---------- HEAD NAVI

// Beginne in der Wurzelkategorie
// 1 Ebene Tief
// Nicht aufklappen (hier egal da nur 1 Ebene)
// Offline ausblenden

$category_id = 0;
$depth = 1;
$open = FALSE;
$ignore_offlines = TRUE;

echo $nav->get($category_id, $depth, $open, $ignore_offlines);

?> 
default.css:

Code: Alles auswählen

/*

	zenlike1.0 by nodethirtythree design
	http://www.nodethirtythree.com

*/

*
{
padding: 0em;
margin: 0em;
}

body
{
background: #000000 url('images/bg1.jpg');
padding: 35px 0px 35px 0px;
}

body,input
{
font-size: 10pt;
font-family: "Arial", "times new roman", serif;
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images/db1.gif');
}

h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images/db2.gif');
}

.contentarea
{
padding-top: 1.3em;
}

img
{
border: solid 1px #6F5230;
}

img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}

.divider1
{
position: relative;
background: #fff url('images/border2.gif') repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}

.divider2
{
position: relative;
height: 1px;
border-bottom: solid 1px #eaeaea;
margin: 2.0em 0em 2.0em 0em;
}

.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('images/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('images/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('images/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('images/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

ul.linklist
{
list-style: none;
}

ul.linklist li
{
line-height: 2.0em;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background: #fff url('images/bg2.jpg') repeat-x;
z-index: 1;
}

#outer
{
z-index: 2;
position: relative;
/*
	The width value below controls the overall width of the design. By default it's set to 82%
	(so it'll take up 82% of the browser window's width). You can set it to a different percentage
	value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 82%;
border: solid 7px #fff;
background-color: #fff;
margin: 0 auto;
}

#header
{
position: relative;
width: 100%;
height: 9.0em;
background: #2B2B2B url('images/topbg.gif') repeat-x;
margin-bottom: 2px;
}

#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}

#search
{
position: absolute;
top: 5.5em;
right: 2.0em;
padding-right: 0.0em;
}

#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}

#search input.submit
{
background: #85E6FF url('images/buttonbg.gif') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}

#headerpic
{
position: relative;
height: 109px;
background: #fff url('images/hdrpic.jpg') no-repeat top left;
margin-bottom: 2px;
}

#menu
{
position: relative;
background: #85E6FF url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}

#menu ul
{
position: absolute;
top: 1.1em;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}

#menu ul li a:hover
{
text-decoration: underline;
}

#menu ul li a.active
{
background: #FFA500 url('images/menuactive.gif') repeat-x top left;
}

#menubottom
{
background: #fff url('images/border1.gif') repeat-x;
height: 14px;
margin-bottom: 1.5em;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}

#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
Danke im voraus :roll:

LG

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

24. Okt 2009, 22:25

Hii

also ich bin jetzt ein Schritt weiter aber komm einfach nicht auf den Rest. Villeicht kann mir einer Helfen.

Hier mal der Code wie er jetzt ist "CSS"

Code: Alles auswählen

position: relative;
background: url('/redaxo/images/menu1.jpg') no-repeat left;
background: url('/redaxo/images/menu2.jpg') no-repeat right;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}
Ich bekomme das Bild Menu2 zwar angezeigt aber die Linke seite nicht.
Kann mir jemand bitte helfen
Ist die position richtig ?

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

24. Okt 2009, 23:25

Thooooooooooooomas ? :roll:

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

25. Okt 2009, 09:39

Hej,

Code: Alles auswählen

#menu
{
  background-image: url('images/menu1.gif'); /* Breite Grafik */
  background-position: 100% 0%;
}

#menu ul
{
  background-image: url('images/menu2.gif'); /* Schmale Grafik */
  background-position: 0% 0%;
} 
Deine anderen Anweisungen müsstest du wieder dazu notieren. Die habe ich übersichtshalber weggelassen.

vg Thomas

PS: Schreien hilft nicht. Das kann ganz schnell in die verkehrte Richtung gehen. Zumal das auch am Samstag Abend gewesen ist ;).

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

25. Okt 2009, 12:54

Hallo , welche Zuordnungen meinst du den ?

Ich hab heute Nacht noch ein wenig gebastelt und hab es mit einem hinbekommen.

Meinst du in der default.css einach das

#menu mit #menu und #menu ul austauschen ?

Edit: Ja sorry war gestern den ganzen Tag am basteln und dann sagt mri noch jemand das würde so gar nicht gehen.. Habs dann mit einem Versucht das geht ohne Probleme super. Werd mich jetzt an deinen vorschlag machen und testen hihi

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

25. Okt 2009, 13:09

Wenn ich #menü mit menü und menü ul austausche geht das leider nicht.
Ich hatte gestern genau das Problem das es immer nur eins angezeigt hat.
Entwerder das linke oder das rechte. Währ nett wenn du die css mal komplett anpassen könntest für das Menü.

Ich hab dir mal screens gemacht.

Menü mit der Menü und Menü ul Eingabe:
http://img163.imageshack.us/img163/84/unbenannt1u.jpg

Meine Versuche mit 1 Bild
http://img36.imageshack.us/img36/4866/unbenannt2wx.jpg

Benutzeravatar
Oliver.Kreischer
Beiträge: 2508
Registriert: 17. Dez 2004, 00:03
Wohnort: Velbert - LA
Kontaktdaten: Website

25. Okt 2009, 15:59

Hi,
guck dir mal hier die beispiele an. Dort
solltest du alles finden was du brauchst.


http://www.cssplay.co.uk/


Grüsse
oliverp
> Friends Of REDAXO Gemeinsame REDAXO-Entwicklung!
> REDAXO Agenturen. Eintragen erwünscht!
> Komm in den Slack Channel Es lohnt sich!

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

25. Okt 2009, 16:55

Das geht irgendwie immer nur mit einem Bild.
Währ nett wenn mir jemand die css anpasst ^^

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

25. Okt 2009, 17:09

Hej,

Code: Alles auswählen

#menu
{
  background-image: url('images/menu1.gif'); /* Breite Grafik */
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

#menu ul
{
  background-image: url('images/menu2.gif'); /* Schmale Grafik */
  background-position: 0% 0%;
  background-repeat: no-repeat;
} 
wenn du anhand deines Bildes nicht erkennen kannst wo hier der Fehler ist, dann solltest du am besten erst einmal die Grundlagen zu HTML und CSS aneignen. Ist nur ein gut gemeinter Rat.

vg Thomas

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

25. Okt 2009, 17:50

Hi und danke erstmal,
ich bin ja schon fleisig am Lernen :roll: Nur das Menü macht mich verrückt.
Seite über xxx STD und ich komm nicht drauf ^^

Mit deinem Code geht irgendwie auch nicht richtig. Das wird von rechts bis Links angezeigt und nicht die Bilder

http://img194.imageshack.us/img194/231/unkhbenannt.jpg

Was mach ich den falsch ? :?

Benutzeravatar
Thomas.Blum
Entwickler
Beiträge: 5063
Registriert: 24. Aug 2004, 22:11
Wohnort: Dresden
Kontaktdaten: Website

25. Okt 2009, 19:48

Hej,

da fehlt der Rest von deinem CSS. Ich habe nur das neue aufgeschrieben.

Ich denke es wäre am besten das mla online zu sehen. Schick mal ne Url.

vg Thomas

Steffi
Beiträge: 78
Registriert: 4. Okt 2009, 20:03

25. Okt 2009, 20:58

Danke. PM ist raus :roll:

Zurück zu „Sonstiges“