![]() |
Chirurgia endoscopică a hipofizei
"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală. Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale. www.neurohope.ro |
CSS - două coloane de lățime egală
Last Updated: Jan 28 2008 13:19, Started by
zaboss
, Jan 28 2008 11:24
·
0

#1
Posted 28 January 2008 - 11:24

Am un layout pe trei coloane: col1, col2, col3. În coloana 2, aș vrea să prezint elementele pe două coloane de lățime identică și mai multe rânduri. Conținutul îl iau dinamic dintr-o bază de date și nu am cum să știu dinainte câte coloane o să am. CSS-ul actual arată așa:
body { margin: 0; padding: 0; font-family: verdana, sans-serif; font-size:80%; line-height: 120%; background: #fff; color: #000; } #header { margin: 0; padding: 2em 4em; } #middle { margin: 0; padding: 0; } #col1 { float: left; width: 20%; } #col2 { float: left; width: 60%; } #col3 { float: left; width: 20%; } [color="#FF0000"]#col4 { float: left; width: 50%; }[/color] #menubox { float: left; width: 100%; margin-bottom: 1em; background: silver; } .box { margin: 0 0.2em 0.2em 0.2em; padding: 1em 1em 1em 1em; background: #fff; } .par { margin: 0 0.2em 0.2em 0.2em; padding: 1em 1em 1em 1em; background: #eeeeee; border: 1px dotted #cccccc; font: .8em/1.2em verdana, sans-serif; } .impar { margin: 0 0.2em 0.2em 0.2em; padding: 1em 1em 1em 1em; background: #cccccc; border: 1px dotted #eeeeee; font: .8em/1.2em verdana, sans-serif; } .admin{ margin: 0 0.2em 0.2em 0.2em; padding: 1em 1em 1em 1em; background: #ffffff; border: 2px solid #ffcc00; font: .8em/1.2em verdana, sans-serif; } #col1 .box { margin-left: 4em; padding: 0em 0em 0em 0em; background-color: silver; } #col1 ul { margin: 0; padding-left: 0.3em; list-style: none; } #col1 li { display: inline; } #col2 ul { margin: 0; padding-left: 0.3em; list-style: none;} #col2 li { margin: 0px 0px 0px 10px; list-style: square inside; } #col3 .box { margin-right: 4em; } h1, h2, h3, h4, h5, p, ul { margin: 0; padding: 0em 0.1em 0.5em 0.1em; } p, ul { font: .9em/1.5em verdana, sans-serif; } pre { margin: 0em 2em 1em 2em; padding: .5em 1em; font: .9em/1.2em monospace; } ul { list-style: none; } #col1 a { background-color: silver; border-bottom: 1px solid #393939; color: #fff; display: block; margin: 0.1em; padding: 0px 0px; text-decoration: none; } #col1 a:hover { background-color: #DCDCDC; color: #fff; } #col1 active a { background: #000000; color: #FFFFFF; } .clear { clear: both; font-size: 1px; line-height: 0; margin: 0; padding: 0; } #footerwrap { margin: 2em 0; padding: 0 7em; } #footer { font-size: .9em; margin: 0; padding: .3em 1em; } .box, pre, #footer { border: 1px dotted #aaa; } /* Begin CSS Drop Down Menu */ #menuh-container { position: relative; } #menuh { font-family: verdana, sans-serif; width:100%; float:left; margin:0em 0em; margin-top: 0; margin-right: 4em; } #menuh a { text-align: left; display:block; white-space:nowrap; margin:0; padding: 0.3em; } #menuh a, #menuh a:visited /* menu at rest */ { color: white; background-color: silver; text-decoration:none; } #menuh a:hover /* menu at mouse-over */ { color: white; background-color: #DCDCDC; } #menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */ { background-image: url(navdown_white.gif); background-position: right center; background-repeat: no-repeat; } #menuh a.top_parent_simple, #menuh a.top_parent_simple:hover /* attaches down-arrow to all top-parents */ { } #menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */ { background-image: url(nav_white.gif); background-position: right center; background-repeat: no-repeat; } #menuh ul { list-style:none; margin:0; padding:0; float:left; width:9em; /* width of all menu boxes */ } #menuh li { position:relative; min-height: 1px; /* Sophie Dennis contribution for IE7 */ vertical-align: bottom; /* Sophie Dennis contribution for IE7 */ } #menuh ul ul { position:absolute; z-index:500; top:auto; display:none; padding: 1em; margin:-1em 0 0 -1em; } #menuh ul ul ul { top:0; left:100%; } div#menuh li:hover { cursor:pointer; z-index:100; } div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {display:none;} div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {display:block;} /* End CSS Drop Down Menu */ Am încercat să pun col4, așa cum este mai sus, dar nu mi le distribuie, ci le pune tot una sub alta pe dimensiunea #col2. Layoutul vine cam așa: <div id="content"> <div id="header"> conținutul headerului <div id ="menubox"> <div id="menuh-container"> <div id="menuh"> meniul </div> <!-- end the menuh-container div --> </div> <!-- end the menuh div --> </div> <!-- end the menubox div --> </div> <!-- end the header div --> <div id="middle"> <!-- starts middle div --> <div id="col1"> <!-- This is the navigational box--> <div class="box"> </div> <!-- end the navigational box div --> </div> <!-- end the left column div --> <div id="col2"> <div class="box"> <div id="Col4"><div class="box"> conținut coloană 1 rând1 </div></div> <div id="Col4"><div class="box"> conținut coloană 2 rând1 </div></div> <div id="Col4"><div class="box"> conținut coloană 1 rând n </div></div> <div id="Col4"><div class="box"> conținut coloană 2 rând n </div></div> </div> <!-- end column 2 box div --> </div> <!-- end col 2 div --> <div id="col3"> <div class="box"> conținut coloană 3 </div> <div class="clear"><!-- clear the mess so we have a nice footer --></div> </div> <!-- end the middle div --> <div id="footerwrap"> <div id="footer"> </div> <!-- END footer --> </div> <!-- END footerwrap --> </div> <!-- END content -->Cum reușesc să fac #col4 să se așeze în forma două coloane/n rânduri? Dacă numărul de boxuri este impar, atunci creez din cod unul dummy ca să iasă egale. Edited by zaboss, 28 January 2008 - 11:28. |
#2
Posted 28 January 2008 - 12:06

cred ca mai degraba dai un url.... mi-e foarte greu sa urmaresc ce anume vrei sa faci tu acolo si nu prea am timp....
in principiu ce vrei tu se face cam asa: 3 float-uri left + un bg pe container ca sa dea impresia de coloane egale... should be simple enough, si se va extinde (sau va da impresia ca se extinde) dupa cea mai lunga coloana dintre cele 3 (fara a sti in prealabil care dintre ele e mai lunga). Cam asta e solutia generala. Edited by xnoise, 28 January 2008 - 12:08. |
#3
Posted 28 January 2008 - 12:22

Atașat este schema. În forma actuală am funcțional layoutul pe 3 coloane. Mă interesează doar aranjamentul în interiorul coloanei 2.
![]() |
#4
Posted 28 January 2008 - 12:26

cand listezi row-urile, setezi un counter. daca respectivul counter incepe de la 0, atunci toate coloanele cu counter par vor fi in stanga, toate cu counter impar vor fi in dreapta. Daca vrei 3 coloane, creezi regulile matematice de detectie al tipului coloanei, si o afisezi ca atare. e pretty simple.
|
#5
Posted 28 January 2008 - 12:29

pai in coloana 2, la fiecare div din ala mic ii dai float:left iar dupa 2 div-uri consecutiva bagi un <br style="clear:both;"/>
|
#6
Posted 28 January 2008 - 12:40

pai in coloana 2, la fiecare div din ala mic ii dai float:left iar dupa 2 div-uri consecutiva bagi un <br style="clear:both;"/> #col4 { float: left; width: 50%; }am pus <br style="clear:both;"/> la fiecare 2 divuri, dar tot una sub alta se așează, pe toată lungumea coloanei 2. |
#7
Posted 28 January 2008 - 13:19

pai daca nu le declari inaltime (egala) n-au cum sa fie asezate exact cum vrei tu (si anume sa ia inaltimea automat in functie de coloana din stanga
ps: nu trebuie sa exagerezi cu div-urile acolo e bun si un tabel |
Anunturi
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users