• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Grafik auf 100% der Seite

Status
Für weitere Antworten geschlossen.
C

Cheffu

Neues Mitglied
Hallo,
ich habe ein Problem ,dass ich mir einfach nicht erklären kann. Ich habe 2 Dinge meines erachtens gleich aufgebaut, aber einmal funktioniert es und einmal nicht, aber seht selbst:
funktioniert: http://www.cheffu.de/problem/index3.php
funktioniert nicht: http://www.cheffu.de/problem/index2.php
Der erste Kasten geht wie er soll bis ganz rechts.
Der zweite der bis ganz nach unten gehen müsste tut dies aber nicht. Wenn Ich eine feste Größe definiere geht es, aber ich will ihn bis ganz nach unten.

Kann mir dabei jemand helfen?
Schonmal danke im vorraus.

Gruß
Cheffu
 
Zuletzt bearbeitet:
Hat er gar nicht. ".../index2.php" und ".../index3.php". Nur hat er den selben Inhalt drauf. Du solltest aber ersteinmal Grundsätzlich kein Design mti Tabellen machen, sondern Mit DIV-Containern.

Gruß Corvulus
 
Oh sorry wegen dem mit den Links.
Hab dies inzwischen wieder geändert.

Mit div containern kenn ich mich aber leider nicht aus ^^
Kannst du mir ein Beispiel geben wie man diese konstruktion mit div containern baut?
 
Ich hab den Code einfach mal als css eingebaut, aber dies hat nicht geholfen :(

Trotzdem danke


Ich habe gerade gemerkt, dass das Problem hauptsächlich an der doctype liegt. Egal ob ich es als chtml oder als html dokument per soctype definiere geht es nichtmehr
ohne Doctype funktioniert es soweit, aber komischerweise schießt es über das Ziel von 100% der Seite heraus: http://www.cheffu.de/problem/test.php

Mit XHTML Doctype geht es nicht: http://www.cheffu.de/problem/test2.php also muss an diesem Quellcode irgendwas falsch sein:
Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body  topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<div><img src="bilder/navi/kastenlinks/eckel.gif"/><img src="bilder/navi/kastenlinks/oben.gif" width="100" height="33"/><img src="bilder/navi/kastenlinks/ecker.gif"/></div>
<div><img src="bilder/navi/kastenlinks/links.gif" height="100%" width="33"/></div>

</body>
</html>
 
Zuletzt bearbeitet:
kannst du mal zeigen, wie das endergebnis aussehen soll, dann könnte man eventuell lösungswege aufzeiegen.

bei mir aber erst morgen..gute nacht
 
Ich verstehe nicht gan zwas du mir Endergebnis meinst, aber so dürfte dies vielleicht deinem Wunsch entsprechen:
http://www.cheffu.de/problem/problem.html

Dies funktioniert aber nur weil ich eine feste Größe von 800 festgelegt habe. Ich will aber das der Kasten sich auf 100% der Seitengröße anpasst, also egal wieviel text daneben steht.
Auf diverse Empfehlungen in diesem Thread fände ich es gut wenn mir jemand zeigen könnte, wie ich dies mit div-Elementen realisieren kann. Habe das Teil nämlich wieder mit Tabellen aufgebaut, da ich mit divs einfach nicht zurecht komme.

Hier der Quellcode der Seite um nachschauen zu ersparen:
Code: 
<html>
<head>

</head>
<body  topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<table cellspacing="0" cellpadding="0" height="100%" width="166">
  <tr>
    <td><img src="bilder/navi/kastenlinks/eckel.gif"/></td>
    <td><img src="bilder/navi/kastenlinks/oben.gif" width="100" height="33"/></td>
    <td><img src="bilder/navi/kastenlinks/ecker.gif"/></td>
  </tr>
  <tr>
    <td><img src="bilder/navi/kastenlinks/links.gif" height="800" width="33"/></td>
    <td style="background-color:#000000;" width="100"></td>
    <td><img src="bilder/navi/kastenlinks/rechts.gif" height="800" width="33"/></td>

  </tr>
</table>


</body>
</html>
 
weil ich heut gute laune hab:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dein Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
html {height:100%;}
body {
 height:100%;
 margin:0%;
 padding:0%;
}

div#a {
 margin:0% 3%;
 padding:0% 3%;
 height:100%;
 border-left:1px solid #000;
 border-right:1px solid #000;
}
</style>
<body>
<div id="a">
>> Dein Content
</div>
</body>
</html>
 
Also erstmal danke dafür.

Ich muss aber sagen das dies keine Lösung meines Problems bringt. Ich habe versucht dei Gerüst zu verwenden um meinen gewünschten Kasten hinzubringen:
Dein Titel

Aber erstens bring ich die Begrenzungen rechts und links nicht auseinander und das Zwischenstück schwarz und zweitens is es nun nicht auf 100% der Seite, sondern es schießt über das Ziel hinaus und zwar um das Stück,das die obere Grafik benötigt.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dein Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
html {height:100%;}
body {
 height:100%;
 margin:0%;
 padding:0%;
}

div#a {
 margin:0%;
 padding:0%;
 height:100%;
 border-left:0px solid #000;
 border-right:0px solid #000;
}

b {
 margin:0%;
 padding:0%;
 height:100%;
 width:100px;
 background-color:#FF09FF;
}
</style>
<body>
<div id="a">
<img src="bilder/navi/kastenlinks/eckel.gif"/><img src="bilder/navi/kastenlinks/oben.gif" width="100" height="33"/><img src="bilder/navi/kastenlinks/ecker.gif"/><br>
<img src="bilder/navi/kastenlinks/links.gif" height="100%" width="33"/><span class"b">hallo</span><img src="bilder/navi/kastenlinks/rechts.gif" height="100%" width="33"/>
</div>
</body>
</html>
 
Es soll so aussehen wie ich ein paar Posts vorher schonmal geschrieben habe:
http://www.cheffu.de/problem/problem.html

Nur habe ich es dort erstens mit Tabellen gebaut und zweitens tritt genau der selbe Effekt wie bei deiner Konstruktion auf, dass ein Scrollbalken erscheint, weil der Kasetn größer als 100% der Seite ist
 
ich würde das an deiner stelle mit der grafik anders lösen. nimm die komplette grafik und schneide sie nur in zwei teile (nicht die ecken noch separat). eine grafik nur mit den runden ecken links und rechts und eine gerade (mit den gelben streifen und ohne ecken), die du nach unten wiederholen lässt.

diese legst du als hintergrund in den 100%-div, so wie ich es dir gezeigt habe und die grafik mit den beiden runden ecken legst du in einen zweiten div, der in dem ersten liegt. fertig...;)
 
Das könnte vll funktionieren und daskönnte ich auch probieren. Ich habe das Teil aber extra in 3 Teile geschnitten, damit ich die Breite jederzeit noch anpassen kann, da ich noch nicht weis wie breit es werden muss. Also wäre mir die Lösung schon um einiges lieber, wenn das funktionieren würde ^^

Wenn ich aber die komplette grafik mit Ecken auf das andere Div lege, auf dem der Hintergrund das gerade Stück ist, dann wird das nicht gut aussehen, da die Ecken in den Ecken transparent sind. Dann müsste die Hintergrundgrafik durchscheinen nehme ich an

Ich habe es jetzt probiert wie du gesagt hast, aber es tritt genau das selbe Problem auf und vorallem wenn ich opberhalt noch Sachen einfühe wird der Scrollbalken immer größer. Mit diesen Befehlen macht er die Box nicht auf 100% der Seite, also bis nach unten, sondern er Benutzt 100% der Seite und verschieb dies nach unten:
Unbenanntes Dokument
Unbenanntes Dokument
 
Zuletzt bearbeitet:
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
html {height:100%;}
body {
 height:100%;
 margin:0%;
 padding:0%;
}


div#b {
 height:100%;
 width:187px;
 float:left;
 margin-top:10px;
 margin-left:50px;
 margin-right:0px;
 margin-bottom:0px;
 background-image:url(bilder/navi/kastel/quer.gif);
}


</style>
</head>

<body>
<div id="b"><img src="bilder/navi/kastel/obenkomplett.gif" /></div>
hallo<br />
hallo<br />
hallo<br />

hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
hallo<br />
</body>
</html>
nimm mal diesen quelltext...

ich hab in dein css float:left; eingefügt... und den div über deinen text gestellt.
poste bitte mal das fertige ergebnis via link...
gruss
 
Der Code bringt nun das der Text rechts neben dem Kasten steht:
Unbenanntes Dokument

Dies bringt mir erstens nichts, da ich ein Bild wirklich noch über dem kasten haben will und zweitens taucht selbst jetzt wieder ein Scrollbalken auf.
 
das bild kannst du mit dem selben befehl darübersetzen...

wenn du den scrollbalken nicht möchtest, schneide ( wie in dem thread schon erwähnt) bild in zwei teile und setze es in zwei divs ein... in dem unteren teil lässt du dann den hintergrund vertikal wiederholen...
ich glaube mit dem overflow befehl geht das auch in einem div... dann muss dein content aber den befehl haben scrollen zu dürfen! ob sich die beiden befehle vertragen weiss ich nicht!

gruss
 
Es tut mir leid, aber ich vestehe nicht was genau du meinst.
Das Bild ist ja schon in 2Teile und es funktioniert ja auch, dass die ganze Seite ausgefüllt wird. Die Scrollbalken kommen ja aber trotzdem, deshalb verstehe ich nicht ganz was du jetzt anderst macehn willst.
 
kein problem, ich versuchs dir mal zu erklären:
du hast einen div mit dem "kopf" deines bildes... da gibst du an das der hintergrund nur einmal angezeigt wird...
dann hast du ein div da nimmst du dein jetziges bild und schneidest es auf ein breite von einem pixel... nun gibst du via css an das er das hintergundbil vertikal wiederholen soll... so hast du immer deine abgerundeten ecken oben und die seite immer mit dem bild ausgefüllt...

ungefähr verstanden was ich meine?
 
Wenn ich versteh was du meinst, dann bin ich der Meinung, dass wir das schon versucht habe. Genauso ist es beim letzten Link, der in diesem Thread steht also gemacht.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben