mia lysh me ta divs gia edo...

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 04 Μάιος 2006 11:04

name pali...

loipon basika exo ena problhmataki me ta divs (kata ta alla ola kala! :D)
an exo ayto to css:

Κώδικας: Επιλογή όλων

.abContainer { 
   width: 200px; 
   border: 1px solid #000000; 
   padding:10px; 
} 

.b { 
   float: right; 
   border: 1px solid #000000; 
} 

.a { 
   border: 1px solid #000000; 
} 
kai ayton ton html kodika:

Κώδικας: Επιλογή όλων

<div class="abContainer"> 
   <div class="b"> 
      <div>1b</div>    
      <div>2b<br />2b</div> 
      <div>3b</div> 
   </div> 
   <div class="a"> 
      <div>1a</div>    
      <div>2a</div> 
      <div>3a</div> 
   </div> 
</div>
pos mporo na kano to 3b na mhn bgainei ekso apo to div.. giati mou paei apo kato xoris na megalosei aytomata to div kai na prosarmostei sto ypsos tou periexomenou...

PS: to problhma to dimiourgei to float: right; alla to exo balei gia na phgainei to section me ta b deksia... an exei kapoios allos kapoion tropo...

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

mia lysh me ta divs gia edo...

Δημοσίευση από ThyClub » 04 Μάιος 2006 12:05

Βάλε το float (float:left;) στο div.a

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 05 Μάιος 2006 01:30

oraia.. opote exoume..
css:

Κώδικας: Επιλογή όλων

.abContainer &#123; 
   width&#58; 200px; 
   border&#58; 1px solid #000000; 
   padding&#58;10px; 
&#125; 

.b &#123; 
   border&#58; 1px solid #000000; 
&#125; 

.a &#123; 
   float&#58; left;
   border&#58; 1px solid #000000; 
&#125; 
kai html:

Κώδικας: Επιλογή όλων

<div class="abContainer"> 
   <div class="a"> 
      <div>1a</div>    
      <div>2a<br />2a<br />2a</div> 
      <div>3a</div> 
   </div> 
   <div class="b"> 
      <div>1b</div>    
      <div>2b<br />2b</div> 
      <div>3b</div> 
   </div> 
</div> 
tora pos tha kanoume na mhn bganei ekso to 3a? :P

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

mia lysh me ta divs gia edo...

Δημοσίευση από cherouvim » 05 Μάιος 2006 08:45

Kane clear meta ta 2 floated divs. Prin klisei to .abContainer diladi vale ena <div class="clear"></div> opou .clear { clear:both}

Fysika mporeis na to kaneis afto me kapio kalytero (pio semantic) tropo, diladi kapio paragraph, styled hr i footer.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 05 Μάιος 2006 11:33

eixa dokimasei kati paromoio to problhma einai pos oute ekeino oute ayto mou epaize... (dokimasa kai me paragraph alla tpt...)

css:

Κώδικας: Επιλογή όλων

.abContainer &#123; 
   width&#58; 200px; 
   border&#58; 1px solid #000000; 
   padding&#58;10px; 
&#125; 

.b &#123; 
   border&#58; 1px solid #000000; 
&#125; 

.a &#123; 
   float&#58; left; 
   border&#58; 1px solid #000000; 
&#125; 

.clear &#123; 
    clear&#58;both
&#125; 
html:

Κώδικας: Επιλογή όλων

<div class="abContainer"> 
   <div class="a"> 
      <div>1a</div>    
      <div>2a<br />2a<br />2a</div> 
      <div>3a</div> 
   </div> 
   <div class="b"> 
      <div>1b</div>    
      <div>2b<br />2b</div> 
      <div>3b</div> 
   </div> 
<div class="clear"></div>
</div> 

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

mia lysh me ta divs gia edo...

Δημοσίευση από cherouvim » 05 Μάιος 2006 11:48

Κώδικας: Επιλογή όλων

.abContainer &#123;
   width&#58; 200px;
   border&#58; 1px solid #000000;
   padding&#58;10px;
&#125;

.b &#123;
   float&#58; right;
   border&#58; 1px solid #000000;
&#125;

.a &#123;
   float&#58; left;
   border&#58; 1px solid #000000;
&#125;
.clear &#123;
	clear&#58;both;
&#125;

Κώδικας: Επιλογή όλων

<div class="abContainer">
   <div class="b">
      <div>1b</div>
      <div>2b<br />2b</div>
      <div>3b</div>
   </div>
   <div class="a">
      <div>1a</div>
      <div>2a</div>
      <div>3a</div>
   </div>
   <div class='clear'></div>
</div>
Fysika prepei na oriseis kai widths gia ta 2 div sou

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 10 Μάιος 2006 22:29

oraio ayto me to clear...
alla den katafera na to ftiakso an exo

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en">

:(

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

mia lysh me ta divs gia edo...

Δημοσίευση από cherouvim » 10 Μάιος 2006 22:38

Kati allo tha dimiourgei to provlima sou

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en">
<head>
<style><!--
.abContainer &#123;
   width&#58; 200px;
   border&#58; 1px solid #000000;
   padding&#58;10px;
&#125;

.b &#123;
   float&#58; right;
   border&#58; 1px solid #000000;
&#125;

.a &#123;
   float&#58; left;
   border&#58; 1px solid #000000;
&#125;
.clear &#123;
   clear&#58;both;
&#125;
--></style>
</head>
<body>
<div class="abContainer">
   <div class="b">
      <div>1b</div>
      <div>2b<br />2b</div>
      <div>3b</div>
   </div>
   <div class="a">
      <div>1a</div>
      <div>2a</div>
      <div>3a</div>
   </div>
   <div class='clear'></div>
</div>
</body>
</html>
Εικόνα

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 10 Μάιος 2006 23:00

basika exo 2 problhmata to parapano einai to 2o to 1o einai oti den mou douleyei to parakato...

Κώδικας: Επιλογή όλων

		<div class="Menu">
			<ul>
				<li><a href="">Home</a></li>
				<li><a href="">Operation</a></li>
				<li><a href="">Hierarchy</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</div>
css:

Κώδικας: Επιλογή όλων

.Menu &#123;
	height&#58; 65px;
	font-family&#58; "Tahoma", Arial, Helvetica, sans-serif;
	font-size&#58; 12pt;	
&#125;

.Menu ul &#123;
	margin&#58; 0px;
	padding&#58; 0px;
	list-style-type&#58; none;
&#125;

.Menu li &#123;
	display&#58; inline;
	padding&#58; 0px;
	width&#58; 103px;
	height&#58; 65px;		
&#125;

.Menu a &#123;
	padding-top&#58; 35px;
	width&#58; 103px;
	height&#58; 65px;
	background-image&#58; url&#40;../../images/menuBg.jpg&#41;;
	background-repeat&#58; no-repeat;		
&#125;

.Menu a&#58;link, .Menu a&#58;visited &#123;
	color&#58; #ffffff;
&#125;

.Menu a&#58;hover, .Menu a&#58;active &#123;
	color&#58; #e3e3e3;
&#125;
Συνημμένα
menuBg.jpg
menuBg.jpg (694 Ψηφιολέξεις) Προβλήθηκε 1947 φορές
Τελευταία επεξεργασία από το μέλος panosru την 10 Μάιος 2006 23:06, έχει επεξεργασθεί 1 φορά συνολικά.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 10 Μάιος 2006 23:03

ousiastika to 1o problhma akribos einai ayto:

Κώδικας: Επιλογή όλων

		<div class="Content">
			<p>
				asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
				asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
				asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
			</p>
		</div>
css:

Κώδικας: Επιλογή όλων

.Content &#123;
	border&#58; 1px solid #8b9eac;
	background-color&#58; #3f9fcc;
	margin-bottom&#58; 1px;
	margin-top&#58; 1px;
&#125;

.Content p &#123;
	height&#58; 396px;
	width&#58; 413px;	
&#125;

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 10 Μάιος 2006 23:38

ntaksi ayto me ta li to elysa alla to allo re gamoto mou exei spasei ta neyra.. konteyei bdomada kai akoma den exo brei lysh :S

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 11 Μάιος 2006 00:26

bazonts span anti gia p den exo problhma (anaferomai sto 1o problhma mou)

opote theoro solved to topic.. alla an exei kaneis na prosthesei kati kalodexoumeno! :D

EDIT:
Akyro telika bazontas span den lyno to problhma mou giati den douleyei to height me to span... (den to hksera :oops: )

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

mia lysh me ta divs gia edo...

Δημοσίευση από cherouvim » 11 Μάιος 2006 08:44

Pragmatika den ksero pio einai to provlima sou. Dose olokliro to html/css mazi me ena screenshot pou na dihnei to provlima.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

mia lysh me ta divs gia edo...

Δημοσίευση από panosru » 11 Μάιος 2006 09:48

ok, ksexna ola ta parapano, isos na sas mperdepsa kai go kapos to ena problhma meta to allo :P

ousiastika ayto einai to problhma mou:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en"> 
<head>
<style type="text/css">
.Content &#123; 
   border&#58; 1px solid #8b9eac; 
   background-color&#58; #3f9fcc; 
   margin-bottom&#58; 1px; 
   margin-top&#58; 1px; 
&#125; 

.Content p &#123; 
   height&#58; 396px; 
   width&#58; 413px;    
&#125; 
</style>
</head>
<body>
<div class="Content"> 
	<p> 
		asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br /> 
		asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br /> 
		asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br /> 
	</p> 
</div> 
</body>
</html>
opos tha deis sthn photo to "asd" bgainei apo kato xoris na megalosei to div..
ayto symbainei epidi exo to height sto p alla den thelo na to bgalo mou einai aparethto...
Συνημμένα
div_problem.gif
(2.69 KiB) Μεταφορτώθηκε 215 φορές

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

mia lysh me ta divs gia edo...

Δημοσίευση από cherouvim » 11 Μάιος 2006 09:52

Den yparxei provlima. O browser kanei oti tou exeis pei. Sou thetei to height tou div se 396px kai esy mesa tou ektyponeis kati pou mporei na einai 500px. Ti itheles na kanei?

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες