Jump to content
Sign in to follow this  
SpartaN

3 divy z tekstem obok siebie HTML i CSS

Recommended Posts

 

KOD :

<div class="icon-s-txt">
  <h3>HTML & CSS</h3>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w.</p>
</div>
<div class="icon-r-txt">
  <h3>RWD</h3>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w.</p>
</div>
<div class="icon-l-txt">
  <h3>Layout</h3>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w.</p>
</div>

CSS:

.icon-s-txt {
  margin-top: 110px;
  margin-left: 355px;
  max-width: 200px;
  float: left;
}

Opisy chciałbym ustawić pod obrazkami  

Share this post


Link to post

Może dałbyś cały kod? Części z ikonkami z fusów nie wywróżymy.

Share this post


Link to post
</head>
<body>
  <header>
    <nav>
      <li class="active-menu-item"><a href="#">Start</a></li>
      <li><a href="#test">O mnie</a></li>
      <li><a href="Realizacje">Realizacje</a></li>
      <li><a href="Kontakt">Kontakt</a></li>
    </nav>
    <div class="animated bounceIn">
      <h1>Spartan<span class="code">Code</span></h1>
    </div>
  </header>
  <div class="about">
    <div class="animated bounceInLeft"><h2>O mnie</h2></div>
    <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>
    <div class="about">
      <div class="animated bounceInLeft"><h2>Czym się zajmuje?</h2></div>    
    </div>
  </div>
  <div id="icons">
    <div class="icon-screen">
      <img src="images/television1.png">
    </div>
    <div class="icon-responsive">
      <img src="images/responsive-design-symbol1.png">
    </div>
    <div class="icon-like">
      <img src="images/like1.png"> 
    </div>
  </div>
  <div class="icon-s-txt">
    <h3>HTML & CSS</h3>
    <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w.</p>
  </div>
  <div class="icon-r-txt">
    <h3>RWD</h3>
    <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w.</p>
  </div>
  <div class="icon-l-txt">
    <h3>Layout</h3>
    <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w.</p>
  </div>
</body>
</html>

css:

Spoiler

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: whitesmoke;
  font-family: 'Lato', sans-serif;
}
header  {
  width: 100%;
  min-height: 60vh;
  height: 600px;
  overflow: hidden;
  position: relative;
  text-align: center;
  background-image: url(images/home.jpg);
  background-size: cover;
  background-position: 50% 50%;
  margin-left: 0px;

  display: block;

}
li {
  list-style-type: none;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  text-decoration: none;
}
li a {
  color: white;
  margin: 10px;
  float:left;
  font-size: 20px;
  text-decoration: none;
}
li a:hover {
  text-decoration: none;
  color: orangered;
}
@media only screen and (max-width: 479px) {
  li a {
    font-size: 15px;
    margin: 5px; 
  }
}
.typed-cursor{
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}
@keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar
{
  width: 10px;
  background-color: #F5F5F5;

}
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: dimgray;
}
::-webkit-scrollbar-thumb:hover
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: CornflowerBlue;
}
header h1 {
  text-align: center;
  margin-top: 10%;
  font-size: 55px;
  color: white;

}
.code {
  color: orangered;
}
@media only screen and (max-width: 479px) {
  header h1 {
    margin-top: 70px;
    font-size: 50px;
  }
}
.about {
  margin-top: 20px;
}
.about h2 {
  text-align: center;
  font-size: 40px;
}
.about p {
  max-width: 800px;
  margin: 0 auto !important;
  float: none !important;
  font-size: 18px;
}
@media only screen and (max-width: 479px) {
  .about h2 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .about p {
    font-size: 15px;
  }
}
.icon-screen {
  float: left;
  margin-left: 400px;
  margin-top: 30px;
}
.icon-responsive {
  float: left;
  position:absolute;
  left: 48%;
  margin-top: 30px;
}
.icon-like {
  float: right;
  margin-right: 400px;
  margin-top: 30px;
}
.icon-s-txt {
  margin-top: 110px;
  margin-left: 355px;
  max-width: 200px;
  float: left;
}

 

 

Share this post


Link to post

Po co Ty robisz takie duże te marginy? Szczególnie z lewej strony. Wszystko się wsadza do kontenera, kontener centruje, a te kolumny daje na 33% szerokości i masz lepszy wynik mniejszym nakładem sił.

Share this post


Link to post
43 minuty temu, Salva napisał:

Po co Ty robisz takie duże te marginy? Szczególnie z lewej strony. Wszystko się wsadza do kontenera, kontener centruje, a te kolumny daje na 33% szerokości i masz lepszy wynik mniejszym nakładem sił.

Jak miałoby to wyglądać w praktyce czy mógłbyś podać konkretyn przykład kodu ?

Share this post


Link to post
<div class="conatiner row">
  <div class="col col-3">zxc</div>
  <div class="col col-3">zxc</div>
  <div class="col col-3">zxc</div>
</div>
* {
  box-sizing: border-box
}
.container {
  margin: 0 auto;
  width: 1200px;
}
.row::before {
  clear: both;
  content: '';
  display: block;
}
.col {
  float: left;
}
.col-3 {
  width: calc(100% / 3);
}

 

  • Like 1

Share this post


Link to post

W ogóle to mam dziwne wrażenie, że ten fragment z ikonami wzorowany był na ogólnym schemacie tabeli. Tworzysz kontener następnie blok a w nim umieszczasz po kolei: ikona > nagłówek > opis, bo to co teraz masz jest lekko bez sensu.

Share this post


Link to post

 

Okej bardzo dziękuję za pomoc ! 

 

Jednakże natknąłem się na kolejny problem ;c 

Po ustawieniu max-width wszystko się rozjeżdża : 

 

I jeszcze jedno jak ustawić,aby po zmniejszeniu ustawiły się pod sobą, a nie tak : 

 

Pierwszy raz pracuję przy RWD dlatego tyle pytań ;d 

Share this post


Link to post

1. Wycentruj blok z tekstem albo całość bo w tej chwili ikona idzie na środek a tekst domyślnie na lewo.

2. Dla określonej rozdzielczości ustaw width: 100% i jakiś margines dolny z pominięciem ostatniego elementu (nth-child/nth-last) a jak to nie zadziała (bo nie wiem do końca jak to jest z elementami blokowymi) to nadaj ostatniemu klasę block-last (czy jak Ty tam to sobie nazwałeś) i ustaw mu zerowy margines.

 

 

Share this post


Link to post

Dalej to samo ;p

Kod : 

Cytuj

<div class="row">
<div class="col-3">
<img src="images/like1.png">
<h3>Kodowanie</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
<div class="col-3">
<img src="images/television1.png">
<h3>Kodowanie</h3>
<p>"Cześć Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
<div class="col-3">
<img src="images/responsive-design-symbol1.png">
<h3>Kodowanie</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
</div>

Cytuj

  .col-3 {
width: 33.3333%;
float: left;
margin-top: 40px;


  }


.row {
    text-align: center;
    
}

.row p {
    max-width: 300px;
}

 

Share this post


Link to post

No ale po co ten max-width dla znacznika p?

Dlaczego stylizujesz .row a nie .col-* skoro bezpośrednio pod tą drugą klasą znajduje się zawartość, która Cię interesuje?

  • Like 1

Share this post


Link to post

O faktycznie, źle stylizowałem Teraz działa  Dzięki za pomoc

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...