Du bist nicht angemeldet.

1

Sonntag, 7. Dezember 2003, 10:48

Meinung abgeben

Hi,
mein Freund und ich haben eine Homepage gemacht. Nun wollte ich wissen wie ihr sie so findet. Es funktioniert zwar noch nichts auf der Homepage, aber bewerten kann man sie ja trotzdem. :)
www.geocities.com/xcase2003/

btw.: der Rand unten hat nix mit dem Sourcecode zu tun. Das liegt an Geocities.

Noch eine Frage zum Schluss:
Kann man bei Grafiken nur in der Mitte schreiben ? Weil wenn ich auf einer Grafik schreibe, dann liegt dieser Text immer in der Mitte. Gibt es da eine Loesung?

MfG Tomi

2

Sonntag, 7. Dezember 2003, 11:08

Hi XCase...

Leider habe ich zuwenig Zeit (muss zur Arbeit... :( ), um Deine Seite ausführlich zu bewerten, aber da melden sich bestimmt gleich noch ein paar Kollegen... ;)

Aber zumindest Deine Frage kann ich beantworten.

Zunächst war ich am überlegen, was Du mit "auf einer Grafik schreiben" meinst. Wenn ich Dich richtig verstehe, dann meinst Du in einem <div>-ELement schreiben, welches ein Hintergrundbild enthält, richtig?

Der Grund, warum der Text immmer mittig ausgerichtet ist, ist der folgende:

Im Quelltext Deine Seite sind im <head> ein paar CSS-Anweisungen untergebracht:

Quellcode

1
2
3
4
5
6
7
8
9
   body         { margin:0px; background-color:#dae0e6; }
   div          { text-align:center; }
   .headline    { font-family:Verdana; font-weight:normal; font-size:13px; text-align:top; }
   .mainfont    { font-family:Verdana; font-weight:normal; font-size:10.5px; }
   .link        { font-family:Arial; font-weight:normal; font-size:11px; }
   a:link       { font-family:Arial; font-weight:normal; font-size:10px; text-decoration:none; color:#000000; }
   a:active     { font-family:Arial; font-weight:normal; font-size:12px; color:#ffffff; text-decoration:none; }
   a:visited    { font-family:Arial; font-weight:normal; font-size:10px; text-decoration:none; color:#000000; }
   a:hover      { font-family:Arial; font-weight:normal; font-size:12px; text-decoration:none; color:#aaaaff; }


Der Knackpunkt ist die Zeile:

Quellcode

1
  div          { text-align:center; }


Dadurch werden in allen <div>-Elementen Texte mittig ausgerichtet.

Vielleicht wäre es ratsamer, wenn Du eine Selektor im Sinne von .zentriert einrichtest, den Du dann den <div>s zuweist, die tatsächlich mittig ausgerichteten Text enthalten sollen.

Z.B. so: <div class="zentriert">Mittig ausgerichteter Text</div>

Im Rest der Seite sind noch eine Reihe verstreuter CSS-Answeisungen zu finden. Vielleicht wäre es etwas übersichtlicher, wenn Du die CSS-Anweisungen in einer separaten Datei unterbringen würdest.

Wenn Du Fragen hast, zögere nicht, Dich zu melden!
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »LapisInfernalis« (7. Dezember 2003, 11:12)


3

Sonntag, 7. Dezember 2003, 11:20

[q=LapisInfernalis]Der Knackpunkt ist die Zeile:

Quellcode

1
div     { text-align:center; }
[/q]
Ist zwar logisch gedacht, nur ist es leider nicht so. :(

Koennte es vllt. wirklich daran liegen, dass man auf einem Background nur zentriert schreiben kann?

MfG Tomi

4

Sonntag, 7. Dezember 2003, 11:56

Zitat

Original von xcase
[q=LapisInfernalis]Der Knackpunkt ist die Zeile:

Quellcode

1
div     { text-align:center; }
[/q]
Ist zwar logisch gedacht, nur ist es leider nicht so. :(

Koennte es vllt. wirklich daran liegen, dass man auf einem Background nur zentriert schreiben kann?

MfG Tomi
Schmarrn. Daran liegts:
<table border="0" cellspacing="0" cellpadding="0" align="center">
Signatur von »Darii« Against TCPA - TCPA heißt Freiheit verlieren
D.A.R.I.I.: Digital Artificial Replicant Intended for Infiltration

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Darii« (7. Dezember 2003, 11:56)


5

Sonntag, 7. Dezember 2003, 12:02

[q=Darii]Schmarrn. Daran liegts:
<table border="0" cellspacing="0" cellpadding="0" align="center">[/q]
Dann sag mir mal bitte durch was ich das align ersetzen soll ? Hab schon fast alles ausprobiert.

Ich wiederhohle meine Frage gerne nochmal:
"Kann man auf Grafiken ( BGs ) nur zentriert schreiben ?
Wenn ihr wuesstet wie ich das Problem beheben koennte waers auch ok :>

MfG Tomi :)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »xcase« (7. Dezember 2003, 12:03)


6

Sonntag, 7. Dezember 2003, 12:08

Wenn man die Tabelle zentriert haben will, geht das auf zwei Weisen:

Quellcode

1
2
3
4
5
table 
{
 margin-right:auto;
 margin-left:auto;
}
oder

Quellcode

1
2
3
4
table {
 margin-left:15%;
 width:70%;
}
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

7

Sonntag, 7. Dezember 2003, 13:16

versteht ihr meine Frage nicht ? Ich will den Text der sich im mainframe befindet etwas mehr nach oben verschieben. ( unter dem horizontalen schwarzen strich )

Vllt. ist es jetzt verstaendlicher.

MfG Tomi :)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »xcase« (7. Dezember 2003, 13:17)


8

Sonntag, 7. Dezember 2003, 13:26

Zitat

Original von xcase
Ich wiederhohle meine Frage gerne nochmal:
"Kann man auf Grafiken ( BGs ) nur zentriert schreiben ?
Die Textausrichtung wird von einer evtl. vorhandenen Hintergrundgrafik nicht beeinflusst. Wie man im Quelltext nachlesen kann befindet sich der zentrierte Text in einem DIV mit der Klasse "mainfont", in der zugehörigen CSS-Anweisung wurde die Ausrichtung nicht angegeben, so dass die Ausrichtung des übergeordneten Elements übernommen wird.

Versuch' s mal mit

Quellcode

1
.mainfont    { font-family:Verdana; font-weight:normal; font-size:10.5px; text-align: left; vertical-align: top}
statt

Quellcode

1
.mainfont    { font-family:Verdana; font-weight:normal; font-size:10.5px; }
"text-align" legt die horizontale Ausrichtung (left, center, right) und "vertical-align" die vertikale Ausrichtung (top, middle, bottom) fest. Außerdem hast du für die Tabelle, die den DIV "mainfont" enthält keine Breite notiert, so dass sie wahrscheinlich nur die Breite des Textes annimmt - gib' ihr doch mal testweise eine Hintergrundfarbe damit du siehst, wie groß sie tatsächlich dargestellt wird.

P. S. Sollten sich die Links in der Navigation nicht eigentlich im weißen Bereich befinden? Momentan steht der Text ziemlich genau auf der grauen Trennlinie.

9

Sonntag, 7. Dezember 2003, 14:24

Zitat

Original von xcase
[q=Darii]Schmarrn. Daran liegts:
<table border="0" cellspacing="0" cellpadding="0" align="center">[/q]
Dann sag mir mal bitte durch was ich das align ersetzen soll ? Hab schon fast alles ausprobiert.
Durch nichts.

Zitat

Ich wiederhohle meine Frage gerne nochmal:
"Kann man auf Grafiken ( BGs ) nur zentriert schreiben ?
Nein.

Zitat

Wenn ihr wuesstet wie ich das Problem beheben koennte waers auch ok :>

MfG Tomi :)

Die Lösung von Duke wird nicht funktionieren, der Grund: das div-Element in dem der Text steht, ist nur so hoch wie der Text selber, also bringt es nicht viel, den Text dort nach oben hin auszurichten. Stattdessen muss man das auf die übergeordnete Tabellenzelle anwenden.

Statt

Quellcode

1
<td><div class="mainfont">

also:

Quellcode

1
<td style="vertical-align: top;"><div class="mainfont">


Tipp: Für solche Fälle ist immer der DOM-Instektor vom Mozilla praktisch, da kann man durch die Dokumentenstruktur gehen und sich nazeigen lassen wo die einselnen Elemente sind, sehr praktisch...
Signatur von »Darii« Against TCPA - TCPA heißt Freiheit verlieren
D.A.R.I.I.: Digital Artificial Replicant Intended for Infiltration

Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »Darii« (7. Dezember 2003, 14:33)


10

Sonntag, 7. Dezember 2003, 14:27

Hi,
also ich habe jetzt den Sourcecode der HP so editiert wie Duke es mir gesagt hat. Nur wieso bringt das noch immer nichts? Zur Verstaendlichkeite habe ich jetzt auch die Tabellen mit nem bg verseht.

MfG Tomi

11

Sonntag, 7. Dezember 2003, 15:14

Hoi xcase,
als erstes würde ich mir von dir wünschen, dass du in Zukunft bessere Themen Überschriften wählst. Du schreibst dein Thema ja im "Holt euch eine Meinung" Forum, dann kannst du davon aussgehen, das man deine Seite bewerten wird :D ;) . Aber das nur am Rande.

Testsystem:Windows 98, Auflösung 1152x864px, Internet Explorer 6

Also ich muss sagen, für mich sieht die Seite sehr unfertig aus. Einfach im Grafikprogramm eine Grafik geteilt und dazu den HTML Code geschrieben (immer hin nicht den HTML-Export gewählt :)) ).
Die Website ist anscheind nur für 1024x768 gemacht. Denn bei meiner Auflösung ist rechts, links und unten ein riesen Abstand. Zudem sieht ist das Design abgschnitten, was nicht schön aussieht.
Wenn ich meinen Browser für eine Auflösung von 800x600px Skaliere, sieht es noch schlimmer aus: Vertikaler sowie Horizontaler (wobei zweiteres das schlimme ist) Scrollbar.
Zudem ist dann unten etwa 20px Freierplatz zwischen Browserrand und Grafischenende deiner Seite, also 20px blauer Hintergrund. Beim Markieren fällt auf das dort geschützte Leerzeichen sind. Warum auch immer. Ich würde empfehlen, das du die wegmachst, die haben da nichts zu suchen. Wenn du einen Abstand zum unteren Browserrand willst, dann empfehle ich dir in CSS für body folgendes zu definieren:

Quellcode

1
2
3
body {
margin-bottom: 20px;
padding-bottom: 20px;}
margin ist für den Abstand in Mozilla und Internet Explorer und padding für den Abstand im Opera (oder unterstüzt der mittlerweile auch margin?).
Wobei mein dabei ein bischen aufpassen muss, bei der Angabe von margin und padding, der Internet Explorer hat die schlechte Eigenschaft die beiden Werte anzuzeigen also: 20px margin + 20px padding = 40px Abstand - Warum auch immer.

Bei den Überschriften im Menü fällt mir auf, das die Schrift sehr weit unten ist, was sehr komisch aussieht. Zudem ist das Schwarz dabei sehr dominant, wie wäre es dabei mit einem nicht so dominanten Grau ala #404040 ?
Zudem fällt mir der Schatten der Überschriften-Hintergründe auf, der sehr stark ist und nicht harmonisch in dieses Design passt.

Der Quellcode ist der Wahnsinn! So ein echt gewagtes Tabellenkonstrukt habe ich lange nicht mehr gesehen. Besonders lustig (traurig?) - die width Angaben:

Quellcode

1
2
3
  <table width="1004" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
    <td colspan="3" width="1005" valign="top" style="background-image:url(./gfx/Header.jpg); height:206px;">


Soviel zu meiner vorläufigen Bewertung. Bin mal gespannt, wie das Projekt weiter geht.

MfG Nash :)

12

Sonntag, 7. Dezember 2003, 16:31

[q=Nash.Bridges]Zudem ist dann unten etwa 20px Freierplatz zwischen Browserrand und Grafischenende deiner Seite, also 20px blauer Hintergrund[/q]
Das liegt an Geocities und nicht an mir. Ich will gar keinen Rand am unteren Ende haben. Mit der selben HP offline tritt naemlich der Fehler nicht auf.

[q=Nash.Bridges]Der Quellcode ist der Wahnsinn! So ein echt gewagtes Tabellenkonstrukt habe ich lange nicht mehr gesehen. Besonders lustig (traurig?) - die width Angaben[/q]
Dann erklaer mir mal bitte wie ich den Code aendern kann, ohne dass eine horizontale Bildlaufleiste entsteht. Denn wenn ich den Tabellenabschnitt kleiner halte als die Tabelle, ensteht diese Bildlaufleiste, die richtig nervt.
Vllt. mache ich ja etwas falsch - nur wenn ja was ?

MfG Tomi :)

13

Sonntag, 7. Dezember 2003, 17:28

Wie wäre es mit nicht statischen Angaben (px) sondern lieber mit skalierbaren (%)?
Also statt 1004px lieber 100% weite.
Die Angaben musst du selber an die passenden Stellen einbauen, weil der Quellcode viel zu unübersichtlich ist und ich gerade nich die Zeit/Lust dazu habe alles rauszupflücken.

Also die Übergreifende Tabelle bekommt die weite 100%, die Menüs (rechts und links) bekommen eventuelle eine statische Angbe in Pixel oder skaliebare Angaben, kommt darauf an, das musst du am besten selber austesten.
Dann bekommt der Content-Bereich in der Mitte am besten keine width angabe. Dann müsste das eigentlich recht gut klappen.

HTH Nash :)

14

Sonntag, 7. Dezember 2003, 18:20

Hi,
hab ich jetzt so halb umgesetzt. Doch zurueck zur Hauptfrage: "Wieso kann ich nicht im mainframe weiter oben schreiben ?" kann mir das einer erklaeren?

MfG Tomi

15

Sonntag, 7. Dezember 2003, 18:30

Zitat

Original von xcase
Hi,
hab ich jetzt so halb umgesetzt. Doch zurueck zur Hauptfrage: "Wieso kann ich nicht im mainframe weiter oben schreiben ?" kann mir das einer erklaeren?

MfG Tomi
Lies dir nochmal meinen letzen post durch...da stehts...
Signatur von »Darii« Against TCPA - TCPA heißt Freiheit verlieren
D.A.R.I.I.: Digital Artificial Replicant Intended for Infiltration

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Darii« (7. Dezember 2003, 18:32)


16

Sonntag, 7. Dezember 2003, 18:38

Uups, da lag ich mit meiner ersten Vermutung wohl etwas daneben... ;)

Aber ich glaube, ich weiß jetzt, was Du meinst.

Ändere mal:

Quellcode

1
2
3
<TD>
<DIV class=mainfont>Das ist ein gewoehnlicher Text</DIV>
</TD>


in

Quellcode

1
2
3
<TD valign="top">
<DIV class=mainfont>Das ist ein gewoehnlicher Text</DIV>
</TD>


Das funktioniert auf jeden Fall.

<edit>Uups, Darii war schneller. Das hat man davon, wenn man sich mit dem Schreiben der Antwort zuviel Zeit lässt...</edit>
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »LapisInfernalis« (7. Dezember 2003, 18:40)


17

Sonntag, 7. Dezember 2003, 18:42

Zitat

Original von Nash.Bridges

Quellcode

1
2
3
body {
margin-bottom: 20px;
padding-bottom: 20px;}
margin ist für den Abstand in Mozilla und Internet Explorer und padding für den Abstand im Opera (oder unterstüzt der mittlerweile auch margin?).
Wobei mein dabei ein bischen aufpassen muss, bei der Angabe von margin und padding, der Internet Explorer hat die schlechte Eigenschaft die beiden Werte anzuzeigen also: 20px margin + 20px padding = 40px Abstand - Warum auch immer.
So ne komische Erklärung habe ich noch nie gesehen... :D

margin: Außenabstand
border: sichtbare Begrenzung
padding: Innenabstand
Mein Mozilla (1.5) zeigt beides - padding und margin - an... mein E (6 SP 1) ebenfalls. Und meine Operas (5.12/6.04) zeigt auch beides an...

was benutzt du für einen Opera? Schick ihn mir bitte zu - ich sammle nämlich die ersten Operas (v1.0-v3.6)... ;)
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

18

Sonntag, 7. Dezember 2003, 18:53

Die umsetzung auf skaliebare Breite hat noch einige Fehler, die sowohl Grafisch bedingt sind als auch Quelltext bedingt, siehe Screenshot -> http://psilab.pltg-datahaven.net/temp/mygraphics-fehler.jpg

Bei dem Header könnte man z.B. einen Fadout ins Weiße machen und bei der Tabellezelle als Hintergrundfarbe Weiß (#FFFFFF) angeben.
Dann unterdem Header das 3D Rohr mit einem Hintergrundbild, das nur Verticalangezeigt wird verlängern.

Wo der Fehler bei dem Menü Rechts und bei dem Content feld lieft, weiß ich leider auf anhieb nicht.

Und noche einen kleinen Tipp:
Statt die Website dafür vorzusehen, das Sie unten bündig mit dem Browserrand abschließt (was ja im Moment nicht der fall ist), könnte man unten eine Grafikeinbauen, die dem Rohr oben ähnelt ;) - nur mal so als Gedanken anstoß.

MfG Nash :)

@Alex:
Ich benutzte garkeinen Opera, ich habe nur davon gehört, das Opera nur padding anzeigt - aber Zeiten ändern sich :) .

Zitat

was benutzt du für einen Opera? Schick ihn mir bitte zu - ich sammle nämlich die ersten Operas (v1.0-v3.6)...
Mal sehen, vielleicht habe ich einen von denen noch irgendwo auf einer CD ;) .

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Nash.Bridges« (7. Dezember 2003, 18:56)


19

Sonntag, 7. Dezember 2003, 19:39

[q=Darii]Lies dir nochmal meinen letzen post durch...da stehts...[/q]
Tut mir leid, habe ihn leider uebersehen. Funktioniert aber - danke 8)

@Lapis.Infernalis auch danke!!!! 8)

@Nash.Bridges werd ich mal versuchen, alles umzusetzen

Noch eine Frage:
Wie kriege ich die Schrift bei den headlines ein bisschen nach oben verschoben ? ( sollte in der Mitte dann sein )

Ich meld mich dann, wenn es einigermassen fertig ist.

MfG Tomi

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »xcase« (7. Dezember 2003, 19:41)


20

Mittwoch, 10. Dezember 2003, 14:01

RE: Meinung abgeben

Hy!

Was soll ich sagen ausser .... SCHICK MA DEN LINK ZU EURER PAGE WENNS GANZ FERTIG IS!!!
Bis jetzt find ichs echt WAHNSINN.

:))