Hallo zusammen,
ich habe ein etwas seltsames Phänome festgessellt: Beim "Durchschalten" meines Mainmenus steht die Darstellung immer identisch. buis auf einen Menüpunkt. Lediglich beim Aufruf des Menüpunkts <Mitglieder> ruckt die Darstellung auf dem Screen etwas nach rechts (ca. 4 mm). Hier zwei Links:
Ob es am Modul liegt kannst du einfach testen indem du das Modul mal deaktivierst.
Grundsätzlich kann das aber schon sein. Die Abstände sind prozentual definiert. Wenn nun also das Modul noch Platz benötigt wird der restliche Platz kleiner, und damit auch die diversen Abstände.
Ein ähnlicher Effekt entsteht wenn die Seite länger ist und der Browser die Scrollleiste einblendet. Dann rutscht die Seite um die halbe Scrollleistenbreite nach links.
Machen kann man da nicht viel. Das Template funktioniert nunmal so.
danke für Deine Info. Ich habe das mit dem Modul <Login> getestet. Daran kann es nicht nicht liegen.
Derzeit enthält das mainmenu 6 Einträge. Ich schicke hier mal den Link zu Home:
s693212429.online.de/index.php
.
Die Seiten der Buttons 1,2 und 4 sind einheitlich positioniert und die der Buttons 3, 5 und 6 ebenfalls. Aber die beiden Gruppen unterscheiden sich durch eine unterschiedliche absolute Position.
Ich habe alle Artikel gleichartig als Kategorieblog aufgebaut.
Kann dann trotzdem solche Verschiebungen des gesamten body geben?
Da habe oich doch bestimmt irgendetwas falsch gemacht?
Beim Internet Explorer wird die Scrollleiste zum Beispiel über den Inhalt gelegt. Dort ist kein ruckeln zu sehen.
Code:
body {
overflow-y: scroll;
}
Der obige Code erzwingt eine Scrollleiste in Y-Richtung, ist zwar nicht unbedingt schön, löst aber das Problem und ist besser als die Seite künstlich zu verlängern, sodass auf jeder Seite eine Scrollleiste eingeblendet werden muss.
Ich hatte gerade etwas Langeweile und habe mir mal deine custom.css angeguckt .
Mir ist dabei folgendes aufgefallen:
Was im Backend konfiguriert werden kann, sollte auch dort konfiguriert werden, da so die templateX.css weniger groß und die custom.css übersichtlicher ist
Was schon weiter oben definiert wurde, muss nicht noch einmal definiert werden, nur weil man etwas im gleichen Block überschreibt
Die custom.css wird vom Template wie eine LESS-Datei behandelt. Das hat zur Folge, dass man u. a. den Code schachteln kann, wodurch der Code an Übersicht gewinnt und man viel weniger tippen muss
Warnung: Spoiler!
Hier deine custom.css mit einzelnen, detaillierten Anmerkungen:
Code:
/*********************************************
*** Eigene CSS für Less-Allrounder ***
*** M. Biegler ***
**********************************************/
/* Änderungen in aev\templates\less-allrounder\css\templates.css */
//--vorher == ist unnötig, da früher schon definiert
//--Backend == kann im Backend definert werden und sollte dort auch getan werden
body {
margin: 0; //--vorher
padding: 0;
font-family: Verdana, Arial, Helvetica, Sans-Serif; /** Arial ergänzt **/ //--Backend
font-size: 0.8em; //--Backend
line-height: 1.3em; //--Backend
color: #555555; //--Backend
background-color: #a2cdfd; //--Backend
}
/** Definiert ganz allgemein die Formate der Überschriften **/
h1 {font-size: 1.3em; line-height: 1.4em; margin: 0.2em 0em 0.2em 0.2em;}
h2 {font-size: 1.2em; line-height: 1.3em; margin: 0.2em 0em 0.2em 0.2em;; text-align: justify;}
h3 {font-size: 1.1em; color: #135cae; line-height: 1.3em; margin: 0em 0em 0.2em 0.2em; text-align: justify;}
h4 {font-size: 1.0em; color: #135cae; line-height: 1.1em;}
h5 {font-size: 1.0em; line-height: 1.1em; color: #FF0000;}
h6 {font-size: 0.9em; line-height: 1em;}
/** stellt den oberen Rand für das Logo auf 2px **/
a.imglogo,
a.medialogo {
float: left; //--vorher
padding: 2px 20px 0 0;
}
ul.breadcrumb > :first-child {
display: none; /** lässt das Icon am Anfang der Breadcrumbs verschwinden **/
}
/** Änderungen im Mainmenu **/
#topmenu ul.menu {
@media (min-width: @navbarCollapseDesktopWidth) { // center ist im mobilen Menü scheiße, da man so die Einrückungen nicht mehr sieht
text-align: center; /** zentriert das Mainmenu **/
background-color: #0000c4; /** setzt Farbe für das mainmenu **/ //--Backend
}
li {
a,
span.separator {
font-size: 18px; /** setzt Schriftgröße **/
text-shadow: none; /** schalter Schattenrand für die Schrift ab **/ //--Backend => CSS3-Effects
// hier waren mal > vor li a, die unnötig sind
display: block; //--vorher
padding: 10px 15px; //--vorher
background-color: #0000c4; /** setzt Button-Farbe im mainmenu auf intensives blau **/ //--Backend
border-top: 1px solid #000000; //--Backend
border-right: 1px solid #222222; //--Backend
border-left: 1px solid #000000; //--Backend
border-bottom: 1px solid #333333; //--Backend
color: #ffffff; /** Schriftfarbe wird weiss statt #fafafa;**/ //--Backend
&:hover {
color: #ffffff; //--Backend
background-color: #539abd; //--Backend
/** ändert Buttonfarbe beim Mouseover **/
}
/**
&.current {
background-color: #00ffff; /** setzt Button-Farbe auf helles blau
}**/
}
/** Level 2 **/
ul li a {
text-shadow: none; /** schalter Schattenrand für die Schrift im Level 2 ab **/ //--Backend => CSS3-Effects
font-size: 16px; /** setzt Schriftgröße **/
}
}
ul.nav-child {
position: absolute; //--vorher => zerschießt das Menü in der mobilen Ansicht
font-size: 14px;
background-color: #539abd;
top: 3.0em; /** Höhere Werte verschieben die Position des Level-2-Dropdown-Menüs nach unten **/ //--vorher
width: 172px; /** ursprünglich 214 / beeinflusst die Größe des Hintergrundbereichs, aber nicht die Menüeinträge **/
-webkit-border-radius: 4px; /** 0 beseitigt die Eckenabrundung **/ //--vorher
-moz-border-radius: 4px; //--vorher
border-radius: 4px; //--vorher
li a,
li span.separator {
background-color: #0000c4; /** Hintergundfarbe intensiv-blau des Menüeintragfeldes Level 2 **/ //--Backend
font-size: 16px;
color: #ffffff; /** Schriftfarbe weiss **/ //--Backend
padding-top: 4px; //--vorher
padding-bottom: 0px;
width: 130px; /** Breite des Menüeintragfeldes **/
border: 1px solid; //--vorher
border-top-color: #ffffff; //--Backend
border-right-color: #ffffff; /** weiß anstelle von #333333; **/ //--Backend
border-left-color: #ffffff; //--Backend
border-bottom-color: #ffffff; //--Backend, mit border-color zusammenfassen
&:hover {
/** font-weight: bold; **/
color: #ffffff; //--Backend
background-color: #539abd; //--Backend
/** ändert Aussehen beim Mouseover **/
}
}
}
&,
ul.nav-child {
li.current > a {
font-weight: normal;
text-decoration: none; //--vorher
color: #0000c4; /** Tauscht Schrift in Blau und Hintergrund in Gelb beim geewählten Menüentrag**/
background-color: #ffff00;
}
}
}
/** Footermodule zentrieren, Schriftfarbe und -größe einstellen - es ist nur footermodule2 belegt **/
#footermodules {
&,
a,
ul.menu {
color: #0000c4; // bei der aktuellen Seite sinnlos, da kein Footermodule mit Text
font-size: 12px;
text-shadow: none; /* 0 1px 1px #121212; */ //--Backend => CSS3-Effects
text-align: center;
}
ul.menu {
// > waren sinnlos
li a,
li span.separator {
display: block; //--vorher
padding: 3px 5px;
background-color: #0000c4;
border: 1px solid #0000c4;
/**
border-right: 1px solid #222222;
border-left: 1px solid #000000;
border-bottom: 1px solid #333333;
**/
color: #ffffff; //--Backend
&:hover {
/** font-weight: bold; **/
color: #ffffff; //--vorher
background-color: #539abd;
/** ändert Aussehen beim Mouseover **/
}
}
&,
ul.nav-child {
li.current > a {
font-weight: normal;
text-decoration: none; //--vorher
color: #0000c4;
background-color: #ffff00;
}
}
}
}
#footer a#gotop {
color: #ff0000; //--Backend
font-weight: bold;
text-shadow: none; //--Backend => CSS3-Effects
}
#maincontent {
padding: 10px 2% 10px 2%; /** verkleinert **/
margin: 4px 0 0 0; /** verkleinert **/
min-height: 200px; //--vorher
background-image: url('../images/background.png'); //--vorher
background-color: #c9c9c9; //--vorher
border: 3px double #c9c9c9; //--vorher
width: auto; //--vorher
// stand etwas weiter unten
> div:not([class*="-featured"]):not(#system-message-container),
.items-leading > div,
.item {
background-color: #ffffff; //--vorher
border: 1px solid #c9c9c9; //--vorher
padding: 1%; /** verkleinert von 2 auf 1% **/
}
}
.moduleh3-sidebar {
color: #ff0000; /** Schrift rot **/ //--Backend
background-color: #0000c4; /** Menü-Hintergrund intensiv-blau **/ //--Backend
text-shadow: none; //--Backend => CSS3-Effects
}
@media (min-width: 768px) { // nutze @navbarCollapseDesktopWidth statt 768px . Dies ist eine Variable, die den im Backend gewählten Wert beinhaltet
#rightcol .moduleh3-sidebar {
padding: 0 30px 0 10px; //--vorher
text-align: right; //--vorher
color:#ff0000; //--Backend
}
}
.copytext {
color: #539abd;
text-shadow: none; //--Backend => CSS3-Effects
}
input.search-query {
-webkit-border-radius: 10px 0 10px 0; //--vorher
-moz-border-radius: 10px 0 10px 0; //--vorher
border-radius: 10px 0 0 10px; // besser: .border-radius(10px 0 0 10px); (so wird -webkit-... und -moz-... gleich passend mit gesetzt)
width: 90px; //--vorher
}
/*** Ende Änderung in templates.css ***/
/** Änderung in Index.php Zeile 194 bis 196 - muss separat nach jedem Update erneut vorgenommen werden
<a href="#" class="hasTooltip" id="gotop" title="<?php echo JText::_('TPL_ALLROUNDER_SCROLL_TOP'); ?>">
↑ Nach oben ↑
</a>
**/
auf die Navigationsleiste als Verursacher für die Verschiebung hätte ich eigentlich auch selber kommen müssen. Sorry, dass ich Euch (Thomas und Dich) damit genervt habe.
Vielen Dank für Deine Mühe mit der custom.css.
Da hast Du völlig Recht, dass Redundanzen vermieden werden sollten. Ich kann zu meiner Verteidigung nur anführen, dass ich mich gerade erst einarbeite und die Übernahme von eigenen Einstellungen in die custom.css übersichtlicher fand, da ich sie auch noch kommentieren konnte, was bei einer Änderung im Backend so nicht gegeben war.
Ich werde das in einer ruhigen Minute mal grundlegend bereinigen. Vor allem wenn in der templatex Einträge drinstehen, die ich dort in der Phase des Testens direkt eingetragen hatte.
.