✔ Anordnung von mehreren Klassen

N

napsi

Erfahrenes Mitglied
Liebe Freunde!

Folgendes Problem steht bei mir an:

Die Startseite ist bereits korrekt und schaut wie folgt aus:

http://www.antiktreff.at/antiktreff

Unter Impressum sollte ein großes Feld sein, so wie es dargestellt ist. Rechts davon sollen 2 kleine Felder untereinander dargestellt sein, jedoch das Treff unten rechts soll an der selben Stelle sein, wie auf der Startseite.

Kann ich das Problem so lösen, wie die Seite derzeit aufgebaut ist, oder muss ich ein DIV einfügen.

Bitte um kurze Info


HTML: 
<!--#include virtual="antiktreff/script/head.inc"-->

		<div id="content">
			<img src="/antiktreff/img/stammdaten/content_rahmen_gross.gif" alt="" class="rahmen" style="background-color:#FAC422">
			<img src="/antiktreff/img/stammdaten/content_rahmen_sub_klein.gif" alt="" align="top" class="rahmen1" style="background-color:#FAC422">
			<img src="/antiktreff/img/stammdaten/content_rahmen_sub_klein.gif" alt="" align="bottom" class="rahmen1" style="background-color:#FAC422">
			<img src="/antiktreff/img/stammdaten/treff.gif" alt="" class="treff">
		</div>


<!--#include virtual="antiktreff/script/foot.inc"-->

Code: 
/* CSS Document */

* {                           /* alle Elemente sollen urspruenglich keine Innen- und Aussenabstaende haben */
        margin: 0;
        padding: 0;
        /*border: 1px dashed red;*/
}

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: 980px;
        margin: 0;
        padding: 0;
		background-color:#FFF2D2;
}

div#pagewrap {
        width: 980px;
		background-color:#FFFFFF;
}

/*.clearfix:after {
	content:".";display:block;
	height:0;
	font-size:0;
	clear:both;
	visibility:hidden;
} 

.clearfix {
	display:inline-block;
}*/ /* Hides from IE-mac \*/
/*
* html .clearfix {
	height:1%;
}

.clearfix {
	display:block;
}*//* End hide from IE-mac */

#header {
	border:0;
	background-image:url(/antiktreff/img/stammdaten/banner.jpg);
	background-repeat:no-repeat;
	height:92px;
}

#navigation {
	background-color:#000000;
	color:#FDCB42;
	height: 23px;
	margin-top:7px;
	position:relative;
	font-size: 10px;
	font-weight:bold;
	list-style: none;
	line-height:23px;
}

#navigation ul {
	padding-right:60px;
	float:right;
}

#navigation ul li {
	list-style-type:none;
}

#navigation ul li {
	display:inline;
	padding: 0px 7px 0px 10px;
}

#navigation ul li a {
	font-size: 10pt;
	text-decoration:none;
	color:#FDCB42;
	text-align:right;
}

#navigation ul li a:hover {
	text-decoration:underline;
	color:#CCCCCC;
}

#navigation ul li a.active {
	text-decoration:underline;
}

#foot {
	background-color:#000000;
	color:#FDCB42;
	height: 23px;
	position:relative;
	font-size: 8px;
	font-weight:bold;
	list-style: none;
	line-height:23px;
}

#foot ul {
	padding-left:30px;
}

#foot ul li {
	list-style-type:none;
}

#foot ul li {
	display:inline;
	padding: 0px 7px 0px 10px;
}

#foot ul li a {
	font-size: 8pt;
	text-decoration:none;
	color:#FDCB42;
}

#foot ul li a:hover {
	text-decoration:underline;
	color:#CCCCCC;
}

#foot ul li a.active {
	text-decoration:underline;
}

#content {
	height:447px;
	overflow:auto;
	overflow-x: hidden; 
	overflow-y: auto;
	z-index:0;
	padding-left:20px;
}

.treff {
	position:relative;
	margin-top: -101px;
	float:right;
	z-index:2;
}

.rahmen {
	z-index:1;
	margin:30px 0px 10px 20px;
	overflow:auto;
	overflow-x: hidden; 
	overflow-y: auto;
}

.rahmen1 {
	z-index:1;
	margin:30px 0px 10px 20px;
	overflow:auto;
	overflow-x: hidden; 
	overflow-y: auto;
}

.start_bild_mitte {
	margin-left:-206px;
	margin-top: -10px;
	z-index:0;
}


.laufschrift {
        margin-left: 15px;
        margin-right:50px;
        margin-top: 20px;
}

.laufschrift_text {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:18px;
        border: 0px;
		color:#FF0000;
}

.laufschrift_text a {
        text-decoration:none;
		color:#FF0000;
}

.headline_home {
	color:#000000;
	font-size:14px;
	font-weight:bolder;
	font-style:italic;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding: 10px 20px 20px 20px;
}
 
Und wo ist nun das Problem?

Übrigens bleibt eine z-index-Deklaration ohne eine Angabe zur Positionsart (absolute oder relative) wirkungslos.

mfg Maik
 
Okay, nach mehrmaligen Lesen hab ich dein Anliegen verstanden, und mal auf "Impressum" geklickt ("unter Impressum" hatte ich zunächst "örtlich" interpretiert).

Dass die Grafik "treff.gif" auf der Impressum-Seite nach unten umgebrochen wird, liegt schlichtweg an den übrigen Grafiken, deren Breite in der Summe größer ausfällt, wie die eingebundenen Grafiken auf der Startseite.

jedoch das Treff unten rechts soll an der selben Stelle sein, wie auf der Startseite.
Zum Vergrößern anklicken....
In diesem Fall solltest du dieses Grafikelement im Block #content absolut positionieren, anstatt es mittels float:right umfliessen zu lassen.

Der Block #content muß in diesem Fall relativ positioniert werden, damit sich die absoluten Positionsangaben für die Klasse .treff darin "relativ" verhalten, und sich nicht auf die Ränder des Browserfensters beziehen.

CSS: 
#content {
	height:447px;
	overflow:auto;
	overflow-x: hidden; 
	overflow-y: auto;
	z-index:0;
	padding-left:20px;
	position: relative;
}

.treff {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index:2;
}

mfg Maik
 
Danke Maik

Allerdings ist im Impressum das 2. kleine Feld immer noch nicht unter dem 1. es kann allerdings nicht mit der Größe zu tun haben. die erste Classe geht auch bis hinunter, egal ob ich sie in der Höhe limitiere. was ist mein Denkfehler

lg.

napsi
 
Moin,

die Elemente werden im Block #content ganz normal im Textfluß umgebrochen, womit die zweite kleine Grafik (.rahmen2) unter der großen Grafik (.rahmen) ausgerichtet wird.

Ergo müsstest du in diesem Bereich zwei Spalten einrichten: die linke nimmt .rahmen auf, die rechte .rahmen1 und rahmen2.

Hier eine mögliche Umsetzung mit Hilfe eines horizontal ausgerichteten Listenelements:

HTML: 
<div id="content">
     <ul>
         <li>
             <img src="/antiktreff/img/stammdaten/content_rahmen_gross.gif" alt="" class="rahmen" style="background-color:#FAC422">
         </li>
         <li>
             <img src="/antiktreff/img/stammdaten/content_rahmen_sub_klein.gif" alt="" align="top" class="rahmen1" style="background-color:#FAC422">
             <br>
             <img src="/antiktreff/img/stammdaten/content_rahmen_sub_klein.gif" alt="" align="bottom" class="rahmen2" style="background-color:#FAC422">
         </li>
     </ul>
     <img src="/antiktreff/img/stammdaten/treff.gif" alt="" class="treff">
</div>
CSS: 
#content ul { list-style:none; }
#content ul li { float:left; }

Hast du die Seite übrigens mal im Firefox-Browser betrachtet?

home.jpg impressum.jpg

Lösung:
Code: 
#content {
        height:447px;
        overflow:auto;
        overflow-x: hidden;
        overflow-y: auto;
        z-index:0;
        padding-left:20px;
        position: relative;
        width:960px;
}


mfg Maik
 
danke, das wegen dem MF ist mir eh klar, die Lösung hatte ich eh schon.

mit UL das Problem lösen, ist mir neu, aber werde ich probieren.

lg.

Napsi
 
Es müssen nicht immer DIVs sein, um ein Problem aus der Welt zu räumen :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück