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

Problem mit 3-spaltiger Formatierung

derwunner

derwunner

Mitglied
Hallo,
ich bin dabei ein Jommla! Template etwas zu modden. Von der Programmierung her klappt jetzt alles so weit. Auf jeden Fall, ich bekomms irgendwie nicht hin, 3 divs nebeneinander zu positionieren. Die 3 divs befinden sich in mindestens einem weiteren div.
Ich will mir sozusagen einen Balken mit runden ecken erzeugen über Hintergrundbilder. Ich habs schon mit float probiert, mit position hilft alles nichts. Eines davon ist immer in der nächsten Zeile.
Hier mal der CSS Code:
Code: 
#footer_left {
	float: left;
	background: url(../images/footer_left.jpg) no-repeat;
	background-color: transparent;
	height: 32px;
	line-height: 32px;
	text-transform: none;
	margin: 0px;
	padding: 0px 0 0 0px;	
	width: auto;
	font-weight: normal;
	border: 1px solid #fff;
}

#navipfad h3 {
	background: url(../images/header.jpg) repeat-x;
	background-color: transparent;
	color: #fff;
	text-align: left;
	height: 32px;
	line-height: 32px;
	text-transform: none;
	margin: 0px;
	font-size: 0.8em;
	padding: 0px 0 0 0px;	
	width: auto;
	font-weight: normal;
	border: 1px solid #fff;
}

#footer_right {
	float: right;
	background: url(../images/footer_right.jpg) no-repeat;
	background-color: transparent;
	height: 32px;
	line-height: 32px;
	text-transform: none;
	margin: 0px;
	font-size: 0.8em;
	padding: 0px 0 0 0px;	
	width: auto;
	border: 1px solid #fff;
}

... und der HTML Aufruf:
HTML: 
<div id="footer_left"></div>
<div id="navipfad">
    <h3>Sie befinden sich hier</h3>			
</div>
<div id="footer_right"></div>

Was mache ich falsch? Bitte um Hilfe!


MFG derwunner
 
Werbung:
Hallo

wenn ich es korrekt verstanden habe:

HTML: 
<!DOCTYPE html>
<html>

<title>test</title>

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

html { height:100.5%; font: 100.01%/1.4em 'lucida grande', verdana, arial, sans-serif; color: #fff; background:#fff; }
body { font-size:1em; width:50em; height:auto; margin:0 auto; background:#ccc; }
body:after{ content: " "; display: block; line-height: 1px; font-size: 1px; clear: both; }

.clear { clear:both; }

h1,h2,h3,h4,h5,h6 { font-size:1em; }
h1 { padding:1em; }

.c5l,.c90l {  float:left; height:15em; }
.c5l { width:5%; background:#666; }
.c90l { width:90%;  background:#000; }
</style>

</head><body>

<h1>Das ist eine Testseite</h1>

<div class="c5l">
	<h2>links</h2>
	<p>Hier ist der Content links</p>
</div>

<div class="c90l">
	<h2>mitte</h2>
	<p>Hier ist der Content mittig</p>
</div>

<div class="c5l">
	<h2>rechts</h2>
	<p>Hier ist der Content rechts</p>
</div>

</body></html>


Gruß
Loon3y
 
nicht ganz...

fast xD
Ok, das mit dem float habe ich anscheinend von self html etwas falsch verstanden. Ich dachte man kann da jede Positionierung nur einmal verwenden.
Aber dass es mit einer festen breite geht, war mir schon bewusst. Ich möchte aber, dass mir das linke Hintergrundbild einmal angezeigt wird, danach so oft das mittige Bild, bis der rechte Rand erreicht ist und gerade noch einmal für das rechte Bild platz ist.
Also im Klartext: Wenn ich alle 3 divs auf
Code: 
width: auto;
setze, dann kommt gar nichts mehr. Das sollte aber so nicht sein. Die Anzahl der Bildwiederholungen des mittigen divs soll sich dynamisch der vorhandenenen Breite anpassen können, deswegen dachte ich, es geht mit width: auto


MFG derwunner
 
Werbung:
width: auto; bedeutet hier einfach nur, daß der Float sich dem Inhalt anpasst. Das tut er aber ohnehin wenn keine Breite angegeben wurde.

Leere Elemente mit Hintergrundfarben aneinanderreihen ist alte Tabellendenke.
 
aso, das heißt ich soll einfach mir die Breite der Bilder anschauen, meine Gesamtbreite die ich zur Verfügung habe, und mir daraus dann die Breite in Pixel errechnen, oder?
 
Werbung:
Es sollte ein Navigationsleiste werden, wo man sich denn gerade genau auf der Seite befindet. Der Balken war lediglich für die Überschrift gedacht.
Aber mit ein bisschen Nachdenken und deiner Erklärung hab ichs jetzt eigentlich schon hinbekommen.

MFG derwunner
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben