div 100% πλατος

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

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

Απάντηση
abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

div 100% πλατος

Δημοσίευση από abeautifulmind » 08 Ιούλ 2011 01:28

καλημέρα σε όλους.Να ρωτήσω πως μπορώ σε μία div ή στο body να δώσω width μέσω css ώστε να πιάνει όλο το πλάτος της οθόνης ανεξάρτητα από την αν'αλυση και την αναλογία της οθόνης. π.χ. να πιάνει όλο το πλάτος είτε βλέπει την σελίδα ένας με 15 ίντσες οθόνη (χωρίς wide screen) είτε με 19 ίντσες (wide screen).

gvre
Δημοσιεύσεις: 992
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

div 100% πλατος

Δημοσίευση από gvre » 08 Ιούλ 2011 01:39

Το div είναι block level element οπότε παίρνει όλο το διαθέσιμο πλάτος του container του. Αν έχεις συγκεκριμένο πρόβλημα στείλε περισσότερες λεπτομέρειες και κώδικα.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

div 100% πλατος

Δημοσίευση από dimsis » 08 Ιούλ 2011 09:50

Βάλε width:100% και στα δυο αντί για κάποιο fix πλάτος σε pixels.

abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

div 100% πλατος

Δημοσίευση από abeautifulmind » 17 Ιούλ 2011 11:25

dimsis ευχαριστώ.

abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

div 100% πλατος

Δημοσίευση από abeautifulmind » 17 Ιούλ 2011 11:32

Να ρωτήσω κάτι άλλο.
Έχω μία φόρμα με 2 inputs και 2 κουμπιά και τα έχω δώσει style αλλά στον explorer μου τα βγάζει μεγαλύτερα από ότι στον firefox και crome γιατί?

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

 <div id="container">
      <div id="login">
       
              
			    <form id="login" name="login" method="post" action="checklogin.php">
			    <label for="username">Χρήστης&#58;</label>
              			<input name="username"  type="text" class="textfield" id="username"  maxlength="20" style="width&#58; 120px;" />
           			
			            <label for="password">Κωδικός&#58;</label>
              			<input name="password"  type="password" class="textfield" id="password" 		style="width&#58; 120px;"				/>
           			
              			               <input type="submit" name="Login" id="login_Submit" value=		                        "Είσοδος" />
            
</form>
<div id="egrafi_div" align="right">
	<a href="register_choise.php">
		<input  align="right" type="submit" id="egrafi" value="Εγγραφή"/>
	</a>
</div>
</div>
</div>

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

#container &#123;
      width&#58; 100%;
      overflow&#58; hidden;
      text-align&#58; left;
      font&#58; 90% Tahoma, Helvetica, sans-serif;
      margin&#58; 0px auto;
     
	  
	  border-right&#58; 10px solid #ffffff;
      background&#58; #e5e5e5;
&#125;  
#login_Submit&#123;
padding&#58; 2px 5px 2px 5px;
margin&#58; 2px;
background-color&#58;#FFFFFF;
border&#58; 1px solid #AAAADD;

text-decoration&#58; none; /* no underline */
color&#58; #000099;
cursor&#58;pointer;
padding-left&#58;17px;
padding-right&#58;17px;
&#125;
#login_Submit&#58;hover&#123;
border&#58; 1px solid #000099;
color&#58; #000;
&#125;
#egrafi&#123;
padding&#58; 2px 5px 2px 5px;
margin&#58; 2px;
background-color&#58;#36AFF6;
border&#58; 1px solid #AAAADD;

text-decoration&#58; none; /* no underline */
color&#58; #ffffff;
cursor&#58;pointer;
padding-left&#58;17px;
padding-right&#58;17px;
&#125;
#egrafi&#58;hover&#123;
border&#58; 1px solid #000099;
color&#58; #FFFFFF;
&#125;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

div 100% πλατος

Δημοσίευση από dimsis » 17 Ιούλ 2011 11:43

Υπάρχει θέμα με το πως διαχειρίζονται τα paddings - margins οι browsers. Δοκίμασε να ξεκινήσεις φορτώνοντας ένα reset stylesheet π.χ. http://meyerweb.com/eric/tools/css/reset/

abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

div 100% πλατος

Δημοσίευση από abeautifulmind » 17 Ιούλ 2011 14:11

Aυτό θα το βάλω σαν εξωτερικό αρχείο css μόνο του η θα το πετάξω κάπου?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

div 100% πλατος

Δημοσίευση από dimsis » 18 Ιούλ 2011 11:39

Βάλτο να φορτώνεται σαν εξωτερικό αρχείο ΠΡΙΝ από τα δικά σου styles.
π.χ.

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

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Το site μου</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/to_style_sou.css" type="text/css" />
</head>
<body>
</body>
</html>

διάβασε και εδώ : http://sixrevisions.com/css/a-comprehen ... ss-resets/

Απάντηση

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

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

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