3 columns divs

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

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

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

3 columns divs

Δημοσίευση από panosru » 15 Μάιος 2006 13:37

name pali... (telika den lythikan ola mou ta problhmata me ta divs :hammer: )

esto oti exo ton eksis kodika

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

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.Container &#123;
	width&#58; 100%;
	border&#58;1px solid #000000;
	padding&#58;5px;	
	min-width&#58; 200px;
&#125;

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

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

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

-->
</style>
</head>

<body>

<div class="Container">
	<div class="Left">Left</div>
	<div class="Right">Right</div>
	<div class="Main">Main</div>
</div>

</body>
</html>
to problhma einai pos otan mikrinei poly to width tou browser paei apo kato to main.. mporo na kano kati gia na to apofygo?

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

3 columns divs

Δημοσίευση από fotisevangelou » 15 Μάιος 2006 14:13

Δες αυτό:

http://www.intensivstation.ch/files/en_ ... emp03.html

Μάλλον αυτό θες...

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

3 columns divs

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

to ksero ayto to web site.. den mou kanei tipota apo ekei.. psaxno tropo na kano to parapano xoris na xrhshmopoihso position: absolute; ntaksi an den ginete allios anagkastika tha to xrhshmopoiso alla leo mpas kai kserei kaneis kapoio allo tropo...

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

3 columns divs

Δημοσίευση από fotisevangelou » 15 Μάιος 2006 16:10

Μόνο αν βάλεις ένα container div με συγκεκριμένο width, π.χ. 1000px, και εκεί μέσα ρίξεις τα 3 div-άκια σου.

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

3 columns divs

Δημοσίευση από panosru » 15 Μάιος 2006 16:35

em.. etsi to kano kai go :P to thema einai pos den thelo na einai fixed to size...

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

3 columns divs

Δημοσίευση από fotisevangelou » 15 Μάιος 2006 17:31

Κάτι θα πρέπει να είναι αναγκαστικά fixed. Το πιθανότερο οι πλαϊνές στήλες.

Πάντως, ο κώδικας που έδωσες είναι πολύ γενικός. Γίνε πιο συγκεκριμένος.

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

3 columns divs

Δημοσίευση από cherouvim » 15 Μάιος 2006 17:41

Des afto: http://temp.cherouvim.com/forums/floatutorial-rip/

einai rip/mod apo to fluotutorial, proekipse apo ayto to thread: http://www.freestuff.gr/forums/viewtopic.php?t=20340

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

3 columns divs

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

nai tha exo kati fixed (left & right column width 190px;)

cherouvim oraio to temp ayto alla to problhmaeinai pos otan mikreno to window to right content paei pano apo to main kai to left...


oraio to topic to eixa dei palia alla oute pou to thymomoun, to problhma einai pos to min-width den mou douleyei ston ie kai an deis ston kodika mou pano t exo balei..

tha to koitakso perisotero pantos..

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

3 columns divs

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

ok paidia to elysa to problhma tou min-height ston explorer loipon h lysh exei os eksis:

to min/max-height/width
se ie 6 den paizoun (h MS leei pos tha to diorthosei ayto ante na doume) pros to paron gia na leitourghsoun kanoume to eksis:

esto oti theloume na efarmosoume
min-width: 200px;

an grapsoume sketo min-width: 200px; den tha doulepsei se explorer opote prepei na grapsoume to eksis

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

min-width&#58; 200px;
width&#58; auto;
_width&#58; 200px;
kai antistoixa gia ta height

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

3 columns divs

Δημοσίευση από cherouvim » 16 Μάιος 2006 15:39

Pou to vrikes afto to hack? Ksereis pos tha symperiferthei se ie mac, safari, opera ktl?

Protino na paikseis me kati pio "standard" opos to /**/, * html i to !important

des afta:
http://www.mezzoblue.com/archives/2004/ ... height_fi/
http://www.cssplay.co.uk/boxes/minheight.html

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

3 columns divs

Δημοσίευση από panosru » 16 Μάιος 2006 17:50

apo edo o brhka http://wellstyled.com/css-underscore-hack.html

grafei
tested it in Windows' MSIE 5, 5.5, 6, and Opera; Mac OSX's MSIE 5, Safari, and Camino; and in Mozilla and Firefox.
tha koitakso kai ayta pou mou esthles

PS: to !important den to katalaba an exeis xrono ekshghse mou to me kapoia paradhgmata plz :D

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

3 columns divs

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


Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

3 columns divs

Δημοσίευση από fotisevangelou » 16 Μάιος 2006 18:40

Φίλε panosru,

αν και το !important δεν έχει καμμία σχέση με το min-width να σου πω ότι κυρίως χρησιμοποιείται για να κάνεις "γρήγορες" προσαρμογές σε css ιδιότητες και να φέρνεις το τελικό layout σου όσο πιο κοντά γίνεται ανάμεσα στον Internet Explorer και όλους τους άλλους browsers. Θα σε βοηθήσει δηλαδή στο να έχεις π.χ. τα σωστά margins τόσο σε ΙΕ όσο και σε Firefox.

Χρήση: Π.χ. έχουμε ένα div block που πρέπει να έχει margins από το υπόλοιπο layout 2px 4px 6px 8px (πάνω δεξιά κάτω αριστερά). Στον Firefox παίζει σωστά ας υποθέσουμε, αλλά στον IE όχι (αυτό μπορεί να συμβαίνει για πολλούς λόγους). Έστω ότι η σωστή τοποθέτησή του στον ΙΕ θα ήταν με margin: 3px 5px 7px 9px. Τότε στο CSS μας θα γράψουμε:

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

div &#123;
  margin&#58; 2px 4px 6px 8px !important;
  margin&#58; 3px 5px 7px 9px;
&#125;
Όλοι οι browsers πλην του ΙΕ θα διαβάσουν την πρώτη τιμή του margin και θα αγνοήσουν την δεύτερη. Αντίθετα στον ΙΕ θα υπερισχύσει η δεύτερη τιμή, μετά το !important δηλαδή.

Ένας καλός τρόπος όπως είπα να φέρνεις το layout σου στα μέτρα σου γρήγορα και εύκολα.

:D

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

3 columns divs

Δημοσίευση από panosru » 16 Μάιος 2006 20:57

@fotisevangelou : poly kalo ayto! pragmatika xrhshmo

@cherouvim : eimai se vista tora kai ie 7 build 5365 opou exoun diorthothei para pola bugs kai ola osa dokimazo mou leitourgoun apsoga xoris bug.. par' ola ayta tha dokimaso ta links pou mou esthles ayrio sthn sxolh pou exoume ie6

PS: mhpos gnorizei kaneis kapoion browser emulator? gia na dokimazo tis selides se ie6, safari kai mac ie ?

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

3 columns divs

Δημοσίευση από cherouvim » 16 Μάιος 2006 21:19

Me ton IE7 min paizeis kai poly mehri na vgei ekso kai na apofasisoun ti tha afisoun mesa kai ti apekso. Os web designer tha pareis tis apofaseis sou otan tha arhisei o IE7 tha kykloforisei sto koino.

http://browsershots.org
http://browsers.evolt.org
Episis mporeis na valeis linux se ena partition (i se ena VMWare) kai na trexeis ton konqueror gia na testareis ta sites sou me to KHTML engine.

Απάντηση

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

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

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