zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Faux coloums ohne Hintergrundgrafik.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.09.2006, 14:03
Benutzerbild von Zen5656
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.07.2006
Beiträge: 378
Zen5656 befindet sich auf einem aufstrebenden Ast
Standard Faux coloums ohne Hintergrundgrafik.

Moin

So jetzt ist das Menü fertig. Nun gehts an die Startseite

Die sieht in der alten Version mit Tabellen so aus:

http://www.the-holics.de/start.php

(es geht nur um das orange/blau)

Das möchte ich nun ohne diese gratligen Tabellen nachbauen, sprich mit divs. Und CSS. Ich habe bereits vorgearbeitet und ein Modell für die box entworfen. Dabei sind die äußeren ecken png's.



Man muss sich das so verstellen das das was jetzt bei der Ecke orange ist, in der png Version transparent also durchsichtig ist. Somit hat die ecke immer die Farbe des Backgrounds der Box in der sie sich befindet.

Der Code schaut dann so aus:

CSS:
Code:
.eckeoben div {
	background: url(ecke1.png) no-repeat top left ;
}

.eckeoben {
	background: url(ecke2.png) no-repeat top right;
}

.eckeunten div {
	background: url(ecke3.png) no-repeat bottom left;
}

.eckeunten {
	background: url(ecke4.png) no-repeat bottom right;
}

.eckeoben div, .eckeoben, .eckeunten div, .eckeunten {
	height: 18px;
}

.orange {
	background-color: #F89724;
	width: 29%;
}
HTML:
Code:
<div class="orange">
	<div class="eckeoben"><div></div></div>
			Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit. Duis
			ornare ultricies libero. Donec
			fringillha, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta
			magna libero sed libero. Mauris sed leo.
			Aliquam aliquam. Maecenas vestibulum.
	<div class="eckeunten"><div></div></div>
</div>
Ich habe das ganze auch nochmal zum angugn hier hochgeladen:

http://www.the-holics.de/middle/middle.html


Wie ihr seht sind auf meiner page aber 2 solche Boxen die nebeneinander gleich hoch positioniert sind. Wenn man 2 Boxen die gleich lang sein sollen nimmt man ja eig Faux coloums. Dies ist aber bei mir nicht möglich da 1. Das Design keine feste Breite in px oder so hat und 2. Man nicht weiß welche Box mal die längere bzw die kürzere ist.

Kennt jemand nen Trick der die Höhe zweier Blocke angleicht ohne eine Hintergrundgrafik zu benutzen?

Danke


MfG Zen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.09.2006, 14:15
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Ich sehe nur eine Box

Und nein, es geht nicht. Zwei DIVs können sich nicht automatisch aneinander anpassen - mit einem kleinen JavaScript würde das gehen, aber mit CSS allein nicht.

Schau dir mal aber das hier an: http://www.html.it/articoli/niftycube/index.html
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Variable Breite -> Problem Hintergrundgrafik Korasu CSS 2 08.01.2010 01:26
Hintergrundgrafik und flexible Spaltenbreite Teaser CSS 1 27.11.2009 16:52
Hintergrundgrafik für Faux Columns andreak CSS 12 02.05.2007 12:33
Faux Coloumns und Liquid Faux Coloumns michael-r CSS 9 31.01.2007 15:16
[SOLVED]IE 3px float bug + faux coloums führt zu Bauchschmerzen. Zen5656 CSS 1 02.10.2006 02:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:58 Uhr.