[CSS] Problem bei Breitenangabe

Huhu ich hab wieder eine Aufgabe für euch. Ich hab mir jetzt schon den Wolf gesucht aber ich finde keine Lösung. Folgendes ich habe eine div Box recht auf der Page die meinen Style Switcher umschließt. www....de <-- da anschauen dann seht ihr es. Nun soll der Rahmen nur um die 2 gifs gehen. Jetzt hab ich folgendes stehen.

<div id="stylesd">
... quellcode...
</div>

und folgendes ist im CSS definiert.

#stylesd {

border: 1px solid #ddd;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}

Warum geht der Rahmen nun bis zur Seite ? Und warum hab ich unten mehr Innenabstand wie oben. Es müsste doch eigentlich überall 10 Px sein. Hab auch schon nur "padding:10px; " gehabt. Aber es will nicht. Vielleicht hat einer von euch die zündende Idee!

mfg Denis

Re: CSS Problem

Wenn du einem Div keine Breitenangabe gibts, ist es immer so breit, wie der Bereich, in dem es eingefügt wurde. Schreib also noch width mit in deine Styleangaben oder ein margin-right. Zum zweiten Problem. Versuch mal, das Leerzeichen zwischen den beiden Bildern durch CSS-Angaben zu ersetzen.

Re: CSS Problem

vielen Dank für die Hilfe jetzt hab ich es so wie ich es haben wollte. Nach unten war der Abstand größer da sich ein paar IDs überlappt haben. Hab jetzt unten einfach ein paar weniger Pixel bei padding-bottom genommen und siehe da es passt Und durch dein margin-right hat es jetzt auch geklappt mit dem Rand rechts. Vielen Dank!

mfg Denis

Re: CSS Problem

kannst auch padding: 10px; schreiben ist das gleiche wie du schon gesagt hast, wenn alle padding werte gleich sind, ansonsten:

padding: top right bottom left;

wobei du hald da die jeweiligen werte reinschreiben musst statt top etc.
macht das ganze ein wenig übersichtlicher.

Re: CSS Problem

so ich hab wieder was für euch.

Folgender Klasse:

.linkd {
border: 1px dashed #ddd;
margin-bottom:5px;
margin-left:0%;
margin-right:60%;
text-align:left;
padding:0px 0px 0px 0px;
}

So sieht es aus: http://www.....de/wordpress/index.php?wpstyle=red-style

In der ersten News der Link links unten, soll eigentlich der Rahmen ohne Platz außen rum mit dem Link abschließen. Warum macht er es nicht?

Code in der News ist folgender:

<div class="linkd"><a href="http://www.mozilla.org/products/firefox/all.html" target="blank">Get The Firefox Out Now!</a></div>

Nach rechts ist mir klar warum. Das ist der Grund die "margin-right:60%;" aber warum schließt er oben und unten nicht ab?

So ich hab jetzt noch ein Bild angehängt wie es aussieht. Nun habe ich folgendes Problem:

Sobald ich

<div class="linkd"><ul><li><a href="http://www.mozilla.org/products/firefox/all.html" target="blank">Get The Firefox Out Now!</a></li></ul></div>

verwende macht er mir trotz padding angaben einen riesen Abstand zum Rand. Warum? Kann man das irgenwie umgehen. Wenn ich jetzt die Listen Tags weglasse funktionieren auch die Padding Angaben richtig. Das Bild ist mit verwendeten Listen Elementen gemacht. Das zweite Bild ohne und siehe da es funktioniert!

mfg Denis
mfg Denis

Re: CSS Problem

was willst du denn jetzt ganau machen, hab ich irgendwie nicht so ganz verstanden

related links: etc. soll ganz links in dem div-Element stehen ?
versuch mal dem <ul> ne Klasse zu geben und definiere für dieses <ul>-Element das padding-left:0;

btw gehört das zweite <ul>-Element nicht in das erste <li> ?

wozu machste denn in das div ein margin-right hin, der ohne breiten angabe sowieso nicht funktioniert und der inhalt, sofern linksbündig auch keinen abstand zur rechten Seite braucht, da er ja links hängt.

und nochmal, wenn alle padding werte gleich sind kann man padding: wert; schreiben, da musst du nicht alles extra aufführen! das gleiche was ich vorhin zu padding gesagt habe geht so für margin übrigens auch!

die Links funktionieren außerdem gar nicht: http://www.planet-standard.de/wordpress/<br />http://firebird-browser.de/” target=

Re: CSS Problem

also das funktioniert jetzt schon. Man musste für das "li" Element auch einen margin:0 definieren. Nun hab ich wieder eine Frage. Was ist an folgendem nicht XHTML Trans. konform ?

<object><div class="linkd">
<ul>
<li>Related Links:</li>
<ul>
<li><a href="http://www.link2.de" target="blank">link1</a></li>
<li><a href="http://www.link1.de" target="blank">link2</a></li>
</ul>
</ul>
</div></object>

Das sagt mir der Validator und ich versteh es ehrlich gesagt nicht ganz.

Und vielleicht kann mir noch jemand sagen, warum nach dem <ins> in der ersten News und auch in der zweiten zu sehen, ( www..de) die Schrift vom Internet Explorer und Opera nicht durchgehalten wird. Der FF stellt sie richtig dar.

mfg Denis

Edit:

Ich hab es selber gelöst.

Für alle die unter XHTML eine <ul> Liste verschachteln wollen, das Schema sieht wie folgt aus.

<ul>
<li> Oberbegriff
<ul>
<li>unterbegriff</li>
<li>2.unterbegriff</li>
</ul>
</li>
</ul>

mfg Denis

Re: CSS Problem

So ich weiß das es ein Doppelpost ist, aber ich muss es nochmal nach oben holen denn ich hab eine Frage an die CSS Profis unter euch.

Die folgende Listenstruktur liegt dem ganzen zu Grunde.

<span class="linkd">
<ul>
<li> Oberbegriff
<ul>
<li>unterbegriff</li>
<li>2.unterbegriff</li>
</ul>
</li>
</ul>
</span>

Nun hab ich folgenden CSS Code:

.linkd a {
font: "helvetica";
color: #00000;
font-size: 110%;
text-decoration: none;
letter-spacing:1px;
}

.linkd ul {
border: 1px dashed #ddd;
margin-left:0px;
padding-left:10px;
}

.linkd ul li {

text-decoration:underline;
list-style-type: none;
}

.linkd ul li ul {
border-style:none;
margin-top: 5px;
padding-left:25px;
text-decoration:none;
}

.linkd ul li ul li {
list-style-type: square;
text-decoration:none;
}

.linkd {
margin-bottom:15px;
margin-top:15px;
margin-left:0px;
text-align:left;
}

zu Grunde liegen.

Nun folgendes Problem. In der übergeordneten Liste soll das Listen Element bzw der Inhalt unterstrichen sein und dann in der untergeordneten Liste sollen die Listen Elemente nicht mehr unterstrichen sein. Warum um Gottes Willen werden die untergeordneten Listen elemente dann vom Firefox trotzdem unterstrichen

www..de Dort gleich in den ersten News kann man das Problem anhand der "Related Links" sehen. Hier ist "Realted Links" unterstrichen und die Links sollen eigentlich nicht unterstrichen sein. Aber sie sind es Im Internet Explorer wird es richtig dargestellt. Gibt es vielleicht einen Trick das ganze zu umgehen ? Sobald ich das "underline" bei dem übergeordneten Element rausnehme verschwindete auch der Unterstrich bei dem untergeordneten Element.

mfg Denis

Re: CSS Problem

http://jigsaw.w3.org/css-validator/...d.de/wordpress/index.php?cat=1&usermedium=all

kann gut sein, dass dieses Verhalten ein Bug in Firefoxs Render Engine ist, schon mal in Bugzilla nachgeschaut ?

Re: CSS Problem

Ich sehe gerade den Fehler nicht, habe aber eben eine Seite geschrieben, die dein Problem einzeln darstellt.
Ist allerdings kein XHTML, dürfte aber auch nicht ausschlaggebend sein.

Re: CSS Problem

@Benjamin

Das kann gut sein. Wie kann ich es überprüfen ? Hab auch die Fehler im CSS File jetzt ausgebessert

mfg Denis

Re: CSS Problem

Muss man die div-Tags nicht wie folgt schreiben?


Wenn ich bei mir die div-Tags so wie du mit den CSS-Sheets verknüpfe, dann funzt bei mir GARNICHTS

Re: CSS Problem

BurningStar4 schrieb:

Muss man die div-Tags nicht wie folgt schreiben?

Code:

<div class="id" id="schlacgmichtot"></div>

Wenn ich bei mir die div-Tags so wie du mit den CSS-Sheets verknüpfe, dann funzt bei mir GARNICHTS

Zum Vergrößern anklicken....

wir sind schon bei einem anderen Problem Das mit den divs war mein Fehler aber diesmal ist es nicht mein Fehler *g Und so langsam glaube ich an einen Render Bug der Gecko Engine Hab keinen gefunden der es mir erklären konnte *g XHTML valid und CSS valid und trotzdem falsche Darstellung im FF und Opera ... Naja ich bin mit meinem Latein am Ende *g

Re: CSS Problem

Bin ich eigentlich der einzige, der meinen Post mit dem Beispielcode sehen kann? Das Beispiel macht genau das, was du beschrieben hast und funktioniert sowohl im IE als auch im Firefox.

Re: CSS Problem

Nase schrieb:

Bin ich eigentlich der einzige, der meinen Post mit dem Beispielcode sehen kann? Das Beispiel macht genau das, was du beschrieben hast und funktioniert sowohl im IE als auch im Firefox.

Zum Vergrößern anklicken....

funktioniert es auch wenn du es als Klasse definierst ? Ich hab ja mehrmals die Related Links und nach XHTML darf eine ID nur einmal vorkommen.

mfg Denis

PS: ich teste es nacher mit Klassen hab nur im Moment keine Zeit.

-------

Hab noch eine Frage an euch. Weiß einer von euch wie man am einfachsten eine Kategorie auf meiner Page mit einem Passwort schützen kann. Hierbei muss man wissen, dass die Links aus einer Datenbank generiert werden. Ich weiß halt die genau ID des Links der geschützt werden soll.
Würde mich freuen wenn das irgendwie möglich ist.

mfg Denis

Re: CSS Problem

Nase schrieb:

Bin ich eigentlich der einzige, der meinen Post mit dem Beispielcode sehen kann? Das Beispiel macht genau das, was du beschrieben hast und funktioniert sowohl im IE als auch im Firefox.

Zum Vergrößern anklicken....

also bei mir ist immer noch alles unterstrichen.

Nicht mal !important bringt was... Das ganze ist wirklich sehr komsich

Re: CSS Problem

Benjamin_L schrieb:

also bei mir ist immer noch alles unterstrichen.

Nicht mal !important bringt was... Das ganze ist wirklich sehr komsich

Zum Vergrößern anklicken....

Bei mir gehts?!

Re: CSS Problem

Nase schrieb:

Bei mir gehts?!

Zum Vergrößern anklicken....

also mit FX 1.0 und FX 1.0+ gehts bei mir nicht

Re: CSS Problem

Benjamin_L schrieb:

also mit FX 1.0 und FX 1.0+ gehts bei mir nicht

Zum Vergrößern anklicken....

Hab meinen Fehler gefunden. In der Version, die ich getestet habe, hatte ich die zweite Liste ausserhalb des Listenpunktes der ersten Liste eingebaut. Erst beim Posten hab ich diesen Fehler bemerkt und "verschlimmbessert".

Zum eigentlichen Problem habe ich aber auf diese Weise nichts neues herausgefunden. Allerdings würde ich den Fehler einfach so umgehen, dass man den Punkt "Related Links" überhaupt nicht erst mit in die Liste aufnimmt sondern als ganz normalen Text definiert.

Re: CSS Problem

hmm hat jetzt jemand von euch schon bugzilla befragt? Sonst mach ich da mal nen neuen bug auf und schau ob der als duplikat abgewiesen wird (dann wissen wir den original bug) oder ob das nun wirklich ein neuer bug is.