Witam,
Mam wielka prośbę, proszę o wytlumaczenie mi, w jaki sposób, mogę stworzyć widok dwukolumnowy, tak aby wyświetlały się na zmianę, czyli następny wpis w zaznaczonym na czerwono miejscu a nie pod spodem.
Witam,
Mam wielka prośbę, proszę o wytlumaczenie mi, w jaki sposób, mogę stworzyć widok dwukolumnowy, tak aby wyświetlały się na zmianę, czyli następny wpis w zaznaczonym na czerwono miejscu a nie pod spodem.
spróbuj :nth-child(2) {float:left} dla elementu zawierającego ten wpis
Przepraszam że zapytam ale gdzie w kodzie CSS mam to wkleić, jeżeli zawartość wpisu opisana jest tak:
/* story structure */
h2.story-title {font-size:13px;font-weight:420;margin:0;border:none;margin:0;padding-left:2px;letter-spacing:normal;color:#333;font-weight:700;text-decoration: none;text-shadow:0px 1px white;margin-top: 5px; }
h2.story-title a:link, h2.story-title a:visited {color:#191919;font-weight:700;text-decoration: none;}
h2.story-title a:hover {color:#00A5F0; text-decoration: none;}
.story-row{position:relative;clear:left;width:50%;margin-bottom: 12px;background:#FFF;border-radius: 3px;border:1px solid #CCC;}
[u].story-row:nth-child(2) {float:left}[/u]^?^
.story-left-margin {margin-left:0px;padding:0 0 0 5px;}
.storycontent {font-size:12px;line-height:18px;margin:0;z-index:0;padding:0;color:#333;text-shadow:0px 1px white}
a.more{padding-left:5px;white-space:nowrap;text-decoration:none;color:#222;}
a.source-link, a.source-link a:visited{padding-left:2px;font-size:11px;text-decoration:none;color: #FF4141}
Jeśli nie działa bez kodu strony będzie ciężko. Ew daj adres jak masz na ftp
Ewentualnie możesz dodać float: left dla każdego div’a i oczywiście dodaj nieco marginesu z prawej (margin-right) i zmniejsz width tak by Ci się te div’y pomieściły. Nie zapomnij o usunięciu clear: left.
Zrobiłem float: left jednak teraz wpisy wyświetlają sie tylko po prawej stronie. Gdyby ktoś mógł mi po kolei wytłumaczyć jak mam to zrobić byłbym bardzo wdzięczny. Pozdrawiam
Zrób tak:
.main-content { width: 972px; }
.story-row { width: 470px; float: left; margin-right: 14px }
PS. Polecam używać FireBug do FF
A zrobiłeś jak to opisałem? Ja się tą stroną co dałeś w firebugu pobawiłem i mi zadziałało bez problemu, no bo wyjścia nie miało :-D!
Super, dzięki bardzo mi to pomogło, jednak mam jeszcze jedno pytanie. Czy można w jakis sposób wyeliminować te luki które pozostały po lewej stronie, tak aby wpisy były ułożone równo do siebie. Lewa do prawej.
Pozdrawiam
to w takim wypadku ja bym to zrobil albo na tabelkach albo po kazdym div story-row dodał
i w css .clear { clear: both; }
– Dodane 03.08.2012 (Pt) 15:27 –
jednak z clear to nie zadziala. musisz przerobic na tabelke
Chyba żartujesz…
nie, całkiem poważnie pisze
Jeśli dobrze rozumiem, to ustaw div’om na sztywniaka height, np. na 200px.
i ogranicz ilość znaków w każdym wpisie zeby kiedyś tekst nie wyjezdzał
ewentualnie dać regułę overflow: hidden i text-overflow: ellipsis; lub text-overflow: ellipsis-word;
Super, dziękuję wszystkich za pomoc teraz na spokojnie zastanowię się nad ustawieniem wyświetlania ilości tekstu pod wpisem. Pozdrawiam serdecznie