Hej,
chciałabym zrobić na stronie tekst w formie dwóch kolumn a po między nimi były by zdjęcia. Podpowiedziałby ktoś jak takie coś zrobić na div'ach?
Dokładnie miałoby to wyglądać tak:
tekst|obraz|tekst
tekst|obraz|tekst
Teraz próbowałam z każdą kolumnę tekstu i obrazu dać do osobnego diva i kombinowałam coś z float: left/right ale efekt jest taki, że mam całość nieposegregowaną w dwóch liniach.
0
0
Zawsze kojarzyłem, że kolumny rodem z gazety w hateemeloceesesie to jest niemożliwość...
Ale jednak udało mi się w googlach znaleźć to: http://www.kurshtml.edu.pl/css/wprowadzenie,kolumny.html (UWAGA, z zastrzeżeniem http://www.forumweb.pl/komentarze-kurshtml-edu-pl/css-uklad-wielokolumnowy,69554 )
0
A float'em jakoś tego nie da się zrobić tak jak ja próbowałam?
0
Da sie floatem tylko musisz nadac width kazdemu divowi i pamietac by suma dlugosci nie przekraczala dlugosci kontenera w ktorym te divy sie znajduja
0
Ok, wtedy jak ma to być, dopasuje width i kolumna z lewej strony na float:left, kolumna z prawej na float:right, a obrazek na środku?
0
Pobaw sie. Miej z tego fun. Daj wszystkie na left potem wszystkie na right potem pomieszaj. Zaobserwuj jak sie zachowuja. Praktykuj. ...
0
Wszystko udało mi się zrobić tylko kompletnie nie wiem jak poradzić sobie z obrazem w drugiej linii. Obecnie wygląda to tak:
float:left|float:left|float:right
float:left|?|float:right.
Jeżeli będzie potrzeba to wieczorem mogę podesłać kod.
Dziękuję za pomoc i pozdrawiam
A.
0
Bardziej by się przydał konkretniejszy opis. Czy ma być tak, że tekst, zdjęcie, tekst, potem przerwa, tekst, zdjęcie, tekst? Czyli po prostu tekst tekst tekst, zdjęcia zdjęcia zdjęcia, tekst, tekst, tekst - ciągiem jak leci, ile się zmieści --- wtedy potrzebujesz tylko dwóch divów z floatami i tyle.
0
Ma być tekst-zdjęcie-tekst przejście do nowej linii i znów tekst-zdjęcie-tekst
0
to zrób coś takiego
#text-column {
float: left;
width: 33%;
margin-bottom:20px; (tutaj tylko przykład, zależy jaki chcesz odstęp)
}
powinno zadziałać (jeżeli kontener ma 100% width)
normalnie używasz tak że
<div class = "text-column">TEKST</div>
<div class = "text-column">zdjecie(<img>)</div>
<div class = "text-column">TEKST</div>
0
Niestety ale Twoje rozwiązanie nie działa u mnie... Może wstawię kod.
<div class="kolumna1">
<h5>Kolumna1</h5>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
</div>
<div class="zdjecie1">
<img src="img/images/z1.png" alt="zdjecie1" />
</div>
<div class="zdjecie2">
<img src="img/images/z2.png" alt="zdjecie2" />
</div>
<div class="kolumna2">
<h5>KKolumna2</h5>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
</div>
<div class="kolumna3">
<h5>Kolumna3</h5>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
</div>
<div class="kolumna4">
<h5>Kolumna4</h5>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
</div>
.kolumna1 {
float: left;
width: 256px;
height: 330px;
margin-top: 60px;
margin-left: 60px;
}
.kolumna1 h5 {
font-size: 14px;
font-family: "font";
padding-bottom: 20px;
}
.kolumna1 p {
font-size: 12px;
font-family: "font";
}
.zdjecie1 {
width: 151px;
height: 153px;
float: left;
margin: 95px 75px 75px 75px;
}
.zdjecie2 {
width: 141px;
height: 141px;
margin: 190px 90px 125px 90px;
float: left;
}
.kolumna2 {
float: right;
width: 256px;
height: 330px;
margin-top: 60px;
margin-right: 60px;
}
.kolumna2 h5 {
font-family: "font";
font-size: 14px;
padding-bottom: 20px;
}
.kolumna2 p {
font-size: 12px;
font-family: "font";
}
.kolumna3 {
width: 256px;
height: 330px;
margin-left: -558px;
margin-top: 400px;
float: left;
}
.kolumna3 h5 {
font-family: "font";
font-size: 14px;
padding-bottom: 20px;
}
.kolumna3 p {
font-size: 12px;
font-family: "font";
}
.kolumna4 {
float: right;
width: 256px;
height: 330px;
margin-right: -255px;
margin-top: 400px;
}
.kolumna4 h5 {
font-family: "font";
font-size: 14px;
padding-bottom: 20px;
}
.kolumna4 p {
font-size: 12px;
font-family: "font";
}
W niektórych przypadkach dość dziwne wartości margin czy padding są spowodowane tym, że na zasadzie prób i błędów w firebugu mi takie wyszły
0
czy kolumna(1,2,3,4) to mylne okreslenie wiersza u ciebie, czy moze twoj wiersz ma 4 kolumny a nie 3 jaki pisalas, bo kod ktory dalas ni w zab nie pasuje mi do opisu.
bo mozesz chciec tak:
kolumna1 kolumna2 kolumna3 kolumna4
i wtedy mamy 4 kolumny
lub
kolumna1
kolumna2
kolumna3
kolumna4
i w kolumna1 chciec:
h5
paragraf img img
ale wtedy kolumna powinna miec nazwe wiersz
:)
0
O jeju. Na jedną kolumnę składa się h5 i p. W jednym rzędzie jest kolumna-zdjęcie-kolumna, przechodzimy do drugiej linii i jest identyczna sytuacja.
Powinno to wyglądać tak:
Nagłówek Nagłówek
tekst tekst
tekst zdjęcie tekst
tekst tekst
tekst tekst
Nagłówek Nagłówek
tekst tekst
tekst zdjęcie tekst
tekst tekst
tekst tekst
Bardziej dokładnie już się chyba nie da tego przedstawić :)
Pozdrawiam
0
anka. Przecież dałem Ci rozwiązanie. Ty po prostu z niego nie skorzystałaś.
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<body>
<h3 style = "width: 100%;">naglowek</h3>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol1 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol2 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol3 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol1 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol2 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol3 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol1 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol2 </p>
<p style = "float: left; width: 33%; margin-bottom:20px;">kol3 </p>
</body>
</html>
wklej ten kod tutaj
http://www.compileonline.com/try_html5_online.php
i zobacz result. I zapewne chodziło Ci o coś takiego.
I nawet nie pisz "i jak mam teraz to zrobić" bo pisałem Ci wszystko w moim pierwszym poście. Jeżeli nie rozumiesz, czytaj aż zrozumiesz.