Hallo ihr lieben,
ich hab mich soweit schon ganz gut reingefunden in rexado
(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
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/
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/
Ups , sorry
Aktuell:
http://img97.imageshack.us/img97/8963/menuw.jpg
Hätt ich gerne
http://img188.imageshack.us/img188/719/men2zl.jpg
Aktuell:
http://img97.imageshack.us/img97/8963/menuw.jpg
Hätt ich gerne
http://img188.imageshack.us/img188/719/men2zl.jpg
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
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
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 ?
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 ?
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
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
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
Hi,
danke erstmal.
Hör sich leichter an als es ist
Ich hab die Grafiken jetzt erstellt. Komme mit dem Code aber nicht zurecht.
Währ nett wenn du mir da was hast
http://img20.imageshack.us/img20/1448/men1m.jpg
http://img30.imageshack.us/img30/7931/men2n.jpg
Code:
Wie muss ich das änder mit Links und Rechts ?
danke erstmal.
Hör sich leichter an als es ist
Ich hab die Grafiken jetzt erstellt. Komme mit dem Code aber nicht zurecht.
Währ nett wenn du mir da was hast
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;
}
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
Hallo Thomas.
Das hier ist mein Template
default:
Menü Template:
default.css:
Danke im voraus
LG
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">© 2009 byme All rights reserved.</div>
<div class="right">Design by <a href="http://www.domain.com/">byme</a></div>
</div>
</div>
</body>
</html>
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);
?>
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;
}
LG
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"
Ich bekomme das Bild Menu2 zwar angezeigt aber die Linke seite nicht.
Kann mir jemand bitte helfen
Ist die position richtig ?
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;
}
Kann mir jemand bitte helfen
Ist die position richtig ?
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
Hej,
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 .
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%;
}
vg Thomas
PS: Schreien hilft nicht. Das kann ganz schnell in die verkehrte Richtung gehen. Zumal das auch am Samstag Abend gewesen ist .
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
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
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
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
- Oliver.Kreischer
- Beiträge: 2508
- Registriert: 17. Dez 2004, 00:03
- Wohnort: Velbert - LA
- Kontaktdaten: Website
Hi,
guck dir mal hier die beispiele an. Dort
solltest du alles finden was du brauchst.
http://www.cssplay.co.uk/
Grüsse
oliverp
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!
> REDAXO Agenturen. Eintragen erwünscht!
> Komm in den Slack Channel Es lohnt sich!
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website
Hej,
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
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;
}
vg Thomas
Hi und danke erstmal,
ich bin ja schon fleisig am Lernen 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 ?
ich bin ja schon fleisig am Lernen 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 ?
- Thomas.Blum
- Entwickler
- Beiträge: 5063
- Registriert: 24. Aug 2004, 22:11
- Wohnort: Dresden
- Kontaktdaten: Website