Problem z kodem (z-index)

pytanie zadane 11 grudnia 2016 w HTML i CSS przez Bielson Użytkownik (540 p.)
edycja 11 grudnia 2016 przez HaKIM

Cześć, mam pewien problem z zrobieniem paska z menu i logiem.

Oto mój kod:

body{
    margin: 0! important;
}
#pasek{
    margin-top: 50px;
    background-color: #1A237E;
    height: 80px;
    line-height: 80px;
    color: #FFFFFF;
    width: 100%;
    position: absolute;
}
#goral{
    float: left;
    margin-left: 20px;
}
#gorap{
    float: right;
    margin-right: 20px;
}
#logo{
    position: absolute;
    z-index: 1;
    text-align: center;
}

<html>
    <head>
    
        <title>Tytuł strony</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        
    </head>
    <body>
    
        
        <div id="pasek">
            <div id="goral">TU BĘDZIE MENU</div>
            <div id="gorap">Media społecznościowe</div>
        </div>
        
        <div id="logo">LOGO</div>
        
    </body>
</html>

Chciałbym żeby to wyglądało jak na fotce

komentarz 11 grudnia 2016 przez HaKIM Szeryf (87,590 p.)

Od kiedy CSS zapisujemy jako PHP a HTML jako actionscript?

komentarz 11 grudnia 2016 przez Bielson Użytkownik (540 p.)

a, to mi się źle tu wkleiło? ma to jakieś znaczenie? kod jest czytelny przecież

komentarz 11 grudnia 2016 przez HaKIM Szeryf (87,590 p.)

Nie. Źle wybrałeś.

Tak, ma znaczenie. Choćby możliwość przejścia do codepen czy jsfiddle.

Kod jest czytelniejszy gdy jest prawidłowo podświetlany.

komentarz 11 grudnia 2016 przez Bielson Użytkownik (540 p.)

jak klikam w codepen z pg to wtedy wskakuje ze to html a to css

komentarz 11 grudnia 2016 przez Bielson Użytkownik (540 p.)

http://codepen.io/Mini12345/pen/GNXJmO

1 odpowiedź

odpowiedź 11 grudnia 2016 przez ProgramistaTomko Obywatel (1,040 p.)

jezeli chodzi o css :

body{
margin: 0! important;
}
#pasek{
margin-top: 50px;
background-color: #1A237E;
height: 80px;
line-height: 80px;
color: #FFFFFF;
width: 100%;
position: relative;
  display: inline-block;
}
#goral{
float: left;
margin-left: 0px;
  display: inline-block;
  width: 15%;
}
#gorap{
float: right;
margin-right: 0px;
  display: inline-block;
  width: 15%;
}
#logo{
z-index: 1;
text-align: center;
  display: inline-block;
  width: 70%;
}

oraz wrzuc logo do paska. Jak na poczatek wystarczy ci to ale jezeli chcial bys robic to dobrze to polecam zapoznac sie z bootstrap a dokladnie "bootstrap grid" przyklady znajdziesz na w3schools. Jestem mlodym programista wiec jezeli ktos zna lepszy sposob niech mnie poprawi :) pozdro