zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden kalender mittig ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.04.2007, 14:48
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard kalender mittig ausrichten

hallo zusammen,

ich habe mir mal einen kalender gebastelt. die einzelnen monate habe ich in einer liste zusammengefügt. die listenelemente werden gefloatet. nun möchte ich, das der kalender sich immer, unabhängig von der schriftgröße, mittig ausrichtet. hat jemand einen lösungsvorschlag für meine variante oder sogar einen anderen und besseren vorschlag für den kalender.

danke an helfende
gruß rené
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.04.2007, 15:58
Benutzer
neuer user
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard

den div-tag oder die tabelle, der/die den kalender enthält, mit style="text-align:center;" zentrieren?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.04.2007, 16:01
Neuer Benutzer
neuer user
 
Registriert seit: 11.03.2007
Beiträge: 10
opmil befindet sich auf einem aufstrebenden Ast
Standard

versuch das mal:

Code:
#wrapper{
width:900px;
margin:20px auto;
background:gray;
border:1px solid #fff;
text-align:center;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 15.04.2007, 18:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

funktioniert leider nicht. ich habe mal der liste einen roten hintergrund gegeben, damit man mal die ausbreitung der liste erkennen kann. sie füllt den ganzen wrapper(grau) aus und läst wohl somit kein verschieben zu.

kalender
Mit Zitat antworten
  #5 (permalink)  
Alt 15.04.2007, 18:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 888
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Also bei der oben verlinkten Seite wird er bei mir im Firefox zentriert angezeigt. Sollte es in anderen Browser nicht funktionieren kümmer dich mal um die Validierung des von dir genutzten HTML-Codes. Da fehlt u.a. die Angabe eines Doctypes.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.04.2007, 19:01
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

das liegt dummerweise an aol ( die setzen einfach ne seite drüber ) und wird hier auch nur zum testen genommen.

zuhause habe ich es mit diesem code probiert:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
html{
padding:0;
margin:0;
border:0;
}
body{
color:#fff;
background:#;
font-size:100.01%;
font-family:verdana,arial,helvetica;
text-align:center;
}
#wrapper{
width:780px;
margin:20px auto;
background:gray;
border:1px solid #fff;
text-align:center;
}
#belegung1{
color:#fff;
background:red;
}
#belegung1 li{
float:left;
border:1px solid #fff;
margin:0.2em;
list-style-type:none;
}
#belegung1 table{
margin:0.2em;
}
#belegung1 td{
font-size: 0.7em;
text-align:right;
padding:0.1em;
border:1px solid #fff;
}
p{
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
         	<ul id="belegung1">
			<li><table summary="Januar"><caption class="monat">Januar</caption>
				<tr>
					<td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>
				<tr>
					<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
				<tr>
					<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
				<tr>
					<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
				<tr>
					<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
				<tr>
					<td>29</td><td>30</td><td>31</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
			</table></li>
			<li><table summary="Februar"><caption class="monat">Februar</caption>
				<tr>
					<td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr>
					<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
				<tr>
					<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
				<tr>
					<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
				<tr>
					<td>26</td><td>27</td><td>28</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
			</table></li>
			<li><table summary="März"><caption class="monat">März</caption>
				<tr>
					<td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
				<tr>
					<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
				<tr>
					<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
				<tr>
					<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
				<tr>
					<td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>&nbsp;</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
			</table></li>
			<li><table summary="April"><caption class="monat">April</caption>
				<tr>
					<td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>1</td></tr>
				<tr>
					<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
				<tr>
					<td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
				<tr>
					<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr>
				<tr>
					<td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr>
				<tr>
					<td>30</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
			</table></li>
			<li><table summary="Mai"><caption class="monat">Mai</caption>
				<tr>
					<td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>
				<tr>
					<td>&nbsp;</td><td>1</td><td >2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
				<tr>
					<td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
				<tr>
					<td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
				<tr>
					<td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
				<tr>
					<td>28</td><td>29</td><td>30</td><td>31</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
			</table></li>
			<li><table summary="Juni"><caption class="monat">Juni</caption>
				<tr>
					<td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>1</td><td>2</td><td>3</td></tr>
				<tr>
					<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
				<tr>
					<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>
				<tr>
					<td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr>
				<tr>
					<td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>&nbsp;</td></tr>
				<tr>
					<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
			</table></li>
		<p>test</p>
                 </ul>
                 </div>
</body>
</html>
das ist jetzt ne gekürzte version, da ansonsten zuviel zeichen.
funktioniert leider auch nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.04.2007, 19:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von hubert17 Beitrag anzeigen
die listenelemente werden gefloatet. nun möchte ich, das der kalender sich immer, unabhängig von der schriftgröße, mittig ausrichtet.
Du meinst die einzelnen Kalender innerhalb der umgebenden Box mittig ausrichten?
Wenn du nach links floatest, dann werden die Elemente so weit wie möglich nach links gesetzt. Sie können nicht gleichzeitig mittig sein.

Dein Fall wäre eine Anwendung für display:inline-block. Wegen unterschiedlicher Browserunterstützung sollte etwas in dieser Art funktionieren (zumindest in aktuellen Browserversionen):
FF/Opera:
Code:
#belegung1 {
    text-align:center;
    }

#belegung1 li {
    display:-moz-inline-box; /* Ersatz für Geckos */
    display:inline-block;
    border:1px solid #fff;
    margin:.2em 0;
    list-style-type:none;
}
Extra nur für IEs (Cond. Comment):
Code:
#belegung1 li {
    display:inline;
    height:1%;
    margin:.2em;
    }
BTW: was AOL mit deinem Code veranstaltet grenzt an Körperverletzung. Wie wär's mit einem anderen Provider?
Doch auch ohne AOL ist dein Code nicht valide. Das p darf dort nicht stehen - und ohne float brauchst du dieses clear auch nicht mehr.
Mit Zitat antworten
  #8 (permalink)  
Alt 15.04.2007, 19:07
Neuer Benutzer
neuer user
 
Registriert seit: 11.03.2007
Beiträge: 10
opmil befindet sich auf einem aufstrebenden Ast
Standard

hab da noch was vergessen..probiere dass mal:

Code:
#wrapper{
width:780px;
margin:20px auto;
background:gray;
border:1px solid #fff;
text-align:center;
margin: auto !important;
}
sofern du denn ganzen roten(oder auch grauen) Kasten mit den Kalendern meinst

Geändert von opmil (15.04.2007 um 19:09 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 15.04.2007, 19:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von opmil Beitrag anzeigen
sofern du denn ganzen roten(oder auch grauen) Kasten mit den Kalendern meinst
Der wird bereits durch die bestehende margin-Angabe zentriert.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.04.2007, 19:14
Neuer Benutzer
neuer user
 
Registriert seit: 11.03.2007
Beiträge: 10
opmil befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Der wird bereits durch die bestehende margin-Angabe zentriert.
Nein, also beim IE 7 wird es nicht zentriert, ohne die weitere angabe des maring:auto !important..
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
<li> - Links im CSS-Menü Vertikal mittig ausrichten horstetwalt CSS 9 06.10.2010 19:41
Flash Gallerie mittig ausrichten Ashida CSS 5 15.09.2009 22:11
Liste trotz float:left; mittig im Layer ausrichten? Nightuser CSS 18 06.06.2007 11:53
Text mittig neben Bild ausrichten prm CSS 5 10.02.2007 11:19
Eine Überschrift zwischen zwei bildern vertikal mittig ausrichten leobuch CSS 4 02.02.2007 12:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:26 Uhr.