[XHTML/CSS] Border Problem bei Div erledigt Verbesserungsvorschläge erwünscht

strolch00 · 27 November 2006

Hi @all,

also ich hab nen Design umgesetzt in Div wie immer jedoch hab ich diesmal ein ganz schlichtes gewählt und die sinnlosen Bilder durch einfache Border ersetzt. Jetzt habe ich ein Problem mit dem mittleren Border der senkrecht verläuft.

Wenn der Contentbereich länger als die News sind funzt das alles top, allerdings gibt es ein Problem wenn der Content kürzer ist. (Passiert warscheinlich nie auf meiner Page, aber ich will es trotzdem richtig haben.

Hier die Seite.

Ich finde einfach keine Möglichkeit die Border dynamisch zu verlängern ohne einen Border mit min-height zu bearbeiten. min-height will ich aber vermeiden, egal wie. Hoffe mal hier weiß noch jemand ne Lösung und es ist sowas simples ist wie display: block; oder sowas.

Danke schonmal

Johnson · 27 November 2006

Hi,

ich hab das Stylesheet mal so verändert:

Code:

* {
			margin: 0;
			padding: 0;
			font-family: Verdana, sans-serif, Tahoma, Arial, Monospace;
		}
		img {
			border: 0;
		}
		input {
			height: 1.2em;
			font-size: 0.7em;
		}
		html, body {
			width: 100%;
			background: #F8F9F9;
		}
		#page {
			width: 801px;
			margin: 0 auto;
			/*border: 1px dashed #000;*/
		}
		/* Redraft links vertikal */
		#r_left {
			width: 93px;
			height: 800px;
			background: url(images/r_left.png) no-repeat;
			float: left;
		}
		#head_line {
			width: 707px;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
		}
		/* Redraft Logo oben */
		#head_line #r_logo {
			width: 168px;
			height: 45px;
			background: url(images/r_logo.png) no-repeat;
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			float: left;
		}
		/* Redraft Slogan oben */
		#head_line #r_slogan {
			width: 538px;
			height: 45px;
			background: url(images/r_head_line.png) no-repeat;
			float: right;
		}
		#head {
			width: 706px;
			border: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
		}
		/* Flash Men? */
		#head #r_flash {
			width: 168px;
			height: 176px;
			background: url(images/r_menu_flash.png) no-repeat;
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			float: left;
		}
		/* Bild */
		#head #r_image {
			width: 511px;
			height: 176px;
			background: url(images/r_head.png) no-repeat;
			float: left;
		}
		/* Quick Navigation */
		#head #r_quicklink {
			width: 25px;
			height: 176px;
			/*background: url(images/r_head_schnellstart.png) no-repeat;*/
			float: left;
		}
		#head #r_quicklink ul {
			width: 25px;
			list-style-type: none;
		}
		#head #r_quicklink ul li {
			width: 20px;
			margin: 3px auto;
		}
		#main {
			width: 706px;
			float: right;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			margin-bottom: 10px;
		}
		#menu {
			width: 168px;
			float: left;
			font-size: 0.8em;
			border-right: 1px solid #827F7F;
			border-collapse: collapse;*/
		}
		#menu p.left {
			float: left;
			margin: 2px 0;
		}
		#menu p.right {
			float: right;
			margin: 2px 0;
		}
		#menu #login {
			font-weight: bold;
		}
		#news {
			width: 168px;
			float: left;
			margin-top: 15px;
		}
		#news p.n_title {
			font-size: 0.9em;
			font-weight: bold;
			margin-top: 2px;
			border-top: 1px dashed #827F7F;		/* Rahmenfarbe */
		}
		#news p.n_text {
			font-size: 0.8em;
		}
		/* News "more" link */
		#news p.n_more {
			font-size: 0.8em;
			text-align: right;
			margin: 0 10px 2px 0;
		}
		#news p.n_more a {
			color: #6495B5;
			background-color: #FFF;
			font-weight: bold;
		}
		#content {
			width: 537px;
			float: right;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
		}
		#content h1 {
			width: 532px;
			height: 16px;
			background: url(images/r_c_head.png) no-repeat;
			font-size: 0.7em;
			padding: 1px 0 0 5px;
			border-bottom: 1px solid #827F7F;		/* Rahmenfarbe */
		}
		#content p {
			width: 533px;
			font-size: 0.8em;
			margin-bottom: 12px;
			padding: 2px;
		}
		#content ul {
			font-size: 0.8em;
			margin: 0 0 12px 35px;
		}
		#foot {
			width: 706px;
			height: 35px;
			border-bottom: 1px solid #827F7F;		/* Rahmenfarbe */
			border-top: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
			clear: both;
			margin-top: 20px;
		}
		#foot p#w3c {
			width: 167px;
			float: left;
		}
		#foot p#w3c span {
			float: left;
			margin-left: 20px;
			margin-top: 10px;
		}
		#foot p#f_nav {
			width: 537px;
			height: 35px;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
		}

Oder wolltest du den Border immer nur so lange, wie der Content-Bereich ist bzw. hab ich was falsch verstanden ?

Gruß

strolch00 · 27 November 2006

sehe ich das richtig das Du den #kommentar aufemacht hast?

Code:

border-right: 1px solid #827F7F;
			border-collapse: collapse;*/

Das ist fast Perfect der Border muss nur noch bis ganz zum Footer gehen.

*edit welchen browser hast du? Mein ff2 zeigt ein ganz anderes aussehen.

Johnson · 27 November 2006

strolch00 schrieb:
sehe ich das richtig das Du den #kommentar aufemacht hast?

*edit welchen browser hast du? Mein ff2 zeigt ein ganz anderes aussehen.

Siehst du richtig.

Ich benutze auch FF2.

Hier mal die richtige Version:

Code:

* {
			margin: 0;
			padding: 0;
			font-family: Verdana, sans-serif, Tahoma, Arial, Monospace;
		}
		img {
			border: 0;
		}
		input {
			height: 1.2em;
			font-size: 0.7em;
		}
		html, body {
			width: 100%;
			background: #F8F9F9;
		}
		#page {
			width: 801px;
			margin: 0 auto;
			/*border: 1px dashed #000;*/
		}
		/* Redraft links vertikal */
		#r_left {
			width: 93px;
			height: 800px;
			background: url(images/r_left.png) no-repeat;
			float: left;
		}
		#head_line {
			width: 707px;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
		}
		/* Redraft Logo oben */
		#head_line #r_logo {
			width: 168px;
			height: 45px;
			background: url(images/r_logo.png) no-repeat;
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			float: left;
		}
		/* Redraft Slogan oben */
		#head_line #r_slogan {
			width: 538px;
			height: 45px;
			background: url(images/r_head_line.png) no-repeat;
			float: right;
		}
		#head {
			width: 706px;
			border: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
		}
		/* Flash Men? */
		#head #r_flash {
			width: 168px;
			height: 176px;
			background: url(images/r_menu_flash.png) no-repeat;
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			float: left;
		}
		/* Bild */
		#head #r_image {
			width: 511px;
			height: 176px;
			background: url(images/r_head.png) no-repeat;
			float: left;
		}
		/* Quick Navigation */
		#head #r_quicklink {
			width: 25px;
			height: 176px;
			/*background: url(images/r_head_schnellstart.png) no-repeat;*/
			float: left;
		}
		#head #r_quicklink ul {
			width: 25px;
			list-style-type: none;
		}
		#head #r_quicklink ul li {
			width: 20px;
			margin: 3px auto;
		}
		#main {
			width: 706px;
			float: right;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			margin-bottom: 10px;
		}
		#menu {
			width: 168px;
			float: left;
			font-size: 0.8em;
			border-right: 1px solid #827F7F;		/* Rahmenfarbe */
			border-collapse: collapse;
		}
		#menu p.left {
			float: left;
			margin: 2px 0;
		}
		#menu p.right {
			float: right;
			margin: 2px 0;
		}
		#menu #login {
			font-weight: bold;
		}
		#news {
			width: 168px;
			float: left;
			margin-top: 15px;
		}
		#news p.n_title {
			font-size: 0.9em;
			font-weight: bold;
			margin-top: 2px;
			border-top: 1px dashed #827F7F;		/* Rahmenfarbe */
		}
		#news p.n_text {
			font-size: 0.8em;
		}
		/* News "more" link */
		#news p.n_more {
			font-size: 0.8em;
			text-align: right;
			margin: 0 10px 2px 0;
		}
		#news p.n_more a {
			color: #6495B5;
			background-color: #FFF;
			font-weight: bold;
		}
		#content {
			width: 537px;
			float: right;
		}
		#content h1 {
			width: 532px;
			height: 16px;
			background: url(images/r_c_head.png) no-repeat;
			font-size: 0.7em;
			padding: 1px 0 0 5px;
			border-bottom: 1px solid #827F7F;		/* Rahmenfarbe */
		}
		#content p {
			width: 533px;
			font-size: 0.8em;
			margin-bottom: 12px;
			padding: 2px;
		}
		#content ul {
			font-size: 0.8em;
			margin: 0 0 12px 35px;
		}
		#foot {
			width: 706px;
			height: 35px;
			border-bottom: 1px solid #827F7F;		/* Rahmenfarbe */
			border-top: 1px solid #827F7F;		/* Rahmenfarbe */
			clear: both;
			margin-top: 20px;
		}
		#foot p#w3c {
			width: 167px;
			float: left;
		}
		#foot p#w3c span {
			float: left;
			margin-left: 20px;
			margin-top: 10px;
		}
		#foot p#f_nav {
			width: 537px;
			height: 35px;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
			float: right;
		}

WebDeveloper rulez

strolch00 · 27 November 2006

Johnson schrieb:
WebDeveloper rulez

Year, ich kann nicht mehr ohne

So nun nochmal zum Prob so schauts ja dann ganz super aus, aber jetzt bist du soweit wie ich auch schonmal war. Nämlich wenn nun der Content länger wird hört der Rahmen beim Menüende auf.

Es ist zwar gut zu wissen das ich net bescheuert bin, aber langsam wurmt es mich. Ich kenne nix weiter also diese Varianten oder min-height.
Und wie gesagt min-height will ich umgehen und ich finde das sehr seltsam das border-collapse: collapse nicht greift kann mir das mal einer erklären? Geht das nur in Table Richtig und nicht bei umrahmten Div´s ?

Ich denke Wenn man diese Frage klären kann, kommen wir ein ganzes Stück weiter. Oder hast du noch Ideen, das ganze Ding ist mir äußerst suspeckt. :-?

*edit
anscheinend bin ich nicht der einzige mit dem Problem.
nun stellt sich mir die Frage ist es ein Bug oder nicht?

Johnson · 27 November 2006

Hmm,

eventuell könntest du das Menü und den Content nochmal in einen gemeinsamen div-container packen.

Also in etwa so (CSS sollte sich aus den id="xy" herleiten lassen):

Code:

<div id="menu_and_content">
   <div id="menu">
     Das ganze Menü wie bisher auch unterteilt
   </div>
   <div id="content">
     Content wie bisher auch
   </div>
</div>

Gruß

strolch00 · 27 November 2006

Ist schon das ist der die id #main dort ist der linke und rechte Rahmen definiert.

Aber mir kommt gra ne idee wenn ich content den Border gebe und dann height: 100% definiere, spricht bis runter #main ende. Könnte doch klappen.

strolch00 · 27 November 2006

Verdammt funktioniert nicht. War aber nen Versuch wert

*edit
wird vielleicht einer von euch hieraus schlau
https://tammofreese.de/2005/12/31/css-min-height-simulation-fuer-internetseiten
habs gerade probier wil aber nicht so wie ich will, es erzielt kein Resultat außer das der Header fast verschwindet.

strolch00 · 27 November 2006

Ich hab jetzt die Nase voll :evil:

scheiß IE ==> also folgendes wenn man folgende Code nutzt

Code:

		#content {
			width: 537px;
			height: 500px;
			float: right;
			border-left: 1px solid #827F7F;		/* Rahmenfarbe */
		}
		/* IE HACK HIDDEN FOR IE; OTHER BROWSER SEE IT*/
		div>#content {
			height:auto;
			min-height:500px;
		}

kann man min-height: verwenden. Das ganze ist ein CSS Hack der aber keine Probleme mit dem IE7 bringt also es funktioniert somit in den IE´s und im FF 2, opera kannsch net testen.

Wenn jemand ne bessere Idee hat bitte noch melden. Bin für Einwände offen.

MfG strolch00

[XHTML/CSS] Border Problem bei Div erledigt Verbesserungsvorschläge erwünscht

strolch00

redraft.de

Johnson

Code-Frevler

strolch00

redraft.de

Johnson

Code-Frevler

strolch00

redraft.de

Johnson

Code-Frevler

strolch00

redraft.de

strolch00

redraft.de

strolch00

redraft.de

[XHTML/CSS] Border Problem bei Div *erledigt* Verbesserungsvorschläge erwünscht

redraft.de

Code-Frevler

redraft.de

Code-Frevler

redraft.de

Code-Frevler

redraft.de

redraft.de

redraft.de

[XHTML/CSS] Border Problem bei Div erledigt Verbesserungsvorschläge erwünscht