Anfängerproblem

[Zappageck71]

Hallo!
Ich bin neu in Contao und renne mir an manchen Stellen gerade gehörig die Hörner ein.
Ich habe mit Hilfe eines Templates eine Seite erstellt und auch erfolgreich den Sprachenwechsler einbauen können, aber jetzt habe ich ein Gestaltungsproblem.
Ich bin in CSS nicht so fit und habe trotz rumprobieren keine wirklichen Fortschritte machen können.
Hier zu meinem Problem:
Wie auf dem Screenshot zu sehen wird bei mir das Modul Sprachwechsler schon am richtigen Ort angezeigt, jedoch möchte ich nicht, dass die Flaggen untereinander aufgelistet werden, sondern nebeneinander. Die Punkte neben den Flaggen sollen auch weg, keine Ahnung woher die kommen.

Kann mir jemand einen TIp geben wie ich meine CSS umgestalten muss, damit die Flaggen nebeneinander und ohne Punkt erscheinen?

Hier mal meine Layout.css:

/*////////////////////////////////////////////////////////////////////////*/
/*BODY*/
html,body {height:100%;}
body {}

/*WRAPPER*/
#wrapper {min-height:100%;height:auto!important;height:100%;}

/*////////////////////////////////////////////////////////////////////////*/
/*HEADER*/
#header {background:url(../files/layout/header_bg.jpg) repeat-x;height:77px;}

#header .inside {width:830px;margin:auto;}
#header .inside #nav {display:block;position:absolute;list-style:none;margin:0;z-index:5;top:26px;right:0;text-align:center;display:block;}
#header_addition {background:url(../files/layout/header_additional_bg.jpg) repeat-x #eaeaea;border-bottom:1px solid #c9c9c9;}
#header_addition .inside {width:800px;margin:auto;}
body.page_2 #header_addition .inside {width:500px;margin:auto;padding-right:300px;background:url(../files/layout/header_additional_lense.jpg) no-repeat right center;} /*Startpage styles   padding+width=800px*/
#header_addition .inside h1 {line-height:120%;}
#header_addition .inside .text {padding:4em 0;}
#header_addition .inside .text a.visit {display:inline-block;height:28px;padding:0 1.5em;line-height:2em;color:#656565;font-weight:bold;text-decoration:none;background:url(../files/layout/header_additional_link_bg.jpg);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-right:1px solid #adadad;border-bottom:1px solid #adadad;}
#header_addition .inside .text a.visit:hover {color:#0073cb;}
body.page_2 #header_addition .inside .mod_breadcrumb {display:none;} /*hide breadcrumb on startpage (page_XX: XX=ID)*/
#header_addition .inside .mod_breadcrumb {padding:1em 0;}
#header_addition .inside .mod_breadcrumb:before {content:" ";}
#header_addition .inside .mod_breadcrumb a {color:#0073cb;text-decoration:underline;}
#header_addition .inside .mod_breadcrumb a:hover {color:#0073cb;text-decoration:none;}

/*////////////////////////////////////////////////////////////////////////*/
/*CONTAINER*/
#container {width:830px;margin:auto;padding:3em 0 8em 0;}

/*////////////////////////////////////////////////////////////////////////*/
/*MAIN*/
#main {}
#main .inside {padding-right:3em;}
#main .inside .text a.visit {display:inline-block;height:28px;padding:0 1.5em;line-height:2em;color:#656565;font-weight:bold;text-decoration:none;background:url(../files/layout/header_additional_link_bg.jpg);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-right:1px solid #adadad;border-bottom:1px solid #adadad;}
#main .inside .text a.visit:hover {color:#0073cb;}

/*////////////////////////////////////////////////////////////////////////*/
/*RIGHT*/
#right {border:1px solid #dedede;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;}
#right .inside {padding:1em;}
#right .block {padding-bottom:1.5em;}
#right .submit {background:url(../files/layout/right_submit_bg.jpg) repeat-x;color:#fff;border:none;height:31px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#right h1 {margin:0!important;padding:0 0 0.5em 0!important;color:#0073cb!important;font-size:1.6em!important;}
#right .mod_navigation ul,#right .mod_customnav ul {list-style:none;margin:0;padding:1px 0 0 0;}
#right .mod_navigation ul li,#right .mod_customnav ul li {padding-bottom:1px;}
#right .mod_navigation ul li a,#right .mod_navigation ul li span,#right .mod_customnav ul li a,#right .mod_customnav ul li span {display:block;background:#f2f2f2;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:0.5em 1em;color:#6c6c6c;text-decoration:none!important;}
#right .mod_navigation ul li a.submenu {background:#d4d4d4;}
#right .mod_navigation ul li a:hover,#right .mod_navigation ul li span,#right .mod_customnav ul li a:hover,#right .mod_customnav ul li span {background:#dfdfdf!important;}
#right .mod_navigation ul li span,#right .mod_customnav ul li span {font-weight:bold;}
#right .mod_navigation ul li ul {padding-left:2em;}


/*////////////////////////////////////////////////////////////////////////*/
/*FOOTER*/
#footer {background:url(../files/layout/footer_bg.jpg) repeat-x;margin-top:-56px;overflow:hidden;}
#footer .inside {width:830px;margin:auto;color:#969696;padding:1.5em 0;text-transform:lowercase;font-weight:bold;text-align:center;}
#footer .inside #copyright a {color:#969696;text-decoration:none;}

Die Flaggen sollen im Header erscheinen, also so wie auf dem Bild, nur eben horizontal und ohne diesen Punkt vorne dran.

Ich habe wie gesagt von CSS nicht viel Ahnung, bin gerade dabei mir das anzulesen, blicke aber hier überhaupt nicht durch.

Vielen Dank schonmal.

[Nikolas]

Hallo,

bitte poste hier mal einen Link zu deiner Seite. Dann wird dir auch geholfen

Gruß
Nikolas

[xchs]

Wenn Du Dir das generierte HTML-Markup anschaust, dann wirst Du sehen, dass es sich um eine unsortierte Liste handelt, ähnlich wie in Deiner (Haupt-)Navigation.

Auch Deine Navigation wird - ohne entsprechendes CSS - standardmäßig untereinander aufgelistet, versehen mit Listensymbolen (so wie es für eine Auflistung eben üblich ist)

[Zappageck71]

Hier mal der Link:
http://www.imagixx.de/Steiger

Auch Deine Navigation wird - ohne entsprechendes CSS - standardmäßig untereinander aufgelistet, versehen mit Listensymbolen (so wie es für eine Auflistung eben üblich ist)

Ja klar, nur habe ich keine Ahnung wie ich dieses Verhalten ändern kann. Wie spreche ich das Language Changer Modul in der CSS an und wie richte ich es ein, dass es ohne Punkte und nebeneinander dargestellt wird?
Ich brauche einfach Hilfe das Ding in der CSS einzubinden, so dass es horizontal dargestellt wird und ohne Punkte.
Wie gesagt, von der Arbeit direkt im CSS habe ich null Ahnung.

[Nikolas]

Mit der Firefox Erweiterung FireBug kannst du dir die Elemente deiner Website genau anschauen und auch rausbekommen welche Klassen und Elemente du ansprechen musst.

.mod_changelanguage ul
{
  list-style-type:none;
}
.mod_changelanguage li
{
  display:block;
  float:left;
}

Damit solltest du es hinbekommen.

Gruß
Nikolas

[Zappageck71]

Ok, das scheint zu funktionieren. Habe den Code in die CSS eingebaut. Die Flaggen werden jetzt nebeneinander dargestellt.
Firebug habe ich installiert, danke für den Tipp.

Jetzt nur noch zwei zusätzliche Fragen.
1. Die Flaggen werden jetzt am oberen Rand dargestellt. Wie kann ich die 26px nach unten bringen?
2. Die Flaggen kleben horizontal aneinander, wie kann ich da einen Abstand dazwischenbekommen?

Sorry für die doofen Fragen, aber ich bin da leider totaler Anfänger.

[jscholtysik]

Hi Zappageck71,


z.B. indem Du noch folgenden Code hinzufügst:

.mod_changelanguage 
{
  margin-top: 26px; 
}

und aus

.mod_changelanguage li 
{   
  display:block;   
  float:left;
}

z.B. ein

.mod_changelanguage li 
{   
  display:block;   
  float:left;
  margin-right: 10px;
}

machst.

Viele Grüße.

[Nikolas]

Noch ein Tipp:

Am Besten du machst dich mal mit CSS vertraut. Das wirst du sicher häufiger brauchen.

Meine Empfehlung dafür: css4you

Gruß
Nikolas

[Zappageck71]

Vielen Dank! Das funktioniert 1A!

Ja, ich muss mich mit dem CSS-Kram devinitiv auseinandersetzen, danke für den Link Nikolas.

[svr]

Hallo zusammen

Muss man was spezielles erfassen, dass es auch mit Firefox funktioniert ? Ich kann auf meiner Seite von Deutsch auf Französisch ändern, aber nicht mehr zurück. Habe ich da was übersehen oder falsch gemacht? Hattet Ihr dieses Problem auch oder kennt jemand eine Lösung was ich ändern muss ? In IE9 funktioniert es einwandfrei, aber nicht mit Firefox.

www.loeffler-web.ch/solida

Vielen Dank und Grüsse
Michi

[MiTsch]

Hallo svr,

es liegt nich am FF, sondern an der Größe deines div#topmenü.
Dieses überlagert die DE-Flagge ganz und die FR-Flagge etwa zu 2/3.

Siehe hier:
div#topmenu.jpg

Du kannst zu Analyse der Zusammenhänge in deiner Webseite das kostenlose Addon Firebug für den Webbrowser Firefox benutzen.

Damit kannst Du leicht solche Probleme erkennen.
Eventuell hilft Dir diesbezüglich auch dieses Tutorial weiter.

Viele Grüße
MiTsch

[svr]

Hallo MiTsch

Vielen Dank für den Input und Hinweis. Habe es nun richtig hinbekommen und sorry auch noch für den doppelten Eintrag. Hatte noch weiter gesucht und dann den anderen Eintrag gefunden und mir erhoft, dass sich dort vielleicht jemand meldet.

Vielen Dank und Grüsse
Michi