Κουμπιά - Ολόκληρα divs...

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

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

Απάντηση
rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Κουμπιά - Ολόκληρα divs...

Δημοσίευση από rafinos » 18 Δεκ 2011 14:13

Γεια σας...
Προσπαθώ να δημιουργήσω links όπως στο tutorial του manolism
αλλά δεν μου εμφανίζονται τα κουμπιά ... μου βγαίνουν δύο πολύ μικρά τετραγωνάκια... μπορεί κάποιος να βοηθήσει;;;

ο css κώδικας...

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

#links{
		margin: 20px;
		display: block;
	}
	
	#home a{
	background-color: white;
	background-image: url(images/links/homepage_gray.png);
	background-repeat: no-repeat;
	background-position: center; 
	width: 130px;
	height: 40px;
	text-decoration: none;
	border: 1px solid #898989;
	padding: 5px;
	text-indent: -9999px; 
	} 

	#home a:hover{
		background-image: url(images/links/homepage.png);
		background-position: center;
		border: 1px solid #003366; 
	}
	
	#register a{
	background-color: white;
	background-image: url(images/links/register_gray.png);
	background-repeat: no-repeat;
	background-position: center; 
	width: 130px;
	height: 40px;
	text-decoration: none;
	border: 1px solid #898989;
	padding: 5px;
	text-indent: -9999px; 
	} 

	#register a:hover{
		background-image: url(images/links/register.png);
		background-position: center;
		border: 1px solid #003366; 
	}
και το html:

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

	<div id="links">
		<div id="home">
			<a href="index.php"></a>
		</div>
		<div id="register">
			<a hrfer="register.php"></a>
		</div>
	</div>

Έκανα αυτό και έστρωσε....
είναι σωστός ο τρόπος ή απλά έτυχε;;;

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

#links&#123;
		width&#58; 100%;
		display&#58; inline-block;
	&#125;
	
	#home a&#123;
	background-color&#58; white;
	background-image&#58; url&#40;images/links/homepage_gray.png&#41;;
	background-repeat&#58; no-repeat;
	background-position&#58; center; 
	float&#58; left;
	width&#58;130px;
	text-indent&#58; -9999px;	
	height&#58;40px;
	text-decoration&#58;none;
	border&#58; 1px solid #898989;
	padding&#58; 5px; 
	margin&#58; 10px;
	&#125; 

	#home a&#58;hover&#123;
		background-image&#58; url&#40;images/links/homepage.png&#41;;
		background-position&#58; center;
		border&#58; 1px solid #003366; 
	&#125;
	
	#register a&#123;
	background-color&#58; white;
	background-image&#58; url&#40;images/links/register_gray.png&#41;;
	background-repeat&#58; no-repeat;
	background-position&#58; center; 
	float&#58; left;
	width&#58;130px;
	text-indent&#58; -9999px;	
	height&#58;40px;
	text-decoration&#58;none;
	border&#58; 1px solid #898989;
	padding&#58; 5px; 
	margin&#58; 10px;
	&#125; 

	#register a&#58;hover&#123;
		background-image&#58; url&#40;images/links/register.png&#41;;
		background-position&#58; center;
		border&#58; 1px solid #003366; 
	&#125;
	

Απάντηση

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

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

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