|
|||
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é |
Sponsored Links |
|
|||
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 |
|
|||
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.
|
|
|||
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> </td><td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </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> </td></tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </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> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </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> </td></tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr> </table></li> <p>test</p> </ul> </div> </body> </html> funktioniert leider auch nicht. |
|
|||
Zitat:
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; } Code:
#belegung1 li { display:inline; height:1%; margin:.2em; } 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. |
|
|||
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; } Geändert von opmil (15.04.2007 um 19:09 Uhr) |
|
|||
Nein, also beim IE 7 wird es nicht zentriert, ohne die weitere angabe des maring:auto !important..
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |