• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Złe rozmieszczenie strony

VPS Starter Arubacloud
0 głosów
143 wizyt
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ź

+1 głos
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'

Podobne pytania

+1 głos
2 odpowiedzi 214 wizyt
pytanie zadane 17 października 2021 w HTML i CSS przez Leonardo Użytkownik (770 p.)
0 głosów
1 odpowiedź 265 wizyt
0 głosów
2 odpowiedzi 149 wizyt
pytanie zadane 19 maja 2016 w HTML i CSS przez DreaM Użytkownik (840 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...