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

Anastasis · November 10, 2016

Να ένα 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://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>

Sign In

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

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity