Beiträge von dih

dih

Warum? Da er sonst bei langen Zeilen den Text abschneidet und man dann den Rest nicht lesen
kann, wenn keine Scroll-Möglichkeit nach rechts besteht. Bei folgenden Bsp siehe unter:

http://www.cssdesignpatterns.com/Chapter%2006%2…ow/example.html

klappt es ja auch... Bei mir scheint die overflow-Eigenschaft aber nicht zu greifen...oder man muss die noch irgendwie erst zuschalten. Hat da keiner eine Idee oder den Code wie dieses Bsp (siehe Link) umgesetzt ist?

- - - Aktualisiert - - -

Habe es jetzt so gelöst. Was mir allerdings nicht gefällt ist, das ich nun erst ganz nach rechts scrollen muss bevor
die vertikale Leiste erscheint. Schön wäre es, wenn immer vertikal zu scrollen geht egal auf welcher Position man sich auf der horizontalen Leiste befindet.

PHP

<div style="width:450px; overflow-x:auto; overflow-y:auto;">
       <select id="selectAnzeigeLogDatei" multiple name="AnzeigeLogDatei" size="15">
          <?php foreach($ArrayDatei AS $Ausgabe){echo "<option>" . $Ausgabe. "</option>";}
       </select>
</div>

Also falls noch jemand einen Tipp hätte, wäre das ganz toll

dih

Hallo,

ich möchte mir eine Textdatei in eine Select-Box laden. Die Box sollte vertikal und horizontal zu scrollen
gehen. Leider bekomme ich es nicht hin, dass mir auch ein horizontaler Scrollbalken angezeigt wird. Ich
dachte dies wäre mit dem Befehl "overflow:scroll" oder "overflow:auto" möglich? Leider klappt dies bei
mir nicht...

Hier wäre der Code für meine Select-Box:

PHP

<form name="frmAnzeigeLogDatei" action="index.php" method="POST">
      <select multiple name="selectAnzeigeLogDatei" size="15" style="overflow:scroll; width:600px; hight:10px;" align="left">
        <?php foreach($ArrayDatei AS $Ausgabe){echo "<option>" . $Ausgabe. "</option>";} //Datei in Listbox ausgeben ?>
      </select>
  </form>

dih

Bei der ersten Anzeige: 1.) einlesen Stylesheet 2.) Anzeige des Div-Elementes

klappt alles. Anschließend werden weitere PHP-Dateien aufgrufen, wenn ich dann wieder die PHP-Datei
aufrufe in der auch das DIV-Element enhalten ist, klappt das Styling nicht mehr. Beim IE funktioniert
es aber. Anscheind hat Firefox die Einstellungen des Stylesheet vergessen...?

dih

Ich meine #dInhalt4_3

dih

Hallo, ich möchte ein DIV-Element wie folgt positionieren.

Code CSS:

Code

#dInhalt4_3 { 
  position: absolute;
  background-color: red;
  width: 500px;
  height: 800px;
  top: 20px;
  float: left;
  font-size: 13px;
  padding-left: 10px; 
}

Mit dem IExplorer funktioniert dies einwandfrei. Bei Firefox lässt sich weder die Höhe mit "top" positionieren
noch kann ich mir die größe des DIV-Elementes überhaupt ansehen, d.h. die background-color: red; zeigt
er mir auch nicht an. Das Einzige was funktioniert ist die Veränderung der Schriftgröße?
Woran kann dies liegen?

dih

Hallo, es handelt sich um eine horizontale Navigationsleiste mit 4 Links. Der HTML-Code
ist folgender:

HTML

<div id="dnav"> 
       <ul>
           <li><a>href="#.php">Start</a></li>
           <li><a>href="#.php">Auswertung: 1</a></li>
          <li><a>href="#.php">Auswertung: 2</a></li>
          <li><a>href="#.php">Auswertung: 3</a></li>   
      </ul>
  </div>

Das zugehörige CSS-File:

Code

#dnav {
   background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
   width: 900px;                     /* Breite des Bereichs */
   height: 40px;
 }
#dnav ul {
  list-style: none;               /* keine Aufzählungspunkte */
  float:left;  
  width: 900px; /*Breite der Navileiste festlegen*/
  padding: 0px;
  margin: 0px;
  display: block;
}
#dnav li {
  float:left;                     /* Anordnung links   */
  width:140px;                     /* Breite der Links festlegen */      
  height: 45px; 
  border-right: 1px solid #dfdfdf;  /* trennt die Links voneinanander jeweils rechts */ 
  display: block;

#dnav a{
  text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
  display: block;
  color: #919191; /* Schriftfarbe des Textes der Navi-Elemente*/
  font-size: 12pt;
  font-family: Courier;
  font-style: normal; /* Schrift normal */
  text-align:center;

  /*
  padding-top:center;
  padding-bottom:center;

  /*
  margin-left:auto; 
  margin-top:auto;
  margin-right:auto; 
  margin-bottom:auto;
  /*
  padding-left:auto; 
  padding-top:auto;
  padding-right:auto;
  padding-bottom:auto;
  */

Alles anzeigen

Die Breite der Boxen ist unter "#dnav li" festgelegt mit 140px. Dadurch werden die Links
"Auswertung: 1 -3" zweizeilig dargestellt, was auch so sein soll. Nun kann ich aber nicht mit
padding (left, right, top, bottom) den Text ausrichten, da ja der Link "Start" nur einzeilig ist.
Ich suche also eine Methode mit der Text in der Box automatisch mittig ausgerichtet wird.
Unter "#dnav a" habe ich mittels

Code

text-align:center;

den text zumindest von
Links nach rechts mittig hinbekommen. Aber wie bekomme ich ihn auch mittig von oben nach unten.
Ich habe auch schon probiert:

Code

padding-top:auto;padding-bottom:auto;

Brachte alles
nichts...

dih

Ok, danke hat funktioniert. Kann man auch dann auch gleichzeitig beim Listenelement die Farbe mit ändern? Ich habe mal folgendes
versucht:

Code

#dnav li.auswahl
{
background-color: black;
}

Leider hat sich da nichts geändert. Man kann vermutlich nur die Farbe der Links bei Klick ändern oder?

dih

Hallo, ich habe eine Navigationsmenü mit 4 Links. Bei Klick des jeweiligen Links
wird die Seite neu geladen, dabei soll der geklickte Link eine andere Farbe als die
anderen erhalten. Mein HTML-Code ist folgender:

HTML

<link href="navi.css" type="text/css" rel="stylesheet">
<div id="nav">
  <ul>
     <li><a href="08.navi.html?page=1"<?php if (@$_GET['page']  == '1') echo 'class="active"'; ?> >Link1</a></li>
     <li><a href="08.navi.html?page=1"<?php if (@$_GET['page']  == '1') echo 'class="active"'; ?> >Link2</a></li>
     <li><a href="08.navi.html?page=1"<?php if (@$_GET['page']  == '1') echo 'class="active"'; ?> >Link3</a></li>
  </ul>
</div>

Inhalt des Stylesheet: navi.css

Code

#nav {
   width: 800px;                   /* Breite des Bereichs */
   text-align: left;               /* Textausrichtung     */
   margin-top: 10px;               /* Außenabstand oben   */
   margin-bottom: 10px;            /* Außenabstand unten  */
   margin-left: 20px;              /* Außenabstand links  */
   margin-right: 15px;             /* Außenabstand rechts */
}
 
#nav ul {
   list-style: none;               /* keine Aufzählungspunkte */
}
 
#nav li {
   float:left;                     /* Anordnung links   */
   margin-left:15px;               /* Außenabstand links */
   width:90px;   

   background-color: silver;       /* Hintergrundfarbe   */
   border-top: 1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left: 25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom: 1px red solid;   /* Rahmenfarbe unten  */
   border-right: 2px blue solid;   /* Rahmenfarbe unten  */
   margin-top: 10px;               /* Außenabstand oben  */
   padding-top: 8px;               /* Innenabstand oben  */
   padding-bottom: 8px;            /* Innenabstand unten */
   padding-left: 8px;              /* Innenabstand links */
   padding-right: 8px;             /* Innenabstand rechts */
} 


.nav a.active
{
color: #FFF;
background-color: black;
padding: 5px 8px;
}

Alles anzeigen

Ich versuche also über die class "active" den aktuellen Link eine andere Hintergrundfarbe zu geben. Leider
funktioniert dies nicht. Kann es sein das er dies im CSS-File nicht findet? Ich habe auch schon folgende
Schreibweise versucht: #nav a.active hatte aaber auch nicht gebracht.

dih

Hallo MrMurphy,

die Seite habe ich nur offline. Ich habe jetzt nur mal den Part rausgenommen und das ganze mit einer HTML-Datei für
das Menü und einer Datei für das Styling:

navi.html

HTML

link rel="stylesheet" href="style.css" type="text/css"/>


<body>
 <div id="dNav"> <!-- Container für Navigationsleiste -->
              <nav>  
                  <ul>
                     <li><a href="test1.php" class="cNav">test1</a></li>
                     <li><a href="test2.php" class="cNav">test2</a></li>
                     <li><a href="test3.php" class="cNav">test3</a></li>
                  </ul>
              </nav> 
          </div> 
</body>

Alles anzeigen

Code: style.css

CSS

body{
    background-color:green;
}


nav {
    width: 900px;   /* Breite der Navileiste festlegen */
}
nav ul {
    padding: 0px;
    margin: 0px;


    /* Box-shadow fügt den <ul> Menüs einen kleinen Schatten hinzu  */
    box-shadow: 2px 2px 2px #dfdfdf; /* Schatten links 2px, oben 2px, Unschärfe 2px, Farbe */
    -moz-box-shadow: 2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}


nav ul:after {      /* nachfolgende Elemente nach ul (untergeodnete Listenelemente) */
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden; /* dadurch werden Listen der zweiten Ebene versteckt */
}


nav ul,nav ul li{
    background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
}
nav ul li {
    list-style: none; /* bei z.B. Style "decimal" erhalten Navi-Elemente eine Aufzählung vor dem Namen */
    float:left;      /* Anordnung der Navi-Elemente von links nach rechts */


    border-right: 1px solid #dfdfdf;
}
nav ul li a {
    text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
    display: block;
    color: #333; /* Schriftfarbe des Textes der Navi-Elemente*/
     padding: 10px 24px 10px 24px; /* Abstand Text nach oben, Abstand Text  nach rechts, Abstand Text nach unten, Abstand Text nach links */


    /* Bei Mouse hover wird per  transition: background ein leichter Fade Effekt auf die Hintergrundfarbe
       der Einträge gelegt. 0.3s gibt die Länge der Animation an und  ease-out führt zu einem schnellen 
       Start der Animation, um das Menü nicht träge zu machen. Der Transition Effekt wird ausgeführt sobald
       sich die entsprechende Eigenschaft ändert, in unserem Fall bei nav ul li.cat*:hover. */
    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}

nav ul li:hover > a {
    color: #FFFFFF;  /* Schriftfarbe wenn man mit der Maus drüber fährt */
    background-color: #808080; /* Hintergrundfarbe wenn man mit der Maus drüber fährt */ 
}


nav ul li:hover > ul {
     visibility: visible;  /* wenn Maus über Navigationselemente bewegt  wird, werden nachfolgende Listenelemente wieder sichtbar eingeblendet*/
}


nav ul li ul{
    display: inline;
    visibility: hidden; /* bei hidden wird Größe des kompletten Listenelements (inkl. Unterlisten)) nicht angezeigt */
    position: absolute; 
    padding:5px;       /* legt äüßeren Rahmen bei Unterlisten-Elementen fest */
}
nav ul li ul li{
    float: none;  /* Festlegung wie Unterlistenelemente angezeigt werden. z.B. left = von links nach rechts in einer Zeile */
}
nav ul li ul li a {
    color: #FAFAFA; /* legt Schriftfarbe der Unterlistenelemente fest */
}
nav ul li ul li a:hover{
    color: #333;  /* Schriftfarbe der Unterlistenelemente bei Auswahl des Elements per Maus */
     background-color: #FAFAFA !important; /* #FAFAFA Hintergrundfarbe der  Unterlistenelemente bei Auswahl des Elementes per Maus */
}

Alles anzeigen

Wie gesagt im Firefox sieht alles supi aus. Im IE macht er nur den Hintergrund grün, die Links bleiben unverändert... IE Version 10.0.9200.17357. Kann das noch eine Einstellung im IE direkt sein, die das verhindert?

dih

Hallo, folgender HTML-Code:

HTML

<link rel="stylesheet" href="css/main.css" type="text/css"/>


 <div id="dNav"> <!-- Container für Navigationsleiste -->
              <nav>  
                  <ul>
                     <li><a href="test1.php" class="cNav">test1</a></li>
                     <li><a href="test2.php" class="cNav">test2</a></li>
                     <li><a href="test3.php" class="cNav">test3</a></li>
                  </ul>
              </nav> 
          </div>

Alles anzeigen

Styling-Sheet main.css

Code

/* ###### einbinden weiterer Stylesheets ######*/
@import url(navi.css); /* Styling der Navigationsleiste */   


body
{
font-family: Arial;
background-image: url(../images/background.png) 
}

Das eigentliche Styling für die Navileiste wird in der navi.css gemacht. Bei Firefox
klappt dies alles super. Bei IE.v10 sehen die Links allerdings so aus als würde
gar kein Stylesheet existieren/aufgerufen.

Styling-Sheet: navi.css

CSS

nav {
    width: 900px;   /* Breite der Navileiste festlegen */
}
nav ul {
    padding: 0px;
    margin: 0px;


    /* Box-shadow fügt den <ul> Menüs einen kleinen Schatten hinzu  */
    box-shadow: 2px 2px 2px #dfdfdf; /* Schatten links 2px, oben 2px, Unschärfe 2px, Farbe */
    -moz-box-shadow: 2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}


nav ul:after {      /* nachfolgende Elemente nach ul (untergeodnete Listenelemente) */
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden; /* dadurch werden Listen der zweiten Ebene versteckt */
}


nav ul,nav ul li{
    background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
}
nav ul li {
    list-style: none; /* bei z.B. Style "decimal" erhalten Navi-Elemente eine Aufzählung vor dem Namen */
    float:left;      /* Anordnung der Navi-Elemente von links nach rechts */


    border-right: 1px solid #dfdfdf;
}
nav ul li a {
    text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
    display: block;
    color: #333; /* Schriftfarbe des Textes der Navi-Elemente*/
    padding: 10px 24px 10px 24px; /* Abstand Text nach oben, Abstand Text nach rechts, Abstand Text nach unten, Abstand Text nach links */


    /* Bei Mouse hover wird per  transition: background ein leichter Fade Effekt auf die Hintergrundfarbe
       der Einträge gelegt. 0.3s gibt die Länge der Animation an und  ease-out führt zu einem schnellen 
       Start der Animation, um das Menü nicht träge zu machen. Der Transition Effekt wird ausgeführt sobald
       sich die entsprechende Eigenschaft ändert, in unserem Fall bei nav ul li.cat*:hover. */
    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}

nav ul li:hover > a {
    color: #FFFFFF;  /* Schriftfarbe wenn man mit der Maus drüber fährt */
    background-color: #808080; /* Hintergrundfarbe wenn man mit der Maus drüber fährt */ 
}


nav ul li:hover > ul {
    visibility: visible;  /* wenn Maus über Navigationselemente bewegt wird, werden nachfolgende Listenelemente wieder sichtbar eingeblendet*/
}


nav ul li ul{
    display: inline;
    visibility: hidden; /* bei hidden wird Größe des kompletten Listenelements (inkl. Unterlisten)) nicht angezeigt */
    position: absolute; 
    padding:5px;       /* legt äüßeren Rahmen bei Unterlisten-Elementen fest */
}
nav ul li ul li{
    float: none;  /* Festlegung wie Unterlistenelemente angezeigt werden. z.B. left = von links nach rechts in einer Zeile */
}
nav ul li ul li a {
    color: #FAFAFA; /* legt Schriftfarbe der Unterlistenelemente fest */
}
nav ul li ul li a:hover{
    color: #333;  /* Schriftfarbe der Unterlistenelemente bei Auswahl des Elements per Maus */
    background-color: #FAFAFA !important; /* #FAFAFA Hintergrundfarbe der Unterlistenelemente bei Auswahl des Elementes per Maus */
}

Alles anzeigen

dih

Ich benutze notepad++ v6.5.5 (Unicode). Allerdings ist mir nicht ganz klar was der Editor damit zu tun. Ich dachte die
Angabe im Head der HTML-Datei ist für die Darstellung im Browser bestimmt. Der Inhalt wäre folgender:

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Auswertung</title>
  <!--
  <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>        
   -->
  <meta charset="utf-8" />
</head>

<body>
  <a href="Auswertung.php">zurück</a>
  <br /><br />
</body>

Alles anzeigen

Wenn ich anstatt "zurück" --> "zur&uumlck" schreibe gibt er mit ja "zurück" richtig wieder, ich hoffte dies eben durch
den Charset im Head steuern zu können.

- - - Aktualisiert - - -

Ok, habe jetzt einen anderen Editor (pspad) genommen. Die Einstellung war tatsächlich nicht auf Unicode sondern Ansi.
Jetzt funktioniert es.

dih

Hallo, ich bekomme es einfach nicht hin das die Umlaute richtig dargestellt werden. Er bringt mir anstatt des
Umlauts ein leeres Viereck. Ich habe es mit folgenden Einträgen im Head versucht:

HTML

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

oder auch:

HTML

<meta charset="utf-8" />

dih

Ok danke, habe meinen Fehler gefunden. Es war ein Kommentar vor dem HTML-Inhalt der allerdings nur beim beim IE diesen Effekt bewirkte... IE Version 10

dih

Hallo,

zur Darstellung des Login-Benutzers verwendet ich ein Fieldset-Element:

HTML

<fieldset>
      <legend>Login</legend>
      <span id="sS03">Nutzer:</span>
      <span id="sS03fett"><?php echo $_SESSION['username']; ?></span>
</fieldset>

Über ein CSS-File versuche ich nun die Darstellung des Fieldset-Elements zu strukturieren:

Code

#dHead fieldset{ /*Anzeige Login Benutzer*/
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
  width: 150px;             
  height: 35px;   
  left: 700px; 
  top:-5px;
  margin-left: 5px;    
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: absolute;     
}
#dHead  fieldset legend {
  font-size: 13px; /*Größe des Textes der Legende vom Fieldset-Element */
  color: blue;
}

Alles anzeigen

Die Darstellung im Firefox sieht auch ganz gut aus. Leider wird das Fieldset-Element im IE-Explorer viel zu schmal
angezeigt. Wenn ich nun aber die Höhe (height= 35px) größer stelle ist natürlich dann das Opjekt im Firefox zu groß...
Kann mir jemand hier weiterhelfen?

Darstellung siehe Bild:

Beiträge von dih

Select-Box mit horizontaler Scrollmöglichkeit

Select-Box mit horizontaler Scrollmöglichkeit

Positionierung Div-Elemente mit Firefox funktioniert nicht

Positionierung Div-Elemente mit Firefox funktioniert nicht

Positionierung Div-Elemente mit Firefox funktioniert nicht

Text in einem Blockelement mittig ausrichten

Navi --> aktiv geklickter Link andersfarbig

Navi --> aktiv geklickter Link andersfarbig

Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.10

Navi-Leiste stylen mit Hover-Effekt funktioniert bei Firefox aber nicht bei IE.v.10

Probleme mit Umlauten

Probleme mit Umlauten

Höhe des Fieldset-Element wird unterschiedlich im IE und Firefox dargestellt

Höhe des Fieldset-Element wird unterschiedlich im IE und Firefox dargestellt