Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Întrebare

Grupul de firme Paysera Bulgaria ...

Upgrade Ryzen 9 5900X -> Ryze...

Priza aplicata cu intrerupator cu...
 Tor cu IP de UK

Sugestii road trip Moldova + Mara...

Recomandare apartament 3 camere

Casa in constructie la tara, ce s...
 Procesor cu pini indoiti, vandut ...

Examene competența lingvisti...

Probleme vw golf 7

laptop acer nu merge tastatura
 De ce ca Freelancer caștigi ...

La mulți ani @hvz!

La mulți ani @cotzi!

Probleme testosteron scazut
 

CSS - două coloane de lățime egală

- - - - -
  • Please log in to reply
6 replies to this topic

#1
zaboss

zaboss

    Active Member

  • Grup: Members
  • Posts: 1,906
  • Înscris: 12.10.2005
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
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
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
zaboss

zaboss

    Active Member

  • Grup: Members
  • Posts: 1,906
  • Înscris: 12.10.2005
Atașat este schema. În forma actuală am funcțional layoutul pe 3 coloane. Mă interesează doar aranjamentul în interiorul coloanei 2.
Attached File  SCHEMA_LAYOUT.png   37.81K   23 downloads

#4
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
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
again

again

    WEB DUDE

  • Grup: Senior Members
  • Posts: 7,068
  • Înscris: 21.10.2005
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
zaboss

zaboss

    Active Member

  • Grup: Members
  • Posts: 1,906
  • Înscris: 12.10.2005

View Postagain, on Jan 28 2008, 12:29, said:

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;"/>
Am:
#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
again

again

    WEB DUDE

  • Grup: Senior Members
  • Posts: 7,068
  • Înscris: 21.10.2005
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

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate