✔ Abstand zwischen <li></li><li></li>

[Philipp-]

Hallo Community,

habe folgendes Problem:

http://ref.easycoding.info/kunden/katrinschiller/

Schaut euch das Design an. Zwischen der Navi, also den einzelnen Buttons sind so kleine Lücken. Ich bekomme diese einfach nicht weg, könnt ihr mir helfen?

Btw. ich weiß dass die Hover Bilder von den Buttons fehlen, diese kommen aber noch.

Würde mich über eure Hilfe freuen.

so long
Philipp

Ps: Wie kann man eignetlich das Upload Feld + Durchsuchen Button optisch ändern, also ein anderes Hintergrund Bild für das Eingabe Feld und für den Button reinmachen?

 

[Maik]

Hi,

setz mal die folgenden Regelerweiterungen im Stylesheet ein, um die Lücken zwischen den Listenpunkten zu schliessen:

#nav ul li {
        list-style:none;
        padding:0;
        margin:0;
        float:left;
        }
#nav ul li a, #nav ul li a img { 
        display:block;  
}

Zu deiner zweiten Frage empfehle ich dir CSS2/DOM - Styling an input type="file".

 

[Philipp-]

Danke schön, funktioniert nun alles bestens.

Hab nun doch noch ein weiteres Problem mit einem anderen Design:

http://ref.easycoding.info/kunden/portfolie/#

Eignetlich sollte hier hinter dem Contentbereich eine Backgorund Farbe sein,
und kein zu großes Images, deshabl wollte ich es so lösen, dass oben das Image ist,
und wenn das Image aufhört, soll die Hintergrundfarbe einsetzen. Dies klappt irgendwie
nicht so wie ich es mir vorgestellt habe. Außerdem verlängert sich der Contentbereich im Ie und FF nicht, wenn einer der Boxen, welche den Text anzeigen, größer wird als der Content.
Könnt ihr mir vllt helfen?

Wäre sehr nett.

mfg
Philipp

 

[Maik]

Hi,

dass die Box bei zunehmenden Inhalt nicht "mitwächst" liegt zum einen an der festen Höhenangabe für das DIV .contentBgImg und zum anderen daran, dass die Floatumgebung zum Schluss nicht "gecleart" wurde.

Lösung:

.contentBgImg {
        background-color:#2A2B2C;
        background-image:url(http://ref.easycoding.info/kunden/portfolie/images/contentBg.png);
        background-repeat:repeat-x;
        background-position:top;
        width:86%;
        min-height:153px;
        height:auto !important;
        height:153px;
        margin-top:15px;
        padding:7%;
        padding-top:25px;
        text-align:left;
        font-family:Tahoma;
        font-size:10px;
        color:#E6F0F4;
        }


.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann zusätzlich im DIV .contentBgImg aufgerufen:

<div class="contentBgImg clearfix"> ... </div>

Das Problem mit der Hintergrundfarbe kann ich derzeit nicht so recht nachvollziehen, da sie grundsätzlich im Content-Bereich angezeigt wird.

 

[Philipp-]

Danke dir, funktioniertt Prima.
Könnte man die float Umgebung nicht einfach nach dem div layer mit <br clear="all" /> "clearen"?

Schau dir nun die Seite mal im Ie an, und dann im FF, dann verstehst du glaub ich, was ich mit der Hintergrund Farbe meine im Contentbereich.

mfg
Philipp

 

[Maik]

Solange die Box, wie von mir empfohlen, nicht "gecleart" wird, zeigt Firefox auch nicht die vollständige Hintergrundfarbe an.

 

[Philipp-]

ups dachte ich hab die neue index.html schon hochgeladen. nun passt alles.
dankeschön für deine Hilfe.

 

[Philipp-]

Habe wieder ein Problem mit einer Navi Innerhalb von <ul><li>
Habe schon alles versucht und ich verzweifle echt.
Bitte helft mir, wäre echt nett.

So hier mal den Link: http://ref.chrunchi.de/kunden/andy/

Ihr seht sicher wo das Problem ist. Die Grafik navRight.png soll hinter den Letzen Navi button.
Dies bekomm ich nicht hin, bzw. es will einfach nich klappen. Könnt ihr mir vllt weiterhelfen?

mfg
Philipp

 

[Maik]

Hi,

setz noch die Polsterungseigenschaften des Listenelements auf null:

#nav ul {
margin:0;
padding:0;
}

 

[tuFrogs]

Und deinen Hintergrund solltest du nochmals überarbeiten.. ^^