Probleme mit div boxen

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Antworten
Benutzeravatar
chris1278
Mitglied
Beiträge: 3532
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:
Kontaktdaten von chris1278

Probleme mit div boxen

Beitrag von chris1278 »

Hallo, also folgendes ich versuche gerade einen alten style aus 3.0 nachzubauen. Eigentlich klappt es auch ganz gut aber ich bin da mit der Onlinebox etwas am verzweifeln.

Also ich habe jetzt folgenden Code:

in der index_body.html:

Code: Alles auswählen

<div class="onlineblock">
	<div class="inner">
		<div class="block-l">
		<span class="online_logo2"></span>
			
		</div>
		<div class="block-r">
			<dd class="row-up">
		
			<!-- EVENT index_body_block_online_prepend -->
			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
			<br />{LOGGED_IN_USER_LIST}
			<!-- EVENT index_body_block_online_append -->
	
			</dd>
			<dd class="row-down">
			{L_LEGEND}{L_COLON} {LEGEND}
			</dd>
		</div>	
	</div>
</div>
dazu die css anweisungen:

Code: Alles auswählen

.onlineblock {
	margin: 0px 5px;
	border: solid 1px #000;
}


.online_logo2 {
	display: inline-block;
	width: 23px;
	height: 23px;
	background-image: url(images/whosonline.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

.block-l {
	width: 30px;
	height: inherit;
}

.block-r {
	margin-top: -25px;
	margin-left: 30px;
	width: auto;
}

.row-up {
	padding: 5px;
	border-left: solid 1px #000;
}

.row-down {
	padding: 5px;
	border-left: solid 1px #000;
	border-top: solid 1px #000;
}
Das ganze sieht dann etwa so aus:

[ externes Bild ]

Ich kriege nur nicht das Bild mittig. Wenn ich dort den wert padding nutze, drückt es die ganze Box runter.

Evtl. habt ihr da eine Idee.
Nach oben
hackepeter13
Valued Contributor
Beiträge: 3545
Registriert: 21.04.2004 12:22
Wohnort: Berlin
Kontaktdaten:
Kontaktdaten von hackepeter13

Re: Probleme mit div boxen

Beitrag von hackepeter13 »

Hallo,

ich gehe mal davon aus, das du mit "Bild" die Grafik "whosonline.gif" meinst?!

Auf Anhieb sehe ich, das die Grafik im <span></span> mit der Klasse ".online_logo2" liegt, dieser span hat die Größe von 23x23px mit der Hintergrundgrafik.

Die Angabe background-position: center center; hat da keinerlei sichtbare Auswirkung da dein span einfach nur 23x23px groß ist (genauso wie die Hintergrundgrafik).

Warum hinterlegst du die Grafik nicht einfach mit den background-Angaben als Hintergrundgrafik dem DIV-Container block-l und entfernst den span darin?
Zuletzt geändert von hackepeter13 am 30.05.2020 14:29, insgesamt 1-mal geändert.
Nach oben
Benutzeravatar
chris1278
Mitglied
Beiträge: 3532
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:
Kontaktdaten von chris1278

Re: Probleme mit div boxen

Beitrag von chris1278 »

Werd ich mal versuchen.

@edit

Das funktioniert leider nicht. Aber ich hab da eine andere Lösung die zu gehen scheint.
Nach oben
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7869
Registriert: 24.05.2010 08:31
Kontaktdaten:
Kontaktdaten von Kirk

Re: Probleme mit div boxen

Beitrag von Kirk »

Hi
Schuß in´s blaue

Code: Alles auswählen

<div class="onlineblock">
	<div class="inner">
		<div class="block-l">
		</div>
		<div class="block-r">
			<dd class="row-up">
				<br />
				<div class="online_logo2">
					<!-- EVENT index_body_block_online_prepend -->
					{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
					<br />{LOGGED_IN_USER_LIST}
					<!-- EVENT index_body_block_online_append -->
				</div>
			</dd>
				<dd class="row-down">
					{L_LEGEND}{L_COLON} {LEGEND}
			</dd>
		</div>
	</div>
</div>
Nach oben
Benutzeravatar
chris1278
Mitglied
Beiträge: 3532
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:
Kontaktdaten von chris1278

Re: Probleme mit div boxen

Beitrag von chris1278 »

Nun ja ohne zu testen. Das wird wahrscheinlich nicht funktionieren. Da der Aufbau 1 Box links und 1 Box rechts wobei rechte Box geteilt in 2 Boxen ist. Und das Bild in die linke Box soll. So würde das Bild in der oberen rechten Box erscheinen.
Nach oben
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7869
Registriert: 24.05.2010 08:31
Kontaktdaten:
Kontaktdaten von Kirk

Re: Probleme mit div boxen

Beitrag von Kirk »

Anhand des Bildes kann man schwer beurteilen an was es liegt,
Nach oben
Benutzeravatar
chris1278
Mitglied
Beiträge: 3532
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:
Kontaktdaten von chris1278

Re: Probleme mit div boxen

Beitrag von chris1278 »

Na um dir das mal etwas grob zu erklären.

Diese Online box setzt sich wie folgt zusammen.

Es exestiert ein Grosser Div Container class onlineblock

In diesem Container befinden sich zwei weitere Container, die nebeneinander sind.
Diese Container haben die klassen block-lfür links und block-r für rechts

In dem Linken habe ich via span element das logo eingefügt.

Im rechten Container habe ich dann mittels dd und Klassenangaben, diesen nochmals aufgeteilt, in 2 Container in der Wegerechten sprich eine Box oben class row-up eine unten class row-down.


Wenn, ich jetzt das Logo, wie du sagst in der Unterteilung der zweiten Box nach oben setze würde es ja an der falschen Stelle erscheinen. Das Logo muss schon in die linke Box rein.

Ich habe das jetzt erst mal mit vielen margin werten geregelt und diese dann immer mittesl media css einstellungen agepasst. So habe ich erst mal eine akzeptable alternative die funktioniert.
Nach oben
vfrblue
Ehemaliges Teammitglied
Beiträge: 1994
Registriert: 22.11.2016 18:46

Re: Probleme mit div boxen

Beitrag von vfrblue »

Auch mal ungetestet:

Code: Alles auswählen

<div class="onlinblock online_logo2">
	<div>
		<div class="block-r">
			<dd class="row-up">

			<!-- EVENT index_body_block_online_prepend -->
			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
			<br />{LOGGED_IN_USER_LIST}
			<!-- EVENT index_body_block_online_append -->

			</dd>
			<dd class="row-down">
			{L_LEGEND}{L_COLON} {LEGEND}
			</dd>
		</div>	
	</div>
</div>
wobei man eventuell den 2. "div"-Container weglassen könnte.

Und das CSS:

Code: Alles auswählen

.onlineblock {
	margin: 0px 5px;
	border: solid 1px #000;
}

.online_logo2 {
	background-image: url(images/whosonline.gif);
	background-repeat: no-repeat;
	background-position-x:2px; // Wert anpassen
	background-position-y:20px; // Wert anpassen
}

.block-l {
	width: 30px;
	height: inherit;
}

.block-r {
	margin-top: -25px;
	margin-left: 30px;
	width: auto;
}

.row-up {
	padding: 5px;
	border-left: solid 1px #000;
}

.row-down {
	padding: 5px;
	border-left: solid 1px #000;
	border-top: solid 1px #000;
}
Nach oben
Benutzeravatar
chris1278
Mitglied
Beiträge: 3532
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:
Kontaktdaten von chris1278

Re: Probleme mit div boxen

Beitrag von chris1278 »

@vrfblue

Danke aber die div boxen sollten so bleiben. Das hat schon seinen Sinn. Habe das jetzt aber anders gelöst mittels margin werte. Hier mal die aktuelle Version:

Der code für die wer ist online Box in der index_body.html:

Code: Alles auswählen

<!-- IF S_DISPLAY_ONLINE_LIST -->
<div class="s-onlineblock"><!-- IF U_VIEWONLINE --><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a><!-- ELSE -->{L_WHO_IS_ONLINE}<!-- ENDIF --></div>
<div class="onlineblock">
	<div class="inner">
		<div class="block-l">
		<!-- IF U_VIEWONLINE -->
		<span class="online_logo <!-- IF LEGEND -->logo-pos1<!-- ELSE -->logo-pos2<!-- ENDIF -->"></span>
		<!-- ENDIF -->
		<!-- IF not U_VIEWONLINE -->
		<span class="online_logo logo-guest"></span>
		<!-- ENDIF -->
		</div>
		<div class="<!-- IF U_VIEWONLINE -->block-r2 <!-- ELSE -->block-r1<!-- ENDIF -->">
			<dd class="row-up">
			<!-- EVENT index_body_block_online_prepend -->
			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
			<!-- IF U_VIEWONLINE -->
			<br />{LOGGED_IN_USER_LIST}
			</dd>
			<!-- IF LEGEND -->
			<dd class="row-down">
			{L_LEGEND}{L_COLON} {LEGEND}
			<!-- ENDIF -->
			<!-- EVENT index_body_block_online_append -->
			</dd>
			<!-- ENDIF -->
		</div>	
	</div>
</div>
<!-- ENDIF -->
Hier der zugehörige CSS teil:

Code: Alles auswählen

/*neue onlineblock*/

.s-onlineblock {
	margin: 0px 5px;
	background: url(images/hdr_right.gif) top right no-repeat, url(images/hdr_left.gif) top left no-repeat, url(images/hdr_mid.gif) top center repeat-x;
	padding-top: 8px;
    height: 19px;
	text-align: center;
	color: #3285D0;
    font-size: 12px;
    font-weight: bold;
}

.s-onlineblock a, .s-onlineblock a:hover, .s-onlineblock a:active, .s-onlineblock a:visited {
	color: #3285D0;
}

.onlineblock {
	background: #313131 url(images/cell.gif) top left repeat-x;
	margin: 0px 5px;
	border: solid 1px #000;
}

.online_logo {
	display: inline-block;
	width: 23px;
	height: 23px;
	background-image: url(images/whosonline.gif);
	background-repeat: no-repeat;
	background-position: center center;
}


.logo-guest {
	margin-top: 6px;
	margin-bottom: -6px;
	margin-left: 8px;	
}

@media (max-width: 1090px) {
.logo-guest {
	margin-top: 12px;
	margin-bottom: -12px;
	margin-left: 8px;	
}
}

@media (max-width: 742px) {
.logo-guest {
	margin-top: 18px;
	margin-bottom: -18px;
	margin-left: 8px;	
}
}

@media (max-width: 605px) {
.logo-guest {
	margin-top: 24px;
	margin-bottom: -24px;
	margin-left: 8px;	
}
}

@media (max-width: 443px) {
.logo-guest {
	margin-top: 30px;
	margin-bottom: -30px;
	margin-left: 8px;	
}
}

@media (max-width: 406px) {
.logo-guest {
	margin-top: 36px;
	margin-bottom: -36px;
	margin-left: 8px;	
}
}

@media (max-width: 341px) {
.logo-guest {
	margin-top: 42px;
	margin-bottom: -42px;
	margin-left: 8px;	
}
}


.logo-pos1 {
	margin-top: 27px;
	margin-bottom: -27px;
	margin-left: 8px;	
}

@media (max-width: 1080px) {
.logo-pos1 {
	margin-top: 33px;
	margin-bottom: -33px;
	margin-left: 8px;	
}
}

@media (max-width: 742px) {
.logo-pos1 {
	margin-top: 39px;
	margin-bottom: -39px;
	margin-left: 8px;	
}
}


@media (max-width: 598px) {
.logo-pos1 {
	margin-top: 45px;
	margin-bottom: -45px;
	margin-left: 8px;	
}
}

@media (max-width: 436px) {
.logo-pos1 {
	margin-top: 51px;
	margin-bottom: -51px;
	margin-left: 8px;	
}
}

@media (max-width: 406px) {
.logo-pos1 {
	margin-top: 57px;
	margin-bottom: -57px;
	margin-left: 8px;	
}
}


.logo-pos2 {
	margin-top: 18px;
	margin-bottom: -18px;
	margin-left: 8px;	
}

@media (max-width: 1098px) {
.logo-pos2 {
	margin-top: 24px;
	margin-bottom: -24px;
	margin-left: 8px;	
}
}

@media (max-width: 742px) {
.logo-pos2 {
	margin-top: 30px;
	margin-bottom: -30px;
	margin-left: 8px;	
}
}

@media (max-width: 598px) {
.logo-pos2 {
	margin-top: 36px;
	margin-bottom: -36px;
	margin-left: 8px;	
}
}

@media (max-width: 436px) {
.logo-pos2 {
	margin-top: 42px;
	margin-bottom: -42px;
	margin-left: 8px;	
}
}

@media (max-width: 406px) {
.logo-pos2 {
	margin-top: 48px;
	margin-bottom: -48px;
	margin-left: 8px;	
}
}

@media (max-width: 346px) {
.logo-pos2 {
	margin-top: 54px;
	margin-bottom: -54px;
	margin-left: 8px;	
}
}


.block-l {
	width: 30px;
	height: inherit;
}

.block-r1 {
	margin-top: -25px;
	margin-left: 40px;
	width: auto;
}

.block-r2 {
	margin-top: -25px;
	margin-left: 40px;
	width: auto;
}

.row-up {
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	padding: 5px;
	border-left: solid 1px #000;
}

.row-down {
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	padding: 5px;
	border-left: solid 1px #000;
	border-top: solid 1px #000;
}
Der Code ist zwar relativ viel da die log-pos Klasse immer per margin Korrektur angepasst wird und das je Berechtigung auch anders ist. Aber so funktioniert das. Auch im Bezug auf berechtigung wie U_Viewonline und Legend sprich "Kann wer ist online sehen" oder wenn unten die Gruppen Eingeblendet werden oder nicht.
Nach oben
Antworten

Zurück zu „Styles, Templates und Grafiken“