Beiträge von Beatz

Hallo Gast,

wie gesagt ist der einfachste Weg der, den admin beschrieben hat. Wenn Du allerdings schon Klassen in der Tabelle benutzt, kannst Du in den CSS Eigenschaften eine weiteres Element hinzufügen. Dies macht sinn, wenn die Tabelle immer die gleichen Eigenschaften haben sollen. Dann brauchst Du diese Paramater nicht immer wieder angeben. Füge dazu in Deinen Style Angaben folgendes Element hinzu:

table.set2 {
  border-spacing:5px;
}

Du brauchst der Tabelle dann nur noch zu sagen, welche Klasse aus den Styles sie verwenden soll. Dies machst Du mit dem Parameter class. Es würde also folgendermaßen aussehen:

<table class="set2" width=550 border=0 cellpadding=3 cellspacing=1 bgcolor="#000000" height="188">

Sinnvoll ist es dann allerdings auch alle anderen Eigenschaften darin unterzubringen. Dann würde das CSS-Element folgendermaßen aussehen:

table.set2 {
  table-layout:fixed;
  width: 550px;
  height:168px;
  background-color:#000000;
  vertical-align:top;
  padding:3px;
  border-spacing:5px;
}

Dann würde der Table-Tag nur noch folgendermaßen aussehen:

<table class="set2">

Ist letztendlich übersichtlicher im Quelltext und für die spätere Bearbeitung bequemer. Allerdings muss man sich da erst mal ein wenig reinfuchsen.

Wie gesagt, ist nur als Anregung zu verstehen, funktionieren tut das ganze wunderbar mit der von admin beschriebenen Änderung

Hmmm ... was genau verschiebt sich denn auf der Seite, ich kann nichts sehen, außer dass alles auseinandergezogen ist. Schau die Seite bitte mal in einer höheren Auflösung an. Du solltest nicht mit zu vielen Prozentangaben arbeiten. Wenn Du beispielsweise eine Spalte 10 Prozent breit machst, dann mag das bei einer geringen Auflösung vielleicht passen, aber wenn mehr Platz zur Verfügung steht, sind die 10% zu groß für die Grafik und es entstehen Leerräume.

Bevor Du Die Gedanken um das Verschieben des Menüs machst, solltest Du vielleicht mal ein Blatt Papier nehmen und die Grundstruktur der Tabelle aufmahlen. Bei der Planung solletst Du auch bedenken, dass nicht alle mit 1024x768 unterwegs sind.

Einfacher geht es wirklich nicht, wenn Du dennoch Probleme hast, schreib nochmal

Hallo Agent.Hamster,

meinst Du in etwa sowas, wie die Links auf dieser Homepage:
::] http://www.hoppel-sz.de (sind die orangenen Links)

Das läßt sich nur mit Javascript machen, kann Dir aber gerne das Script schicken bzw. hier posten. *GGG*

Dazu musst Du folgende Zeile in den Head deiner HTML-Seite einbauen:

<script language="JavaScript" src="scripts/fade.js"></script>

Anschließend legst Du - soweit noch nicht vorhanden - ein Verzeichnis "scripts" an. Darin erstellst Du eine Datei fade.js mit folgendem Inhalt:

/*****************************************\
||       Fade Script Version 3.1         ||
||   http://anarchos.xs.mw/fade.phtml    ||
||            (c) July 2001              ||
|| _____________________________________ ||
|| Created by:                           ||
|| Anarchos    > anarchos.xs.mw          ||
|| _____________________________________ ||
|| auto-startColor by Mike West          ||
|| [email]mike@westman.org[/email]                      ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix         ||
|| http://www.princefari.com             ||
|| _____________________________________ ||
|| Color conversion from decimal to      ||
|| hex (dehexize function) by:           ||
|| Litejet > [email]litejet@hotmail.com[/email]         ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by:     ||
|| Dak Phoenix > phoenix-archetypes.com  ||
|| _____________________________________ ||
|| domouseover/out based on scripts by   ||
|| The Shadow  > [url]www.icon.co.za/~andrewk[/url] ||
||                                       ||
\*****************************************/


/*************
**** <config>
**/


fadeColor = "#EEEEEE";  // color to fade to
//fadeColor = "#0";
stepIn = 18; // delay when fading in
stepOut = 25; // delay when fading out


/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = false;


/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true;


/* set to true or false; true will make the script
** work for Macs (IE 5+), but you will have to give
** a name (name="blah") to each link that you want
** to fade.
***/
macCompat = false;


/**
**** </config>
**************/


/*************
**** <install>
**


Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):


<script src="fade.js" language="Javascript"></script>


Now that you have the file included, you need to
setup your links a small bit.  Each link that you
want to fade needs to use the fade class.


Example:


[url='blah.html']click here[/url]


Also, the link must be plain text.  This means
that you can't have [b]'s, [i]'s, <font>'s, etc.
inside of the link.


Example of what not to do:


[url='blah.html'][b]click[/b] here[/url]


Have fun!
-Anarchos-


**
**** </install>
**************/


hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";


document.onmouseover = domouseover;
document.onmouseout = domouseout;


fadeColor = dehexize(fadeColor.toLowerCase());


var fadeId = new Array();


function dehexize(Color){
        var colorArr = new makearray(3);
        for (i=1; i<7; i++){
                for (j=0; j<16; j++){
                        if (Color.charAt(i) == hexa[j]){
                                if (i%2 !=0)
                                        colorArr[Math.floor((i-1)/2)]=eval(j)*16;
                                else
                                        colorArr[Math.floor((i-1)/2)]+=eval(j);
                        }
                }
        }
        return colorArr;
}


function domouseover() {
        if(document.all){
                var srcElement = event.srcElement;
                if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
                                if (!srcElement.startColor) {
                                        srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
                                        srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
                                }
                                var link = (macCompat? srcElement.name: srcElement.uniqueID);
                                if (link) fade(srcElement.startColor,fadeColor,link,stepIn);
                                else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
                }
        }
}


function domouseout() {
        if (document.all){
                var srcElement = event.srcElement;
                if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
                        var link = (macCompat? srcElement.name: srcElement.uniqueID);
                        if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
                }
        }
}


function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}


function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}


function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}


function fade(s,e,element,step) {
        var sr = s[0]; var sg = s[1]; var sb = s[2];
        var er = e[0]; var eg = e[1]; var eb = e[2];


        if (fadeId[0] != null && fade[0] != element && eval(fadeId[0])) {
                var orig = eval(fadeId[0]);
                setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
                var i = 1;
                while(i < fadeId.length) {
                        clearTimeout(fadeId[i]);
                        i++;
                }
        }


        for(var i = 0; i <= step; i++) {
                fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
                        step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
                        ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
        }
        fadeId[0] = element;
}

Im Bereich config kannst Du die Farbe einstellen und auch die Zeiten bearbeiten. Alle Einstelungen, wie ganz wichtig auch sloopyclass sind im Script erklärt. Viel Spaß damit.

P.S. Dieses Script wird natürlich nicht von allen Browsern unterstützt. Opera beispielsweise nicht. Ich habe dafür die StyleSheets so angepasst, dass die Farbe beim MouseOver die gleiche ist, nur der Blendeffekt nicht ist.

Wenn Du irgendwelche Fragen dazu hast, helfe ich gern. *GGG*

snakey
Vielen Dank für die Info, ich habe gestern Nachmittag mal ein paar Screenshots angeschaut, scheint ganz interessant zu sein. Ich werde es wohl die Tage mal runterladen und testen. Wenn ich Fragen dazu habe, weiß ich ja, wo Du zu finden bist ...

So, nun aber wieder back to the roots! Würde mich über weitere Anregungen (auch von anderen Personen) zu der Homepage freuen - sowohl gestalterisch als auch inhaltlich.

Ah so! Also praktisch nur als Übung ???

Das stimmt schon, aber man kann die Werbung auch so konfigurieren, dass Banner eingeblendet werden, und das sieht dann auch nicht mehr so toll aus.

Naja, ich benutze sowieso seit Jahren Opera, da gabs noch nie die Probleme mit lästigen POPups Wird einfach auf "Nur angeforderte" umgestellt und fertig.

Hallo admin,

generell mag ich ja eher farben bzw. Designs, die seriös aussehen. Dein blauer Banner würde darunter fallen. Allerdings sind diese zum Thema kostenlose Gästebücher völlig unpassend. Farblich gefällt mir der grün-gelbe sehr gut.

Nett macht es sich allerdings auch immer, wenn man im Banner schon einige mehr informationen bekommt, nämlich, was Dein kostenloses Gästebuch so besonders macht. Durch eine dezente Animation läßt sich dass sehr gut realisieren. Aber um Gottes Willen nichts extrem blinkendes, dass nur stört.

Leute, die ein kostenloses GB suchen, wirst Du mit einer nicht animierten Grafik nur schwer ansprechen.

Ich hatte mich vor kurzer Zeit auch mal etwas umgesehen, und bin auf http://www.onetwomax.de gestoßen. Mehr Funktion kann man wohl in einem Kostenlosem Gästebuch nicht bekommen. (Zumindest wenn es auch fremd gehostet werden soll, weil man beispielsweise keine PHP/CGI Unterstütung im eigenen WebSpace hat).

Und mit der Werbung muss man halt leben, ist meiner Meinung aber auch okay, wenn man einen soo guten Service für nothing bekommt.

Besonders gut gefällt mir, dass man das Layout fast völlig frei gestalten kann. Siehe zum Beispiel dieses GB: http://373139.guestbook.onetwomax.de (Die Grafiken und Flash-Filme liegen selbstverständlich auch einem anderen Server ist aber kein Problem den HTML-Code dementsprechend abzuändern. Für den das etwas zu anspruchsvoll ist, gibt es dort auch wirklich schöne Vorlagen.

Einziger Nachteil ist, dass nur der Besitzer des GBs einen einzigen Kommantar machen kann. Aber generell sollte das reichen. Für Diskussionen kann man sich ja nach einem Forum umschauen bzw. Foren , wie beispielsweise dieses, empfehlen.

Hmmmm .... mir fällt weiter nichts ein, was das Problem sein könnte. Höchstens, dass die Grafiken einen Rand beinhalten, also, dass der Rand nicht vom HTML erzeugt sondern in den Bildern ist.

Wenn Du die Internet Explorer verwendest, geh doch mal auf die Seite und drücke Strg+A. Dann sollte alles markiert sein. Dann kannst Du genau sehen, bis wohin die Grafiken gehen.

Wie?? Keinen Quelltext? Ohne den geht nichts. Schick mir doch mal das Grundgerüst Ansonsten kann ich Dir leider nicht helfen.

Hallo Gast,

mit

<input type="image" ...>

Sendest Du das Formular ab, exakt wie mit input type=submit. Versuche mal folgendes:

<tr> 
 <td align="center">
 
  [img]back.gif[/img]
  <input type="image" src="send.gif" align="right"> 
 </td> 
</tr>

Was das CGI betrifft, wäre es ganz nett, wenn Du mal genauere Informationen posten könntest!

Hmmm kleine Korrektur meines Vorredners.

<font size="irgendetwas">

ist kein CSS. CSS wäre beispielsweise

<font style="font-size:12px;">

@Gast: Poste doch bitte mal eine URL oder den Quelltext! Dann kann ich Dir sicherlich weiterhelfen.

Schau mal hier: http://www.webmin.com Noch einfacher geht es nicht

Hmmm ... also um ganz ehrlich zu sein, halte ich davon nichts. Schön und gut, Frames sind nun wirklich out und ohnehin in den meisten Fällen völlig ungeeignet. Lieber ein gut gestaltetes Design, dann kommt man auch ohne Frames aus und es sieht professionell aus.

Zu den Beispiel, dass Du geschickt hast. Ich habe es mir gar nicht erst genauer angeschaut. Ich benutze Opera, wie immer mehr Leute. Schon hier kann ich das Scrollrad an der Maus nicht benutzen. Ich habe auch gar nicht erst hinter die verwendete Technik geschaut, denn das scrollen mit dem Rad klappt sonst ohne Probleme im iframe, normalem Frame und einer reinen HTML-Seite ohne Frames nur dort nicht.

Fazit:
Investier die gleiche Zeit lieber in etwas gestalterische Grundlagen und bau 'ne schöne Seite.

Hallo Gast,

rein mit HTML funktioniert das auch nicht. Text würde ich immer mit CSS formatieren. Damit kann man nicht nur die Schriftgröße für alle (fast alle) Browser einheitlich groß machen, sondern auch noch gestalterisch wesentlich mehr rausholen. Der Vorteil liegt darin, dass man mit einfachen Mitteln (ohne Große Grafiken) tolle Effekte erzielen kann.

CSS sind allerdings ein großes Kapitel für sich (siehe http://selfhtml.teamone.de/css/index.htm ). Ich helfe Dir aber sehr gerne weiter.

Deine Anfrage hört sich an, als soll der gesamte Text der Seite in der Größe 2 erscheinen. Zunächst ist die Angabe size=2 falsch, richtig würde es heißen +2 aber auch das würde ich sehr schnell wieder vergessen. Soll der gesamte Text einer Seite groß sein, bindest Du einfach folgendes in den head ein:

<style type="text/css">
<!--
/*  ... Hier werden die Formate definiert. Die generelle Syntax wirst Du schnell rauslesen */
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
}
-->
</style>

font-family gibt hier die Schriftart an, font-size die Schriftgröße in Pixeln. (es sind auch andere Maßeinheiten möglich, z.B. pt, em, pc, in., Ich empfehle am Bildschirm allerdings immer px=Pixel.

So, solltest Du nicht die Ganze Seite so groß haben wollen, kannst Du die Angaben für jeden einzelnen Tag einstellen. Beispielsweise so.

<style type="text/css">
<!--
/*  ... Hier werden die Formate definiert. Die generelle Syntax wirst Du schnell rauslesen */
body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}


h1 {
  font-family: Arial, sans-serif;
  font-size: 20px;
}
-->
</style>

Zusätzlich kannst Du für jeden Tag auch Klassen anlegen. Dies ist insbesondere für Links interessant. Beispielsweise soll ein Link im Menü anders dargestellt werden, als ein Link im Text.

Um einen kleinen Vorgeschmack zu bekommen, was man mit CSS noch machen kann: Abstände oben, unten, rechts, links, Laufweite, farbe, hintergrund etc. Schau doch mal hier insbesondere das Menü an der rechten Seite.

Hi Michaela,

vielleicht postest Du mal Deinen Quelltext. Aber ich gebe Dir zunächst mal zwei Vorschläge.

[img]bild1.jpg[/img][img]bild2.jpg[/img]

Wenn Du das ganze in einer Tabelle verwendest, musst Du ebenfalls im img-Tag die Angabe border="0" verwenden. Zusätzlich muss im Table-Tag die Angaben cellspacing, cellpadding und border auf 0 gesetzt werden. Beispielsweise:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
[img]bild1.jpg[/img]
</td>
<td>
[img]bild2.jpg[/img]
</td>
</tr>
</table>

Dieser Style, würde in der Form, wie er oben angegeben ist in in den head kommen

Hi Snakey,

Dein Hinweis klingt interessant. Zumindest habe ich noch nie etwas von ET gehört bzw. mir sagt die Abkürzung nichts. Vielleicht gibt Du mal 'nen kleinen Wink. Würde mich zumindest mal interessieren erst einmal einen Blick drauf zu werfen.

Sorry kleiner Fehler, den ich berichtigen muss. Die einzelnen Frames müssen natürlich verschiedene Namen bekommen.