DIV wird durch Border Vergrössert

betagold · 29. Juli 2014 11:01

Hallo,

nach dem ich mich jetzt ein Halbes Jahr mit CMSMS Auseinandergesetzt habe stehe ich Vor einem Neuem Problem, ich erstelle eine Navigation mit Hintergrundfarbe und Rahmen nun ist es aber so das wenn ich dem DIV einem Border hinzugefügt habe bleibt der DIV nicht Gleich Groß sondern er wird Größer.

Bild

Andynium · 29. Juli 2014 11:24

Tritt dieses Verhalten in allen Browsern auf?

Mit so wenigen Details lässt sich der magischen Glaskugel nur wenig entlocken.

Grundsätzlich solltest du mal nach reset Stylesheets googlen. Damit kannst du alle Browser auf die gleichen Voreinstellungen bringen. Manche Browser verwenden (ungefragt) bestimmte Werte für margin und padding, wenn die in der CSS nicht eindeutig definiert sind.

betagold · 29. Juli 2014 11:56

Also es ist so das ich Margin oder Padding im Menü nicht Verwende das der DIV Größer wird liegt an CMSMS da ich den CSS Code auch in einer Normalen HTML Seite getestet habe und Dort wird der DIV nicht Größer sondern es wird lediglich der Rahmen Hinzugefügt. Das Menü sieht in Allen Browsern Gleich aus.

CSS

Hier klicken, um den Code zum Kopieren zu markieren

#navi {
background-color: #d20000;
width: auto;
height: auto;
text-align: center;
border-top: 5px solid #484f53;
border-bottom: 5px solid #484f53;







}


#navitext a {
color: #FFFFFF;
font-size: 15px;

Andynium · 29. Juli 2014 13:00

Vielleicht ist gerade das das Problem, dass du margin/padding nicht verwendest. Wie gesagt, momentan kann ich nur raten.

Setz die Werte doch einfach mal auf 0. Nichts anderes macht eine Reset CSS.

NaN · 29. Juli 2014 13:25

Wenn etwas mit CMSms im Browser nicht so aussieht wie in einer normalen HTML-Seite, dann liegt das daran, dass Dein Template (und/oder CSS) eben nicht exakt genau so ist wie die normale HTML-Seite.

Ohne den HTML Code dazu, bringt uns das CSS Schnipsel leider nicht weiter.
Alles was ich dazu sagen kann, ist, dass es unvollständig und somit fehlerhaft ist.
Aber das hilft Dir auch nicht weiter.

Hast Du mal einen Link zur Seite?

Wenn nicht, vergleiche mal HTML und CSS von deiner HTML-Seite mit der HTML-Ausgabe von CMSms. (Stichwort Firebug etc.) Worin liegt der Unterschied?

Wenn Template und CSS nicht allzu groß sind, kannst Du das auch hier posten bzw. als Zip-Datei hochladen und von Deinem Beitrag aus verlinken.

betagold · 29. Juli 2014 14:17

Hier ist erst mal der HTML Code (mehr als das Menü existiert nicht), Padding, Margin 0 habe ich auch schon Probiert bringt auch nichts. Die HTML Codes sind auch Gleich bis auf {menu} ein Link zur Seite gibt es nicht da ich per XAMPP Offline bastle.

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename}</title>
{metadata}
{cms_stylesheet}
</head>
<body>

<div id="navi"><div id="navitext">{menu}</div></div>

</body>
</html>

Beitrag geändert von betagold (29. Juli 2014 14:22)

rage_all · 30. Juli 2014 12:19

Wie NaN schon geschrieben hat - es kann nicht sein, dass derselbe Code auf demselben Browser unterschiedliche Ergebnisse produziert. An irgendeiner Stelle muss es einen Unterschied geben zwischen Deiner statischen HTML und der erzeugten HTML von CMSMS.
Fest steht, dass das System nicht aus Laune heraus Styles ins Rennen wirft. Entweder hast Du das irgendwo eingestellt, oder es hängt aus anderen Gründen drin (z.B. wegen eines Moduls, JavaScript, Inline, etc.).

Hast Du Debugging-Tools? Sind inzwischen in jedem Browser von Haus aus drin. Wie dem auch sei, empfehle ich Firebug für Firefox. Da kannst Du (ziemlich) genau herauslesen warum ein Element ein Aussehen hat.

NaN · 30. Juli 2014 12:47

Von dem was hier bisher an Informationen kamen, kann ich maximal das hier nachbauen. Das allein reicht aber nicht aus, weil ich das geschilderte Problem so nicht sehen kann.

Ich kann jetzt nur vermuten, dass die <li> in der Navigation mit der CSS Eigenschaft "float:right" formatiert sind und daher die tatsächliche Höhe des <div id="navi"> von der Laune des Browsers abhängt.

Forum für CMS/made simple

#1 29. Juli 2014 11:01

DIV wird durch Border Vergrössert

#2 29. Juli 2014 11:24

Re: DIV wird durch Border Vergrössert

#3 29. Juli 2014 11:56

Re: DIV wird durch Border Vergrössert

#4 29. Juli 2014 13:00

Re: DIV wird durch Border Vergrössert

#5 29. Juli 2014 13:25

Re: DIV wird durch Border Vergrössert

#6 29. Juli 2014 14:17

Re: DIV wird durch Border Vergrössert

#7 30. Juli 2014 12:19

Re: DIV wird durch Border Vergrössert

#8 30. Juli 2014 12:47

Re: DIV wird durch Border Vergrössert

Fußzeile des Forums