Frage zu Faux Columns (Rahmen/Border)

pex · #1 (**permalink**) 11.03.2012, 16:50

Habe mit Hilfe der Faux Columns meine Testseite optisch ein bisschen verbessern können. Allerdings fehlt mir unten ein Rahmen und ich weiß nicht wie ich den Rahmen an die gewünschte Stelle bekommen kann.

Screen:
http://www10.pic-upload.de/11.03.12/5i6pcxn1f8w.jpg

Code:

Code:

#container {
	background: 		url(faux_columns.jpg) repeat-y left top;
	width:				902px;
	float:				left;
	margin:				20px 0px 20px 0px;
}

#main {
	width:				600px;
	border:				solid 1px #000;
	float:				left;
	padding:			20px;
}

#sidebar {
	width:				198px;
	border:				solid 1px #000;
	border-bottom:		0px;
	float:				right;
	padding:			20px;
}

Wie im Screen zu sehen, fehlt der Rahmen an der Stelle an der die Spalte künstlich durch verlängert wird. Wenn ich jetzt den Befehl border-bottom auf "1px" setze in #sidebar, dann ist der Rahmen eben direkt unter dem Text...

Ist das überhaupt möglich? Und falls nicht, habt ihr vielleicht irgendwelche Tipps?

IChao · #2 (**permalink**) 11.03.2012, 19:00

Der footer könnte diesen Rahmen zeichnen. Oder auch nicht. Geht aus deinem Schnipsel, deinem Screenshot und der fehlenden URL nicht hervor.

pex · #3 (**permalink**) 12.03.2012, 18:10

Hier die URL:

BLOG

Hier der komplette CSS CODE:

Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color:
}

#wrapper {
	width:				902px;
	margin:				40px auto;
	font-family:		Verdana, Geneva, sans-serif;
	background-image:	url;
}

#header {
	width:				880px;
	height:				110px;
	border:				solid 1px #000;
	background-color:	#666;
	padding:			0px 0px 0px 20px;
	border-top-left-radius: 	10px;
	border-top-right-radius: 	10px;
}

#navi {
	width:				880px;
	height:				30px;
	border-left:		solid 1px #000;
	border-right:		solid 1px #000;
	border-bottom:		solid 1px #000;
	background-color:	#CCC;
	padding:			10px 0px 0px 20px;
}

#container {
	background: 		url(faux_columns.jpg) repeat-y left top;
	width:				902px;
	float:				left;
	margin:				20px 0px 20px 0px;
}

#main {
	width:				600px;
	border:				solid 1px #000;
	float:				left;
	padding:			20px;
}

#sidebar {
	width:				198px;
	border:				solid 1px #000;
	border-bottom:		0px;
	float:				right;
	padding:			20px;
}

#footer {
	width:				902;
	clear:				both;
	background-color:	#CCC;
	border:				solid 1px #000;
	text-align:			center;
	border-bottom-left-radius: 	10px;
	border-bottom-right-radius: 	10px;
}
	
	

h1, h2, h3, h4, h5, h6 {
	font-family:		Georgia, "Times New Roman", Times, serif;
}

.navigation:link {
	border:				solid 1px black;
	color:				white;
	background-color:	#666;
	text-decoration:	none;
	padding:			0px 0px 0px 0px;
	text-align:			center;
	font-size: 			0.8em;
	font-weight:		bold;
	letter-spacing:		0.4em;
	border-top-left-radius: 	4px;
	border-top-right-radius: 	4px;
	border-bottom-left-radius: 	4px;
	border-bottom-right-radius: 4px;
}

.navigation:visited {
	border:				solid 1px black;
	color:				white;
	text-decoration:	none;
}

.navigation:active {
	border:				solid 1px black;
	color:				white;
	text-decoration:	none;
}

.navigation:hover {
	border:				solid 1px black;
	color:				white;
	text-decoration:	none;
	background-color:	#CCC;
}

Gibts da ne Lösung?! Kann mir nicht vorstellen, dass man das mit dem Footer lösen kann.

IChao · #4 (**permalink**) 12.03.2012, 19:18

Der Footer könnte seine border an ein zusätzliches Kindelement abgeben. Dann könnte der blanke Footer selbst eine 1x902px Hintergrundgrafik oben tragen, die eben die "border-bottom" von main und sidebar zeichnet.*Der Footer müsste den Abstand nach oben verlieren (kein margin-bottom am container), dieser Abstand wäre ein Padding zum Kindelement. Oder so.

pex · #5 (**permalink**) 14.03.2012, 16:35

Klingt schon mal nach einer guten Idee, sofern ich das richtig verstanden habe.

Habe mal ein Hintergrundbild für den Footer gemacht:

http://www10.pic-upload.de/14.03.12/irjq8d3292b.jpg

Dieses Bild soll jetzt ab dem oberen Rand des Footers erscheinen um den Rahmen für den oberen Rand des Footers und den unteren Rand des Hauptinhalts und der Sidebar zu zeichnen?!

Aber wie bekomme ich das Bild an diese Stelle? Muss ich dafür ein zusätzliches Div (#rahmen) einsetzen? Oder wie kann ich das umsetzen?

Evtl. habe ich das auch falsch verstanden. Wäre dir sehr dankbar wenn du darauf noch mal eingehen könntest.

IChao · #6 (**permalink**) 14.03.2012, 18:35

Das ist die Hintergrundgrafik für den Footer, der ohne Abstand nach oben bündig anschließen soll.

Der footer benötigt wie gesagt ein Kindelement. Dieses div bekommt die richtige border ohne border-top.

K.Roland · #7 (**permalink**) 14.03.2012, 21:36

Geht auch ohne Grafik. Beispiel mit hr { position: absolute;.

Beispiel so:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>test</title>

<style type="text/css">
* { margin: 0; padding: 0; }

html {
   height: 100%;
}
body {
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center;
}
#wrapper {
    margin:	40px auto;
    width: 902px;
    text-align: left;
}
#header {
    background-color:	#666;
    border: 1px solid #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #000;
}
#header h1 {
    padding: 20px;
    margin-bottom: 30px;
}
#header ul {
    background-color: #CCC;
    color: #000;
    list-style-type: none;
    height: 25px;
    padding: 10px;
}
#header ul li {
    float: left;
}
#header ul li a {
    background-color:	#666;
    border:	 1px solid #000;
    border-radius: 4px;
    color: #fff; 
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.4em;
    margin-left: 10px;
    padding: 5px;
    text-decoration: none;
}
#header ul li a:hover {
    background-color: #b8860b;
    color: #fff;
}
#container {
    background-image: url(images/faux_columns.jpg);
    background-repeat: repeat-y;
    background-position: left;
    margin: 20px 0;
    width: 100%;
    float: left; 
    position: relative; 
}
#main {
    width: 601px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    float: left;
    padding:  20px;
}
#sidebar { 
    border-top: 1px solid #000;
    float: right;
    padding: 20px;
    width: 199px;
}
#footer {
    background-color: #CCC;
    border:	1px solid #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #555;
    clear: both;
}
#footer p {
     line-height: 40px;	
     text-align: center;
}
h1, h2, h3, h4, h5, h6 {
     font-family: Georgia, "Times New Roman", Times, serif;
}
hr {
     background-color: #000;
     color: #000; 
     border: #000; 
     height: 1px; 
     width: 239px;
     bottom: 0;
     right: 1px;
     position: absolute;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="header">
<h1>C S S / X H T M L B L O G.com</h1> 
	
<ul>
   <li><a href="http://www.google.de">Home</a></li>
   <li><a href="http://www.google.de">News</a></li>
   <li><a href="http://www.google.de">Tutorials</a></li>
</ul>
</div>
    
<div id="container">

<div id="main">
<h2>CSS 3.0</h2>
<p> Alles über das neue CSS 3.0.</p>
<p> Erfahren Sie mehr über die neuen Möglichkeiten.</p>
<p> Das neue Buch von Michael Musternn erscheint in einem Monat</p>
<p>TEST TEST TEST</p>
<p>TEST TEST TEST</p>
<p>TEST TEST TEST</p>
<p>TEST TEST TEST</p>
<p>TEST TEST TEST</p>
<p>TEST TEST TEST</p>
</div>

<div id="sidebar">
<h2>Sidebar</h2>
<h4> Aktuelle Termine:</h4>
<p> Keine aktuellen Termine vorhanden.</p>
</div>
<hr />    
</div>
   
<div id="footer">
<p>Copyright 2012</p>
</div>
    
</div>

</body>
</html>

Anhang 4557

____________
Gruß,
Roland

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit Faux Columns	deazra	CSS	9	25.09.2011 21:48
Frage zu Faux Columns	mimii	CSS	19	15.09.2008 16:50
Ist bei dem Design was mit Faux Columns?! oder gibt es überhaupt ne Möglichkeit?	dmxrideordie	CSS	2	17.12.2007 19:50
faux columns und height:100% sind keine Lösungen	Mambo_mango	CSS	18	05.05.2005 19:08