Wyśrodkowanie div'ów

Moldis · 18 Stycznia 2011

Otóż mam problem z wyśrodkowaniem div'ów za pomocą css. Robię sobie widget do komórki który będzie pokazywał datę/godzinę.

Chce żeby to wyglądało tak:

Godzina (wyśrodkowana)
---------------------------
Miesiąc (wyśrodkowany)
---------------------------
dzień nr | nazwa dnia miesiąca    
         | ----------------------
miesiąca | rok

I problem pojawia się z wyśrodkowaniem dolnego modułu (to wszystko pod 2 przerywaną linią). Jako że całość się dynamicznie zmienia nie mogę tego zrobić na stałe więc pasowało by żeby działało to jakoś automatycznie. Żadne z sposobów w necie nie chcą działać tak jak trzeba, po prostu nie wyśrodkowywuje się to. Między innymi to: http://peb.pl/tworzenie-stron/803347-html-...mentow-div.html .

Myślę że to morze być wina javascriptu przez który generuje zawartość:

np.

dat4 = document.getElementById("rok");
    if (c==1) { dat4.appendChild(addDiv(a_rok, "rok")); };

No i na koniec obrazek wspomagający : D

Kofel · 18 Stycznia 2011

Pokaż kodzik :)

Rozwiązaniem problemu, będzie prawdopodobnie wsadzenia dnia, nazwy dnia i roku w jeden wyśrodkowany container

Moldis · 18 Stycznia 2011

Pokaż kodzik :)
Rozwiązaniem problemu, będzie prawdopodobnie wsadzenia dnia, nazwy dnia i roku w jeden wyśrodkowany container

index.html

<body onload="start();">


                     <div id="uhr"></div>
                     <div id="miesiac"></div>

                     <div id="abc">

                          <div id="dzien_nr"></div>
                          <div id="dzien_s"></div>
                          <div id="rok"></div>


                     </div>

</body>

css:

body {
    width: 232px;
        color: black;
}

#godzina {
    text-align: center;
    font: bold 54pt font01;
}

#miesiac {                   
    margin-top: -20px;
    text-align: center;
    font: 24pt font01;
}


#abc {
         margin: 0 auto;
         position: relative;
}


#dzien_nr {               
    float: left;
    font: bold 42pt font01;
}

#dzien_s {   
    font: 14pt font01;
}

#rok {                   
        float:left;
        font:  24pt font01;
}

Abc to kontener dla tego dolnego modułu.

no i js który jest głównie przerobiony i zapożyczony skądś : o bo w sumie to mój pierwszy kontakt z nim : D

var c = 1;

function start() {
    uhr();
    datum();
    window.setInterval("uhr()", 6000);
    window.setInterval("datum()", 6000);
    option.appendChild(addDiv("", "option"));
}
Date.prototype.getWeek = function() {
    var onejan = new Date(this.getFullYear(),0,1);
    return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    };

function datum() {
    clearDiv("dzien_s");
    clearDiv("miesiac");
    clearDiv("dzien_nr");
    clearDiv("rok");
    var today     = new Date();
    day        = today.getDate();
    week    = today.getWeek();
    weekd    = today.getDay();
    
    month    = today.getMonth();
    month++;
    
    var monat=new Array(12);
    monat[1]="JANUARY";
    monat[2]="FEBRUARY";
    monat[3]="MARCH";
    monat[4]="APRIL";
    monat[5]="MAY";
    monat[6]="JUNE";
    monat[7]="JULY";
    monat[8]="AUGUST";
    monat[9]="SEPTEMBER";
    monat[10]="OCTOBER";
    monat[11]="NOVEMBER";
    monat[12]="DECEMBER";

    var weekday=new Array(7);
    weekday[0]="SUNDAY";
    weekday[1]="MONDAY";
    weekday[2]="TUESDAY";
    weekday[3]="WEDNESDAY";
    weekday[4]="THURSDAY";
    weekday[5]="FRIDAY";
    weekday[6]="SATURDAY";
    
    year = today.getFullYear();

    a_dzien_s = weekday[weekd];
    a_miesiac = monat[month];
        a_dzien_nr = day;
        a_rok = year;
    //thedate2 = "KW" + week + " " + day + "." + monat[month];

            
    
    dat1 = document.getElementById("dzien_s");
    if (c==1) { dat1.appendChild(addDiv(a_dzien_s, "dzien_s")); };
    dat2 = document.getElementById("miesiac");
    if (c==1) { dat2.appendChild(addDiv(a_miesiac, "miesiac")); };
    dat3 = document.getElementById("dzien_nr");
    if (c==1) { dat3.appendChild(addDiv(a_dzien_nr, "dzien_nr")); };
    dat4 = document.getElementById("rok");
    if (c==1) { dat4.appendChild(addDiv(a_rok, "rok")); };
}

function uhr() {
    var clock     = new Date();
    hours     = clock.getHours();
    minutes = clock.getMinutes();
    seconds = clock.getSeconds();
    thetime = (hours < 10) ? "0" + hours + ":" : hours + ":";
    thetime += (minutes < 10) ? "0" + minutes  : minutes;
        
    uhrzeit = document.getElementById("godzina");
    if (c==1) { uhrzeit.innerHTML = thetime; };

}



function addDiv(content, style) {
    var div = document.createElement("div");
    div.className = style;
    div.appendChild(document.createTextNode(content));
    return div;
}
function clearDiv(id) {
    var div = document.getElementById(id);
    div.innerHTML = "";

}

@EDIT

a, ale żeby to działało jak piszesz to chyba trzeba podać width podrzędnych? a one mi się zmieniają dynamicznie więc w sumie nie wiem co zrobić.

Kofel · 18 Stycznia 2011

Container musi mieć ustawioną szerokość, inaczej nic nie zdziałasz. :) Jak obliczyć za pomocą JS: http://bytes.com/topic/javascript/answers/...-get-text-width

Moldis · 18 Stycznia 2011

Container musi mieć ustawioną szerokość, inaczej nic nie zdziałasz. :) Jak obliczyć za pomocą JS: http://bytes.com/topic/javascript/answers/...-get-text-width

umm.. i załóżmy że będę miał ten width w tym js'ie, to musze go też z niego ustawiać tak ?

W sensie coś w stylu tego: document.getElementById('bgcolor1').style.height = '60px'; ?

Tzn.. przeglądam wszelakie znalezione skrypty etc, i umm.. trudne i nie ogarniam tego... _^_ jeszcze.

Ale postaram się to jakoś sklecić.

Moldis · 18 Stycznia 2011

Okej, wymyśliłem coś takiego:

function dostosowanie() {

        w1 = getElementWidth('dzien_s');
        w2 = getElementWidth('rok');
        w3 = getElementWidth('dzien_nr');

        document.getElementById('dzien_s').style.width = w1;
        document.getElementById('rok').style.width = w2;
        document.getElementById('dzien_nr').style.width = w3;
}

Kod wykonuje się cały aczkolwiek nie wiem czy to przypisanie działa. Jak na końcu dodałem żeby zmieniło color godziny na biały to działało + alerty się wyświetlały po każdej części kodu.

W css'ie w kontenerze wpisałem width (choć myślałem że dziedziczy go po body w którym jest podany).

Lecz wyśrodkowanie dalej nie działa :C

@EDIT

meh. jednak tego nie ogarniam, zmienne zwracają = 0 D:

@EDIT2

oh. jednak jak się nie poda width w pliku css dla div'ów to zwraca coś : D

Co nie zmienia faktu że nie wyśrodkowywuje się xd

@EDIT3

ah. i jeszcze jedna poprawka, teraz kod już działa na 100% dobrze :D

document.getElementById('dzien_s').style.width = w1 +"px";
document.getElementById('rok').style.width = w2 +"px";
document.getElementById('dzien_nr').style.width = w3 + "px";

Kofel · 18 Stycznia 2011

Czyli poradziłeś sobie z problemem? Bo nie wiem czy opłaca się liczyć, bo wygenerowany tekst zbytnio szerokością się nie różni, co?

Moldis · 18 Stycznia 2011

Czyli poradziłeś sobie z problemem? Bo nie wiem czy opłaca się liczyć, bo wygenerowany tekst zbytnio szerokością się nie różni, co?

No właśnie sobie nie poradziłem XD Tzn. poradziłem sobie z kodem, ale nie widać żeby cokolwiek chociaż próbowało dostać się do środka.

No a tekst, jak porównasz długość FRIDAY i jedną cyfre oraz WEDNESDAY i liczbę składającą się z 2 cyfr to jednak jest pewna różnica... dość istotna :D

No a to dalej mi się wyświetla tak jakby nigdy nic :c wg się nie centruje.

Kofel · 18 Stycznia 2011

Proszę, zrobiłem Ci taki testowy kod:

<div id="box">
    <div id="hour">04:25</div>
    <div id="month">May</div>
    <div id="wrapper">
        <div id="day">14</div>
        <div id="other">
            <div id="day_name">Friday</div>
            <div id="year">2010</div>
        </div>
        <div class="clear"></div>
    </div>
</div>

#box {
    border: 1px solid black;
    padding: 3px;
    width: 100px;
    margin: 50px;
}

#hour {
    text-align: center;
}

#month {
    text-align: center;
}

#day {
    float: left;
    text-align: right;
    width: 50%;
}

#other {
    float: right;
    text-align: left;
    width: 50%;
}

.clear {
    clear: both;
}

Nie jestem pewien, czy div o id wrapper jest potrzebny, ale lepiej dmuchać na zimne :)

Moldis · 18 Stycznia 2011

no. tak w wielkim skrócie. nie pokazałeś mi nic czego bym nie wiedział :D

mam nadzieje że zrozumiesz z obrazka o co mi chodzi :c

Kofel · 18 Stycznia 2011

Pobaw się właściwościami width, może coś wyjdzie. Niestety, będzie Ci potrzebna do tego kalkulacja JSem

Tymon · 19 Stycznia 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="pl" lang="pl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            #a {
                width: 300px;
                background: #f00;
            }
            #b, #c {
                text-align: center;
                background: #0f0;
            }
            #d {
                margin: 0px auto;
                background: #0f0;
            }
        </style>
    </head>
    <body xml:lang="pl">
        <div id="a">
             <div id="b">
                20:10
            </div>
            <div id="c">
                May
            </div>
            <table id="d">
                <tr>
                    <td rowspan="2">
                        12
                    </td>
                    <td>
                        Looooooooooooooooooooong
                    </td>
                </tr>
                <tr>
                    <td>
                        2011
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Moldis · 19 Stycznia 2011

oh. w tabeli... jak prosto : D

ale w sumie zrobiłem to już troszkę inaczej i właśnie miałem się pochwalić a tu twój post tymonie : D

zrobiłem coś takiego, i chyba już przy tym zostanę ^^"

function dostosowanie() {

        w1 = getElementWidth("dzien_s");
        w2 = getElementWidth('rok');
        w3 = getElementWidth('dzien_nr');
        w_a = getElementWidth('godzina');

        w_poz_ost = ( w_a - ( w3 + w1 ) );

        document.getElementById('dzien_nr').style.marginLeft =  w_poz_ost -(w_poz_ost/2) + "px";

}

Kofel · 19 Stycznia 2011

Tymon, i lol'd

Wyśrodkowanie div'ów

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników