Du bist nicht angemeldet.

  • »|CallmeSupercookie|« ist der Autor dieses Themas

Beiträge: 34

Registrierungsdatum: 05.10.2013

Beruf: Schüler

Danksagungen: 4

  • Private Nachricht senden

1

20.10.2014, 21:59

Inline-Block kein Zeilenumbruch

Hey :)
Und zwar geht es um folgendes Beispiel:
www.mfhp.bplaced.net

Die einzelnen Kacheln werden einzeln ausgegeben und haben die Eigenschaft "display: inline-block;". Wenn man das Fenster jedoch zusammenzieht macht immer die Letzte Kachel einen Zeilenumbruch.
Wieso macht diese denn das? Und bleibt nicht fixiert?

Falls es auchnoch verschönerungs Dinge gibt, bitte gerne sagen :D

Cascading Style Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
		<style type="text/css">

			* {
				margin: 0;
				padding: 0;
			}
			html, body {
				background-image: url('galaxy.jpg');
				opacity: .7; 
			}

			h1 {
				font-family: Calibri;
				color: white;
				text-align: center;
			}
			#calenderWrapper {
				margin: 0;
				padding: 0;
				width: 100%;
			}
			#calenderHeader {
				display: inline-block;
				width: 14.2%;
				height: 50px;
				text-align: center;
				border-top: 1px solid gray;
				border-right: 1px solid gray;
				background-color: #eaeaea;
			}
			#calenderHeader p {
				padding-top: 15px;
				font-family: Calibri;
			}
			.calenderNotToday {
				background-color: white;
			}
			.calenderToday {
				background-color: #a7a7a7;
			}

			#calenderBlock {
				display: inline-block;
				vertical-align: top;
				width: 14.2%;
				height: 100px;
				border-right: 1px solid gray;
				border-bottom: 1px solid gray;
				text-align: center;
			}
			#calenderBlock:hover{
				background-color: #f8f8f8;
			}
			#calenderBlock p {
				padding-top: 35px;
				font-family: Calibri;
				font-size: 20px;
			}
			.calenderBlockFirst {
				border-top: 1px solid gray;
			}
		</style>

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
        echo "<h1>$title $year</h1>";
	echo "<div id='calenderHeader'><p>Mo</p></div>";
	echo "<div id='calenderHeader'><p>Di</p></div>";
	echo "<div id='calenderHeader'><p>Mi</p></div>";
	echo "<div id='calenderHeader'><p>Do</p></div>";
	echo "<div id='calenderHeader'><p>Fr</p></div>";
	echo "<div id='calenderHeader'><p>Sa</p></div>";
	echo "<div id='calenderHeader'><p>So</p></div>";


while($day_num <= $days_in_month) {
		if($block_num <= 7) {
			$block_numClass = "class='calenderBlockFirst calenderNotToday'";
			if($day_num == $day) {
				$block_numClass .= ' calenderToday';
			}
		}else {
			$block_numClass = '';
			if($day_num == $day) {
				$block_numClass = 'class="calenderToday"';
			}else {
				$block_numClass = 'class="calenderNotToday"';
			}
		}

	
		echo "<div id='calenderBlock' $block_numClass> <p>$day_num</p> </div>";
"To be a good professional engineer, always start to study late for exams. Because it teaches you how to manage time and tackle emergencies."
-Bill Gates

Alex

Fortgeschrittener

Beiträge: 372

Registrierungsdatum: 23.06.2011

Wohnort: /home/alex

Danksagungen: 117

  • Private Nachricht senden

2

21.10.2014, 19:02

Ist dein Code vollständig? Im html sehe ich

Quellcode

1
<div id='calenderBlock' class='calenderBlockFirst calenderNotToday'> <p>5</p> </div><br /><div id='calenderBlock' class="calenderNotToday"> <p>6</p> </div>


ohne den Zeilenumbruch <br /> sollte es funktionieren.

außerdem ist das generierte HTML an falscher Stelle platziert, wie mir scheint :huh:

Spoiler Spoiler

Quellcode

1
2
3
4
<h1>October 2014</h1><div id='calenderHeader'><p>Mo</p></div><div id='calenderHeader'><p>Di</p></div><div id='calenderHeader'><p>Mi</p></div><div id='calenderHeader'><p>Do</p></div><div id='calenderHeader'><p>Fr</p></div><div id='calenderHeader'><p>Sa</p></div><div id='calenderHeader'><p>So</p></div><br /><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'></div><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'></div><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'> <p>1</p> </div><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'> <p>2</p> </div><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'> <p>3</p> </div><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'> <p>4</p> </div><div id='calenderBlock' class='calenderBlockFirst calenderNotToday'> <p>5</p> </div><br /><div id='calenderBlock' class="calenderNotToday"> <p>6</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>7</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>8</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>9</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>10</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>11</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>12</p> </div><br /><div id='calenderBlock' class="calenderNotToday"> <p>13</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>14</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>15</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>16</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>17</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>18</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>19</p> </div><br /><div id='calenderBlock' class="calenderNotToday"> <p>20</p> </div><div id='calenderBlock' class="calenderToday"> <p>21</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>22</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>23</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>24</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>25</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>26</p> </div><br /><div id='calenderBlock' class="calenderNotToday"> <p>27</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>28</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>29</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>30</p> </div><div id='calenderBlock' class="calenderNotToday"> <p>31</p> </div><html>
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
alexthinking.com - yet another computer weblog

Zitat

Chuck Norris knows the state of schroedinger's cat.

Es hat sich bereits 1 registrierter Benutzer bedankt.

Benutzer, die sich für diesen Beitrag bedankt haben:

|CallmeSupercookie| (26.10.2014)

Johannes S.

Fortgeschrittener

Beiträge: 444

Registrierungsdatum: 24.06.2011

Wohnort: Lychen

Danksagungen: 71

  • Private Nachricht senden

3

24.10.2014, 00:53

Kannst einfach definieren, dass es keine Zeilenumbrücke geben darf :D:

Cascading Style Sheet

1
white-space: nowrap;


Habe die Ursache aber noch nicht gefunden. Vieleicht fällt mir noch was auf.

EDIT: Wenn du die folgenden Einträge hinzufügst, funktioniert es, aber dann hast du rechts etwas freiraum:

Cascading Style Sheet

1
2
3
4
5
6
#calenderHeader {
	box-sizing: border-box;
}
#calenderBlock {
	box-sizing: border-box;
}
Signatur ?

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Johannes S.« (24.10.2014, 01:01)


Es hat sich bereits 1 registrierter Benutzer bedankt.

Benutzer, die sich für diesen Beitrag bedankt haben:

|CallmeSupercookie| (26.10.2014)

Dia3lo

Schüler

Beiträge: 77

Registrierungsdatum: 16.08.2011

Wohnort: Braunschweig

Danksagungen: 32

  • Private Nachricht senden

4

24.10.2014, 09:31

Hm überprüf mal deine Seite mit dem w3c validator

vielleicht kannst du ja auch auf was Fertiges zurückgreifen
z.B. https://github.com/codrops/Calendario

Gruß
Dia3lo

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Dia3lo« (24.10.2014, 09:44)


Es hat sich bereits 1 registrierter Benutzer bedankt.

Benutzer, die sich für diesen Beitrag bedankt haben:

|CallmeSupercookie| (26.10.2014)

  • »|CallmeSupercookie|« ist der Autor dieses Themas

Beiträge: 34

Registrierungsdatum: 05.10.2013

Beruf: Schüler

Danksagungen: 4

  • Private Nachricht senden

5

26.10.2014, 14:52

Es lag wohl daran das durch die border 3px darauf gerechnet wurden. Eigentlich ein ziemlich dummer Fehler ^^

@Alex
Ja das stimmt das das html an der falschen Stelle ausgegeben wird aber es sollte nur eine Testseite sein :)
Die <br /> müssen aber sein da dadurch nach jeder Woche eine neue reihe begonnen wird.

@Johannes
Habs jetzt damit gelöst :) Wusste garnicht das es das gibt^^

@Dia3lo
Wollte eigentlich nichts fertiges nehmen^^ Das jetztig php Script stammt zwar auch aus einem Tutorial aber man lernt wenigstens noch ein bisschen was :D
"To be a good professional engineer, always start to study late for exams. Because it teaches you how to manage time and tackle emergencies."
-Bill Gates