mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 12:58 Benutzername: Passwort: Auto-Login

Thema: Padding von Listenpunkten setzt sich über allg. Padding vom 29.09.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Padding von Listenpunkten setzt sich über allg. Padding
Autor Nachricht
dstN
Threadersteller

Dabei seit: 29.09.2011
Ort: Freiburg im Breisgau
Alter: 33
Geschlecht: Männlich
Verfasst Do 29.09.2011 13:24
Titel

Padding von Listenpunkten setzt sich über allg. Padding

Antworten mit Zitat Zum Seitenanfang

Hallo,

bin neu hier Lächel hoffe dass Problem wurde nicht schon mal geposted... ich weiß nicht wie man es "benennen" könnte, daher mach ich den Thread auf, nach dem ich nun seit 45 Minuten versuche es selbst hinzubekommen und 15 Minuten gegoogled habe.

Folgendes Problem:

Ich habe eine Wrapperdiv, die ein Top Padding und ein Bottom Padding hat.

Innerhalb der Wrapperdiv sind 3 weitere Divs - Kopfbereich, Content und Footer - die beiden letzteren sind aber derzeit noch leer und ungestyled.

Die Kopfbereich-Div hat maximale Abmessungen.

Die Kopfbereich-Div beinhaltet 5 weitere Divs die ALLE Left-Floaten. Inhalt sind in 3 Div's Bilder (Divs erhielten den Abmessungen entsprechend die maximelen Abmessungen. Eine Div hat eine Abmessung + background color erhalten und die letzte Div sollte ein Top-Menu werden.

Ich arbeite mit Joomla als CMS für das Template.

Nun das Problem beim Top-Menu stylen.

Die Wrapperdiv hat ein Toppadding von 25px welches direkt an die Top-Menudiv anschlägt. Wenn ich nun den li's ein Padding nach OBEN gebe setzt sich die Liste ÜBER das Wrapperpadding anstatt sich nach unten (wo noch platz in der Div ist) auszubreiten. Padding-bottom breitet sich logischerweise nach unten aus...aber warum breitet sich das Padding nach oben ÜBER die Div aus? Die Liste sollte unten oder vertikal zentriert innerhalb des Divs sein, wie setze ich das um, so dass ich top und bottom padding jeweils gleich groß einsetzen kann?
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Do 29.09.2011 13:27
Titel

Antworten mit Zitat Zum Seitenanfang

Kannst Du vielleicht mal ne Skizze machen? Das sich jetzt alles vorstellen zu müssen, finde ich ne Zumutung.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
dstN
Threadersteller

Dabei seit: 29.09.2011
Ort: Freiburg im Breisgau
Alter: 33
Geschlecht: Männlich
Verfasst Do 29.09.2011 13:39
Titel

Antworten mit Zitat Zum Seitenanfang

Klar, kein Problem

hier: http://h3.abload.de/img/skizzefdwb.jpg


Zuletzt bearbeitet von dstN am Do 29.09.2011 13:39, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Do 29.09.2011 14:43
Titel

Antworten mit Zitat Zum Seitenanfang

Ohne Live-Beispiel stochert man im Dunkeln.

Kann viele Gründe haben:

- Navi-Div hat eine feste Höhe
- float wurde nicht gecleared
...
  View user's profile Private Nachricht senden
dstN
Threadersteller

Dabei seit: 29.09.2011
Ort: Freiburg im Breisgau
Alter: 33
Geschlecht: Männlich
Verfasst Fr 30.09.2011 07:49
Titel

Antworten mit Zitat Zum Seitenanfang

immerIch hat geschrieben:
Ohne Live-Beispiel stochert man im Dunkeln.

Kann viele Gründe haben:

- Navi-Div hat eine feste Höhe
- float wurde nicht gecleared
...



Navi-Div hat auch eine feste Höhe ! Und gecleared wird erst zwischen #kopfbereich und #content...

Live-Beispiel geht leider nicht, weil es sich um ein Firmeninternes Projekt handelt...
  View user's profile Private Nachricht senden
dstN
Threadersteller

Dabei seit: 29.09.2011
Ort: Freiburg im Breisgau
Alter: 33
Geschlecht: Männlich
Verfasst Fr 30.09.2011 08:46
Titel

Antworten mit Zitat Zum Seitenanfang

so hab jetzt ohne grafiken einfach mal alles online gestellt... kann sich ja bei zeiten mal jemand angucken


http://www.yinside.de/kunden/test/test.html

Problem ist auch extra verursacht - in der Navi oben. Das Padding der Li's geht über das Padding vom Wrapper.


Zuletzt bearbeitet von dstN am Fr 30.09.2011 08:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
tschuingum

Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
Verfasst Fr 30.09.2011 10:54
Titel

Antworten mit Zitat Zum Seitenanfang

Lass die Listenpunkte der Navi floaten statt über display: inline zu gehen - also in etwa so:
Code:

#navioben li {
border:1px solid #444444;
float:left;
margin-right:13px;
padding:10px;
text-align:center;
}


Dann noch ein gut gemeinter Rat für den Einsteiger: Du musst nicht alle Elemente in divs einpacken - die sind nur dann sinnvoll, wenn du Blockelmente gruppieren willst. In diesem Fall kannst du die mit den ids 'viereck', 'navioben', 'headpic' und 'logopic' rausschmeißen. Macht den Quellcode schlanker und einfacher zu überblicken.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
dstN
Threadersteller

Dabei seit: 29.09.2011
Ort: Freiburg im Breisgau
Alter: 33
Geschlecht: Männlich
Verfasst Fr 30.09.2011 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

Ok, werd ich mal versuchen?! Lächel

tschuingum hat geschrieben:

Dann noch ein gut gemeinter Rat für den Einsteiger: Du musst nicht alle Elemente in divs einpacken - die sind nur dann sinnvoll, wenn du Blockelmente gruppieren willst. In diesem Fall kannst du die mit den ids 'viereck', 'navioben', 'headpic' und 'logopic' rausschmeißen. Macht den Quellcode schlanker und einfacher zu überblicken.


Ist es "falsch" wenn ich das tue, oder lediglich "überflüssig" ? Denn für mich macht das verpacken in divs den Code übersichtlicher, dann weiß ich sofort wo was drin ist... ^^
  View user's profile Private Nachricht senden
 
Ähnliche Themen padding?
[CSS] padding-right?
[CSS] padding Problem
div in div // problem mit padding
Padding im NS4 - wie bzw. Alternativen?
CSS padding verbreitert DIV
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.