phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

Probleme mit div boxen

https://www.phpbb.de/community/viewtopic.php?t=244568

Seite 1 von 1

Probleme mit div boxen

Verfasst: 30.05.2020 13:24
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.

Re: Probleme mit div boxen

Verfasst: 30.05.2020 14:27
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?

Re: Probleme mit div boxen

Verfasst: 30.05.2020 14:28
von chris1278
Werd ich mal versuchen.

@edit

Das funktioniert leider nicht. Aber ich hab da eine andere Lösung die zu gehen scheint.

Re: Probleme mit div boxen

Verfasst: 30.05.2020 18:59
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>

Re: Probleme mit div boxen

Verfasst: 30.05.2020 19:36
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.

Re: Probleme mit div boxen

Verfasst: 30.05.2020 20:46
von Kirk
Anhand des Bildes kann man schwer beurteilen an was es liegt,

Re: Probleme mit div boxen

Verfasst: 31.05.2020 01:37
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.

Re: Probleme mit div boxen

Verfasst: 31.05.2020 05:42
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;
}

Re: Probleme mit div boxen

Verfasst: 31.05.2020 11:20
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.
Alle Zeiten sind UTC+02:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de