Willkommen in der Webstatt Zum Webstatt Blog und Stories
moloch moloch am 06.03.06 18: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ß

netcup.de Warum gibt es hier Werbung?
Scraper Scraper am 06.03.06 18:48

Ähm, wo und in welchem Browser ist das Problem? Im Moment siehts doch gut aus?

moloch moloch am 06.03.06 19:38

nimm die höhenangabe aus dem div "rahmen" raus.. dann weist du was ich mein..

leo am 06.03.06 20: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! ;)

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


gruß, leo

Scraper Scraper am 06.03.06 20: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.

leo am 06.03.06 21: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ß, leo

moloch moloch am 07.03.06 08: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

leo am 07.03.06 13:23

Quote
Original von leo
du meinst das der hintergrund dann nicht mehr bis unten geht?

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

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


gruß, leo



hört mir niemand zu...?

gruß, leo

moloch moloch am 07.03.06 14:41

vielen dank leo

ok problem gelöst :) 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

Christian am 07.03.06 17:03

bin ned sicher, denke aber, dass die sich widht angaben beißen/überlagern

Scraper Scraper am 07.03.06 17: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;
}

Scraper Scraper am 07.03.06 18:41

Quote
Original von moloch
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!

moloch moloch am 07.03.06 18:56

ben ben.. vielen vielen dank... du alter markup fux

leo am 08.03.06 14:09

hallo,
also optimal ist was anderes ;)

nur als denkanstroß - die folgenden beiden punkte sind noch stark verbesserungswürdig.

Quote
Original von leo
- 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ß, leo

Scraper Scraper am 08.03.06 14: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 :D

leo am 08.03.06 20: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 :)
gruß, leo

Scraper Scraper am 08.03.06 22:40

Quote
Original von leo
und so kann die disskusion noch bis ins unendliche ohne vernünftiges ergebnis stehenbleiben.

danke für das kompliment :)


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

So long,
Scraper

moloch moloch am 09.03.06 08:16

meine fresse und ich dachte ich kenn mich wenigstens ein bissel aus... X( 8o :P :(

ihr 2 geeks

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt