Css3: Rounded Corner Div

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

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

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 28 Μάιος 2011 21:57

How-to: Css3: Rounded Corner Div

Ένα παράδειγμα χρήσης της CSS3, για το πώς δημιουργούμε divs με καμπύλες γωνίες και διχρωμία.

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

/*General position and size settings*/
	float:left;
	width:250px;	
	/*Font/Text Settings*/
	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	font-size: 10pt;
	color: #888888;
	text-align: justify;
	padding: 10px;
	/* Rounded Corners */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/*Background and border color*/
	background-image: -moz-linear-gradient(top, #FFFFFF, #E6E6FA);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.0, #E6E6FA));
	border: 1px solid #D3D3D3;
	background-color: #DDDDDD;

Live Demo / Download Files

liki
Δημοσιεύσεις: 1
Εγγραφή: 22 Ιούλ 2008 15:22

Css3: Rounded Corner Div

Δημοσίευση από liki » 31 Μάιος 2011 18:35

Τέλεια!!!

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 31 Μάιος 2011 19:24

:)

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Css3: Rounded Corner Div

Δημοσίευση από dionisis71 » 03 Ιουν 2011 09:57

Καλημέρα,
πολύ ωραίο το παράδειγμα, όμως σαν αρχάριος στο CSS έχω κάποιες απορίες. Για εκπαιδευτικό σκοπό έπαιξα με το συγκεκριμένο παράδειγμα και ανάμεσα σε αυτά που ήθελα να κάνω (ανεπιτυχώς) ήταν και το εξής. Ας υποθέσουμε ότι θέλω να χωρίσω τα div blocks και αυτά που θα μπουν από κάτω τους με μια οριζόντια γραμμή. Μέσα στο main div βάζω ένα hr tag. Παρατηρώ ότι αντι να μπει κάτω από τα blocks, τοποθετείται πανω στην αρχή των div blocks. Σκέφτομαι ότι ίσως οφείλεται αυτό στο αρχείο css.
#main{
padding-top:80px


οπότε διορθώνω στον html κώδικα μου το hr tag με
<hr / style="clear: both">
Με την διόρθωση αυτή η γραμμή μου τοποθετείται στο τέλος των div blocks όπως ακριβώς ήθελα. Έλα όμως που αν στο block2 γράψω περισσότερα comments η γραμμή μένει στην ίδια θέση και δεν καταλαβαίνει το τέλος του block. Ενώ το αντίστοιχο για block1 και block3 παίζει μια χαρά. Τι το ιδιαίτερο έχει το block2..;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

<head>
<title>Css3: Rounded Corner Div - by Joakim Liassides - Example Page </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
<div id="main">
<p>Simple Rounded Corner divs</p><br>
<div id="block_1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id nisl pharetra eleifend id nec dui. Maecenas molestie eleifend lectus eget venenatis. Donec congue mauris nec est ornare a scelerisque purus auctor. Etiam quam orci, hendrerit ut faucibus ut, faucibus ut est. Integer nec neque mi. </p></div>
<div id="block_2"><p>Lorem ipsum dolor kjhjkjh kjh jh kjh kh kjh khj kjh khj jh kjh kjh kjhsit amet, consectetur adipiscing elit. Vestibulum vitae arcu id nisl pharetra eleifend id nec dui. Maecenas molestie eleifend lectus eget venenatis. Donec congue mauris nec est ornare a scelerisque purus auctor. Etiam quam orci, hendrerit ut faucibus ut, faucibus ut est. Integer nec neque mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id nisl pharetra eleifend id nec dui. Maecenas molestie eleifend lectus eget venenatis. Donec congue mauris nec est ornare a scelerisque purus auctor. Etiam quam orci, hendrerit ut faucibus ut, faucibus ut est. Integer nec neque mi. </p></div>
<div id="block_3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id nisl pharetra eleifend id nec dui. Maecenas molestie eleifend lectus eget venenatis. Donec congue mauris nec est ornare a scelerisque purus auctor. Etiam quam orci, hendrerit ut faucibus ut, faucibus ut est. Integer nec neque mi. </p></div>
<hr / style="clear: both">
</div>

</div>

</body>
</html>
Ευχαριστώ

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 03 Ιουν 2011 10:07

Το πρόβλημα δημιουργείτε γιατί στο block2 δίνουμε absolute τιμή τοποθέτησης.

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

   position&#58; absolute;
    left&#58; 50%;
    margin-left&#58; -135px;
Αφαίρεσε τον ποίο πάνω κώδικα από το style.css αρχείο και άλλαξέ τον με αυτό

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

float&#58;left;
Τώρα θα λειτουργεί η γραμμή σου κανονικά, αλλά το μεσαίο κουτί δεν θα είναι στοιχισμένο στο κέντρο

Ελπίζω να βοήθησα.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 03 Ιουν 2011 10:09

Το padding-top που αναφέρεις δεν παίζει όμως ρόλο , εμένα τουλάχιστον λειτουργεί κανόνικά σε Chrome.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Css3: Rounded Corner Div

Δημοσίευση από dionisis71 » 03 Ιουν 2011 10:28

Joakim έγραψε:Το padding-top που αναφέρεις δεν παίζει όμως ρόλο , εμένα τουλάχιστον λειτουργεί κανόνικά σε Chrome.
Εάν αντι στην html σελίδα
<hr style="clear: both"/>
χρησιμοποιήσω
<hr />
τότε η οριζόντια γραμμή μεταφέρεται πάνω ακόμα και στον chrome που το δοκίμασα...

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 03 Ιουν 2011 10:38

Οκ , λοιπόν ας το κάνουμε αυτό που θες, αλλά με έναν άλλο τρόπο μέσω του Css αρχείου μας
Άνοιξε το και βρες το

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

#main&#123;
 padding-top&#58;80px;/*Just for demo, you may change that*/
 width&#58;900px;

&#125;
Και αντικατέστησε το με αυτό

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


#main&#123;
position&#58;relative;
 overflow&#58;hidden;
 display&#58;block;
 width&#58;900px;
 border-bottom&#58;1px solid;
&#125;

Τώρα θα έχεις την γραμμή που θες, αλλά θα σου την δίνει το css σου

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Css3: Rounded Corner Div

Δημοσίευση από dionisis71 » 03 Ιουν 2011 11:05

Σε ευχαριστώ για το χρόνο σου. Πολύ ωραίο και πολύ έξυπνο αυτό που πρότεινες ώστε η γραμμή να φτιάχνεται μέσα από το css. Αν όμως προσθέσω σχόλια στο block2 μεγαλώνει, με αποτέλεσμα να καλύπτει την γραμμή... Την αλλαγή που πρότεινες
Joakim έγραψε:Το πρόβλημα δημιουργείτε γιατί στο block2 δίνουμε absolute τιμή τοποθέτησης.

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

   position&#58; absolute;
    left&#58; 50%;
    margin-left&#58; -135px;
Αφαίρεσε τον ποίο πάνω κώδικα από το style.css αρχείο και άλλαξέ τον με αυτό

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

float&#58;left;
Τώρα θα λειτουργεί η γραμμή σου κανονικά, αλλά το μεσαίο κουτί δεν θα είναι στοιχισμένο στο κέντρο

Ελπίζω να βοήθησα.

δεν την έχω κάνει καθώς θέλω να πειραματιστώ με την στοίχιση όπως έχει...

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 03 Ιουν 2011 11:11

Ωραία σου προτείνω να δοκιμάσεις κάτι άλλο, άλλαξε αυτά που έγραψα ποιο πάνω στο main div του css, και επίσης κάνε την αλλαγή από εδώ

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


#block_2&#123;

/*General position and size settings*/

width&#58;250px;
float&#58;left;

Και βάλτο έτσι

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

#block_2&#123;

/*General position and size settings*/

width&#58;250px;
float&#58;left;
margin-left&#58; +35px;

Τώρα θα έχεις στο περίπου το div σου κεντραρισμένο, εάν δεν σου κάθετε καλά τότε παίξε με την μεταβλητή margin-left

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Css3: Rounded Corner Div

Δημοσίευση από dionisis71 » 03 Ιουν 2011 11:21

Sorry αν σε ταλαιπώρησα....

ναι τώρα παίζει μια χαρά... κατάλαβα τι έπρεπε να κάνω...

Ευχαριστώ

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 03 Ιουν 2011 11:22

Κανένα προβλημα :)

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Rounded Corner Div

Δημοσίευση από Joakim » 03 Ιουν 2011 11:38

Για να βρεις με ακρίβεια την μεταβλητή margin-left ώστε να κεντράρεις to div σου, κάνε την πρόχειρη πράξη που μόλις σκέφτηκα.


M=[(s/2)-d1]-(d2/2)]

Μεταβλητές

M= τελική τιμή, ζητούμενο (margin left)
S=Συνολικό πλάτος της σελίδας ή του div που περικλείονται τα αντικείμενα, (main)
D1= Πρώτο Div στην περίπτωση μας block_1 μαζί με το padding left and right(+20)
D2= Το συνολικό πλάτος του κεντραρισμένου Div μαζί με το padding left and right (+20) block_2


Άρα στην περίπτωση μας

M= [(900/2)-(250+20)]-[(250+20)/2]
M=[180]-[135]
M=45


Άρα για να είμαστε σωστοί κάνε το margin-left: +45px




:kaloe: :kaloe: :kaloe: :pint:

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Css3: Rounded Corner Div

Δημοσίευση από dionisis71 » 03 Ιουν 2011 12:13

....πολύ σωστά... να ρωτήσω και κάτι τελευταίο... γιατί ο IE explorer τα blocks τα δείχνει με διαφορετικό χρώμα από ότι ο Chrome και ο Firefox..;

Navagos4
Δημοσιεύσεις: 54
Εγγραφή: 02 Ιουν 2011 17:22

Css3: Rounded Corner Div

Δημοσίευση από Navagos4 » 03 Ιουν 2011 12:41

τα εμφανίζει κανονικά στον ΙΕ;;;

εμένα δεν έχει rounded corners (φυσικό επακόλουθο βεβαίως, αφού είναι ο αηδιαστικός ΙΕ)

Απάντηση

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

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

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