Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

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

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

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

Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

Δημοσίευση από dimsis » 22 Φεβ 2008 22:14

Να ένα tutorial που θα χρειαστεί σε πολλούς (και σε μένα). Όποιος έχει χρόνο και κουράγιο να το κάνει θα βοηθήσει πολύ κόσμο πιστεύω.

Έστω ότι έχω αυτή τη μορφή των "blocks" για το site που σχεδιάζω :Εικόνα

Ας πούμε ότι τα δυο πάνω τετράγωνα θα περιέχουν περιεχόμενο στο site μου. Το ένα θα είναι αριστερά και το άλλο το μικρότερο δεξιά...
Έστω τώρα ότι κόβω ας πούμε το πρώτο το μεγάλο τετράγωνο όπως την εικόνα που φαίνεται κάτω (αυτή με τα βελάκια), οπότε έχω 9 ξεχωριστές πλέον εικόνες που αν τις βάλω σωστά θα φτιάξουν το τετράγωνο που θέλω.
Πως θα φτιάξω αυτό το τετράγωνο με CSS έτσι ώστε να αυξομειώνεται το ύψος του αναλόγως την ανάλυση του επισκέπτη χωρίς να χαλάει το σχέδιο;

Με tables γινόταν απλά τοποθετώντας ως background εικόνες με ποσοστιαίο ( % ) width τα κομμάτια 2 και 8 και απλώς ως bg με το σωστό πλάτος τα κομμάτια 4 και 6.
Κάτι τέτοιο δηλαδή (στα πολύ γρήγορα.. χωράει διάφορες βελτιώσεις):
http://www.avadaz.com/table/sample_with_tables.html
Αν μικρύνουμε το παράθυρο του browser μικραίνει και το τετραγωνάκι μας... γιατί του έχω βάλει ένα 80% πλάτος...
Αυτό λοιπόν πως το κάνεις με CSS αφού έχεις κόψει τα κομμάτια σου και όταν θα χρειαστείς και δίπλα και μια στήλη με άλλα παρόμοια blocks;
Φαντάζομαι κάτι σαν:

<div class="content">
<div class="aristeri_stili">Ώπου εδώ μπαίνει ο κώδικας για το block 1</div><div class="dexia_stili">Block 2</div>
</div>

Σίγουρα θα υπάρχουν τίποτε ξένα tutorials, αλλά Ελληνικό δεν έχω ξαναδεί ... έχει κανείς το κουράγιο να το γράψει;


Για όσους θέλουν να κάνουν κάτι τέτοιο αλλά με tables όπως το παράδειγμα που έδωσ, παραθέτω και τον HTML κώδικα:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Playing...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br />
<table id="sample_top" width="80%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td><img src="images/sample_with_tables_01.gif" width="33" height="25" alt=""></td>
    <td background="images/sample_with_tables_02.gif" width="100%"><img src="images/spacer.gif" width="1" height="25" alt=""></td>
    <td><img src="images/sample_with_tables_03.gif" width="28" height="25" alt=""></td>
  </tr>
</table>
<table id="sample_middle" width="80%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td background="images/sample_with_tables_04.gif"><img src="images/spacer.gif" width="33" height="1" alt=""></td>
    <td background="images/sample_with_tables_05.gif" align="center" width="100%"><br />
      <br />
      <br />
      Εδώ το καλό περιεχόμενο... <br />
      φρέσκο πράγμα που σαλεύει...<br />
      και τον μάστορα γυρεύει...<br />
      <br />
      <br />
      Αν το κόψεις και καλύτερα γίνετε και με ένα table... <br />
      τώρα το έσφαξα στα γρήγορα για δείγμα οπότε το σπάω σε 3 tables. <br />
      <br />
      <br />
      <br />
      <br />
    </td>
    <td background="images/sample_with_tables_06.gif"><img src="images/spacer.gif" width="28" height="1" alt=""></td>
  </tr>
</table>
<table id="sample_bottom" width="80%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td><img src="images/sample_with_tables_07.gif" width="33" height="31" alt=""></td>
    <td background="images/sample_with_tables_08.gif" width="100%"><img src="images/spacer.gif" width="1" height="31" alt=""></td>
    <td><img src="images/sample_with_tables_09.gif" width="28" height="31" alt=""></td>
  </tr>
</table>
</body>
</html>

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

Δημοσίευση από skeftomilos » 23 Φεβ 2008 13:54

Με CSS η λογική είναι διαφορετική. Αντί να έχουμε τα κουτιά το ένα δίπλα στο άλλο (όπως στο παράδειγμα που έδωσες) τα βάζουμε το ένα μέσα στο άλλο:

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

<div style="background&#58;blue url&#40;blue-strip.gif&#41; repeat-x">
  <div style="background&#58;transparent url&#40;left-top.gif&#41; left top no-repeat">
    <div style="background&#58;transparent url&#40;right-top.gif&#41; right top no-repeat">
      <div style="background&#58;transparent url&#40;left-bottom.gif&#41; left bottom no-repeat">
        <div style="background&#58;transparent url&#40;right-bottom.gif&#41; right bottom no-repeat">
          ΠΕΡΙΕΧΟΜΕΝΟ
        </div>
      </div>
    </div>
  </div>
</div>
Σε κάποιο μακρινό μέλλον - όταν οι browser θα έχουν υλοποιήσει το CSS3 - τα πράγματα θα είναι πιο απλά γιατί θα μπορούμε να βάζουμε πολλαπλά background images σε ένα element.

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

Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

Δημοσίευση από dimsis » 25 Φεβ 2008 11:24

Ευχαριστώ skeftomilos, το δοκιμάζω με την πρώτη ευκαιρία. ( το έκανα report για βοήθημα ).

Edit:
Το δοκίμασα πριν λίγο, αλλά βλέπω δεν τις πάνω και κάτω μεσαίες εικόνες που αυξάνουν το πλάτος τους δυναμικά, όπως και την αριστερή και δεξιά εικόνα που προσαρμόζουν το ύψος τους αναλόγως το περιεχόμενο του block. Επίσης λογικά θέλει να ορίσεις και κάποια margins / padding για να αφήνει το περιεχόμενο απόσταση από τις εικόνες, διαφορετικά τα γράμματα πέφτουν πάνω στα γραφικά που βάζουμε ως background.

mola_kalouba
Δημοσιεύσεις: 168
Εγγραφή: 17 Φεβ 2008 11:14
Επικοινωνία:

Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

Δημοσίευση από mola_kalouba » 26 Φεβ 2008 08:25

1. Αυτο δουλευει σωστα σε ολες τις αναλυσεις δηλαδη οτι βλεπεις σε 1024χ768 θα το δεις με μεγαλητερη περιοχη και σε 1920χ1200 ;
2.Υπαρχει και αλλος τροπος ως εξης να βαλεις σε δυο ακριανους div το background που θες να επαναλαμβανεται και να τους βαλεις 100% width ;

Ευχαριστω πολυ

ibizakias
Δημοσιεύσεις: 154
Εγγραφή: 23 Απρ 2008 11:34

Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

Δημοσίευση από ibizakias » 11 Μαρ 2009 12:35

Αυτό το έχω απορία και εγώ. Αν στήσεις ένα site με βάση τα μαθήματα για css που έχει εδώ, πως μπορείς να κάνεις αυτό το site να αλλάζει μέγεθος ανάλογα με την ανάλυση που έχει αυτός που το επισκέπτεται;

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

Πως σπάμε ένα block ώστε να μεγαλώνει ανάλογα με την ανάλυση

Δημοσίευση από dimsis » 11 Μαρ 2009 18:20

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

<!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>Liquid rounded block - box</title>
</head>
<style>
b.bt, b.bt b, b.bb, b.bb b &#123;
	display&#58; block;
	height&#58; 10px;
	font-size&#58; 1px;
	background&#58;url&#40;grey.gif&#41; no-repeat;
	position&#58;relative
&#125;
b.bt &#123;
	top&#58; -3px;
	left&#58; -3px
&#125;
b.bt b &#123;
	background-position&#58;100% -10px;
	left&#58; 6px
&#125;
b.bb &#123;
	background-position&#58;0 -20px;
	top&#58;3px;
	left&#58; -3px
&#125;
b.bb b &#123;
	background-position&#58;100% -30px;
	left&#58; 6px
&#125;
#grey_border &#123;
	border&#58; #ddd 3px solid
&#125;
</style>
<body>
<div id="grey_border"> <b class="bt"><b></b></b>Θα λες ρωτήσει κακόκεφος προβληματική, πω χαρά πετάξαμε ώρα, με ανά έργων άγχος χειρότερα. Νέα πολύ δοκιμάσεις αποθηκευτικού αν, θέμα ωραίο έστειλε πως θα. Πες τα σημεία αφήσεις εκτελούσαν, χαρά αλφα μα ότι. Μη άρα φίλος απαραίτητο διαχειριστής, πω εφαρμογή δεδομένων διαπιστώνεις μου. Τρόποι μικρής εκδόσεις όλη θα, νέο περισσότερη παραγωγικής καθυστερούσε να.<b class="bb"><b></b></b> </div>
</body>
</html>
Σε συνημμένο έχει ένα html αρχείο με τον παραπάνω κώδικα και την εικόνα που χρειάζεστε. Αυτή η λύση μου αρέσει γιατί χρησιμοποιεί μόνο μια εικόνα για τις στρογγυλεμένες γωνίες και μόνο 1 div.

Source: ORB | Fluid CSS One Image Round Borders

Άλλες προτάσεις:
http://woork.blogspot.com/2008/03/liqui ... unded.html
http://ceslava.com/blog/en/24-tcnicas-m ... n-slo-css/
http://www.alistapart.com/articles/customcorners2
http://home.tiscali.nl/developerscorner ... orners.htm
http://www.search-this.com/2007/02/12/c ... d-corners/
http://www.goldcoastdesignerforum.com.a ... nd_corners
http://guyfisher.com/workshop/css/corners/
http://www.pmob.co.uk/temp/liquid-round.htm
http://www.phaysis.com/projects/css_rou ... rners.html
http://htmlmarket.com/article/5
http://www.cssjuice.com/25-rounded-corn ... -with-css/
http://cssgallery.info/rounded-cornes-css/
Συνημμένα
round-liquid-box.rar
(1.1 KiB) Μεταφορτώθηκε 525 φορές

Απάντηση

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

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

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