Złe rozmieszczenie strony

pytanie zadane 6 czerwca 2019 w HTML i CSS przez polonez11212 Początkujący (350 p.)

 <!DOCTYPE html>
<html lang="pl">

  <head>

     <meta charset="utf-8">
     <title>Moja witryna</title>

     <meta name="description" content="Spis własnej wiedzy">
     <meta name="keywords" content="HTML, www, strona, wiedza">
     <meta name="author" content="Paweł Łukasz">

     <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
     <link rel="stylesheet" href="css/style.css">
          <link rel="stylesheet" href="css/fontello.css">


  </head>
  <body  style="background-image: url(fala.jpg) ;  background-repeat: no-repeat;
  background-size: 100% 100%;">
      
      <div id="box">
       
          <div id="pasek">
          
              <div id="lewy"><div id="menu">
                  <button class="hamburger"  unselectable="on"></button>  
              </div>
              
               <ol>
                   <li>HTML +CSS <ul><li>HTML</li><li>CSS</li></ul></li>
                   <li>Javascript</li>
                   <li>PHP + SQL <ul><li>PHP</li><li>SQL</li></ul></li>
                   
               </ol>
                
                 
                  
                   
                     </div>
              
              <div id="prawy">
              
               
                  <div class="prawy-pasek">
                 &nbsp; Login &nbsp;   
                  </div>
               
                  <div class="prawy-pasek">
                   &nbsp;Register &nbsp;
                  </div>
                  <div style="clear: both"></div>
              
              </div>
              
              <div style="clear: both"></div>
          </div>
          
          
          <div id="photobox">
          <div id="pudelko">
          <i class="icon-address"></i> 
          <h1>Own Way</h1>
          <cite>"Marzenia są tam gdzie jest wolnośc, a my osiągnielismy wolność a nie bezpieczeństwo"</cite> <br /><br /> 
          <cite> ~Jacek Walkiewicz</cite>
           </div>
          </div>
          <div id="reszta">
          
          
          
          
          </div>
          <div style=" clear: both;"></div>
      </div>

  </body>

</html>

body 
{ 
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
      font-family: 'Roboto', sans-serif;
  line-height: 1.4;
    overflow-x: hidden;


}

#box
{
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;


}

#pasek
{
    width: 100%;
     height: 30vh;

}

#lewy
{
    
    float: left;
    width: 15%;
    background-color:skyblue;
}


#menu
{
    padding: 10px;
    visibility: visible;
    
}
/* Przycisk menu */
.hamburger
{
    
width: 40px;
height: 35px;
border: 0;
border-top: 5px solid #fff;
background: transparent;
position: relative;

}

.hamburger::before , .hamburger::after
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    border-top :5px solid #fff;
    transform: translateY(10px);
}

.hamburger::after 
{
    transform: translateY(25px);
}

/* Animacje*/


.hamburger:hover
{
 transform: rotate(45deg) translateY(5px);
    border: none;
    transition: 0.3s  transform linear;
    user-select: none;
}

.hamburger:hover::after
{
 transform: rotate(-90deg) translateX(-10px);
    transition: 0.3s  transform linear;
}
#prawy
{     float: left;
    width: 85%;
   
}

.prawy-pasek
{
     float: right;
     height: auto;
     color:#222;
    text-align: center; 
         border: 1px solid #222;
     border-radius: 5px;
    display: table-cell;
    vertical-align: middle;
    margin-left:10px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    
    background-color: cornsilk;

}

.prawy-pasek:last-child
{  
     float: right;
     height: auto;
     color:#223;
    text-align: center; 
    border: 1px solid #222;
     border-radius: 5px;
    display: table-cell;
    vertical-align: middle;
    margin-left:5px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.prawy-pasek:hover
{box-shadow: 3px 4px #333; transition: 0.3s ease-in;}

#photobox
{
    
  max-width: 960px;
 margin-left: auto;
 margin-right: auto;
  overflow: hidden;
 height: 70vh;
  padding: 0 3rem;
 text-align: center;
    display: table; vertical-align: middle;
    
    
}

#pudelko {
display: table-cell; vertical-align: middle;
    margin-left : auto;
    margin-right: auto;
    padding-top: 20%;
    padding-bottom: 20%;

}

#reszta
{
   width: 100vw;
    height: 30vh;
    background-color: azure;
    float: left;
}

Hejka :)

Mam problem z rozmieszczeniem głownego diva który nie chce ustawić się na srodek a zdjecie w tle nie chce ustawić się na 100vw 100vh tylko po przewinieciu jest dalsza czesc obrazka a nie powinna.Mam nadzieję że ktoś mi pomoże :) i z góry dziękuję za cierpliwość i pomoc .

1 odpowiedź

odpowiedź 6 czerwca 2019 przez mb-dir Mądrala (6,710 p.)
wybrane 7 czerwca 2019 przez polonez11212

Najlepsza

Witaj

a zdjecie w tle nie chce ustawić się na 100vw 100vh tylko po przewinieciu jest dalsza czesc obrazka a nie powinna

poczytaj sobie o tym na MDN'a może pomoże.

Teraz kilka uwag z innej beczki

Używasz do stylowania id, zalecane jest używanie klas, ponieważ id to coś unikalnego, a style powinny być ogólne np

masz dwa divy i chcesz żeby wyglądały tak samo, i z stylowaniem po id wyglądały by to np tak - a ze stylowaniem po klasie tak. Mam nadzieje że te przykłady dały ci do zrozumienia dlaczego stylowanie po klasie jest lepsze - jeżeli nie pisz.

Następną sprawą są polskie nazwy, to że po polsku to jedno(lepiej po angielski, ponieważ angielski to bardziej uniwersalny język i ktoś z zagranicy będzie rozumiał twoje intencje), druga sprawa to samo nazewnictwo na ten przykład masz diva id lewy, i to innemu programiście który patrzy tylko na kod nic nie mówi, nie zdradza twoich zamiarów. Jeżeli coś ma być boczną treścią znajdująca się po prawej stronie to lepszym rozwiązaniem jest nadanie mu np klasy sidebar-right

Następną rzeczą jest używanie float, działają ale obecnie mamy takie technologie jak flex, czy grid które są stworzone do prostszego definiowania układu strony, ponadto dzięki flexowi możesz wyśrodkowywać element w poziomie i w pionie - film z przykładem

Jeżeli nie wiesz co to RWD, to radze szybko nadrobić te zaległości wpisując w yt 'czym jest responsywność' lub coś takiego - zapewniam, że to zmieni twój pogląd na tworzenie stron WWW.

Taki tip - gdy będziesz bawił się z właściwościami do background (pierwszy link co wysłałem) to rób to na czystym projekcie, aby nie mieszać bardziej w obecnym

komentarz 7 czerwca 2019 przez polonez11212 Początkujący (350 p.)

Dziękuję za wiele rad :)

komentarz 7 czerwca 2019 przez polonez11212 Początkujący (350 p.)

 <!DOCTYPE html>
<html lang="pl">

  <head>

     <meta charset="utf-8">
     <title>Moje Podroże</title>

     <meta name="description" content="Strona WWW poswiecącona podroży i rzeczami z tym związanymi">
     <meta name="keywords" content="HTML, www, strona, travel, vacation, sunny, airplane, airport, discover, unknown, discover-unknown, travel-abroad, abroad, flying">
     <meta name="author" content="Paweł Łukasz">

     <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
     <link rel="stylesheet" href="css/style.css">
          <link rel="stylesheet" href="css/fontello.css">


  </head>
  <body style=
    " 
     background-image: url('img/wave.jpg') ; 
      background-repeat: no-repeat; 
        background-size: 100% 100%; 
    ">
      
      <div class="box">
       
          <div class="nav-stripe">
          
              <div class="left">
                
                <div >
                
                 <button class="hamburger"  unselectable="on"></button>  
                 </div>
                 <!-- 
                 <div id="menu">
                 
              </div>
              
               <ol>
                   <li>HTML +CSS <ul><li>HTML</li><li>CSS</li></ul></li>
                   <li>Javascript</li>
                   <li>PHP + SQL <ul><li>PHP</li><li>SQL</li></ul></li>
                   
               </ol>
                
                 
                  
                   
                     
              -->
              </div>
              <div class="right" >
               
                  <div class="right-boxes">
                 &nbsp; Login &nbsp;   
                  </div>
               
                  <div class="right-boxes">
                   &nbsp;Register &nbsp;
                  </div>
                  <div style="clear: both"></div>
              
              </div>
              
         
          </div>
          
          <div class="full-box">
          
          <div class="main-photo-box">
          
          <!--
          <div class="inside-box">
          -->
          <i class="icon-address"></i> 
          <h1>Own Way</h1>
          <cite>"Marzenia są tam gdzie jest wolnośc, a my osiągnielismy wolność a nie bezpieczeństwo"</cite> 
          <br /><br /> 
          
          <cite> ~Jacek Walkiewicz</cite>
          
      <!--     </div> -->
           
          </div>
          </div>
          
          <div class="articles">
          
          
          
          
          </div>
          <div style=" clear: both;"></div>
      </div>

  </body>

</html>

@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway|Roboto&display=swap');


@media screen and (max-width: 1600px)
    {
body 
{    

    width: 100vw;
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
    overflow-x: hidden;



    justify-content: center;
    
    
}


.box
{
    width: 100vw;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;

    overflow-x: hidden;



}
        
     

.nav-stripe
{
     width: 100vw;

}

.left
{
    
   float: left;
    width: 15vw;
    margin: 0;
    padding: 0;
    height: inherit;
    
}

/*
#menu
{
    padding: 10px;
    visibility: visible;
    
}
 Przycisk menu 

*/

        
.hamburger
{
    
width: 40px;
height: 35px;
border: 0;
border-top: 5px solid #fff;
background: transparent;
position: relative;


}

.hamburger::before , .hamburger::after
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    border-top :5px solid #fff;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.hamburger::after 
{
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
}



.hamburger:focus
{
;
 transform: rotate(45deg) translateY(5px);
    border: none;

    transition: 0.3s  -webkit-transform linear;
    transition: 0.3s  transform linear;
    transition: 0.3s  transform linear;
}

.hamburger:focus::after
{

 transform: rotate(-90deg) translateX(-10px);

    transition: 0.3s  transform linear;

}


.right
{  
    width: 85vw;
    float: left;
    padding:0;
    margin: 0;
    height: inherit;
    

}

.right-boxes
{
     float: right;
     height: auto;
     color:#222;
    text-align: center; 
         border: 1px solid #222;
     border-radius: 5px;
    display: table-cell;
    vertical-align: middle;
    margin-left:10px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
   font-family: 'Raleway', sans-serif;
    
  

}

.right-boxes:last-child
{  
     
     height: auto;
     color:#223;
    border: 1px solid #222;
     border-radius: 5px;
    display: table-cell;
    vertical-align: middle;
    margin-left:5px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.right-boxes:hover
{
 
    box-shadow: 1px 2px 3px  #111111; 
  
    transition: 0.3s  ease-in;
    -webkit-animation: scale-down 0.3s 0.2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-down 0.3s 0.2s  cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes scale-down
{

    0%{  transform: scale(1);}
    100%{transform: scale(0.8);}

}


@keyframes scale-down
{

    0%{ transform: scale(1);}
    100%{transform: scale(0.8);}

}

.full-box{
flex-basis:  100vw;
    justify-content: center;
    padding: 20px 0px;
        }

.main-photo-box
{
    font-family: 'Montserrat', sans-serif;
  max-width: 960px;
 margin-left: auto;
 margin-right: auto;
  overflow: hidden;
 height: 100vh;
  padding: 0 3rem;
 text-align: center;
    display: table; vertical-align: middle;
    
    
}
/*
.inside-box {
display: table-cell; vertical-align: middle;
    margin-left : auto;
    margin-right: auto;
    padding-top: 20%;
    padding-bottom: 20%;
    font-family: 'Raleway', sans-serif;

}
*/
.articles
{
flex-basis:  100vw;
    height: 30vh;
    background-color: azure;
    justify-content: flex-end;
   
}

button {margin: 20px;}
        
        
        
}

Mam problem teraz z scrollem co zaslania przyciski a margin na last child nie pomaga xd

komentarz 7 czerwca 2019 przez mb-dir Mądrala (6,710 p.)

Pseudoklasa :last-child sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica.

Powyższy cytat pochodzi stąd

Jeżeli nadałeś last-child na right-boxes to to nie działa w taki sposób jaki myślisz, taki zapis powoduje zmiany w ostatnim dziecku right-class.

Co do zasłaniania to spróbuj na nav-stripe dodać display: flex, a do right margin-right: 20px;

komentarz 7 czerwca 2019 przez polonez11212 Początkujący (350 p.)

zapomnialem jedynie dodac do right margin-right:20px ale pozniej dodalem i dalej sie wszystko :V a last zamienilem na nth-child(2)

komentarz 8 czerwca 2019 przez mb-dir Mądrala (6,710 p.)

Dalej się wszystko :V

Ponieważ nav stripe ma w sobie dwa elementy(przycisk i te 'righty'). W inspektorze w chromie możesz zauważyć, że układają się jeden pod drugim(przycisk na gorze, right na dole) zmiana w nav stripe na display flex powoduje że ułożą się obok siebie a dodanie margin-right spowoduje przesunięcie się tych 'rightów'