Webstatt.org - Community seit 2006 - 2012 (2024?)

div problemchjen

Avatar user-258
06.03.2006 17:39
Hallo Leute!

Habe ein Problem und zwar möchte ich die Höhe dieser Seite dynamisch machen. Je nach dem wieviel Inhalt das ganze hat. Jedoch scheitere ich daran.. kann mir da wer helfen?


Link:
http://www.mholler.com/hw/

Gruß
Als ich Jung war, hieß Komasaufen noch Vorglühen!
Avatar user-294
06.03.2006 17:48
Ähm, wo und in welchem Browser ist das Problem? Im Moment siehts doch gut aus?
Avatar user-258
06.03.2006 18:38
nimm die höhenangabe aus dem div "rahmen" raus.. dann weist du was ich mein..
Als ich Jung war, hieß Komasaufen noch Vorglühen!
user-228
06.03.2006 19:20
du meinst das der hintergrund dann nicht mehr bis unten geht?

du musst einfach deine floats auch clearen.
denn merke: kein float ohne clear! zwinkern

http://www.positioniseverything.net/easyclearing.html hilft vielleicht.


gruß, user-228
Avatar user-294
06.03.2006 19:29
Du kannst dein MarkUp generell auch noch stark vereinfachen. Hab eben mal angefangen, hab jetzt aber keine Zeit mehr. Evtl komme ich morgen dazu, hier ein Ergebnis zu posten.
user-228
06.03.2006 20:19
joa wie scraper gesagt hat.
hier ein paar ansatzpunkte:

- schmeiß die ganzen br raus, da wo die sind, sind die sinnlos
- deine dot.gif grafik auch ganz fix raus.
- du hast ne div-suppe, das geht mit weniger!
zB:
die nav als ul, nich als div auszeichnen
den bildern kannst du direkt ne klasse geben, musst die nich noch in nen div packen.

-benutz für deine überschriften mal hierachisch gegliederte überschriften (h1-h6)


gruß, user-228
Avatar user-258
07.03.2006 07:33
vieles danke für die tipps mal sehen ob scraper was zum vorzeigen schafft. würd micht sehr intressieren das möglichst schon auszucoden.

edit:

Problemveranschaulichung: http://www.mholler.com/hw/gaestehaus.php
Als ich Jung war, hieß Komasaufen noch Vorglühen!
user-228
07.03.2006 12:23
Original von user-228
du meinst das der hintergrund dann nicht mehr bis unten geht?

du musst einfach deine floats auch clearen.
denn merke: kein float ohne clear! zwinkern

http://www.positioniseverything.net/easyclearing.html hilft vielleicht.


gruß, user-228



hört mir niemand zu...?

gruß, user-228
Avatar user-258
07.03.2006 13:41
vielen dank user-228

ok problem gelöst lächeln aber die variante mit dem schönen code vom ben würde mich sehr intressieren.

edit:

Kann mir jemand erklären warum hier die beiden input felder nicht auf gleicher höhe sind?
das rechte müsste auf der höhe vom linken sein. ich kapiers net

http://www.mholler.com/hw/order.php
Als ich Jung war, hieß Komasaufen noch Vorglühen!
user-150
07.03.2006 16:03
bin ned sicher, denke aber, dass die sich widht angaben beißen/überlagern
Mehr schlaue Sprüche gibt es auf: anotherstyle.de Psicologia
Avatar user-294
07.03.2006 16:45
So, wie versprochen hier mal meine Version des MarkUps:
Evtl kann hier und da noch was im CSS optimiert werden, damit weniger Code dasteht, aber im Großen und Ganzen denke ich, dass es so optimal ist.
Hab dir außerdem auch mal die komplette Version angehängt, da du teilweise sehr großen Grafikquatsch gemacht hast. Beim BG kann ich das ja noch verstehen, aber beim Headder-Schriftzug ist es doch easy. Mach einfach die Überschrift nochmal in Schön, damit nicht diese ganzen Fragmente dran hängen und ersetz die Grafik. Außerdem hab ich hier und da ein paar Grafiken optimiert, so dass es insgesamt etwas kleiner ist.

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Urlaub bei Freunden - www.hauswaltraud.at</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

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

</head>



<body>

<div id="rahmen">

	<img src="images/header_welcome.gif" alt="Herzlich Willkommen" id="welcome" />

	<img src="images/header.jpg" alt="Header" id="header" />

	<ul id="navi">

		<li><a class="navi" href="javascript:void(0);">Freizeitmöglichkeiten</a></li>

		<li><a class="navi" href="javascript:void(0);">Anfahrt</a></li>

		<li><a class="navi" href="javascript:void(0);">Anfrage</a></li>

		<li><a class="navi" href="javascript:void(0);">Preisliste</a></li>

		<li><a class="navi" href="javascript:void(0);">Kontakt</a></li>

	</ul>

	<h1 class="headline">Herzlich Willkommen auf unserer Homepage</h1>

	<img src="images/pfeit.jpg" alt="Pfeit" class="float_left" />

	<br />

	Wir, die Familie Holler, haben es uns zur Aufgabe gemacht Ihnen unsere wunderschöne Urlaubsregion vorzustellen.<br />

	<br />

	Zur Verfügung stehen Ihnen ein Gästezimmer und ein liebevoll eingerichtetes Gästehaus. Genießen Sie die Aussicht aus unserem wunderschönen Wintergarten oder Entspannung pur in unserer hauseigenen Sauna. Vielseitige Freizeitmöglichkeiten erwarten Sie in nächster Umgebung und sorgen dafür, dass Ihnen mit Sicherheit nicht langweilig wird, wie zum Beispiel ein Reithof, Bergwanderungen, Schneewanderungen, Angeln, Museenbesuche und vieles vieles mehr... Lassen Sie sich das nicht entgehen!

	<br style="clear: both;" />

	<h1 class="headline">Unsere Räumlichkeiten für Ihr Wohlbefinden</h1>

	<img src="images/gz1.jpg" alt="Gästezimmer" class="float_left" />

	<br />

	<b>Unser Gästezimmer</b><br />

	<br />

	Im unserem Wohnhaus befindet sich ein Gästezimmer in südlicher Lage für bis zu 3 Personen (Gitterbett vorhanden) Dusche, WC und Sauna auf gleicher Ebene. Frühstück im Preis inbegriffen. <a href="javascript:void(0);">mehr Infos...</a>

	<br style="clear: both;" />

	<br />

	<img src="images/gh1.jpg" alt="Gästehaus" class="float_left" />

	<br />

	<b>Unser Gästehaus</b><br />

	<br />

	Unser Gästehaus liegt in ruhiger Lage, angeschlossen an unser Wohnhaus in dem sich ein Gästezimmer sowie eine Sauna befindet. Die ideale Voraussetzung für einen erholsamen Urlaub in schöner, natürlicher Umgebung mit einen großen Paket an Freizeitgestalltungsmöglichkeiten in nächster Umgebung. Unser ca. 85 m2 großes Ferienhaus ist ausgestattet mit einen Zweibett-Schlafzimmer mit Balkon (südlagig), und einen Dreibettzimmer im ersten Stock. In unserer großräumigen Wohnküche (Auf Wunsch Frühstück mit Aufpreis) im Erdgeschoss finden sie alles womit Sie sich und Ihre Lieben verwöhnen können. Angeschlossen an die Küche befindet sich ein wunderschöner großer Wintergarten mit offenen Kamin. Dusche und WC sind im  Erdgeschoss. Die Lage ist ideal, für ältere Urlaubssuchende, sowie auch wie Familien mit Kindern.  (Gitterbett vorhanden) <a href="javascript:void(0);">mehr Infos...</a>

	<br style="clear: both;" />

</div>

</body>

</html>


style.css
body {

	margin: 0px;

	padding: 0px;

	background-image: url(images/bg.jpg);

	background-attachment: fixed;

	background-color: #e4dac7;

	text-align: center

}



a:link 		{ font-family: Trebuchet MS, Verdana; font-size: 13px; font-weight: bold; color: #815f3e; text-decoration: none; }

a:visited 	{ font-family: Trebuchet MS, Verdana; font-size: 13px; font-weight: bold; color: #815f3e; text-decoration: none; }

a:hover 	{ font-family: Trebuchet MS, Verdana; font-size: 13px; font-weight: bold; color: #ff0000; text-decoration: none; }

a:avtive 	{ font-family: Trebuchet MS, Verdana; font-size: 13px; font-weight: bold; color: #815f3e; text-decoration: none; }



div#rahmen {

	margin: 0px auto;

	margin-top: 50px;

	padding: 6px 10px 20px 10px;

	width: 780px;

	border: 1px solid #d5c4a1;

	background-image: url(images/header_background.gif);

	background-repeat: repeat-x;

	background-color: #ffffff;

	text-align: left;

	font-family: Trebuchet MS, Verdana;

	font-size: 13px;

	color: #837761;

}



div#rahmen img#welcome {

	margin-bottom: 15px;

}



div#rahmen img#header {

	margin-bottom: 20px;

}



div#rahmen ul#navi {

	margin: 0px;

	padding-left: 100px;    /* Achtung: Absolute Positionierung, muss bei Änderung der Menüpunkte verändert werden (daraus folgend width verändern) */

	list-style-type: none;

	width: 670px;

	height: 35px;

	border: 1px solid #a68b59;

	background-image: url(images/navi_background.gif);

}



div#rahmen ul#navi li {

	margin-top: 7px;

	margin-left: 25px;

	display: block;

	float: left;

	font-family: Trebuchet MS, Verdana;

	font-weight: bold;

	font-size: 14px;

	color: #ffffff;

}



div#rahmen h1.headline {

	margin: 20px 0px;

	padding-top: 1px;

	padding-left: 20px;

	display: block;

	width: 750px;

	height: 20px;

	border: 1px solid #a68b59;

	background-image: url(images/headline_background.gif);

	font-family: Trebuchet MS, Verdana;

	font-size: 13px;

	color: #ffffff;

}



div#rahmen img.float_left {

	margin: 0px 20px;

	float: left;

}
Avatar user-294
07.03.2006 17:41
Original von user-258
Kann mir jemand erklären warum hier die beiden input felder nicht auf gleicher höhe sind?
das rechte müsste auf der höhe vom linken sein. ich kapiers net

http://www.mholler.com/hw/order.php


Ein vertical-align: top; wird wahrscheinlich Abhilfe schaffen!
Avatar user-258
07.03.2006 17:56
ben ben.. vielen vielen dank... du alter markup fux
Als ich Jung war, hieß Komasaufen noch Vorglühen!
user-228
08.03.2006 13:09
hallo,
also optimal ist was anderes zwinkern

nur als denkanstroß - die folgenden beiden punkte sind noch stark verbesserungswürdig.
Original von user-228
- schmeiß die ganzen br raus, da wo die sind, sind die sinnlos
-benutz für deine überschriften mal hierachisch gegliederte überschriften (h1-h6)


die brs kannst du soweit alle rausschmeißen - benutz einfache <p></p> für deine text abschnitte. hast du mehr kontrolle.

wenn du sowas wie <b></b> benutzen willst, überleg dir folgendes:
willst du den optischen effekt erzielen, oder einen textabschnitt / ein wort vom sinn her hervorheben?
für ersteres wäre css á la font-weight: bold; vernünftig.
für das zweitere eher <strong></strong>

zudem fehlt eine strukturierung durch überschriften.
dein welcome.gif könntest du zB durch image-replacement (o.ä.) innerhalb eines h1 tags einbinden.
für die untertitel dann jeweils h2
usw...

zu deinem formular:
das kann aufgrund der width und padding angaben schon gar nicht passen - ein valign top wird da nicht helfen.

kurze erklärung

.rechts: width: 450px und margin-right: 15px;
.links: margin-left: 15px und width: 300px;
.text: margin-left: 15px und margin-right: 15px;

addier mal die werte - kommst auf: 810px
10px mehr, als dein div.rahmen breit ist.

deswegen wird das untereinander dargestellt.
für die zukunft kann ich folgendes empfehlen:
entweder du gibtst deinen elementen einfach ein border 1px solid #000 oder so, um die elemente besser identifizieren und besser die ausmaße sehen zu können.
oder alternativ die web-developer toolbar und dann die boxen "outlinen" lassen.

zu deinem markup des forms:
man verwendet labels um input felder logisch mit der beschriftung zu verbinden
zudem wäre es eleganter zwei fieldsets gegeneinander zu floaten, statt 2 divs.


soo genug genörgelt - ist auch eher als denkanstoß zu sehen.
gruß, user-228
Avatar user-294
08.03.2006 13:50
Hm, du weißt, dass ich deine Markups immer bewundert und geschätzt habe, aber ich denke, hier stoßen 2 Philosophien aufeinander.

-Das welcome.gif als h1 per image-replacement? Warum, wenn ich es genausogut, mit der Hälfte des Codes als Image einbinden kann? Was macht die Suchmaschine, die explizit nach h1 bis h6 sucht, und keine Überschrift findet?

-Textformatierung mit Absätzen haben mir noch nie gefallen, und die mach ich aus Prinzip auch nicht. Ich hasse p-Tags, ganz einfach, nenn mir nen Nachteil von br?

Zum Rest sag ich mal nix, der ist nicht auf meinem Mist gewachsen. Beim valign war ich zu faul, ordentlich nachzugucken, und hab mal ins Blaue geschossen Fettes Grinsen
user-228
08.03.2006 19:44
hmm das ist mehr eine frage der bedeutung der elemente.
aber, wie du bereits treffend erwähnt hast, kann die auffassung selbiger wie so oft unterschiedlich sein.

meiner meinung macht es einfach sinn, das welcome.gif aus dem markup in die background-img css definition von h1 span oder so zu verfrachten, ist ja lediglich ein gestalteriches mittel.
natürlich sollte <h1><span></span></h1> auch inhalt haben.
so viel mehr code, wenn überhaupt, is das auch nicht - eher weniger.

zu den <p>: ähnlich den überschriften, ist auch eine frage der semantik. für mich macht es einfach mehr sinn, texte so auszuzeichnen.

zu dem geben sie mir per margin und padding in css auch weitreichene gestalterische mittel.

aber hier gibts meiner meinung nacht kein richtig und falsch, und so kann die disskusion noch bis ins unendliche ohne vernünftiges ergebnis stehenbleiben.

danke für das kompliment lächeln
gruß, user-228
Avatar user-294
08.03.2006 21:40
Original von user-228
und so kann die disskusion noch bis ins unendliche ohne vernünftiges ergebnis stehenbleiben.

danke für das kompliment lächeln


Das denke ich auch, und deswegen lassen wirs doch einfach :] user-158n sag ich noch, bitte bitte, keine Ursache, hast halt wirklich was drauf!

So long,
Scraper
Avatar user-258
09.03.2006 07:16
meine fresse und ich dachte ich kenn mich wenigstens ein bissel aus... X( 8o frech traurig

ihr 2 geeks
Als ich Jung war, hieß Komasaufen noch Vorglühen!