Author Topic: CSS help (Read 4363 times)

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; τότε χάνετε το ύψος.
έχω προσπαθήσει αλλά δεν τα καταφέρνω μπορεί κάποιος να βοηθήσει ?

webgift · « **Reply #1 on:** February 20, 2010, 13:29:16 »

Με κώδικα που μας έδωσες :

Quote

<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]

ks-net · « **Reply #2 on:** February 20, 2010, 14:32:44 »

Quote

έχει ύψος 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;

iraklis · « **Reply #3 on:** February 20, 2010, 15:03:13 »

<!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;*/}

iraklis · « **Reply #4 on:** February 20, 2010, 15:13:25 »

Ευχαριστώ ks-net αυτό ακριβώς ήθελα, το δοκίμαζα χθες μέχρι αργά αλλά μάλλον ήμουν κουρασμένος

ks-net · « **Reply #5 on:** February 20, 2010, 15:15:36 »

αυτό το τελευταίο δεν πρόκειται να δουλέψει... χολένει σε πολλές μεριές...

θα σου προτείνω το εξής
http://layouts.ironmyers.com/ ή googleit => css layouts... για περισσότερα

ξεκίνα από τα έτοιμα layout και πειραματίσου-εκπαιδεύσου πάνω σε αυτά... αυτή είναι η καλύτερη αρχή μαζί με css documentation για να κάνεις το δικό σου layout

αυτό το τελευατίο δεν έχει τα σωστά wrapper-container , margins κτλ... με λίγα λόγια δεν πρόκειται να σου στοιχίσει τα columns σωστά ποτέ!

Author Topic: CSS help (Read 4363 times)

iraklis

CSS help

webgift

Re: CSS help

ks-net

Re: CSS help

iraklis

Re: CSS help

iraklis

Re: CSS help

ks-net

Re: CSS help