Beiträge von DeadEye

Die Listensymbole ändern sich (bei mir) eigentlich normal schnell, solange ich nicht im Menüpunkt Startseite > Kivuli Center > Fotogalerie bin. (hier also : http://koinonia.ko.funpic.de/adoption/index…li&page=centers )
Die Geschwindigkeit wird auf der Seite scheinbar durch die enorm großen *.jpg-Dateien gebremst. 1457.02 KB und 1373.46 KB sind einfach zu groß für eine Internetseite, noch dazu wenn es schon jpgs sind.

Schraub einfach mal die Qualität etwas runter und die Komprimierung rauf, bei 465px * 200px kann die Größe locker auf maximal 300Kb gedrückt werden. Damit dürften sich wahrscheinlich auch die Probleme lösen lassen.

overflow:scroll gibt nur an, dass die seite bei mehr inhalt als auf einem bildschirm platz hat einen scrollbalken erhalten soll, aber nicht, dass dieser immer vorhanden ist.

wobei mich ehrlich gesagt dieses "springen" nicht stört, ist nunmal eine Eigenschaft von einigen Browsern, die im Gegensatz zum IE die Scrollbar nur bei Bedarf komplett einblenden statt sie nur auszugrauen.
Als "Fehler im Design" wird das denke ich niemand auffassen ...

Im Gegenteil: durch eine aktive Scrollbar trotz fehlendem Inhalt durch das Anfügen von Leerraum würde ich mich eher vor den Kopf gestoßen fühlen: Wenn ich scrollen kann, erwarte ich auch, dass da noch etwas mehr kommt als Nichts.

Die Bilder werden wohl am besten per css eingefügt. Weise deinen Tabellenbereichen eigene Klassen zu und füge so die Bilder ein.

bsp.:

<table>
<tr>
<td class="header">
</td>
</tr>
</table>

css

td.header {
background-image:url(bild-url);
}

Über den Aufbau der Tabelle wirst du dir sicherlich schon Gedanken gemacht haben, die Bilder müssen dann nur an der richtigen Stelle eingefügt werden, was im Grunde genommen aber nicht so schwer sein sollte

Falls deine Grafik nicht schon überarbeitet wurde (der "fransige" Teil im Logo ...), stell sie hier rein, geht denke ich am schnellsten

Wie wirken die Kommentarboxen auf euch?
++ siehe Dominikgt ... nur das sie bei mir eher blass-orange sind als gelb ... wessen bildschirm ist "schuld"?

Wie wirkt das Kommentarformular?
++ intuitiv, wer sowas nicht zum ersten mal benutzt hat damit null probleme

Wie wirkt das Kontaktformular? Ist es zu überladen?
++ nein, genau richtig ... die vorgeschlagene Ausblendung der optionalen Angaben wäre das Sahnehäubchen

Ist die Schrift allgemein zu groß?
++ genau richtig, ich hasse es, eine Lupe nehmen zu müssen um aus 1m Abstand eine Seite lesen zu können ...

Wie kommt ihr mit der Menüführung zurecht?
++ wunderbar, keine Klagen

Spricht euch der Schreibstil an?
++ nicht aufdringlich aber dennoch ansprechend. Einzig die Mischung aus "Deine Ressource für Photoshop & Blender sowie HTML & CSS" und der sonst durchgängigen Höflichkeitsform "Sie"/"Ihnen" auf dem Rest der Seite wirkt etwas seltsam.

Wie störend ist die Werbung?
oo kein Ahnung wieso sich alle die Links zur großen Suchmaschine auf die Seite packen, aber wenn es hilft ... sie sind klein genug, dass sie nicht weiter stören

Was mir etwas fehlt: ein direkter Link zu den fertigen Seiten deiner Auftraggeber im Portfolio. So ein kleines Vorschaubild ist für einen Gesamteindruck über die Arbeit nicht sehr aussagekräftig

Zitat von Sp33d3

HI ,

ich nochmal!
ich hab schon wieder ein problem und zwar 1. wenn ich meine hp als vorschau im netscape öffne und dann verkleinere verschieben sich grafik und text . ist das normal oder kann man die elemente so fixieren das das nicht passiert?

Dem Quelltext nach zu urteilen ist das normal. Die Breitenangaben sind in Prozent ... wenn das Fenster verkleinert wird, passt sich Tabelle natürlich an. Fixe Breiten schaffen Abhilfe, nu ists dann mit der Flexibilität vorbei.

Zitat von Sp33d3

2. wenn ich auf vorschau gehe bei frontpage siehts gut /nicht gut und im explorer entsprechend umgedreh, nicht immer aber manchmal.Woran liegt das?

hoffe ihr kennt die probs und könnt mir helfen

Ich habe leider keine Ahnung was Frontpage tut ... Noch nie genutzt

Nachtrag: Ich würde dir davon abraten, Schriftarten über das <font></font>-Tag zu deklarieren, da diese Variante nicht mehr zum aktuellen Web-Standard gehört, <p style="font:Arial, sans-serif;">text</p> ist besser. Zudem nutzt du eine Schriftart, die ich z.B. nicht auf dem Rechner habe, wodurch dein komplettes Design bei mir und sicherlich auch beim Großteil der Besucher völlig anders aussieht. Es gibt zwar die Möglichkeit, die Schriftart-Datei dazu bereitzustellen, aber diese Funktion wird längst nicht von allen Browsern unterstützt. Nutze lieber gängige Schriftarten wie Arial, Helvetica oder Verdana, dann kannst du dir relativ sicher sein, dass es bei den Besuchern so aussieht wie bei dir

Die Kontraste fehlen auf der Seite irgendwie. Der Hintergrund ist unruhig und die Schrift hebt sich auch durch den etwas helleren, halb-durchsichtigen Bereich nur unwesentlich besser ab.
Die Navigation im Kopf ist zwar textbasiert (*jubel*), aber sticht nicht wirklich ins Auge, ich brauchte ein paar Augenblicke um sie zu finden. Zudem würde ich die Positionen der Menü-Einträge nicht wechseln lassen.
Der Lauftext in blau hebt sich auch nicht wirklich ab, gib dem Header evtl. einfach mehr Platz in der Höhe, lass dem Menü Platz, sich zu entfalten (mit etwas mehr css ...) und platziere den "Lauftext" nicht ganz an den oberen Rand oder an einer völlig anderen Stelle.

Was die Bilder von DeviantArt angeht, die du laut eigener Angabe benutzt: Vergewissere dich, dass sie ohne Probleme für eigene Projekte genutzt werden dürfen. Auch Stock-Images gehören erst einmal dem Ersteller und bedürfen seiner Zustimmung für die Nutzung. Nicht das da mal Probleme auftauchen

der Link zur *.html funktioniert gerade nicht ...

Ersetze deinen iframe-Bereich mal mit diesem:

<iframe src="iframe.html" name="Background" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" height="379" width="520"></iframe>

Wenn dann noch ein Rahmen zu sehen ist, liegts entweder an den umgebenden Bildern oder am Inhalt. Der Frame selbst hat jedenfalls keinen Rahmen mehr.

Wie wäre es denn damit? Einige Divs weniger, die Verläufe in den Bereichen 2 und 5 würden durch ein Hintergrundbild mit 840 Pixeln Breite und ca. 5 Pixeln Höhe fortlaufend an den Rändern angezeigt, pro Seite stehen für den Verlauf 30 Pixel zur Verfügung. Ist auch nicht dynamisch, aber auf Bildschirmen mit einer Auflösung von >800 px in der Breite akzeptabel

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
	<title>Untitled</title>
</head>


<body style="margin:0; padding:0; width:100%; height:100%;">


<div style="width:840px; height:940px; margin-left:auto; margin-right:auto; background-color:#CCC;">

	<div style="width:780px; height:100px; background-color:#f00; position:relative; margin-left:auto; margin-right:auto;">
		Header
	</div> 

	<div style="width:780px; position:relative; margin-left:auto; margin-right:auto;">

		<div style="float:left; width:160px; height:840px; background-color:#FF7F24">
			Men&uuml;
		</div> 

		<div style="float:left; width:620px; height:840px; background-color:#CD661D">
			Inhalt
		</div> 
	</div> 
</div>


</body>
</html>

Für kleinere Auflösungen wäre eine Anpassung der Breite allerdings auch kinderleicht zu realisieren ...

Kann mich eigentlich nur anschließen. Das Design an sich ... nicht mein Geschmack, aber wenn es von der Mehrheit des Vereins getragen wird, warum nicht. Der Quelltext lässt sich für aktuelle Browser wesentlich schlanker gestalten (Tabelle und JavaScript wurden schon als ersetzenswert erwähnt )

Beim Durchblättern fallen mir die recht verschwommenen Bilder ins Auge (Logo auf der Startseite sehr pixelig, einzelne Fotos schlecht komprimiert, Kontrast / Helligkeit fehlen teilweise).

Ich würde einfach den Quelltext runderneuern und den Inhalt auf einen aktuellen Stand und "Hochglanz" bringen, Bildbearbeitungsprogramme mit der Möglichkeit von Nachbearbeitung, guter Komprimierung und dennoch guter Qualität fürs Netz gibts wahrlich zur Genüge.

Wenn der Verein doch ein völlig neues Design wünscht ... naja, dann halt das

sejuma,

sauber, danke dir!

Eigentlich logisch ... wenn man einem beliebigen Element beim IE kein :hover zuweisen kann, dann halt aufs Altbewährte zurückgreifen und ein a:hover nutzen ...

Aus diversen Gründen hilft mir ein Hintergrundbild nicht weiter (ich lade von CD, ein Bild ist bei mir skaliert Thumbnail, mittlere Version und am Ende in einem Album nochmal 1:1 für alles zuständig ... Ladezeiten wie im Netz gibts da ja nicht ...), zudem müsste ich bei der Variante mit Hintergrundbild jedem Link eine neue Klasse zuweisen, was sich bei Verwaltung über ausgelagerte *.css-Datei als sehr umständlich erweist, wenn man mehrere Seiten mit je vier unterschiedlichen Bildern erstellt.

mein css-Schnipsel

a.info {
	margin:10px 0 10px 10px;
}
a.info:hover {
	z-index:500;
	background-color:#fff;
}
a.info span {
	display:none;
}
a.info:hover span {
	display:block;
	width:512px;
	height:384px;
	position:absolute;
	bottom:25px;
	right:25px;
	padding:0;
	margin:0;
}

An sich das Gleiche wie oben, nur ohne Hintergrundbild. Die Bilder werden auf jeder Seite einzeln eingefügt, wodurch eine Klasse für alle Seiten reicht:

<a class="info" href="#">
  [img]bild_klein.jpg[/img]
  <span>
    [img]bild_mittel.jpg[/img]
  </span>
</a>

... jo, geht wunderbar in FF und IE ... Opera hoffentlich auch

Danke nochmals

Servus,

schlage mich derzeit bei einem Projekt mit dem gleichen Problem herum. Abhilfe schafft hier glaube ich nur JavaScript, der IE 6.x ist zu "blöd" für css. Notfalls einen Link einbinden, der auf eine extra-Galerie oder ein PopUp verweist, in der/dem die Bilder dann für Nutzer des IE groß zu sehen sind.

Etwas anderes hab ich leider nicht in der Hinterhand, sollte jemand eine elegantere Lösung dafür haben ... her damit

Zitat von max345

Also ich bin da nun schon ein gaanz kleines Stückchen weiter.
Die 'div-elemente' sehen im ie so bescheiden aus, weil sie genau eine Zeile hoch sind. Wenn ich nun also ein wenig Text/Zeilenumbrüche dort mit rein quetsche, um die Höhe zu ändern, wird mehr von der Grafik angezeigt. Das wäre zwar sehr gefuscht, aber für den Anfang schon nicht schlecht.
Probleme würde noch immer der linke Rand machen, da man beim Scrollen ganz schnell ans Ende es Divelementes kommt und die Grafik nur innerhalb bis zu dessen Ende wiederholt wird.

Wie sieht denn nun eine saubere Lösung aus, um 'die Höhe des Divs' ohne css festzulegen?

Achja beim der Transparenz bin ich auch ein kleines bischen weiter. Als Gif wird sie angezeigt. Es bleibt jedoch ein weisser Rand um die grüne Schlange und sie wirkt etwas krümelig. Das werde ich früher oder später aber sicher noch mit einem anderen Grafikprogramm hinbekommen (ich nutze zur Zeit Gimp). Kennt jemand eine 'günstige' alternative?

eine feste Höhe ohne css ... theoretisch wäre eine Gif-Grafik möglich, die einfach nur transparent ist und dann entsprechend gestreckt als Platzhalter dient. Aber warum diese Abneigung gegen css?

Was die Transparenz bei *png-Grafiken angeht: Der Internet Explorer hat (mindestens bis Version 6) ein Problem damit ... bei mir werden die transparenten Flächen z.B. grau angezeigt ...
Der weisse Rand um die grüne Schlange liesse sich sicherlich durch die passende Hintergrundfarbe im Grafikprogramm entfernen (also schon die Farbe wählen, die auch der Hintergrund der Seite haben soll), das "krümelige" ... naja, die 256 Farben für gifs tun ihr übriges, Dithering hilft auch nur bedingt und treibt die Größe der Datei nach oben, ist aber sicherlich bekannt

zum Grafikprogramm kann ich leider nichts sagen, günstig und umfangreich ... ka ...

es gibt kein "valign" weil es ausgeschrieben wird und "vertical-align" heißt

edit: lösungsansatz entfernt ... zu kurzsichtig getippt -.-

http://de.selfhtml.org/html/grafiken/ausrichten.htm

recht hast du ... wobei ich zugeben muss, dazu bin ich auch meist zu faul *duck*

Das liegt nicht an WinXP ... das liegt an der unterschiedlichen Interpretation durch IE und Firefox ...
Lösung: nicht so schreiben das es für einen Brwoser schön aussieht, sondern so, dass es auf allen halbwegs gleich aussieht. Der Firefox hält sich so ziemlich an die Vorgaben vom W3C ... der IE leider nicht, ist aber nach wie vor Marktführer bei den Browsern ... schreibt man für den FF, ist man auf der sicheren Seite was Validität angeht, aber etliche Dinge funktionieren beim IE nicht. Andersrum ists nicht besser, einige IE-Spezifische Angaben werden vom FF nicht oder anders interpretiert, was dann wiederum in unterschiedlicher Optik resultiert.

Lad dir am besten den Firefox runter und schau zwischendurch immer mal wieder mit beiden Browsern das Ergebnis an:

5,4 MB
http://www.mozilla-europe.org/de/

das ist doch wieder genau das, was am Anfang auch schon nicht ging, einzig die einzelnen divs sind einem umfassenden div gewichen ...
Die Tabelle innerhalb des divs ist quatsch, wenn schon divs und css, dann richtig. Fang gar nicht erst an, wieder Tabellen fürs Layout dazwischen zu mischen.
Habe nochmal alles zusammenhängend abgetippt (siehe code-Bereich). Für die Zentrierung des divs fehlte vorher eine Breite, mein Fehler. So gehts jetzt aber.
Für die feste Breite der Buttons benötigen diese die Angabe "float:left", ansonsten wird die Breite nicht interpretiert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
	<title>Testseite</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<style type="text/css">
	<!--
		body {
		background-color:#808080;
		padding:0;
		margin:0;
		}
		div.nav_con {
		margin:0 auto 0 auto;
		width:650px;
		}
		ul#nav {
		   list-style:none;
		   margin:0;
		   padding:0;
		}

		ul#nav li {
		  display: inline;
		}

		ul#nav li a {
		  padding:2px 4px 2px 4px;
		  margin:0 10px 0 0;
		  float:left;
		  width:100px;
		  color:#808080;
		  background-color:#004040;
		  text-align:center;
		  text-decoration:none;
		  font-size:15px;
		  border-top : 1px solid silver;
		  border-right : 1px solid black;
		  border-left : 1px solid silver;
		  border-bottom : 1px solid black;
		}
		ul#nav li a:hover {
		  padding:2px 4px 2px 4px;
		  margin:0 10px 0 0;
		  float:left;
		  width:100px;
		  color:#004040;
		  background-color:#808080;
		  text-align:center;
		  text-decoration:none;
		  font-size:15px;
		  border-top : 1px solid silver;
		  border-right : 1px solid black;
		  border-left : 1px solid silver;
		  border-bottom : 1px solid black;
		}
		 -->
	</style>
</head>
<body>


<div class="nav_con">
	<ul id="nav">
		[*][url='home_frame.html']Home[/url]
		[*][url='aboutme_frame.html']About me[/url]
		[*][url='photos_frame.html']Photos[/url]
		[*][url='videos_frame.html']Videos[/url]
		[*][url='contact_frame.html']Contact[/url]
	[/list]
</div>


</body>
</html>

Mal ehrlich:

die Seite hat in der Quelltextansicht ca. 2500 Zeilen. Ich habe keine Ahnung, ob man an dem Quelltext, der scheinbar durch ein CMS zusammengebaut wird, selbst irgendwas ändern kann. Für meinen Geschmack sieht die Seite irgendwie bunt durcheinander gewürfelt aus, verschieden große Boxen, die wild im Raum schweben ... ich tippe darauf, dass die Box mit dem Überschrift "SuerMachtFotos: Kommentare von Freunden" zentriert werden soll ... einen anderen Kommentarbereich hab ich nicht gefunden.

Die Tabelle dazu beginnt irgendwo bei Zeile 795 ... aber ob du die einfach so zentriert bekommst mit einem simplen <center></center> ist noch fraglich ... Keine Ahnung, wo die in der Gesamtseite noch drin steckt und ob andere Abhängikeiten gegeben sind ...

Hm ... es gibt nur eine Art von hover. Kannst ja schließlich nur mit der Maus über dem Link sein oder nicht.
Eine Möglichkeit ist die Formatierung der Situation "Maus über Link" mit css ...

Quellcode ist immer hilfreich

Allerdings kannst du über verschiedene Klassen verschiedenen Links unterschiedliche Effekte zuschreiben ...

um das menü zu zentrieren:
fürs css

div.nav_con {
margin:0 auto 0 auto;
}

für den html-Bereich

<div class="nav_con">
<ul id="nav">
.
.
.
[/list]
</div>

Die Angabe "margin:0 auto 0 auto;" bewirkt eine Zentrierung, die Reihenfolge der Abstände ist: oben, rechts, unten, links.

Zitat Selfhtml:

Zitat von SELFhtml

Beachten Sie:

Wenn Sie das iframe-Element in einer HTML-Datei notieren, müssen Sie in dieser Datei die HTML-Variante Transitional wählen.