Hilfe!!! Div-Container passt sich nicht an Seitengröße an

  • #1
M

Max18

Aktives Mitglied
Themenersteller
Dabei seit
15.03.2004
Beiträge
27
Reaktionspunkte
0
Hallo,
erst einmal bitte ich um Nachsicht, da absoluter Anfänger in Sachen HTML und CSS. Es gibt zwar ähnliche Einträge hier im Forum, aber keiner, der genau auf mein Problem passt.

Für eine Projektarbeit in der Schule habe ich folgende CSS nach den Vorstellungen unseres Lehrers angelegt.

Ich habe mit einer Auflösung von 1280 x 1024 gearbeitet. Verkleinert man die darauf basierende Seite, werden auch (fast) alle Container der geänderten Auflösung angepasst. Nur die Div.unten macht nicht mit und schiebt sich über die anderen Container, so daß die Seite total unansehnlich wird. Ich habe extra mit %-Werten gearbeitet, damit sowas nicht passiert und auch schon andere Befehle für position ausprobiert... leider ohne Erfolg.

Ich würde mich riesig freuen, wenn jemand die Lösung für mein Problem hat und bitte noch mal um Nachsicht für meine Unwissenheit :)

Vielen Dank im voraus und viele Grüße,

Nadine



Code:
BODY {
	background-color : #FFE4B5;
	font-family : sans-serif;
}
A {
		font-family : sans-serif;
	font-size : medium;
	color : red;
}
A:HOVER {
			font-family : sans-serif;
	font-size : medium;
	color : blue;
}
A.extern {
	font-family : sans-serif;
	font-size : medium;
	color : Olive;
}
A:HOVER.extern {
	font-family : sans-serif;
	font-size : medium;
	color : Aqua;
}
DIV.oben {
	position : absolute;
	width : 99%;
	height : 10%;
	background-color : #DAA520;
	text-align : center;
	font-family : serif;
	color : #00008B;
	font-size : large;
	padding : 3px;
}

DIV.menu {
	position : absolute;
	width : 15%;
	height : 78%;
	top: 11%;
	background-color : #F5F5DC;
	font-family : sans-serif;
	font-size : medium;
	color : red;
	padding: 2px;
}

 DIV.link {
	position : absolute;
	left : 15%;
	top : 11%;
	width : 85%;
	height : 5%;
	background-color : #F5F5DC;
	padding: 1px;
}

 DIV.inhalt {
	position : absolute;
	left : 16%;
	top: 17%;
	width : 66%;
	height : 72%;
	background-color : #FFE4B5;
	padding: 5px;

}

 DIV.rechts {
	position : absolute;
	left : 82%;
	width : 17%;
	top : 17%;
	height : 72%;
	background-color : #F5F5DC;
	text-align : right;
	padding: 4px;
}
DIV.unten {
	position : absolute;
	top : 90%;
	width : 99%;
	height : 10%;
	background-color : #DAA520;
	text-align : center;
	padding: 4px;
}
H2 {
	font-family : sans-serif;
	font-size : large;
	font-weight : bold;
}

SPAN.fett {
	font-weight : bold;
}
SPAN.klein {
	font-size: 8pt;
}

Um den gehts:
Code:
DIV.unten {
	position : absolute;
	top : 90%;
	width : 99%;
	height : 10%;
	background-color : #DAA520;
	text-align : center;
	padding: 4px;
}



* Conny: Code-Tags gesetzt ;) *
 
  • #2
Hi

Sieht soweit ganz gut aus. Kannst du die Seite mal hochladen oder einen Beispiel-HTML Code posten?

Gruß, Michael
 
  • #3
Hier ist der HTML-Code der Startseite:
Die Texte habe ich durch XXX ersetzt.


Code:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>

<html>
<head>
	<title>Homepage</title>
	<link rel=stylesheet href=home.css>
</head>

<body>
<div class=oben><img src=Louna_li.jpg alt=La Louna von links width=48 height=64 border=2> xxx<img src=Louna_re.jpg alt=La Louna von rechts width=48 height=64 border=2></div>

<div class=menu>
<br>
<br>
<br>
<br>
<a href=index.html target=_self>Home</a>
<br>
<br>
<a href=hobby.html target=_self>Mein Hobby</a>
<br>
<br>
  - <a href=dressur.html target=_self>Dressurreiten</a>
<br>
<br>
  - <a href=springen.html target=_self>Springreiten</a>
<br>
<br>
<a href=louna.html target=_self>Mein Pferd</a>
<br>
<br>
<a href=evolution.html target=_self>Pferde Evolution</a>
<br>
<br>
<a href=galerie.html target=_self>Bilder</a>
<br>
<br>
<br>
<img src=oldenburgerbrand.gif alt=Oldenburger Brandzeichen width=100 height=100 border=0>
</div>

<div class=link><a href=index.html target=_self>Home</a> > Startseite</div>

<div class=inhalt><br>
<h2>xxx</h2>
<br>
xxx
<br>
<br>
xxx<a href=hobby.html target=_self>Hobby</a> xxx:
<br>
<br>
<span class=fett>xxx</span>
<br>
<br>
xxx<a href=dressur.html target=_self>Dressurreitens</a> xxx<a href=springen.htmltarget=_self>xxx</a>.
<br>
<br>
xxx, <span class=klein>xxx</span> xxx <a href=louna.htmltarget=_self>La Louna</a> xxx.
<br>
<br>
<span class=fett>xxx:</span>
<br>
<br>
xxx <a href=evolution.html target=_self>Entwicklung</a>
xxx
<br>
<br>
xxx<a href=galerie.html target=_self>Bildergalerie</a> xxx
<br>
<br>
Bitte beachten Sie, dass sich die externen Links auf der rechten Seite in einem neuen Fenster &oumlffnen.
<br>
<br>
xxx
</div>

<div class=rechts><font size=3>N&uumltzliche Links:<br>
<br>
<a href=[url]http://www.oldenburger-pferde.com[/url] class=extern target=_blank>Oldenburger Pferde</a>
<br>
<br>
<a href=[url]http://www.fn-dokr.de[/url] class=extern target=_blank>Deutsche Reiterliche Vereinigung</a>
<br>
<br>
<a href=[url]http://www.ludger-beerbaum.de/[/url] class=extern target=_blank>Ludger Beerbaum</a>
<br>
<br>
<a href=[url]http://www.nadine-capellmann.net/[/url] class=extern target=_blank>Nadine Capellmann</a>
<br>
<br>
<a href=[url]http://www.rundumspferd.de/[/url] class=extern target=_blank>Rund ums Pferd</a>
<br>
<br>
<a href=[url]http://www.reiten.de/Evolution/evolution.htm[/url] class=extern target=_blank>Evolution der Pferde</a>
<br>
<br>
<br>
<a href=[url]http://www.schiller-gymnasium.de/[/url] class=extern target=_blank>Schiller-Gymnasium in K&oumlln</a>
<br>
<br>
<br>
<img src=Galopp.gif alt=Pferd im Galopp width=150 height=102 border=0>
<!-- Search Google -->
<center>
<FORM method=GET action=[url]http://www.google.de/search>[/url]
<TABLE bgcolor=#FFFFFF><tr><td>
<A HREF=[url]http://www.google.de>[/url]
<IMG SRC=[url]http://www.google.de/logos/Logo_25wht.gif[/url] border=0
ALT=Google align=absmiddle></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value=>
<INPUT TYPE=hidden name=hl value=de>
<INPUT type=submit name=btnG VALUE=Google Suche>
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->

</div>

<div class=unten><font size=3>Impressum / Copyright:
<br>
<font size=3>xxxxxxxxxxxxxxxxx;
<font size=2>Haftungshinweis: Trotz sorgfältiger Kontrolle &uumlbernehme ich keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.
</div>

</body>
</html>

* Conny: Code-Tags gesetzt ;) *
 
  • #4
Lass mich raten, er passt sich nicht auf die HÖHE an?!

Wenn ja, dann füg mal in die CSS folgendes ein:

Code:
html
{
	height: 100%;
}

body
{
	height: 100%;
}

Für weitergehende Infos zum Thema DIV Layer empfehle ich dir:

http://www.wintotal-forum.de/index.php/topic,79674.0.html
und
http://css4you.de/wslayout1/index.html

P.S. Was sollen die ganzen <br> Tags da drin? erstens solltest du versuchen nach dem neuen Standard XHTML zu arbeiten, der erfordert das du jeden Tag schließt und somit wird aus einem <br> ein <br /> (weil es ein singel Tag ist), und außerdem gibt es besser Methoden um das Design zu formatieren. Mal ganz davon abgesehen das sich diese Seite auf einer anderen Auflösung als der Optimierten wohl ziemlich grottig aussieht.

Ein letzter Hinweis! HTML (XHTML) sind eigentlich Textauszeichnungssprachen! D.h. sie sind und waren nie dazu gedacht Gestaltungsaufgaben zu übernehmen. Dazu wurde später CSS eingeführt. Wenn du also schon mit CSS anfängst dann solltest du das auch konsequent durchziehen. Siehe den unteren Teil deines Quellcodes.
 
  • #5
P.P.S. Am besten du einigst dich entweder auf groß oder klein geschriebene Tags. Das erspart dir eine Menge Ärger für später. Selbiges gilt auch für die Attribute eines Tags!

Code:
<INPUT TYPE=text name=q size=31 maxlength=255 value=>

Übrigens fehlen dort ein paar Anführungszeichen. Auch diese sind wichtig!!! Ebenso wie das schließende / bei singel Tags. Es sollte demnach lauten:

Code:
<input type=text name=q size=31 maxlength=255 value= />

Achso, das ist übrigens jetzt keine Klugscheisserei von mir, sondern nur ein gut gemeinter Rat. Das erspart die a) Probleme mit der Fehlersuche wenn deine Seite im Browser a anders aussieht als im Browser b. Denn im Webdesign macht oft ein Zeichen eine ganze Menge aus!!!
 
  • #6
Hallo Gandalf,

leider besteht das Problem immer noch, habe die Hinweise berücksichtigt. Auf ccs4you bin ich leider auch nicht fündig geworden. Trotzdem danke für die Tipps.

Gandalf_the_Grey schrieb:
P.S. Was sollen die ganzen <br> Tags da drin? erstens solltest du versuchen nach dem neuen Standard XHTML zu arbeiten, der erfordert das du jeden Tag schließt und somit wird aus einem <br> ein <br /> (weil es ein singel Tag ist), und außerdem gibt es besser Methoden um das Design zu formatieren. Mal ganz davon abgesehen das sich diese Seite auf einer anderen Auflösung als der Optimierten wohl ziemlich grottig aussieht.

Wie eingangs erwähnt, handelt es sich um eine Aufgabe aus dem Informatik-Unterricht. Wir dürfen nur mit dem Texteditor arbeiten und verwenden den alten Standard. Da ich selbst keine Ahnung von HTML und CSS habe, schrieb ich die Quellcodes nur mit Hilfe der KnowWare-Heftchen....  Die Seite wird nie online gehen, deshalb kommt es weniger darauf an, ob sie gut oder schlecht aussieht. Hauptsache, der Aufbau entspricht den Vorgaben, die wir bekommen haben.

Die groß geschriebenen Tags sind für die Suchleiste von Google. Ich habe sie so von Google übernommen, mittlerweile aber korrigiert.

Viele Grüße
 
  • #7
Kannst du die Seite bitte mal online stellen? Dann kann ich mir ein besseres Bild machen und mich ggf. morgen mal dran setzen. Dürfte nicht so schwierig sein!
 
  • #8
Vielen Dank, aber es geht leider nicht: Morgen ist letzter Abgabetermin :-\

und ich wüsste nicht, wie ich sie online stellen könnte. Ginge es nicht, wenn du die index.html und die home.css von dieser Seite in deinen Texteditor kopierst? Der von mir gelöschte Fließtext spielt doch keine Rolle oder?

Mir ist gerade etwas merkwürdiges aufgefallen: Wenn ich die Seite im Fox öffne, werden zwar die Umlaute falsch angezeigt, dafür wird die Seite beim verkleinern richtig angezeigt. Der untere Container wandert dahin, wo er hingehört...
 
  • #9
Max18 schrieb:
Vielen Dank, aber es geht leider nicht: Morgen ist letzter Abgabetermin :-\

und ich wüsste nicht, wie ich sie online stellen könnte. Ginge es nicht, wenn du die index.html und die home.css von dieser Seite in deinen Texteditor kopierst? Der von mir gelöschte Fließtext spielt doch keine Rolle oder?

Mir ist gerade etwas merkwürdiges aufgefallen: Wenn ich die Seite im Fox öffne, werden zwar die Umlaute falsch angezeigt, dafür wird die Seite beim verkleinern richtig angezeigt. Der untere Container wandert dahin, wo er hingehört...

Ja, der IE hat einige eigenheiten was div's angeht. Aber das kann man umgehen. Leider habe ich nicht groß Zeit im moment. Will nach einem 36h Tag (ja der war wirklich so lange) langsam mal ins Bett.

Schmeiß die position: absoluts raus und nehm mal die entsprechende Angabe top usw. raus. Dann sollte es gehen. Ist aber nur ein Schnellschuss. Wann hast du morgen abgabe Termin? (Kommst ja echt früh damit *gg* ) Ich kann mir das ganze so um 7 Uhr anschauen. Dann bin ich wieder fit und auf der Arbeit.

P.S. Arbeite doch mal den von mir verlinkten Thread durch. Ich hatte 1 zu 1 die selben Probleme!
 
  • #10
vielen Dank; aber lass mal gut sein. Um 8 Schule, um 7 los... wenn ich die Positionierung herausnehme, zerhaut es mir den Aufbau. Div.unten verschwindet ganz (wäre aber auch eine Lösung :))

Ich hatte meine Arbeit ja vorgestern in dem Glauben, es sei alles richtig, schon einmal abgegeben. Nur haben wir in der Schule kleinere Monitore und erst da viel der Fehler auf...

Viele Grüße und Gute Erholung nach solch einem langen Tag.
 
Thema:

Hilfe!!! Div-Container passt sich nicht an Seitengröße an

ANGEBOTE & SPONSOREN

Statistik des Forums

Themen
113.838
Beiträge
707.961
Mitglieder
51.491
Neuestes Mitglied
haraldmuc
Oben