✔ Dynamische Homepagelänge, und flexible Fenstergröße

Status
Nicht offen für weitere Antworten.
BluntStream

BluntStream

Mitglied
Hallo,

folgendes Problem.

Ich habe eine Homepage erstellt: http://crapdeluxe.cr.ohost.de/crapdeluxe/

Der quelltext dazu lautet

HTML: 
<html>
<head>
	<title>Crap | Deluxe</title>
	<link rel="STYLESHEET" type="text/css" href="portmain.css">
</head>
<body>
<div id="a">
<strong>Links:</strong><p><a href="http://crapdeluxe.cr.ohost.de/crapdeluxe">home</a><br>
		 <a href="http://crapdeluxe.cr.ohost.de/crapdeluxe/news_preview.php?nshow=newsarchiv">archiv</a>
</div>
<div id="b">
<?php
if((! isset($nshow)) || (empty($nshow))) $nshow = "news";
include("news.php");
unset($nshow);
?>
</div>
<div id="c">
only a test
</div>

</body>
</html>

Meine Problem / Frage ist nun, dadurch das ich ein externes News System eingebaut habe verlängert sich die Homepage nicht bei länger werdenden News und/oder bei mehreren News.

1. Wie kann ich den Quelltext so umschreiben, dass durch länger werdende News sich die Homepage auch dementsprechend verlängert.

Css Datei in auszügen:

Code: 
BODY 
{
	background-attachment: scroll;
	background-color: e75681;
	background-image: url(img/background.jpg);
	background-repeat: no-repeat;
}

div#a
 {
  position:absolute;
  top:200px; left:100px;
  width:200px; height:150px;
 }
 
 div#b
 {
  position:absolute;
  top:200px; left:210px;
  width:150px; height:150px;
 }

2. Die ganze homepage ist nicht mittig, wenn ich aber "background-position: top;" eingebe stimmen die div #a; #b und #c bei veränderung des Fensters aber nicht mehr. Also muss ich diese Zeile weglassen. Wie schaffe ich es aber das die Homepage in der Mitte ist, sich aber trotzdem durch größen Änderung des Fenster nichts verschiebt ?


______________________________

Ich hoffe ihr konntet mich halbwegs Verstehen.

Mit freundlichen Grüßen

Bluntstream
 
  • Entferne die Höhenangabe für das DIV#b.

  • Mein Vorschlag wäre eine zentrierte Hintergrundgrafik und ein zentriertes Parent-DIV, in das die übrigen DIVs eingebettet werden:
Code: 
BODY
{
        background-attachment: scroll;
        background-color: #e75681;
        background-image: url(img/background.jpg);
        background-repeat: no-repeat;
        background-position: center;
        padding-left: 50%;
}

div#centerBox
{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
top: 0;
}
HTML: 
<div id="centerBox">
<div id="a">
<strong>Links:</strong><p><a href="http://crapdeluxe.cr.ohost.de/crapdeluxe">home</a><br>
                 <a href="http://crapdeluxe.cr.ohost.de/crapdeluxe/news_preview.php?nshow=newsarchiv">archiv</a>
</div>
<div id="b">
<?php
if((! isset($nshow)) || (empty($nshow))) $nshow = "news";
include("news.php");
unset($nshow);
?>
</div>
<div id="c">
only a test
</div>

</div><!-- end centerBox -->
 
Zuletzt bearbeitet von einem Moderator:
Sorry, da habe ich heute Morgen etwas vergessen:

Code: 
background-position: top center;
Noch eine Anmerkung: du wirst den Seitenhintergrund in zwei Teile aufteilen müssen, damit sich bei zunehmenden Inalt der untere Grafik-Bereich, und nicht die komplette Grafik wiederholt (!)
 
Danke, background-position: top center; , hat dieses Problem gelöst.

Noch eine Anmerkung: du wirst den Seitenhintergrund in zwei Teile aufteilen müssen, damit sich bei zunehmenden Inalt der untere Grafik-Bereich, und nicht die komplette Grafik wiederholt
Zum Vergrößern anklicken....

Genau das habe ich mir auch gedacht, nur wie mache ich das am besten ? Da ja die News durch ein externes Skript eingefügt werden!

/edit


Das Problem ist einfach, dadurch das ich das Bild als hintergrund behandel, kann ich nicht einfach alles in ein Table reinmachen, dass einzige was ich machen könnte ist ein zusätzliches div element unter das Hintergrundbild zu machen, wie sich das aber wiederholen soll weis icht nicht.

edit/
 
Zuletzt bearbeitet:
Ich poste dir mal die technische Lösung (incl. zwei Hintergrundgrafiken, modifizierter CSS- und HTML-Code) als ZIP-Datei ;)
 
Zuletzt bearbeitet von einem Moderator:
Dankeschön, super bin dir echt sehr dankbar. Falls dich das Resultat interessiert:

http://crapdeluxe.cr.ohost.de/crapdeluxe/crapdeluxe.html

____________________________________________________________________

Was ich noch sagen wollte - Bin durch google auf

http://www.css-technik.de/css-examples/170_9/index.php

Dieses Tutorial gestoßen, nur konnte ich es nicht so schön umsetzen wie du. Siehe: http://crapdeluxe.cr.ohost.de/crapdeluxe/test.htm . Außerdem hat es mich seeeeeeeeeeeehr viele Nerven gekostet. Aber wie ich in deiner Modifizierten CSS datei erkennen kann hast du es auf die gleiche Weise gelöst.

Nochmal herzlichen Dank für die schnell Hilfe.

Für alle anderen.

Tut für fortlaufende Hintergründe mit CSS: http://www.css-technik.de/css-examples/170_9/index.php

Demo bzw. Resultat dieser Hilfe: http://crapdeluxe.cr.ohost.de/crapdeluxe/crapdeluxe.html
 
Gern geschehen.

Wenn das Problem somit behoben ist und alles funktioniert, dann markiere den Thread bitte als erledigt (siehe auch meine Signatur), falls nicht schon geschehen.

Vielen Dank ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück