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

Pomoc przy projektowaniu

VPS Starter Arubacloud
+1 głos
274 wizyt
pytanie zadane 11 listopada 2021 w HTML i CSS przez olek1405 Nowicjusz (180 p.)

Witam mam problem, otóż mam problem podczas projektowania strony chciałbym uzyskać efekt jak na zdjeciu ale nie mam pojęcia jak do tego się zabrać, jakim sposobem najlepiej można by uzyskać ten efekt? Potrzebowałbym tylko wskazówek jak najlepiej byłoby się do tego zabrać 

komentarz 11 listopada 2021 przez VBService Ekspert (251,170 p.)
Chodź Tobie o wygląd "kafelka" (obrazek i tekst)?

Czy rozmieszczenie: pierwszy wiersz 3 "kafelki", drugi 2 "kafelki"?

3 odpowiedzi

+3 głosów
odpowiedź 11 listopada 2021 przez qax Dyskutant (8,060 p.)

Patrząc na prostotę, styl i powtarzalność takiej struktury strony jak na zdjęciu warto zainteresować się frameworkiem CSS pod nazwą Bootstrap, ale będzie to wymagało przyswojenia nieco wiedzy. Powodzenia.

+2 głosów
odpowiedź 11 listopada 2021 przez Restej Dyskutant (8,690 p.)
Nadać każdemu kafelkowi klasę, odpowiednio ostylować, a następnie użyć flexboxa, grida czy nawet float:left do odpowiedniego ustawienia kafelków na stronie. Powiedz w którym konkretnie momencie masz problem, ewentualnie pokaż kod i doradzimy jak najprościej to zrealizować :)
komentarz 11 listopada 2021 przez olek1405 Nowicjusz (180 p.)

Mam jeszcze jedno pytanie dotyczące obrazków, otóż w ogóle się nie wyświetlają, ponieżej wysyłam kod (kod jest totalnym chaosem ale mam nadzieje ze da sie cos z niego zrozumiec)

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="styles.css" rel="stylesheet">

    <style>

           .wrapper{

    display: grid;

    grid-template-columns: 20% 20% 20%;

    grid-column-gap: 1em;

    margin-left: 25%;

    margin-top: 15%;

    padding: 20px;

   

   

 

}

.wrapper >div{

    background-color:#DCDCDC;

    padding: 10px;

    text-align: center;

   

   

   

 

}

.wrapper > div :nth-child(){

    background-color: ##DCDCDC;

}

.wrapper .row1 h3{

    color: green;

    font-size: 20px;

    text-align: left;

    padding: 10px;

   

 

}

.wrapper .row2 h3{

    color: blue;

    font-size: 20px;

    text-align: left;

    padding: 10px;

}

.wrapper .row3 h3{

    color: black;

    font-size: 20px;

    text-align: left;

    padding: 10px;

}

.button {

  border: none;

  color: white;

  padding: 10px 10px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 15px 15px;

  cursor: pointer;

  border-radius: 5px;

}

.button1 {background-color: green;}

.button2 {background-color: blue;}

.button3 {background-color: red;}

 

.grid{

    display: grid;

    grid-template-columns: 32% 32%;

    grid-column-gap: 1em;

    margin-left: 25%;

    margin-top: 5%;

    margin-bottom: 5%;

}

.grid > div{

    background-color:#DCDCDC;

    padding: 1em;

    text-align: center;

 

}

.grid  h3{

    color: #848484;

    text-align: center;

 

}

    </style>

</head>

<body>

   

    <nav>

        <ul>

 

        <li><a href="#">Home Page</a> </li>

        <li><a href="#">About us</a></li>

        <li><a href="#">Services</a> </li>

        <li><a href="#">Contact</a></li>

        <li><a href="#">External</a></li>

       

 

        </ul>

    </nav>

    <header>

 

    </header>

    <div class="wrapper">

        <div class="row1">

            <div class="img"><img src="forest.jpg" alt="forest" style="width: 100%;height: auto;"></div>

            <h3>Respensive</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, eum similique! Ipsa, non quisquam sint nemo consectetur architecto nobis, repellat nostrum odio mollitia reiciendis, vitae quas! At nihil cum quae.   </p>

            <button class="button button1">Button Green</button></div>

        <div class="row2">

            <div id="img"><img src="forest.jpg" alt="forest"></div>

            <h3>Sleek</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, eum similique! Ipsa, non quisquam sint nemo consectetur architecto nobis, repellat nostrum odio mollitia reiciendis, vitae quas! At nihil cum quae.</p>

            <button class="button button2">see details </button></div>

        <div class="row3">

            <div id="img"><img src="forest.jpg" alt="forest"></div>

            <h3>Parralax layout</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, eum similique! Ipsa, non quisquam sint nemo consectetur architecto nobis, repellat nostrum odio mollitia reiciendis, vitae quas! At nihil cum quae.</p>

            <button class="button button3">Button red</button></div>

       

           

    </div>

    <div class="grid">

        <div class="grid1"><h3>two collumn left side</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat eius architecto eos, officiis laborum ex molestiae alias sed nostrum tempora quisquam, distinctio, maiores rerum cupiditate atque quibusdam aspernatur. Veritatis non cum vel consequatur ullam neque vitae, tempore similique illo repellat..</div>

        <div class="gride2"><h3>two collum right side</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat eius architecto eos, officiis laborum ex molestiae alias sed nostrum tempora quisquam, distinctio, maiores rerum cupiditate atque quibusdam aspernatur. Veritatis non cum vel consequatur ullam neque vitae, tempore similique illo repellat..</div>

    </div>

    <div class="footer">

    <h2>Our Services</h2>

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.  

     

  </div>

   

       

   

</body>

</html>

CSS:

* {

    box-sizing: border-box;

    margin: 0;

    font-family: sans-serif;

}

 

nav{

    width: 100%;

    height: 50px;

    background-color: #24252a;

}

 

ul{

 margin-left: 32%;

}

 

ul li{

 list-style: none;

 display: inline-block;

 float: left;

 line-height: 50px;

 padding: 0 10px;

}

ul li a{

text-decoration: none;

font-size: 10px;

font-family: Arial, Helvetica, sans-serif;

color: white;

border-style: solid;

border-width: thin;

padding: 10px 10px;

 

}

header{

    width: 100%;

    min-height: 25%;

    background-image: url(images/forest.jpg );

    background-size: cover;

    background-position: center;

    position: absolute;

    color: white;

   

    text-align: center;

}

.footer{

    width: 100%;

    min-height: 100px;

    background-image: url(images/Mountain.jpg);

    background-size: cover;

    background-position: center;

    position: absolute;

   

    color: white;

    width: 100%;

    padding: 1%;

    text-align: center;

   

   

}

p{

    display: block;

    margin-block-start: 1em;

    margin-block-end: 1em;

    margin-inline-start: 0px;

    margin-inline-end: 0px;

}
1
komentarz 11 listopada 2021 przez Restej Dyskutant (8,690 p.)

Jak podajesz ścieżkę do zdjęcia źródłowego to musisz wewnątrz nawiasów ująć ją jeszcze w cudzysłowia/apostrofy 

background-image: url("images/Mountain.jpg");

Natomiast jeżeli nie wyświetla ci się zdjęcie z tagu img to znaczy, że zdjęcie o podanej nazwie we wskazanej lokalizacji nie istnieje. Upewnij się, że zdjęcia na pewno są w formacie .jpg a nie przykładowo .png oraz, że na pewno znajdują się w tym samym folderze co twój index.html 

komentarz 3 czerwca 2022 przez VBService Ekspert (251,170 p.)
edycja 3 czerwca 2022 przez VBService

Jak podajesz ścieżkę do zdjęcia źródłowego to musisz wewnątrz nawiasów ująć ją jeszcze w cudzysłowia/apostrofy 

nie ma znaczenia

<div class="image" data-title="Same nawiasy"></div>
<div class="image" data-title="Apostrofy"></div>
<div class="image" data-title="Cudzysłowy"></div>
.image {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 1em;
}
.image::before {
  position: absolute;
  content: attr(data-title);
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
  font: 700 1.1em/1.4 system-ui;
  padding: 0.6em 2em;
  color: lime;
  background-color: rgba(0,0,0,0.65);
  border-top-right-radius: 100%;
}
.image:nth-child(1) {
  background-image: url(https://picsum.photos/300/200/?random=1);
}
.image:nth-child(2) {
  background-image: url('https://picsum.photos/300/200/?random=2');
}
.image:nth-child(3) {
  background-image: url("https://picsum.photos/300/200/?random=3");
}

 

komentarz 3 czerwca 2022 przez ScriptyChris Mędrzec (190,190 p.)

nie ma znaczenia

Ma znaczenie, jeśli URL zawiera niektóre nie-escapowane znaki. [1, 2]

+2 głosów
odpowiedź 11 listopada 2021 przez CSSoup Mądrala (6,460 p.)
Jeżeli chodzi o samą strukturę to wystarczy grid/flexbox:

https://www.youtube.com/watch?v=jV8B24rSN5o

Możesz też użyć Bootstrapa, ale jeżeli strona jest prosta, to nie ma sensu moim zdaniem zaciągać całego Bootstrapa, chyba że w celach ćwiczeń chciałbyś się nim pobawić ;)

Podobne pytania

0 głosów
1 odpowiedź 197 wizyt
pytanie zadane 25 stycznia 2016 w Nasze projekty przez Widemo Użytkownik (920 p.)
0 głosów
1 odpowiedź 192 wizyt
pytanie zadane 12 kwietnia 2022 w SQL, bazy danych przez CdxProj Użytkownik (910 p.)
0 głosów
1 odpowiedź 128 wizyt
pytanie zadane 12 marca 2020 w Offtop przez Lancer Użytkownik (980 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!

...