3 Divs, σταθερό width το 1 div, αυτόματο width τα άλλα 2 divs

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

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

Απάντηση
Άβαταρ μέλους
Yiannistaos
Δημοσιεύσεις: 140
Εγγραφή: 10 Οκτ 2007 21:01
Τοποθεσία: Λεμεσός
Επικοινωνία:

3 Divs, σταθερό width το 1 div, αυτόματο width τα άλλα 2 divs

Δημοσίευση από Yiannistaos » 23 Μάιος 2011 20:40

Γεια σας φίλοι freestuffites,

Λίγο κόλλησα με τον παρακάτω κώδικα στο css.
Με τον παρακάτω κώδικα πετυχαίνω το FALSE της επισυναπτόμενης εικόνας

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>
<body style="text-align&#58; center; font-size&#58; 20pt;padding&#58; 0; margin&#58;0;">
   <div style="width&#58; 900px; height&#58; 500px; background&#58; #FF9; padding&#58; 0; margin&#58;0;"> 
      <div id="left" style="float&#58; left; padding-left&#58; 20px; width&#58; 200px; background&#58; grey;">left</div> 
      <div id="center" style="float&#58; left; width&#58; auto; background&#58; green;">center</div> 
      <div id="right" style="float&#58; left; width&#58; auto; background&#58; #9F9;">right</div> 
   </div> 
   </body>
</html>

Πως μπορώ να μοιράσω το πλάτος του center και του right χωρίς να δώσω στο css μου το πλάτος χειροκίνητα; (Δείτε την εικόνα)

Οποιαδήποτε ιδέα ευπρόσδεκτη! :)

Υ.Γ. Προσοχή! Δεν θέλω να κάνω το παρακάτω, που δουλεύει έτσι κι αλλιώς και επίσης δεν θέλω να χρησιμοποιήσω tables. :) Ευχαριστώ.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>
<body style="text-align&#58; center; font-size&#58; 20pt;padding&#58; 0; margin&#58;0;">
   <div style="width&#58; 900px; height&#58; 500px; background&#58; #FF9; padding&#58; 0; margin&#58;0;"> 
      <div id="left" style="float&#58; left; padding-left&#58; 20px; width&#58; 200px; background&#58; grey;">left</div> 
      <div id="center" style="float&#58; left; width&#58; 340px; background&#58; green;">center</div> 
      <div id="right" style="float&#58; left; width&#58; 340px; background&#58; #9F9;">right</div> 
   </div> 
   </body>
</html>
Συνημμένα
Padding_Width.png
web357.eu - Free & Premium Joomla! Extensions

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

3 Divs, σταθερό width το 1 div, αυτόματο width τα άλλα 2 divs

Δημοσίευση από korgr » 23 Μάιος 2011 21:03

Μια λύση από μένα που είμαι table lover ...χωρίς tables lol

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
</head>
<body style="text-align&#58; center; font-size&#58; 20pt;padding&#58; 0; margin&#58;0;">
   <div style="width&#58; 900px; height&#58; 500px; background&#58; #FF9; padding&#58; 0; margin&#58;0;">
      <div id="left" style="float&#58; left; padding-left&#58; 20px; width&#58; 200px; background&#58; grey;">left</div>
      <div style="width&#58;680px;float&#58;left">
      <div id="center" style="float&#58; left; width&#58; 50%; background&#58; green;">center</div>
      <div id="right" style="float&#58; left; width&#58; 50%; background&#58; #9F9;">right</div>
      </div>
   </div>
   </body>
</html> 

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

3 Divs, σταθερό width το 1 div, αυτόματο width τα άλλα 2 divs

Δημοσίευση από fafos » 23 Μάιος 2011 22:51

an den kano lathos den yparxei tropos me aplh css na moiraseis ta divs.. prepei h na valeis stahero mhkos sta divs h na akolouthiseis ton tropo tou kontopatrioth opou kai pali prepei na doseis to mhkos tou exoterikou div..

yparxei lysh me ajax an sou kanei:

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Untitled Document</title>
<script src="http&#58;//code.jquery.com/jquery-latest.js"></script>
<script>
$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
var mainwidth = $&#40;"#main"&#41;.outerWidth&#40;&#41;;//mhkos kyriou div

var leftwidth = $&#40;"#left"&#41;.outerWidth&#40;&#41;;//mhkos left div

var diaforawidth = &#40;mainwidth - leftwidth&#41; / 2;//vrisko thn diafora kai thn diairo me to 2 pou einai o arithmos div

$&#40;'#center'&#41;.css&#40;"width", diaforawidth&#41;;//vazo to width sto div me id=center
$&#40;'#right'&#41;.css&#40;"width", diaforawidth&#41;;//vazo to width sto div me id=right
&#125;&#41;;
</script>


</head>
<body style="text-align&#58; center; font-size&#58; 20pt;padding&#58; 0; margin&#58;0;">
   <div id="main" style="width&#58; 900px; height&#58; 500px; background&#58; #FF9; padding&#58; 0; margin&#58;0;">
      <div id="left" style="float&#58; left; padding-left&#58; 20px; width&#58; 200px; background&#58; grey;">left</div>
      <div id="center" style="float&#58; left; width&#58; auto; background&#58; green;">center</div>
      <div id="right" style="float&#58; left; width&#58; auto; background&#58; #9F9;">right</div>
   </div>
   </body>
</html> 
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Kainourios
Ruby Moderator
Δημοσιεύσεις: 504
Εγγραφή: 18 Μάιος 2005 16:20
Τοποθεσία: Κορυδαλλός
Επικοινωνία:

3 Divs, σταθερό width το 1 div, αυτόματο width τα άλλα 2 divs

Δημοσίευση από Kainourios » 24 Μάιος 2011 03:45

Για ρίξε μια ματιά εδώ http://www.dynamicdrive.com/style/layouts/category/C10/

Άβαταρ μέλους
Yiannistaos
Δημοσιεύσεις: 140
Εγγραφή: 10 Οκτ 2007 21:01
Τοποθεσία: Λεμεσός
Επικοινωνία:

3 Divs, σταθερό width το 1 div, αυτόματο width τα άλλα 2 divs

Δημοσίευση από Yiannistaos » 25 Μάιος 2011 04:00

Παιδιά σας ευχαριστώ πολύ όλους για τις γνώμες σας, να είστε καλά! :)
Μπορώ να πω πως μου άρεσε περισσότερο η λύση του fafos, καθώς δεν γίνεται διαφορετικά να μετρηθεί το συνολικό πλάτος του div με pixels και percent.
web357.eu - Free & Premium Joomla! Extensions

Απάντηση

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

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

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