Einfache CSS / Div Frage

R

resoucer

Gesperrt
ID: 77379
L
20 April 2006
2.846
109
Hallo, ich habe mal ne kleine Frage. undwar wollte ich mal eine Box dynamisch in der Höhe machen.

Hier mal mein Code:

PHP: 
<div class="contentbox">

	<div id="contentbox_orange_header"></div>
	<span id="corner_left"></span><span id="corner_right"></span>
	<div id="content">
	                   hjkhjkhjk<br><br>
	                   hjkhjkhjk<br><br>hjkhjkhjk<br>
	</div>
	<span id="footer_left"></span><span id="footer_center"></span><span id="footer_right"></span>
</div>

PHP: 
.contentbox {
width:305px;

}

#contentbox_orange_header {
background-image:url("Bilder/content_webdesign_header.gif");
background-repeat:no-repeat;
height:91px;
width:305px;
}


#corner_left {	
background-image:url("Bilder/content_links.gif");
background-repeat:repeat-y;
float:left;
padding-left:4px;
height:100px;
padding-right:10px;



}
#corner_right {	
background-image:url("Bilder/content_rechts.gif");
background-repeat:repeat-y;
float:right;
padding-left:4px;
height:100px;


padding-right:10px;
}

#footer_left {
	background-image:url("Bilder/content_links_unten.gif");
	float:left;
}

#footer_center {
	background-image:url("Bilder/content_unten.gif");
	background-repeat:repeat-y;
	width: 300px;
}

#footer_right { /*kleiner zusatz unten rechts in dem Rahmen */
	background-image:url("Bilder/content_unten_rechts.gif");
	float:right;
	width: 84px;
	height: 29px;
}


#content {
	background-color:#FFFFFF;
	padding-left: 20px;
	text-align:left; 	
}

Leider ist der linke und rechte Rahmen nicht dynamisch in der länge

Wobei footer_right richtig in der Höhe Dynamisch ist / richtig in der Vertikalen. der footer_left ist nicht da :-( footer_center ist auch iwie verschwunden.

Vll. kann man mir ja mal nen kleinen tipp geben was ich da machen muss.

Danke schonmal
 
liro9000 schrieb:
Hast du einen Link zu der Seite?
Und was heißt für dich "Dynamisch in der Länge"?
Zum Vergrößern anklicken....

ne leider nicht, is offline. Dachte vll. kennt sich einer damit aus - ist ja echt nur
Header
linker rahmen
rechter rahmen
linker footer (halt die ecke)
footer center (breite dynamisch)
footer rechts (halt die andere ecke)

Dynamisch meine ich mit -> Wenn der Content größer wird (länger) soll sich der footer nach unten verschieben.
 
wenn sich der content vergrößert schiebt es den footer doch automatisch weiter nach unten. die höhe des div's richtet sich doch nach dem inhalt. oder willst du 2 gleich lange spalten? dann mach doch mal nen screenshot. ohne link oder grafik, was du vor hast, is es schwer was zu sagen
 
okay, frage ich mal anders

ich habe einen div container
class-name "container"

dadrin ist alles enthalten.

jetzt will ich in diesem container links und rechts eine grafik haben (eine art umrandung)

PHP: 
background-image:url("Bilder/content_rechts.gif"); 
background-image:url("Bilder/content_links.gif");

und die beiden grafiken will ich so lang haben wie der div class="container" ist.
und in der mitte halt den content.

normal mach ich ja einfach height:100%; aber iwie sieht man da garnichts. Wenn ich height: 200px; eingebe sieht man aber genau was ich haben will, bloss dann ist die länge halt nur 200px aber wenn der text in dem Container 300px lang ist hören die begrenzer auf einfach so mitten drin da die 200px erreicht sind.
 
wenn du links und rechts ne grafik haben willst in der länge des inhaltes, dann musst du ein hintergrundbild nehmen und repeat-y setzen.
ich würde eine 1px hohe grafik machen mit den 3 bereichen und das mittlere div jeweils in der breite von links und rechts ein padding geben

Also wenn deine beiden bereiche links und rechts z.b. 50px breit sind dann padding: 0 50px und das hintergrundbild in den container. den mittleren bereich deines hintergrundbildes musst du natürlich so breit machen wie der contentbereich auch ist
 
baserider schrieb:
wenn du links und rechts ne grafik haben willst in der länge des inhaltes, dann musst du ein hintergrundbild nehmen und repeat-y setzen.
ich würde eine 1px hohe grafik machen mit den 3 bereichen und das mittlere div jeweils in der breite von links und rechts ein padding geben

Also wenn deine beiden bereiche links und rechts z.b. 50px breit sind dann padding: 0 50px und das hintergrundbild in den container. den mittleren bereich deines hintergrundbildes musst du natürlich so breit machen wie der contentbereich auch ist
Zum Vergrößern anklicken....

jap die Theorie klappt auch....genau so möchte ich das auch umsetzen. Die Grafiken haben schon die richtige größe. Okay, ich fass nochmal zusammen was ich habe

PHP: 
<div class="contentbox">

	<div id="contentbox_orange_header"></div>
	<span id="corner_left"><span id="corner_right">
	<div id="content">
	hjkhjkhjk<br><br>
	hjkhjkhjk<br><br>hjkhjkhjk<br>hjkhjkhjk<br><br>hjkhjkhjk<br>hjkhjkhjk<br><br>hjkhjkhjk<br>
	</div></span></span>
	
</div>
Header wird richtig angezeigt
Jetzt wird sogar der "conrner_left" in der passenden höhe angezeigt.
corner_right liegt iwie über dem corner_left, bekomm den nicht rüber egal was ich eingebe.

Hier die CSS:
PHP: 
#corner_left {
	background-image:url("Bilder/content_links.gif");
	background-repeat:repeat-y;
	float:left;
	padding-right:10px;
	width: 16px;
	clear: left;
}

#corner_right {
	background-image:url(Bilder/content_rechts.gif);
	background-repeat:repeat-y;
	width: 14px;
	float: right;	
	padding-right: 10px;	
}

corner_right hat auch die passende Länge, nur liegt er etwas 2px vom linken rand entfernt (also noch weiter links als der corner_links)
aber ich bekomm den nicht auf der rechten seite rüber. Da wo der Balken hin soll
 
warum du float nimmst weiß ich nicht...einfach background-position: top right und schon sollte es rechts sein. für das linke halt top left

und span-tags um div is eh irgendwie nicht so ganz richtig.
 
baserider schrieb:
warum du float nimmst weiß ich nicht...einfach background-position: top right und schon sollte es rechts sein. für das linke halt top left

und span-tags um div is eh irgendwie nicht so ganz richtig.
Zum Vergrößern anklicken....

PHP: 
#corner_left {
	background-image:url("Bilder/content_links.gif");
	background-position: top left;
	background-repeat:repeat-y;
	padding-right:10px;
	width: 16px;
}
#corner_right {
	background-image:url("Bilder/content_rechts.gif");
	background-position: top right;
	background-repeat:repeat-y;
	width: 14px;	
}
wenn ich das eingebe erscheint weder links noch rechts die grafik
 
lad es einfach irgendwo hoch, das hier zu mühselig so. ich weiß auch nicht wie es genau aussehen soll und was du vorhast

einmal sagst du es soll sich en bild wiederholen so lang wie content da ist und nun die ecken... das sind doch 2 unterschiedliche sachen
 
so habs mal hochgeladen

https://sale.hera.datemas.de/design/index.html

zur erklärung, unten muss noch ein footer zum abschluss hin.
unten links die datei content_links_unten.jpg
dann halt inner mitte mit auto breite content_unten.gif
und rechts unten dann die content_unten_rechts.gif
 
Zuletzt bearbeitet von einem Moderator:
hmm...mach doch einfach ein 300px breites hintergrundbild, links und rechts jeweils den orangenen rand. dann einfach im content-div das bild wiederholen. die ganzen corners brauchst du doch gar nicht... ja also wie ich es oben schon mal geschrieben hatte.
 
baserider schrieb:
hmm...mach doch einfach ein 300px breites hintergrundbild, links und rechts jeweils den orangenen rand. dann einfach im content-div das bild wiederholen. die ganzen corners brauchst du doch gar nicht... ja also wie ich es oben schon mal geschrieben hatte.
Zum Vergrößern anklicken....

kA, da ist irgendwas kompl falsch.
PHP: 
#content {
	background-image:url("Bilder/Abstandshalter.gif");
	background-repeat:repeat-y;
	background-color:#FFFFFF;	
	margin-left: 30px;
	width: 250px;
}
is ne 1x1 pixel grafik. Aber auch da funzt nix
kA, sollte vll. nochmal von 0 anfangen
 
resoucer schrieb:
kA, da ist irgendwas kompl falsch.
is ne 1x1 pixel grafik. Aber auch da funzt nix
kA, sollte vll. nochmal von 0 anfangen
Zum Vergrößern anklicken....

Ich meinte ja auch keine 1x1px Grafik sondern eine Grafik, die so breit ist, wie der Content+die beiden Begrenzungen und 1px hoch (wegen repeat-y)
Also wenn dein Content z.B. 280px breit ist + jeweils 10px Rand links und rechts brauchst du ne Grafik die 300px breit ist und jeweils links und rechts 10px orange hat.

HTML: 
.content{
    background: url('url_zur_hintergrundgrafik') 0 0 repeat-y;
    padding: 0 10px;
    width: 280px;
}
 
HTML: 
<div class="header> </div>
<div id="content">
 bla bla bla
</div>
<div id="footer"> </div>

HTML: 
#header { background: url(hintergrundbild-header) no-repeat }
#content { background: url(hintergrundbild-content) repeat-y }
#footer { background: url(hintergrundbild-footer) no-repeat }

Und als Hintergrundbild für #content nimmst du eine 1px hohe und 350px breite Grafik, die links und rechts den orangenen Rand hat.
 
Richtig , warum arbeitest Du mit Ecken ?

- Header slicen (fix)
- Content slicen (repeat)
- Footer slicen (fix)
 
Hab's jetzt so:

Code: 
#corner_left  {
background-image:url("Bilder/content_links.gif");
background-position:left top;
background-repeat:repeat-y;
}

#corner_right  {
background-image:url("Bilder/content_rechts.gif");
background-position:right top;
background-repeat:repeat-y;
width:305px;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben