Beiträge von lauras

http://archiv.raid-rush.ws/t-49193.html
http://de3.php.net/manual/de/ref.image.php

Schau dir das mal an. Ich denke vor allen Dingen der erste Link ist recht aufschlussreich, wenn auch leicht unübersichtlich.

LG
Laura

PS: 3 Minuten google-Arbeit xD

http://www.ohne-css.gehts-gar.net/0044.php

Um das hinzukriegen, solltest du dir diesen Link mal anschauen.

Sieht viel aus, ist aber recht einfach. Versuch mal, es zu verstehen. Wenn du fragen hast, frag xD

Die Tabelle kriegst du an den rechten Rand mit

<td width="[color=blue]100%[/color]" >
Inhalte
 </td>

Damit kriegt die rechte Zelle eine Breite von 100% des verfügbaren Platzes und geht damit bis an den Rand.

Die Doctype ist dazu da, das (X)HTML, was verwendet wird, zu deklarieren.
Nach dem standardkonformen XHTML macht man normalerweise das Design nicht mehr mit Tabellen, sondern mit CSS.
HTML zeichnet hierbei nur die Elemente aus; Position, Aussehen usw. wird alles über eine ausgelagerte CSS-Datei bestimmt.
D.h. Tabellen werden nur noch zur Auszeichnung von Daten vorgesehen, und da sind die Zellen nun mal nur noch so groß wie der Inhalt.
Möchtest du trotzdem eine Tabelle größer kriegen, benutz feste Breiten- und Höhenangaben.

Das Designen per Tabelle solltest du dir jedoch sofort aus dem Kopf schlagen - das macht man heute einfach nicht mehr!

Greetz
Laura

PS: Wenn du Code postest, mach das doch bitte zwischen

, das steigert die Lesbarkeit! Danke

Das war mir schon klar, aber ein leerer div ist ganz einfach gegen die Funktion eines divs^^ dann nimm doch den tag <hr />!

Grundsätzlich finde ich die Seite super, zumindest vom Design her, den Code habe ich mir nicht angeschaut.

Was ich nicht verstehe, ist warum das Design per Tabellen gemacht ist, denn so kompliziert ist es jetzt nicht.

Ich würde mich eventuell anbieten, dir/euch die Seite über die Sommerferien auf CSS-Design umzustellen. Das würde dann zwar ein paar Tage/Wochen dauern, aber ich würde es für eine kleine (was es dir wert ist ;)) Gegenleistung machen.

Wenn du Interesse daran (oder an anderen "Diensten" wie das Management der Seite bis du dich eingearbeitet hast) hast, dann schreib mich doch einfach mal an.

Liebe Grüße
Laura

Also vom Design find ich die Seite so mittel mäßig, der sich drehende Ball nervt mich ein bisschen

Ich hab nur kurz in den Code reingeschaut, mir ist z.B. folgendes aufgefallen:

<div id="strich"></div>

Was ist das, ein leerer div? Wenn du einen Strich erzeugen willst, nimm doch hr, oder?

Greetz
Laura

PS.: Vielleicht mäßigt ihr beide euren Ton mal ein bisschen...

Zitat von &quot;captivia&quot;

Code

if ($sc_irc = test) { sendmail to test@xx.de + backup@mail.de }
if ($sc_irc = MaxMustermann) { sendmail to MaxMustermann@xx.de + backup@mail.de}

So, ich kenn mich zwar mit PHP überhaupt nicht aus und hab eig auch null Ahnung von ner Mail-Funktion, aber im Grunde sieht das ganze doch recht einfach aus.

if ($sc_irc = true) { sendmail to $sc_irc + backup@mail.de}
else { echo "Es liegt keine Mail vor"}

Oder so in der Art^^ (wie gesagt, keine Ahnung von PHP^^)

Greetz
Laura

...was ein halbwegs vernünftiger Webserver tun sollte.

Der Sinn dahinter ist folgender: Wenn du dir ein Menu erstellst, dann bindest du es in jede HTML-Seite deiner Homepage ein.
Wenn du dann jedoch einen Punkt im Menu ändern möchtest hast du (wenn du nicht z.B. die S&E Funktion bei Scriptly ua. benutzt) ein Problem, weil du es njeder Datei ändern musst.

Durch die "Ausgelagerte" Navi hast du nur eine Datei,die du verändern musst, die dann durch einen php-include einfach eingebunden wird.

Ist relativ simpel und erspart meist viel Arbeit

Greetz
Laura

Mh, mit den rechtlichen Dingen kenne ich mich nicht so aus, ich weiß nicht ob du den verwenden darfst.. hast du denn 1:1 kopiert?

Jops, das ist richtig. Musst halt nur aufpassen, dass du die class und id nicht schon in der html hast.

Am einfachsten isses noch, wenn du das Menu per PHP includest, dann hast dus in einer Datei drin und musst nciht alles immer verändern.

Greetz
Laura

PS.: Es gibt hier ne Edit-Funktion, damit kannst du deine Beiträge bearbeiten, sodass du nur einen schreibst
Ich habs mal zusammengefasst...

Hey.

Ich hab dir den Code umgeschrieben, versuch ihn aber zu verstehen, ich hab die Änderungen kommentiert!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ausklappbare Navigationsleiste -->
<html>
  <head>
    <title>Listing 8.6</title>
    <script type="text/javascript">
      var n4, ie, w3c;




      function init()
      {
        n4 = document.layers;
        ie = document.all;
        w3c = document.documentElement;
      }




      function showNav()
      {
        if(ie)
        {
          document.all.naviBar.style.visibility = 'visible';




        }
        else if(w3c)
        {
          document.getElementById('naviBar').style.visibility = 'visible';
        }
        else
        {
          alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
        }
      }




      function hideNav()
      {
        if(ie)
        {
          document.all.naviBar.style.visibility = 'hidden';
        }
        else if(w3c)
        {
          document.getElementById('naviBar').style.visibility = 'hidden';
        }
        else
        {
          alert('Diese Seite ist mit Ihrem Browser nicht kompatibel');
        }
      }




    </script>










    <style type="text/css">




        * {
            margin: 0px;
            padding: 0px;
        }




        #topBorder {
            background-color:#336699;
            width:100%;  /* Breite des oberen Randes */
            height: 10px; /* Höhe des oberen Randes */
            position:absolute;
            left:0px; top:0px;




            }




        #naviBar {
            background-color:#336699;
            width: auto;   /* bewirkt, dass das Container immer die richtige Größe hat */
            height: auto;  /* bewirkt, dass das Container immer die richtige Größe hat */
            position:absolute;
            right:0px; top:25px; /* positioniert in der rechten oberen Ecke. Linke obere Ecke: statt right: 0px; --> left: 0px;  */
            padding:5px;
            visibility:hidden;
            }
        a {
            color:#FFFFFF;
            }




        ul {
            list-style-type: none; /* macht die Listenpunkte weg */
        }
        li {
            float: left; /* bewirkt, dass die Listenpunkte nebeneinander stehen können */
            margin: 3px 10px;
        }







    </style>







  </head>
















  <body onload="init()">




    <div id="topBorder" onmouseover="showNav()" onmouseout="hideNav()">
    </div>
    <div id="naviBar" onmouseover="showNav()" onmouseout="hideNav()">
    <ul>
      <li><a href="http://www._.de/">Startseite</a></li>  <!-- Hier die Listenpunkte einfügen -->
      <li><a href="http://www._.de/">Impressum</a></li>
      <li><a href="http://www._.de/">Sonstiges</a></li>
    </ul>
    </div>




    <h1>Ausklappbare Navigationsleiste</h1>
    <p>Wenn Sie den Mauscursor an den linken Seitenrand bewegen, klappt die Navigationsleiste auf und Sie k&ouml;nnen einen Verweis anklicken.</p>
  </body>
</html>

Nochmal was nebenbei: Wenn du dir so einen Code aus dem Internet oder sonstwo herholst, achte wenigstens auf Qualität! Das ist kein konformes (X)HTML mehr gewesen, und sehr sauber war der Code auch nicht.
Außerdem ist im Javascript ein Fehler. Wenn man nämlich mit der Maus aus dem Balken herausfährt, ist das Menu wieder weg. Kann man also nicht anklicken.

Man kann so ein Menu auch nur mit CSS machen, das erfordert dann natürlich etwas Arbeit. Wenn du ein aufklappbares Menu möchtest, schau dir doch mal dieses hier an:

http://javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=469

Ist zwar auch mit Javascript, funktioniert aber besser.

Greetz
Laura

Dann ist ja gut

1. Da er das Problem gelöst hat ist es denke ich nciht so schlimm.

2. Mal eine Frage: Wenn dieser Thread am 18. Juni erstellt wurde und du sagst, dass du nicht antworten konntest, weil du im Urlaub warst... wieso gibt es dann einen Beitrag von dir vom 26. Juni?

Nur als reine Verständnisfrage, nicht dass sich jemand in deinen Acc gehackt hat.

Greetz
Laura

So, das Problem hat sich dann auch gelöst. So sieht das ganze jetzt aus:

[Blockierte Grafik: http://666kb.com/i/baevzc8vq10f1sctu.jpg]

Die Links sind allerdings nur zu Testzwecken, der orange ist immer der aktive.

Nachtrag: Das Ganze hat natürlich noch einen hover-Effekt^^:

[Blockierte Grafik: http://666kb.com/i/baew2w49h3rm6wtte.jpg]
[Blockierte Grafik: http://666kb.com/i/baew4brc2j9uzzawi.jpg]

Okay, hat jetzt geklappt.

Die Lösung für das Problem: Einfach das von dir erwähnte Inline-Element mit

display: block;

zu einem Block-Element machen - schon klappts.

Jetzt aber noch ein Problem:

Mit IrfanView hab ich eine Farbe (weiß) als transparent eingestellt. Wenn ich das Bild jetzt aber mit einem anderen zusammen einblende, ist das nicht transparent, sondern weiß, d.h. man sieht das andere Bild dahinter nicht
Woran liegt das?

Kann man deiner Antwort entnehmen, dass du wieder da bist?^^

Irgendwie klappt es jedoch immer noch nicht, der neue Code:

#navi {
    height: 72px;
    line-height: 72px;
}




#navi li {
    list-style-type: none;
    float: left;
    height: 72px;
    line-height: 72px;
}




#navi a{
    height: 72px;
    line-height: 72px;
}




.link1 {
    background-image: url(puzzle_1.gif);
    height: 72px;
    line-height: 72px;
}




.link2 {
    background-image: url(puzzle_2.gif);
    height: 72px;
    line-height: 72px;
}




.link3 {
    background-image: url(puzzle_3.gif);
    height: 72px;
    line-height: 72px;
}




.link4 {
    background-image: url(puzzle_2.gif);
    height: 72px;
    line-height: 72px;




}

ich hab keine Ahnung, wo ich das noch reinschreiben soll

Greetz
Laura

So, dann guck ich hier auch mal mit meinem neusten Problemchen vorbei:

Ich habe vor, die Links meiner Navigation mit Hintergrundbildern zu versehen (verschiedene).

Eigentlich klappt das auch ganz gut, nur irgendwie... kriegt der Link nciht die richtige Höhe und es wird nur der Ausschnitt angezeigt, wo der Text steht.

Code-Ausschnitt:

HTML:

<ul id="navi">
<li><a href="#" class="link1">Link 1</a></li>
<li><a href="#" class="link2">Link 2</a></li>
<li><a href="#" class="link3">Link 3</a></li>
<li><a href="#" class="link2">Link 4</a></li>
<li><a href="#" class="link4">Link 5</a></li>
</ul>

CSS:

#navi li {
    list-style-type: none;
    float: left;
    height: 72px;
}




#navi a{
    height: 72px;
}




.link1 {
    background-image: url(puzzle_1.gif);
    height: 72px;
}




.link2 {
    background-image: url(puzzle_2.gif);
    height: 72px;
}




.link3 {
    background-image: url(puzzle_3.gif);
    height: 72px;
}




.link4 {
    background-image: url(puzzle_2.gif);
    height: 72px;
}

Die Frage ist nun: Wo kann ich die Höhe (72px) einfügen, damit das komplette Bild angezeigt wird? Bei den Positionen, wos steht, klappt es nicht

Greetz
Laura

eine sehr genaue antwort, die ihn wahrscheinlich nicht viel weiterbringt.

Also: Duch CSS kann man das nicht einfach so erzeugen, da braucht man schon ein hintergrundbild. Und dieses erstellt man NATÜRLICH mit einem Bildbearbeitunsgsprogramm.

Wenn du nur etwas einfaches, wie z.B. kleine Karos möchtest und diese sich regelmäßig wiederholen, dann halte das Bild möglichst klein und repeate es über css.

Bsp:

body {
background: url("bild.jpg") repeat;
}

Je kleiner das Bild, desto weniger Speicherpletz verbraucht es und desto schneller lädt es.

Versuch auch, wenn du durch Karos farbige Akzente einbringen willst, dass die Farbe nicht zu grell ist und nicht staek auffällt, das stört sonst.

Am besten aber ist es (find ich zumindest) immer, wenn der Hintergrund einfach weiß oder leicht grau ist, weil sich der Besucher dann nur auf den Inhalt der Seite konzentriert; wenn du dann Akzente setzen willst, kannst du das auhc da machen.

LG
Laura

Da hst du natürlich Recht, aber solange er damit die Links nur positioniert, ist das doch überflüssig, oder?

<style> body { margin: 0; padding: 0;} </style>

Dies hier gehört so nicht in den CSS-Code, die Eigenschaften schreibst du einfach zu

body {
  font-size: 15px;
  font-weight: bolder;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

dazu.

Ansonsten ist der Code von der Unterscheidung HTML-CSS jetzt richtig, einiges ist jedoch denke ich überflüssig, z.B.

<ul id="navibereich">
         <li id="navi01"><a href="index.html">News</a></li>
         <li id="navi02"><a href="ck.html">CK</a></li>
         <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
         <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
</ul>

Wozu gibst du jedem Listenpunkt eine id?
Da du in der CSS nur die Ausrichtung klärst, ist das doch recht überflüssig. Das kannst du auch für die komplette ul mit margin/padding definieren.

<div align="center">
</div>

Was ist das? Ein leerer div bringt dir gar nichts, also weg damit. Falls du ihn für spätere Code-Planungen reingeschrieben hast - raus damit, der verzerrt nur dein Bild, wenn du den Code zwischendurch testest. Wenn du dir die Stelle nicht merken kannst, schreib einfach einen Kommentar in den Code.

.img150
{
float: none;
padding: 4px;
}




.img150 {
    height: 222px;
    width: 320px;
    position: relative;top:-180px; left:-50px;
   z-index: 1;
    margin-top: 225px;
    margin-left: 115px;
   border: 3px solid #000000;
}

kann man auch in einen Teil zusammenfassen, dann findest du es hinterher leichter wieder

td {
   font-family: Arial, Helvetica, sans-serif;
}




th {
   font-family: Arial, Helvetica, sans-serif;
}

Du hast doch nirgendwo eine Tabelle - weg damit, das verunübersichtlicht (was für ein Wort!) nur den Code.

Ansonsten ist der Code gut, auch wenn man sihc über die Farbgebung streiten kann

LG
Laura

Drei body-Bereiche sind zwei zuviel, aufräumen solltest du das am besten als erstes. Am besten lädst du dir einen Editor herunter (ich benutze Scriptly) der dir dieses Grundgerüst am Anfang erstellt, das erspart Arbeit und diese Fehler. (Trotzdem solltest du den Aufbau einer Seite kennen

Ich habe dir mal einen Beispiel-Code gemacht, versuch mal, ihn zu verstehen. Ist jedoch ungetestet, müsste jedoch gehen,

index.html:

<!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="de" lang="de">




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




<body>




<div id="inhaltsbox"><img class="pic_klein1"/></div>
<img class="pic_klein2"/>
<div id="inhaltsbox2"><img class="pic_klein1"/></div>




</body>
</html>

Wie du siehst, ist der HTML-Code sehr kurz. Die Sachen, die das DEsign betreffen sind komplett im CSS-Code:

style.css:

.pic_klein1 {
    height: 50px;
    width: 70px;
    position: relative;
    margin-top: 225px;
    margin-left: 115px;
}




.pic_klein2 {
    height: 50px;
    width: 70px;
    position: absolute;
    z-index: 1;
    margin-left: 340px;
    margin-top: 250px;




}




#inhaltsbox {
    width: 300px;
    height: 500px;
    border: solid 1px black;
    background-color: lime;
    position: absolute;
    z-index: 0;
    margin-left: 75px;
    margin-top: 25px;
}




#inhaltsbox2 {
    width: 300px;
    height: 500px;
    border: solid 1px black;
    background-color: lime;
    position: absolute;
    z-index: 0;
    margin-left: 375px;
    margin-top: 25px;
}

Vielleicht schaust du dir auch mal den Aufbau des Codes an und erkennst, wie viel einfacher es ist, Fehler zu finden, wenn der Code übersichtlich ist!

LG