Problem z Wycentrowanie Divów

pytanie zadane 7 maja 2019 w HTML i CSS przez sergustaw789 Nowicjusz (120 p.)
zmienione kategorie 8 maja 2019 przez Patrycjerz

Przede wszystkim przepraszam za zły dział lecz nie miałem w kategorii wyboru HTML i CSS

Witam mam taką stronę:

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>123</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    
    <body>
        <header>
            
            <div id="container_header">
                    <div id="logo_image_div">
                        <div id="logo_image">

                        </div>
                        <div id="clear_both">
                        </div>
                    </div>
                        <div id="text_logo_container">
                            <div id="main_name_header">

                            </div>
                            <div id=second_name_header>

                            </div>
                        </div>
            </div>    
            
            

        </header>
    
    
    </body>    
</html>

css:

body
{
    margin: 0;
    width:100%;
    height:100%;    
}

#container_header
{
    width: 100%;
    height: 60px;
    background-color: brown;

}

#logo_image_div
{
    background-color: blue;
    width: 60px;
    height:60px;
    float: left;
}

#logo_image
{
    background-color: blue;
    width: 60px;
    height:60px;
}

#text_logo_container
{
    width: 120px;
    height: 60px;
    background-color: blueviolet;
    float:left;
}

#main_name_header
{
    width:120px;
    height:30px;
    background-color: yellow;
}

#second_name_header
{
    width:120px;
    height:30px;
    background-color: green; 
}

Chce aby div: logo_image_div i text_logo_container były umiejscowione na środku próbowałem wszystkiego text align center display block margin auto nic nie działa. czy mogę prosić o pomoc w rozwiązaniu problemu?

2 odpowiedzi

odpowiedź 8 maja 2019 przez niezalogowany

Bo całość ma ustaloną pozycję wg tego, co jest w container_header. Jeśli chcesz mieć ten bordowy pasek przez cały ekran to ustaw kolor dla head, a szerokość container_header na tyle, ile ma zajmować miejsca na środku strony. I nie nadużywaj id. Id używasz, jeśli dany element jest unikatowy dla danej strony. Poza tym selektory mają przypisane coś, co nazywa się "precyzją". Działą to w ten sposób:

selektor znacznika (<p>, <head>, <span>) ma wartość 1,
selektor klasy (class="klasa z klasą") ma wartość 10,
selektor identyfikatora (id="#ajdi") ma wartość 100,
styl wpisany (np. <p style: color="red"> ma wartość 1000.

Jak widzisz każde id to 100 punktów. Teraz załóżmy, że chcesz nadpisać jakiś styl jednego elementu, np. masz kolejny div id="idDiva", gdzie masz litery szare, a w drugim elemencie, który będzie dziedziczyć style po nim, chcesz dać litery, powiedzmy, czarne. W tym momencie musisz stworzyć selektor, który będzie miał ponad 100 punktów precyzji. Co wtedy robisz? Tworzysz kolejne ID. Razem z dziedziczeniem ten nowy div ma już 200 punktów precyzji. W bardziej rozbudowanych stronach, gdzie tych elementów zagnieżdżonych będzie więcej, nagle okaże się, że masz jakiegoś "potwora", który ma kilkaset punktów precyzji i musisz tworzyć kolejne jakieś wygibasy, żeby nadpisać jego precyzję. No i nie bój się ostylować znaczników. Body czy head to taki sam div, jak... div. Też mają marginesy, można nadać mu tło, linię dookoła.

odpowiedź 8 maja 2019 przez kalczur Gaduła (4,320 p.)


body
{
    margin: 0;
    width:100%;
    height:100%;    
}
 
#container_header
{
    padding-left: 42%;
    padding-right: 42%;
    width: 100%;
    height: 60px;
    background-color: brown;
}
 
#logo_image_div
{
    background-color: blue;
    width: 5%;
    height:60px;
    float: left;
}
 
#logo_image
{
    background-color: blue;
    width: 100%;
    height:60px;
}
 
#text_logo_container
{
    width: 11%;
    height: 60px;
    background-color: blueviolet;
    float:left;
}
 
#main_name_header
{
    width: 100%;
    height:30px;
    background-color: yellow;
}
 
#second_name_header
{
    width: 100%;
    height:30px;
    background-color: green; 
}