Darstellung

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Darstellung

    root { --primary-bg: #2c3e50; --secondary-bg: #34495e; --hover-bg: #1abc9c; --logout-bg: #e74c3c; --logout-hover: #c0392b; --text-light: #ecf0f1; --shadow: 0 2px 5px rgba(0,0,0,0.2); --border-radius: 4px; --transition: all 0.3s ease; } .admin-header { background-color: var(--primary-bg); color: var(--text-light); padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; } .admin-title { font: bold 1.375rem/1.2 sans-serif; font-variant: small-caps; text-align: center; margin-bottom: 0.9375rem; color: var(--text-light); text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .admin-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.625rem; } .universe-selector { margin-right: 0.9375rem; } .form-select { padding: 0.5rem 0.75rem; border-radius: var(--border-radius); border: 1px solid var(--secondary-bg); background-color: var(--secondary-bg); color: var(--text-light); cursor: pointer; transition: var(--transition); } .form-select:focus { outline: none; box-shadow: 0 0 0 2px var(--hover-bg); } .admin-links { display: flex; flex-wrap: wrap; gap: 0.625rem; } .nav-link { padding: 0.5rem 0.9375rem; background-color: var(--secondary-bg); color: var(--text-light); text-decoration: none; border-radius: var(--border-radius); transition: var(--transition); white-space: nowrap; } .nav-link:hover { background-color: var(--hover-bg); transform: translateY(-1px); } .nav-link.logout { background-color: var(--logout-bg); } .nav-link.logout:hover { background-color: var(--logout-hover); } /* Responsive adjustments */ @media (max-width: 48rem) { .admin-nav { flex-direction: column; } .universe-selector { margin-right: 0; width: 100%; } .form-select { width: 100%; } .admin-links { width: 100%; justify-content: space-around; } .nav-link { flex-grow: 1; text-align: center; } }

    ich finde den fehler einfach nicht Hilfeeeeeee:-)

  • А в чем ошибка? я тут только css вижу глобальное.. покажите скрин, что вы хотите получить , или опишите .. если пойму что вы хотите то смогу помощь, если поправить лишь стили, или события.. я как понял на вскидку вы хотите на глобальном уровне применить эти правила ?

  • Also @sven wie dir @DenPUBG schon geschrieben hat ist der css Inhalt richtig. Ich habe ihn dir mal etwas angepasst und die Erläuterungen zu den Inhalten dazu geschrieben.
    Du solltest den gesamten Inhalt des Fehlers schicken. Am besten ein Screenshot.

    CSS Source Code

    1. :root {
    3. --primary-bg: #2c3e50;
    5. --secondary-bg: #34495e;
    7. --hover-bg: #1abc9c; /* Farbe für Hover/Fokus auf normalen Links */
    9. --logout-bg: #e74c3c; /* Hintergrund für Logout-Button */
    11. --logout-hover: #c0392b; /* Farbe für Hover/Fokus auf Logout-Button */
    13. --text-light: #ecf0f1; /* Helle Textfarbe */
    15. --shadow: 0 2px 5px rgba(0,0,0,0.2); /* Schatteneffekt */
    17. --border-radius: 4px; /* Standard-Randradius */
    19. --transition: all 0.3s ease; /* Standard-Übergangsanimation */
    21. /* Empfohlener Font-Stack für bessere Browser-Kompatibilität */
    23. --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    25. }
    29. /* Hauptcontainer des Admin-Headers */
    31. .admin-header {
    33. background-color: var(--primary-bg);
    35. color: var(--text-light);
    37. padding: 1rem 1.25rem; /* Innenabstand oben/unten | links/rechts */
    39. box-shadow: var(--shadow);
    41. margin-bottom: 1.25rem; /* Außenabstand unten */
    43. }
    47. /* Titel im Admin-Header */
    49. .admin-title {
    51. /* Einzelne Font-Eigenschaften statt Shorthand für mehr Klarheit/Robustheit */
    53. font-weight: bold;
    55. font-size: 1.375rem; /* ca. 22px */
    57. line-height: 1.2;
    59. font-family: var(--font-stack); /* Verwendung des definierten Font-Stacks */
    61. font-variant: small-caps; /* Kapitälchen */
    63. text-align: center;
    65. margin-bottom: 0.9375rem; /* ca. 15px */
    67. color: var(--text-light);
    69. text-shadow: 1px 1px 1px rgba(0,0,0,0.3); /* Leichter Textschatten */
    71. }
    75. /* Navigationsbereich im Header */
    77. .admin-nav {
    79. display: flex; /* Flexbox-Layout aktivieren */
    81. justify-content: space-between;/* Elemente mit maximalem Abstand verteilen */
    83. align-items: center; /* Elemente vertikal zentrieren */
    85. flex-wrap: wrap; /* Umbruch erlauben, falls nicht genug Platz */
    87. gap: 0.625rem; /* Abstand zwischen Flex-Items (ca. 10px) */
    89. }
    93. /* Container für den Universe-Selector (falls vorhanden) */
    95. .universe-selector {
    97. margin-right: 0.9375rem; /* Abstand rechts (ca. 15px) */
    99. }
    103. /* Styling für Select-Dropdowns */
    105. .form-select {
    107. padding: 0.5rem 0.75rem; /* Innenabstand (ca. 8px / 12px) */
    109. border-radius: var(--border-radius);
    111. border: 1px solid var(--secondary-bg); /* Rand */
    113. background-color: var(--secondary-bg);
    115. color: var(--text-light);
    117. cursor: pointer;
    119. transition: var(--transition);
    121. font-family: var(--font-stack); /* Konsistente Schriftart */
    123. }
    127. /* Fokus-Stil für Select-Dropdowns (wichtig für Tastaturnavigation) */
    129. .form-select:focus {
    131. outline: none; /* Standard-Outline entfernen, da wir box-shadow verwenden */
    133. box-shadow: 0 0 0 2px var(--hover-bg); /* Visueller Fokusindikator */
    135. }
    139. /* Container für die Admin-Navigationslinks */
    141. .admin-links {
    143. display: flex;
    145. flex-wrap: wrap;
    147. gap: 0.625rem; /* Abstand zwischen den Links */
    149. }
    153. /* Styling für einzelne Navigationslinks */
    155. .nav-link {
    157. padding: 0.5rem 0.9375rem; /* Innenabstand (ca. 8px / 15px) */
    159. background-color: var(--secondary-bg);
    161. color: var(--text-light);
    163. text-decoration: none; /* Keine Unterstreichung */
    165. border-radius: var(--border-radius);
    167. transition: var(--transition);
    169. white-space: nowrap; /* Verhindert ungewollten Zeilenumbruch im Link */
    171. }
    175. /* **WICHTIG:** Hover- UND Fokus-Stile für normale Links (Accessibility) */
    177. .nav-link:hover,
    179. .nav-link:focus {
    181. background-color: var(--hover-bg);
    183. transform: translateY(-1px); /* Leichter "Anhebe"-Effekt */
    185. /* Optional: Zusätzlicher oder alternativer Fokus-Indikator */
    187. /* outline: 2px solid var(--hover-bg); */
    189. /* outline-offset: 2px; */
    191. }
    195. /* Spezifisches Styling für den Logout-Link */
    197. .nav-link.logout {
    199. background-color: var(--logout-bg);
    201. }
    205. /* **WICHTIG:** Hover- UND Fokus-Stile für den Logout-Link (Accessibility) */
    207. .nav-link.logout:hover,
    209. .nav-link.logout:focus {
    211. background-color: var(--logout-hover);
    213. transform: translateY(-1px); /* Konsistenter Effekt */
    215. /* Optional: Zusätzlicher oder alternativer Fokus-Indikator */
    217. /* outline: 2px solid var(--logout-hover); */
    219. /* outline-offset: 2px; */
    221. }
    225. /* Responsive Anpassungen für kleinere Bildschirme (bis 768px Breite) */
    227. @media (max-width: 48rem) { /* 48rem = 768px bei Standard-Schriftgröße 16px */
    229. .admin-nav {
    231. flex-direction: column; /* Elemente untereinander anordnen */
    233. }
    237. .universe-selector {
    239. margin-right: 0; /* Rechten Abstand entfernen */
    241. width: 100%; /* Volle Breite einnehmen */
    243. }
    247. .form-select {
    249. width: 100%; /* Volle Breite einnehmen */
    251. }
    255. .admin-links {
    257. width: 100%; /* Volle Breite einnehmen */
    259. justify-content: space-around; /* Links gleichmäßig verteilen */
    261. }
    265. .nav-link {
    267. flex-grow: 1; /* Links erlauben, verfügbaren Platz einzunehmen */
    269. text-align: center;/* Text in den Links zentrieren */
    271. }
    273. }
    Display All
    Günstige vServer und vieles mehr gibt es nur hier!
    10% Rabatt Code
    wumix-a-4846

    [Blocked Image: https://zap-cdn.com/interface/_images/banner/vrserver/v-r-Server-468x60.jpg]

  • Пример стандартного обнуления стилей в format.css

    Source Code

    1. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
    2. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
    3. html{height:100%}
    4. body{line-height:1}
    5. ol,ul{list-style:none}
    6. blockquote,q{quotes:none}
    7. blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
    8. table{border-collapse:collapse;border-spacing:0}


    и далее выстраиваем уже в отдельном css свое.

    так же есть другой вариант тут поддержка браузеров включена

    Source Code

    1. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
    2. body{margin:0}
    3. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
    4. audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
    5. audio:not([controls]){display:none;height:0}
    6. [hidden],template{display:none}
    7. a{background:transparent}
    8. a:active,a:hover{outline:0}
    9. abbr[title]{border-bottom:1px dotted}
    10. b,strong{font-weight:bold}
    11. dfn{font-style:italic}
    12. h1{font-size:2em;margin:0.67em 0}
    13. mark{background:#ff0;color:#000}
    14. small{font-size:80%}
    15. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
    16. sup{top:-0.5em}
    17. sub{bottom:-0.25em}
    18. img{border:0}
    19. svg:not(:root){overflow:hidden}
    20. figure{margin:1em 40px}
    21. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
    22. pre{overflow:auto}
    23. code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
    24. button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
    25. button{overflow:visible}
    26. button,select{text-transform:none}
    27. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
    28. button[disabled],html input[disabled]{cursor:default}
    29. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
    30. input{line-height:normal}
    31. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
    32. input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
    33. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
    34. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
    35. fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
    36. legend{border:0;padding:0}
    37. textarea{overflow:auto}
    38. optgroup{font-weight:bold}
    39. table{border-collapse:collapse;border-spacing:0}
    40. td,th{padding:0}
    Display All
    Вариантов как обнулить и подготовить масса.. я добавляю еще вот такой параметр к примеру ...
    *,*::before,*::after {box-sizing: border-box;}
    img {border-style: none;} a { text-decoration: none; }
    html{cursor:grab;}
    html:pointer{cursor:pointer;}
    html:active{cursor:grabbing;}
    .clik:hover {cursor:pointer;}

    Время будет , (пока занят по работе ) напишу статейку необходимого по css включая новые теги.. думаю пригодится ..

    The post was edited 1 time, last by DenPUBG ().