Ένα div κάτω από το άλλο

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

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

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

Ένα div κάτω από το άλλο

Δημοσίευση από rafinos » 26 Δεκ 2011 17:33

Γεια σας και Χρόνια Πολλά σε όλους!

Έχω δύο κουμπιά(div) και θέλω όταν πατάω σε κάποιο από αυτά να εμφανίζεται κάποιο άλλο div αλλά θέλω να εμφανίζεται ακριβώς κάτω από το κουμπί...!
Τι πρέπει να αλλάξω στα παρακάτω (μη μου πείτε τα πάντα θα τρελαθώ!);;;;;

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

<div id="edit_profile">
		<div id="basic_info">
			Προσωπικά στοιχεία
		</div>
		<div id="studies_experience">
			Εκπαίδευση - Εργασία
		</div>
	</div>
	<div id="edit_profile_options">
		<div id="basic_info_edit">
			<table>
				<tr>
					<td><a href="personal_data.php">Προσωπικά στοιχεία</td>
				</tr>
				<tr>
					<td><a href="addresses.php">Διευθύνσεις</td>
				</tr>
				<tr>
					<td><a href="phones.php">Τηλέφωνα</td>
				</tr>
			</table>
		</div>
		<div id="studies_experience_edit">
			<table>
				<tr>
					<td><a href="studies.php">Εκπαίδευση</td>
				</tr>
				<tr>
					<td><a href="experiences.php">Εργασία</td>
				</tr>
			</table>
		</div>
	</div>

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

	#edit_profile&#123;
		display&#58; inline-block;
		width&#58; 100%;
	&#125;
	
	#basic_info&#123;
		margin-left&#58; 10px;
		margin-right&#58; 10px;
		text-align&#58; center;
		padding&#58; 10px;
		width&#58; 200px;
		text-align&#58; center;
		font-size&#58; 16px;
		color&#58; #003366;
		background&#58; #fff;
		font-weight&#58; bold;
		border&#58; 1px solid #003366;
		float&#58; left;
		cursor&#58; pointer;
	&#125;
	
	#studies_experience&#123;
		margin-left&#58; 10px;
		margin-right&#58; 10px;
		text-align&#58; center;
		padding&#58; 10px;
		width&#58; 200px;
		text-align&#58; center;
		font-size&#58; 16px;
		color&#58; #003366;
		background&#58; #fff;
		font-weight&#58; bold;
		border&#58; 1px solid #003366;
		float&#58; left;
		cursor&#58; pointer;
	&#125;
	
	#edit_profile_options&#123;
		display&#58; inline-block;
		width&#58; 100%;
	&#125;
	
	#basic_info_edit&#123;
		width&#58; 200px;
		padding &#58;10px;
		margin&#58; 10px;
		text-align&#58; center;
		color&#58; #003366;
		background&#58; #fff;
		border&#58; 1px solid #003366;
	&#125;
	
	#studies_experience_edit&#123;
		width&#58; 200px;
		padding &#58;10px;
		margin&#58; 10px;
		text-align&#58; center;
		color&#58; #003366;
		background&#58; #fff;
		border&#58; 1px solid #003366;
	&#125;

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

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
	$&#40;"#basic_info_edit"&#41;.hide&#40;&#41;;
	$&#40;"#studies_experience_edit"&#41;.hide&#40;&#41;;
	
	$&#40;"#basic_info"&#41;.click&#40;function&#40;&#41;&#123;
		$&#40;"#studies_experience_edit"&#41;.hide&#40;&#41;;
		$&#40;"#basic_info_edit"&#41;.toggle&#40;&#41;;
		return false;
	&#125;&#41;;
	
	$&#40;"#studies_experience"&#41;.click&#40;function&#40;&#41;&#123;
		$&#40;"#basic_info_edit"&#41;.hide&#40;&#41;;
		$&#40;"#studies_experience_edit"&#41;.toggle&#40;&#41;;
		return false;
	&#125;&#41;;
&#125;&#41;;

Απάντηση

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

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

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