mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 18:32 Benutzername: Passwort: Auto-Login

Thema: [CSS] Feinschliff vom 26.03.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Feinschliff
Seite: 1, 2  Weiter
Autor Nachricht
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: Männlich
Verfasst Mo 26.03.2007 13:10
Titel

[CSS] Feinschliff

Antworten mit Zitat Zum Seitenanfang

Hallo allerseits,

Es geht um diese Seite.
Da auf den Thread keiner ne Antwort wusste, versuch ich es jetzt nochmal konkreter (ich hab mal nen neuen Thread gemacht, da ich die meisten "Sorgen" nicht mehr habe *zwinker*). Die meisten Probleme konnte ich übers Wochenende beheben, aber ein paar "Kleinigkeiten" stören noch. Vielleicht weiß ja jemand eine Lösung:

1. Wie schaffe ich es die Hauptnavi exakt zu positionieren (im FF und IE)?! Im Moment siehts so aus:

FF:



und IE (6):



Ich möchte das die Schrift mittig sitzt, und die dottet-Linie von oben bis unten geht (also unten fehlen noch ca. 3px oder so). Vor allem bekomm ich es im FF und IE nicht einheitlich.


2. Wie schaffe ich es, das die Subnavi nicht "springt"? Im Moment siehts so aus:




Bei Hover und im ausgewählten Zustand kommen links und rechts 2 Balken rein, diese "versetzen" aber meine Schrift...das soll nicht sein, sondern die Balken (mit Border realisiert) sollen einfach neben der Schrift erscheinen.

3. Der Footer ist soweit in Ordnung, nur wenn ich den Browser verkleiner und scrolle steht er plötzlich mitten in der Seite...wie bekomm ich den Bug weg?





Danke im voraus, wäre über Hilfe wirklich dankbar, langsam weiß ich nicht mehr weiter...

CU
Lio Grins


Zuletzt bearbeitet von LioGetz am Mo 26.03.2007 13:12, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Pixelflow

Dabei seit: 30.11.2004
Ort: Lübeck
Alter: 38
Geschlecht: Männlich
Verfasst Mo 26.03.2007 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

Zu 1.) Der IE6 kann kein "dotted". Jedenfalls nich so, wie der FF das kann. Da kannst du höchstens mit Bildern arbeiten, wenn du das einheitlich haben willst. Damit die Schrift "mittig" sitzt, versuch doch ma, nach dem <li> keinen Umbruch zu machen und das so zu schreiben <li><a></a></li>.

Zu 2.) Quick & Dirty-Lösung: Dem <ul> nen negativen Einzug nach rechts geben und den <a>-Tags das Padding, das sie beim :hover bekommen schon vorher zuweisen.
Saubere Lösung: Die gesamte linke DIV um das Padding der Links breiter machen, der Headline einen "positiven"(!) Margin von rechts geben (entsprechend dem Wert des Padding) und dann entsprechend noch das UL anpassen, sprich die Links mit dem entsprechenden Margin und Padding richtig positionieren. Is en bissi Fummelarbeit.

Zu 3.) Hier gibt es unzählige Workarounds, aber ich hab hier selber noch nich das "optimale" gefunden. Nutz ma die SuFu. In Sachen "body height 100%" gibt's da sicherlich schon unzählige Beiträge.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: Männlich
Verfasst Mo 26.03.2007 13:47
Titel

Antworten mit Zitat Zum Seitenanfang

Hmmm, danke schonmal, aber das klappt noch nich so richtig...

1.) Ich hab das doch ohne Umbruch, oder was meinst du?!

Code:
   
<div id="mainnavi">
      <ul>
         <li><a class="mainnavi" href="#">Home</a></li>
         <li><a class="mainnavi" href="#">Profil</a></li>
         <li><a class="mainnavi" href="#">Angebot</a></li>
         <li><a class="mainnavi" href="#">Referenzen</a></li>
         <li><a class="mainnavi" href="#">Kontakt</a></li>
      </ul>
   </div>


zu 2.) Das mit dem Padding klingt irgendwie logisch, aber was mach ich da falsch (bei der Quick&Dirty-Lösung??)

Code:

ul.subnavi {
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px;
   color: #000000;
   font-variant:small-caps;
   position: relative;
   text-align: right;
   margin-right: 20px;
   margin-top: 0px;
   padding: 0px 5px;   /*DAS hab ich jetzt neu eingefügt*/
}

li.subnavi{
   list-style-type: none;
   padding: 2px;
}

a.subnavi:link{
   padding: 0px 5px;     /*DAS auch, damit der Link schon vorher das Padding hat ????*/
   color:#000000;
   text-decoration:none;
}
a.subnavi:visited{
   color:#000000;
   text-decoration:none;
}
a.subnavi:hover{
   padding: 0em 5px;    /*Das war das normale Padding, damit die Stiche von der Schrift entfernt sind*/
   border-left:1px;
   border-top:0px;
   border-bottom:0px;
   border-right:1px;
   border-style:solid;
   border-color:#000000;
   text-decoration:none;
   }
a.subnavi:active{
   color:#000000;
   text-decoration:none;
}


* Keine Ahnung... * , springt irgendwie immer noch...

// edit:
Und gleich noch ne Frage. In meiner Hauptnavi hab ich allen Elementen nen linken gepunkteten Border gegeben. Soweit - so gut, aber das letzte Item (Kontakt) muss links & rechts einen Border bekommen - damit das sozusagen nen Abschluss hat. Wie geht das, das ich ne "Unterklasse" oder sowas einrichte, das alle Einstellungen von "mainnavi" bekommt, aber zusätzlich noch rechts nen Border??

Danke,
CU
Lio Grins


Zuletzt bearbeitet von LioGetz am Mo 26.03.2007 14:02, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Pixelflow

Dabei seit: 30.11.2004
Ort: Lübeck
Alter: 38
Geschlecht: Männlich
Verfasst Mo 26.03.2007 14:06
Titel

Antworten mit Zitat Zum Seitenanfang

Kleiner Tipp am Rande:
Verabschiede dich evtl. auch ma von diesem "position: absolute". Mittig positionieren kannst du auch mit:
margin: 0 auto;
position: relative;

.. wobei du die "position" in den meisten Fällen gar nicht angeben musst!

Zur Mainnavi:
Okai, sry, mein Fehler .. hab mich verguckt. Irgendwie scheint der LI hier noch rechts en Margin zu haben (wenn man sich's im FF mit dem Firebug genau anschaut). Kann mir aber nich so richtig erklären, wo der herkommt. Statt "display: inline;" versuch ma "float: left;" beim LI der Mainnavi

Zur Subnavi:
Code:
ul.subnavi {
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px;
   color: #000000;
   font-variant:small-caps;
   position: relative;
   text-align: right;
   margin-right: 10px;
   margin-top: 0px;

}

li.subnavi{
   list-style-type: none;
   padding: 2px;
}

a.subnavi,
a.subnavi:link,
a.subnavi:visited,
a.subnavi:active {
   color: #000000;
   border-left: 1px solid #ffffff;
   border-right: 1px solid #ffffff;
   padding: 0 5px;
   text-decoration: none;
}


a.subnavi:hover{
   border-color: #000000;
   text-decoration: none;
}



Zum EDIT:
Gib dem letzten LI id="last" dann kannst du den speziellen LI ansprechen:

div#mainnavi li#last {
border-right: 1px dotted #000000;
}


Zuletzt bearbeitet von Pixelflow am Mo 26.03.2007 14:08, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
haselnusstafel

Dabei seit: 27.06.2006
Ort: -
Alter: 57
Geschlecht: Weiblich
Verfasst Mo 26.03.2007 14:18
Titel

Antworten mit Zitat Zum Seitenanfang

wenn Du den letzten Navigationspunkt mit ner Border rechts benötigst so gibst in der Webseite meinetwegen li class="rechts" ein

in der css dann

Code:


#mainnavi li.rechts{
   list-style-type: none;
   padding: 1px 10px;
   border-left: 1px dotted #828282;
        border-right: 1px dotted #828282;
   display: inline;
   margin-left: 0px;
   margin-top: 0px;
   margin-bottom: 0px;

}


Zuletzt bearbeitet von haselnusstafel am Mo 26.03.2007 14:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Pixelflow

Dabei seit: 30.11.2004
Ort: Lübeck
Alter: 38
Geschlecht: Männlich
Verfasst Mo 26.03.2007 14:27
Titel

Antworten mit Zitat Zum Seitenanfang

Wegen der Mainnavi ..

.. du hast ja sowieso das Problem, dass der IE das "dotted" anders darstellt. Dementsprechend würde ich das wahrscheinlich dann sowieso anders lösen:

<img><a><img><a><img><a><img>

Klar, dass das mit dem Listing ne saubere CSS-Variante darstellt, aber diese wär genauso valide. *bäh*

Dadurch ergibt sich für das CSS dann:

Code:
div#mainnavi img {
    vertical-align: middle;
}

div#mainnavi a,
div#mainnavi a:link,
div#mainnavi a:visited,
div#mainnavi a:active {
   color: #828282;
   padding: 1px 10px;
   text-decoration: none;
}

div#mainnavi a:hover {
   color: #FFFFFF;
}


Zuletzt bearbeitet von Pixelflow am Mo 26.03.2007 14:27, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: Männlich
Verfasst Mo 26.03.2007 14:55
Titel

Antworten mit Zitat Zum Seitenanfang

Hola,

erst "Danke", das mit dem Submenü und der rechts-dottet-Linie hat gut geklappt...was die Mainnavi angeht, so würde ich doch wenn möglich auf die img-variante verzichten.
Die Unterschiedliche Darstellung des IE (da sind die Dots irgendwie größer) ist mir noch mehr oder weniger egal - wichtiger ist mir das die Linie oben und unten "andockt", und das ist mir noch schleierhaft...für die "Länge" der Border ist anscheinend der erste Padding-Wert hier zuständig:

Code:

#mainnavi li{
   list-style-type: none;
   padding: 1px 10px;
   border-left: 1px dotted #828282;
   display: inline;
   margin-left: 0px;
   margin-top: 0px;
   margin-bottom: 0px;      
}

(da wo jetzt 1 Pixel steht)...klar kann ich den wert erhöhen, aber dann geht die Linie oben hinaus, und unten ist sie dann bündig (im Moment ist sie oben bündig und unten fehlt n Stück)...DAS muss man doch irgendwie "eingestellt bekommen - egal ob die Linien sich im IE oder FF unterscheiden.

Danke,

CU
Lio Grins
Ist das möglich?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 26.03.2007 15:52
Titel

Antworten mit Zitat Zum Seitenanfang

Was deine Navigation angeht, es ist doch eigentlich so einfach:

Zitat:
Ich möchte das die Schrift mittig sitzt, und die dottet-Linie von oben bis unten geht


Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
* {
   margin:0;
   padding:0;
}
ul {
   height:100px;
   list-style:none;
   background:#333;
}
ul li {
   float:left;
   height:100px;
   line-height:100px;
   padding:0 12px 0 12px;
   color:#FFF;
   border-right:1px dashed #FFF;
}
-->
</style>
</head>
<body>
   <ul>
      <li>MenüPunkt</li>
      <li>MenüPunkt</li>
      <li>MenüPunkt</li>
      <li>MenüPunkt</li>
      <li>MenüPunkt</li>
      <li>MenüPunkt</li>
   </ul>
</body>
</html>


Zuletzt bearbeitet von m am Mo 26.03.2007 15:54, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.