Elxis CMS Forum
Ελληνικό Forum => Γενικά Θέματα για το Elxis CMS => Topic started by: iraklis on February 20, 2010, 05:08:41
-
#############################################
<head>
<style type="text/css">
#wrapper {width:400px ;height:100%; background:#0FC;}
#float1 {width:200px; height:500px; /*float:right;*/ }
</style>
</head>
<body>
<div id="wrapper">wrapper
<div id="float">float</div>
</div>
</body>
#############################################
Στον παραπάνω κώδικα προσπαθώ να κάνω το εξής:
θέλω το <div id="wrapper"> να έχει ύψος 100% όταν όμως κάνω το <div id="float"> float:right; τότε χάνετε το ύψος.
έχω προσπαθήσει αλλά δεν τα καταφέρνω μπορεί κάποιος να βοηθήσει ?
-
Με κώδικα που μας έδωσες :
<head>
<style type="text/css">
#wrapper {width:400px ;height:100%; background:#0FC; border:1px black solid;}
#float {width:200px; height:500px; border:1px black solid;float:right;}
</style>
</head>
<body>
<div id="wrapper">wrapper
<div id="float">float</div>
</div>
</body>
Το κόκκινο κομμάτι είναι λάθος που μας έχεις βάλει.
Έχει αυτό το αποτέλεσμα ( που σου έχω επισυνάψει ):
Edit: Έχω βάλει και Border για να βλέπουμε τι κάνουμε.
Ερώτηση : Δεν έχω καταλάβει 100% τι προσπαθείς να κάνεις. Διευκρίνισε μας.
[attachment deleted by admin]
-
έχει ύψος 100%
το ποσοστιαίο ύψος είναι μεγάλο κεφάλαιο... όταν έρθει to css3... θα δουλέψει κανονικά... περισσότερα=>googleit!
στο προκείμενο:
<head>
<style type="text/css">
#wrapper {width:400px ;/*height:100%;*/ background:#0FC;}
#float {width:200px; height:500px; float:right; }
</style>
</head>
<body>
<div id="wrapper">
<div id="float">float</div>
περιεχόμενα wrapper κάτω από το float
<div style="clear:right"></div> αυτό θα δουλέψει όταν το wraper θα έχει ύψος μικρότερο(λιγότερα περιεχόμενα) από το float
</div>
</body>
η λύση που ζητάς είναι μια <div> ή άλλο element κάτω από τη float που να "καθαρίζει" το float
παρακάτω η παράμετρος clear και οι τιμές που παίρνει:
clear:left;
clear:right;
clear:both;
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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">
#wrapper {width:600px ;height:600px; background:#0FC; border:1px black solid;}
#leftcolumn {width:370px; height:500px; border:1px blue solid;float:left;}
#rightcolumn {width:200px; height:300px; border:1px red solid;float:right;}
</style>
</head>
<body>
<div id="wrapper">wrapper
<div id="leftcolumn">leftcolumn</div>
<div id="rightcolumn">rightcolumn</div>
</div>
</body>
</html>
Θέλω να έχω στο #wrapper {background: url(../images/main_bg.jpg) top center repeat-y;}
και ανάλογα με το ΥΨΟΣ των leftcolumn/rightcolumn να εμφανίζεται το bg.
Δηλαδή αν στο παραπάνω κώδικα βάλω height 100% στο #wrapper {height:100%;} το leftcolumn/rightcolumn πηγαίνει από κάτω.
Άλλαξε στο ίδιο παράδειγμα και αυτό το style:
#wrapper {width:600px ;height:100%; background:#0FC; border:1px black solid;}
#leftcolumn {width:370px; height:500px; border:1px blue solid;/*float:left;*/}
#rightcolumn {width:200px; height:300px; border:1px red solid;/*float:right;*/}
-
Ευχαριστώ ks-net αυτό ακριβώς ήθελα, το δοκίμαζα χθες μέχρι αργά αλλά μάλλον ήμουν κουρασμένος
-
αυτό το τελευταίο δεν πρόκειται να δουλέψει... χολένει σε πολλές μεριές...
θα σου προτείνω το εξής
http://layouts.ironmyers.com/ ή googleit => css layouts... για περισσότερα
ξεκίνα από τα έτοιμα layout και πειραματίσου-εκπαιδεύσου πάνω σε αυτά... αυτή είναι η καλύτερη αρχή μαζί με css documentation για να κάνεις το δικό σου layout
αυτό το τελευατίο δεν έχει τα σωστά wrapper-container , margins κτλ... με λίγα λόγια δεν πρόκειται να σου στοιχίσει τα columns σωστά ποτέ!