Jak uzyskać efekt dwóch kolumn


(Krystianmazurek) #1

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.

HBuju.png


(Drobok) #2

spróbuj :nth-child(2) {float:left} dla elementu zawierającego ten wpis


(Krystianmazurek) #3

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}

(Drobok) #4

Jeśli nie działa bez kodu strony będzie ciężko. Ew daj adres jak masz na ftp :slight_smile:


(Krystianmazurek) #5

Oczywiśce bardzo proszę adres http://networkrumors.com


(th3mon) #6

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.


(Krystianmazurek) #7

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


(Magnevox) #8

Zrób tak:

.main-content { width: 972px; }

.story-row { width: 470px; float: left; margin-right: 14px }

PS. Polecam używać FireBug do FF


(th3mon) #9

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!


(Krystianmazurek) #10

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


(Magnevox) #11

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


(th3mon) #12

Chyba żartujesz…


(Magnevox) #13

nie, całkiem poważnie pisze


(th3mon) #14

Jeśli dobrze rozumiem, to ustaw div’om na sztywniaka height, np. na 200px.


(Magnevox) #15

i ogranicz ilość znaków w każdym wpisie zeby kiedyś tekst nie wyjezdzał


(th3mon) #16

ewentualnie dać regułę overflow: hidden i text-overflow: ellipsis; lub text-overflow: ellipsis-word;

http://www.css3.info/preview/text-overflow/


(Krystianmazurek) #17

Super, dziękuję wszystkich za pomoc :slight_smile: teraz na spokojnie zastanowię się nad ustawieniem wyświetlania ilości tekstu pod wpisem. Pozdrawiam serdecznie :smiley: