• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bitte überprüfen!

T

_Tobi_

New member
Hallo zusammen,

bin gerade an einer neuen Homepage beschäftigt. Das Layout steht nun soweit und darf von euch zerrissen werden ;)

url

CSS ist valide.
HTML ist valide.

Das Layout ist komplett mit DIVs ohne Tabellen umgesetzt. Alle Größenangaben sind fixe angaben in px.
Habe auch schon versucht das ganze mit em zu machen aber sollte in einem Browser eine andere Standardschriftgröße als bei mir eingestellt sein, ist das Layout beim Teufel. Also scheidet diese Möglichkeit aus...

Mit den fixen px Angaben wird im FF leider nur die Schrift gezoomt. Ich wüsste nicht wie ich ein pixelgenaues, zoombares Layout ohne Tabellen und fixen Angaben realisieren könnte???

Ein weiteres Problem hab ich noch:
Verkleinere ich das FF Fenster um einen kleinen Bildschirm zu simulieren dann wird von der Webseite in der Breite etwas abgeschnitten. Scrollbaar ist das ganze dann schon aber ein Teil fehlt....

Die weiteren Seiten der Homepage wollte ich anfangs per AJAX ins zentrale DIV laden lassen, ich werde aber davon wieder abstand nehmen und doch normale Links einbauen, die mir die ganze Seite neu laden, sonst sieht der Suchroboter ja keine Inhalt und ich kann gute Einträge in Google vergessen.
Was meint ihr?

Danke!

Gruß Tobi
 
Zuletzt bearbeitet:
HTML ist valide.
Zum Vergrößern anklicken....
Beinahe...
HTML / XHTML / XML / WML Validator

Mich stört die unterbrochene Symmetrie bei der Unterkante des Logos und der Oberkante des Inhaltsbereiches. Für den würde ich auch die selbe Farbe nehmen, wie für den Hintergrund des Logos.

Anerkannte schreibt man klein.

Zudem müsste man das Ganbze nochmals sehen, wenn es mit Inhalt gefüllt ist.

Edit: Den title würde ich aber für hier abändern bevor die SuMa's vorbeikommen,
sonst ist dieser Thread womöglich über der Seite gelistet, wenn sie denn online ist...
 
Zuletzt bearbeitet:
So also valide ist es nun. Den Link oben in meinem Post hab ich auch geändert.
Du meintest den Link auf die Homepage soweit ich das richtig verstanden habe...

@dkdenz
Kannst du mir erklären warum im IE6 plötzlich ein weißer Balken oberhalb der Impressum Leiste ist? Ich finde die verdammte CSS Zeile nicht die mir das eingebrockt hat:(
 
_Tobi_ schrieb:
Mit den fixen px Angaben wird im FF leider nur die Schrift gezoomt. Ich wüsste nicht wie ich ein pixelgenaues, zoombares Layout ohne Tabellen und fixen Angaben realisieren könnte???
Zum Vergrößern anklicken....

Schau doch mal hier:
No.3.07 :: INTENSIVSTATION - CSS Template :: XTML 1.0 Transitional-dynamic

_Tobi_ schrieb:
Ein weiteres Problem hab ich noch:
Verkleinere ich das FF Fenster um einen kleinen Bildschirm zu simulieren dann wird von der Webseite in der Breite etwas abgeschnitten. Scrollbaar ist das ganze dann schon aber ein Teil fehlt....
Zum Vergrößern anklicken....

Ich sehe auch oben nicht wirklich alles?! Du hast ne 'eigene' Art, die Seite zu zentrieren. Das macht man normal mit
PHP: 
margin: 0 auto;

Hol Dir einfach ein paar Ideen bei oberem Beispiel oder schau mal hier in der Übersicht:
intensivstation :: CSS Templates :: Templates
 
Für den 6er musst Du bei #inhalt_mitte und #inhalt_rechts jeweils 5px zugeben.
Warum weiß der Teufel.
Äquivalent dann natürlich auch für den linken Bereich die Höhe erhöhen.
Das wird aber negative Auswirkungen auf die anderen Browser haben,
weswegen Du zum Fixen CC's (<!--[if lt IE 7]><style type="text/css">Angaben für die IE's älter als 7</style><![endif]-->) nehmen solltest.

Oder Dich an die Vorschläge von anna55 halten...
 
Hallo Anna,

das Problem mit dem weißen Balken hat sich erledigt... Hab die Zeile dann doch gefunden!

Die Art eine Seite zu zentrieren hab ich irgendwo im www aufgeschnappt, wie meinst du das genau mit dem margin:0 auto? Für welchen container in meiner CSS Datei wäre der Eintrag gedacht. Habs im "MIDDLE" ausprobiert dann ist meine Seite aber im linken oberen Eck und nicht in der Mitte.

Möchte mein Layout gerne pixelgenau und ohne em haben, die von dir genannten Links kenne ich bereits. Gibts es keine Möglichkeit einen Zoom der ganzen Seite trotz des pixelgenauen Layouts zu erreichen? Oder müsste dies dann der Browser realisieren, denn eigentlich ist ja ein pixelgenaues Layout und der Begriff Zoom ein Widerspruch in sich...

Ich wäre vorerst zufrieden wenn meine Seite in der Mitte bleibt und bei kleineren Bildschirmen nichts abgeschnitten wird. Das mit dem em Layout führe ich mir beim nächsten Projekt zu Gemüte:)

gruß tobi

PHP: 
#MIDDLE /*keine Farbe*/
{
	position: absolute;
	top: 50%;
	overflow:visible;
	width: 100%;
	left:0%;
}

#container /* WEIß */
{
	position: absolute;
	left:50%;
	margin: 0px 0px 0px -450px; /*um die Hälfte der Breite verschoben*/
	top:-335px;	/*um die Hälfte der Höhe verschoben*/

	/*margin: 0px auto;*/
	height:670px;
	width:900px;
	background:#FFFFFF;
}
 
Hab das jetzt nur im FF probiert. Wirf den Div MIDDLE komplett raus. Wofür ist der denn gedacht? und im Div Container schreibst Du
PHP: 
#container /* WEIß */
{
	margin:0 auto;
	height:670px;
	width:900px;
	background:#FFFFFF;
}

Wobei die weiße Hintergrundfarbe auch entbehrlich ist.
 
Der MIDDLE div sorgt für die vertikale Zentrierung!

Bei deiner Lösung ist zwar die Seite horizontal zentriert aber eben vertikal nicht in der der Mitte sondern am oberen Rand...
Weißt du wie ich das ganze noch vertikal zentriert bekomme?
 
@dkdenz bzgl CSS Template 11:
Leider wird bei dieser Möglichkeit ebenalls wieder der Inhalt beschnitten wenn ich die Fenstergröße verkleinere...
Hm guter Rat ist teuer.

@anna
Möchte eigentlich schon erreichen, dass die Seite auch vertikal zentriert wird, dadurch wirkt sie auch viel besser.
Gibts keine Möglichkeit dies zu erreichen und trotzdem auf kleinen Bildschirmen eine Scrollbarkeit zu erreichen ohne dass Inhalte abgeschnitten werden?
 
Zuletzt bearbeitet:
Ich verstehe sowieso nicht, warum eine Seite vertikal zentriert werden muss.
Spätestens wenn mehr Inhalt eingearbeitet werden muss, stehts Du vor Problemen.
Mach nach oben einen Abstand zwischen 50 oder 100 Pixeln und dann sieht das auch noch ok aus.
Diese Spielereien sind ja ganz nett; zum Ausprobieren, wie man das Alles ausreizen kann.
Aber im wirklichen Leben hat das keinen Platz.
Auch was das Zoomen betrifft.
Der Fx ab 3.0 zoomt inzwischen die gesamte Page.
Die machen das ähnlich wie bei Mac's mit dem Desktop.
Aber die anderen Browser zoomen eben nur die Schrift.
Wenn man das berücksichtigen will, kommt man um ein em- oder %-Layout nicht drumrum.
Webdesign kommt i.d.R. nicht ohne Kompromisse aus.
Da musst Du Prioritäten setzen...
 
Ok ich werde die Seite nur mehr horizontal zentrieren und 100px von oben zugeben. Das vertikale zentrieren ist natürlich kein Muss, vom Gesamteindruck hätte es mirh alt sehr gut gefallen. Mag es auf kleineren Bildschirmen nicht so ins Gewicht fallen, auf meinem 24" wirkte die Seite zentriert viel besser...

Das Layout werde ich in px belassen. Mit em und % habe ich mich schon gespielt aber wird alles nicht so wie ich mir das erwarte.

Danke nochmal für eure Hilfe!
Ich melde mich nochmal wenn die Seite zur endgültigen Version gereift ist.

Gruß Tobi
 
Hab ich schon mal erwähnt, dass ich Spielereien mit CSS liebe und dass ich das alles Herrn Denz und seinem Hinweis auf Stu Nicholls Seiten zu verdanken habe?

Genug der Vorrede. Mit gefällt bei diesen Beispielen nicht, dass der obere Teil des zentrierten Divs bei kleinem Viewport stehts ins Nirwana verschwindet. Hab dann mal ein wenig getestet und glaube, hier eine Lösung gefunden zu haben:
PHP: 
<!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>
  <title>Zentrieren</title>
  <style type="text/css">
html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background:#eae7d7;
	text-align:center;
	min-width:626px;
	min-height:400px;
}

#vertikal{
	float:left;
	height:50%;
	margin-top:-198px;/* half vertical height*/
	width:100%;
}

#horizontal {
	clear:both;
	width:624px;
	margin-left:auto;
	margin-right:auto;
	height:394px;
	border:1px solid silver;
	background:#666;
	overflow:auto;/* allow content to scroll inside element */
	text-align:left;
}
h1 {
	color:#fff;
	margin:0;
	padding:0;
}
</style>
</head>

<body>
      <div id="vertikal"></div>
      <div id="horizontal">
          <h1>Hier beginnt der Inhalt</h1>
	 <p>Hier Text und Text und Text....</p>
      </div>
</body>
</html>
 
Zuletzt bearbeitet:
Danke für den Vorschlag! Bei mir ist es aber vertikal trotzdem nicht zentriert...
So müsste es doch korrekt sein?

PHP: 
html,body{
    height:100%;
    margin:0;
    padding:0;
}

body{
    background:#fee7b2;
    text-align:center;
    min-width:900px;
    min-height:450px;
}

#vertikal{
    float:left;
    height:50%;
    margin-top:-450px;/* half vertical height*/
    width:100%;
	background:#fee7b2;
}

#horizontal {
    clear:both;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    height:670px;
    background:#fee7b2;
    overflow:auto;/* allow content to scroll inside element */
    text-align:left;
}
 
Nicht ganz, sol sollte es korrekt sein:
PHP: 
html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background:#fee7b2;
	text-align:center;
	min-width:900px;
	min-height:450px;
}

#vertikal{
	float:left;
	height:50%;
	margin-top:-223px;/* half vertical height minus borderheight*/
	width:100%;
}

#horizontal {
	clear:both;
	width:900px;
	margin-left:auto;
	margin-right:auto;
	height:444px;
	border:1px solid silver;
	background:#fee7b2;
	overflow:auto;/* allow content to scroll inside element */
	text-align:left;
}
h1 {
	color:#fff;
	margin:0;
	padding:0;
}
 
Noch ein andere Frage an die AJAX Experten:
Ich lade meine impressum.php per AJAX in ein DIV. In dieser impressum.php ist eine externe .js verlinkt die eine Javascript Funktion beinhaltet. Diese Javascript Funktion schreibt die Mail Adresse in die Seite, so dass sie vor Spam Bots geschützt ist.
Beim direkten Aufruf der impressum.php gibt es keine Probleme, alles wie gewünscht. Klicke ich aber auf den Link 'Impressum' um die impressum.php per AJAX zu laden, wird die Javscript Funktion wohl nicht ausgeführt denn ich sehe keine Mail Adressen:(

Kann ich grundsätzlich keine Javascript Funktion in einer php Seite ausführen die per AJAX geladen wurde?

Grußt Tobi

Edit:
Hat sich erledigt!!!!
 
Zuletzt bearbeitet:
Hallo zusammen,

meine Seite ist nun fast fertig, aber wie das so ist kommt natürlich kurz vor Ende wieder ein Problem, dass ich seit heute morgen nicht lösen kann:

Der Link zu besagter Seite ist im ersten Post!
Pw und Kennung:tobias

Seht euch mal unter "Anfahrt" die Google Maps Karte an. Scrollt man mit der Scrollbar nach unten so bleibt das Google Maps div einfach stehen!
Im FF tritt der Fehler natürlich nicht auf...
Muss irgendwas mit Google Maps zu tun haben, wenn ich normalen Text einfüge scrollt alles wunderbar und es gibt keine Probleme!

Ich google seit 5h und hab keine Lösung gefunden... Bitte hilft mir jemand, bin am verzweifeln :mad:

Danke!
lg tobi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben