Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Thema ansehen
PHP-Fusion.at - Offizielle Supportseite für PHP-Fusion » Support für die Versionen v7.00 und v7.01 » Themes und Design
Panelboxen sind zu Nah am "Container" - Frage/Hilfe Thema drucken
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 01.06.2012 um 22:42
 #1 Beitrag drucken Top
Hallo Zusammen, ich bin gerade dabei mein Style neu zu Designen und würde gerne Wissen wie ich die Panelboxen nen stück von dem äußersten Rand mit dem Namen "container" weg bekomme.

Hier ist mal ein Panel als Vorschau so siehts zurzeit auch aus.
www.php-fusion.at/files/panelboxen.jpg

So sieht der container aus:
Download Code  GeSHi: CSS
  1. .container {
  2. width: 988px;
  3. border: 1px solid #000000;
  4. }
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10

habe schon versucht die breite zu vergrößern ohne Erfolg.

Die Panels:
Download Code  GeSHi: CSS
  1. .side-border-left {
  2. color: #000000;
  3. background-color: #ddd;
  4. padding: 10px 10px 10px 0;
  5. width: 175px;
  6. }
  7.  
  8. .side-border-right {
  9. color: #000000;
  10. background-color: #ddd;
  11. padding: 10px 0 10px 10px;
  12. width: 175px;
  13. }
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10

Hier ebenfalls die breite mal verkleinert ohne Erfolg

Würde mich über Hilfe freuen!
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


DeeoNe Geschrieben am 01.06.2012 um 22:52
 #2 Beitrag drucken Top
Das was bei padding 0 ist muss du was setzen wie 1px oder so.
Beiträge: 219 
http://www.deeone.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 01.06.2012 um 22:52
 #3 Beitrag drucken Top
Oke, danke dir!
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


DeeoNe Geschrieben am 01.06.2012 um 22:53
 #4 Beitrag drucken Top
LoL habs gerade abgesendet und schon eine Antwort Oo Wie geht das.
Beiträge: 219 
http://www.deeone.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 01.06.2012 um 22:55
 #5 Beitrag drucken Top
Der frühe Vogel fängt den Wurm :)

Zusammengefügt am 05. Juni 2012 um 08:37:50:
Ich hab da nochmal ein problem & zwar mit dem Capmain sprich wenn man die Panels nur auf einer bestimmten Seite anzeigen lässt ist die Panelbox Capmain wieder so nah am Rand:

www.php-fusion.at/files/screenshot_rand.jpg

Hier weiß ich aber nicht wo ich in der css suchen müsste ... firebug zeigt mir main-body an aber da steht:

Download Code  GeSHi: CSS
  1. .main-body {
  2. font-family: Arial;
  3. font-size: 12px;
  4. color: #000000;
  5. background-color: #F1F1F1;
  6. border: 2px solid #f8c807;
  7. border-radius: 0px 0px 10px 10px;
  8. padding: 4px;
  9. }
  10.  
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10


Wenn man das padding ändert ändert sich auch der Inhalt im Panel ansich und nicht die entfernung vom Rand zur Box, hat jemand ne Idee ?
Bearbeitet von Paramedic am 05.06.2012 um 08:37
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Veteran Mitglied


Janilein Geschrieben am 05.06.2012 um 09:18
 #6 Beitrag drucken Top
da währen dann z.b. noch side-border-left oder side-body, die für dich interessant sein könnten


side-border-left sollte das bei dir sein und dann einfach den entsprechenden padding-wert wählen

z.b.: padding: 10px 10px 10px 5px;
traumkamera.de/logo/traumlogo.jpg
Beiträge: 521 
http://themes.lewitzgalerie.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 05.06.2012 um 09:26
 #7 Beitrag drucken Top
Also side-border-left das wäre für die "Seitlichen" Panels die Links wäre. Side-Body ist ebenfalls für die Äußeren Panels. Ebenso wie oben schon geklärt musste ich das padding bei side-border-left und right ändern damit es so ist wie ich es haben wollte.

Ich würde Euch gern einmal nen Ausschnitt des Codes posten:
Download Code  GeSHi: CSS
  1. /* Side-Panel properties */
  2.  
  3.  
  4. .side-left .side-border-right {display: none;}
  5. .side-right .side-border-left {display: none;}
  6.  
  7. .side-border {
  8. border: 1px solid #000000;
  9. border-radius: 5px 5px 5px 5px;
  10. }
  11.  
  12. .side-border-left {
  13. color: #000000;
  14. background-color: #ddd;
  15. padding: 10px 10px 10px 2px;
  16. width: 175px;
  17. }
  18.  
  19. .side-border-right {
  20. color: #000000;
  21. background-color: #ddd;
  22. padding: 10px 2px 10px 10px;
  23. width: 175px;
  24. }
  25.  
  26. .scapmain {
  27. text-transform: uppercase;
  28. font-family: Arial;
  29. font-size: 12px;
  30. text-align: center;
  31. font-weight: bold;
  32. color: #FFFFFF;
  33. background-color:#CA0000;
  34. border-radius: 10px 10px 0px 0px;
  35. background-repeat: repeat-x;
  36. padding-left:6px; padding-right:6px; padding-top:4px; padding-bottom:4px
  37. }
  38.  
  39. .side-body {
  40. font-family: Arial;
  41. font-size: 12px;
  42. color: #000000;
  43. background-color: #eee;
  44. background-repeat: repeat-x;
  45. border: 2px solid #CA0000;
  46. border-radius: 0px 0px 10px 10px;
  47. padding: 4px;
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10


ggf. hilft auch das "Capmain" weiter:

Download Code  GeSHi: CSS
  1. .capmain {
  2. text-transform: uppercase;
  3. font-family: Arial;
  4. font-size: 12px;
  5. text-align: normal;
  6. font-weight: bold;
  7. color: #000000;
  8. background-color:#f8c807;
  9. border-radius: 10px 10px 0px 0px;
  10. background-repeat: repeat-x;
  11. padding-left:6px; padding-right:6px; padding-top:4px; padding-bottom:4px
  12. }
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Veteran Mitglied


Janilein Geschrieben am 05.06.2012 um 09:39
 #8 Beitrag drucken Top
background-repeat: repeat-x; kannst du überall entfernen, da du keine Grafiken nutzt, die wiederholt werden müssten.

padding-left:6px; padding-right:6px; padding-top:4px; padding-bottom:4px ist zwar nicht falsch, geht aber einfacher und besser so: padding: 4px 6px; (Der erste Wert ist hier für oben und Unten, der zweite für Links und Rechts)


PS: Du solltest dir deine Webseite auch mal im IE anschauen.
traumkamera.de/logo/traumlogo.jpg
Beiträge: 521 
http://themes.lewitzgalerie.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 05.06.2012 um 09:45
 #9 Beitrag drucken Top
herzlichen Dank für deine Antwort Janilein, jedoch ändert sich durch padding der Abstand vom Container nicht sondern nur von den Inhalt der boxen.
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Veteran Mitglied


Janilein Geschrieben am 05.06.2012 um 10:00
 #10 Beitrag drucken Top
Um welche seite handelt es sich überhaupt, die du versuchst anzupassen? Dann kann ich evtl. genauer helfen


Edit: Oder hast du die Linken Panele weggenommen? dann müsstest du main-bg anpassen


Edit: Ich sehe gerade du hast im Impressum die linke panele rausgenommen.

Du hast in main-bg padding: 10px 0 5px; d.h. bei 3 Werten, das du für links 0px vergeben hast.

Du könntest jetzt z.b. die 0 komplett entfernen und hättest einen abstand von 5px zum Rand. allerdings wirkt sich das auch auf die Seiten aus, wo die linken Panele trotzdem drin sind, d.h. du müsstest side-border-left evtl. etwas anpassen
traumkamera.de/logo/traumlogo.jpg
Beiträge: 521 
http://themes.lewitzgalerie.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 05.06.2012 um 10:17
 #11 Beitrag drucken Top
Es handelt sich um die Seite die in meinem Profil eingetragen ist aber kurz und knapp um http://4Friends.mod-rescue.de/. Da ich noch V 7.01.xx nutze hab ich auf div. Seiten über den Adminbereich die Linken Panels "abgeschaltet". Es könnte gut sein dass man an "main-bg" was ändern muss.

Hier mal der Auszug aus der CSS:
Download Code  GeSHi: CSS
  1. .main-bg {
  2. color: #000000;
  3. background-color: #dddddd;
  4. padding: 10px 0 5px 0;
  5. }
gewandelt in 0.001 Sekunden, benutzt wurde GeSHi 1.0.8.10


Es kann natürlich sein dass ich immer mal wieder was übersehe *lach*
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Veteran Mitglied


Janilein Geschrieben am 05.06.2012 um 10:19
 #12 Beitrag drucken Top
Habe meinen vorherigen Beitrag editiert und das sollte dir helfen können.
traumkamera.de/logo/traumlogo.jpg
Beiträge: 521 
http://themes.lewitzgalerie.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 05.06.2012 um 10:21
 #13 Beitrag drucken Top
Das hilft mir auf jeden Fall! Ich bedanke mich für die klasse Hilfe !
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 05.06.2012 um 15:58
 #14 Beitrag drucken Top
In Deinem Beispiel hiesse das padding für den main-bg:

Oben: 10px
Rechts: 0px
Unten: 5px
Links: 0px

Nochmal:
Regel: Bei nur EINER Zahl gilt dieser Wert für ALLE Seiten
Bei zwei Werten gilt der erste Wert für oben und unten, der Zweite für links und rechts.
Bei drei Wertangaben gilt der erste Wert für oben, der zweite für rechts UND links, der Dritte für unten.
Bei VIER Werten gilt immer die Reihenfolge OBEN, RECHTS, UNTEN, LINKS.
Wir sind wieder bei Grundkenntnissen, das ist reines Lernen und hat nichts mit "Verständnis" der Zusammenhänge zu tun Rescue ;)


Das sollte sich jetzt von alleine erklären, oder?
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 05.06.2012 um 16:05
 #15 Beitrag drucken Top
Gut, soweit hab ich das nun Verstanden. Es ist richtig, dass es was mit den Grundkenntnissen zu tun hat nur alles zusammen lernen geht nicht. Derzeit beschäftige ich mich mit Tabellen was mir auch Gut gelungen ist (Siehe hier:http://4friends.mod-rescue.de/Steckbr...kbrief.php). Ich werde natürlich mich nach den HTML-Kenntissen an die CSS machen. Nur wie gesagt alles zusammen geht wirklich nicht. Vor kurzem hab ich Intensiv damit angefangen HTML-Grunkenntnisse anzulernen.
Beiträge: 577 
http://4friends.mod-rescue.de 
Springe ins Forum:
Anzeige


Anmelden


Registrieren Passwort vergessen

RSS Feeds

Feeds abonieren

Letzte News
Letzte Threads
Anzeige

© Copyright 2024 PHP-Fusion.at | Alle Rechte vorbehalten.

© 2016 Real Space. All rights reserved | Design by W3layouts | 19,330,165 eindeutige Besuche
Powered by PHP-Fusion copyright © 2002 - 2024 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.