μου τα βγαζει αναποδα η εγω κατι μπερδεψα

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

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

Απάντηση
Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από cyberfreak » 22 Οκτ 2009 14:10

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

<body>
	<div id="container">
       	<div id="menu">
         	<ul id="menu_cont">
				<li><a href="#"><img src="images/facebook.jpg"/></a>
            	<li><a href="#">Αρχική σελίδα</a></li>
               	<li><a href="#">Προφίλ</a></li>
            	<li><a href="#">Φίλοι</a></li>
            	<li><a href="#">Εισερχόμενα</a></li>
            </ul>
			<ul id="menu_search">
				<li><a href="#">Alexandros Mavridis</a></li>
				<li><a href="#">Ρυθμίσεις</a></li>
				<li><a href="#">Αποσύνδεση</a></li>
				<li><a href="#"><img src="images/search.jpg" /></a></li>
			</ul>
        </div>                
      </div>

</body>

και το css

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

@charset "utf-8";
/* CSS Document */
body &#123; margin&#58;0px; &#125;
img&#123;border&#58;0px;&#125;
#container&#123;
	width&#58;100%;
	height&#58;300px;
	background-color&#58;#FFFFFF;
	margin&#58;0px auto;
	padding&#58;0px;
&#125;
#menu &#123;
	float&#58;left;
	width&#58;100%;
	height&#58;32px;
	background-color&#58;#3b5998;
&#125;
#menu_cont&#123;
	float&#58;left;
	list-style&#58;none;	
	padding&#58;0px;
	margin&#58;5px;
&#125;
#menu_cont li &#123;
	float&#58;left;
	margin-left&#58;10px;

&#125;
#menu_cont a &#123;
	font-family&#58;Arial, Helvetica, sans-serif;
	color&#58;#FFFFFF;
	text-decoration&#58;none;
	font-weight&#58;bold;
	font-size&#58;12px;
&#125;
#menu_cont a&#58;hover&#123;
	background-color&#58;#0066CC;
	cursor&#58;pointer;
	color&#58;#FFFFFF;	
&#125;
#menu_cont a&#58;visited&#123;
	color&#58;#FFFFFF;
&#125;
#menu_search &#123;
	width&#58;500px;
	float&#58;right;
	list-style&#58;none;
	padding&#58;0px;
	margin&#58;5px;
&#125;
#menu_search li &#123;
	float&#58;right;
	margin-right&#58;5px;
&#125;
#menu_search a &#123;
	font-family&#58;Arial, Helvetica, sans-serif;
	color&#58;#FFFFFF;
	text-decoration&#58;none;
	font-size&#58;12px;
	font-weight&#58;bold;
&#125;
#menu_Search a&#58;hover&#123;
	background-color&#58;#0066CC;
	cursor&#58;pointer;
	color&#58;#FFFFFF;	
&#125;
#menu_search a&#58;visited&#123;
	color&#58;#FFFFFF;
&#125;


αποτέλεσμα:

Εικόνα

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από ThyClub » 22 Οκτ 2009 14:23

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

#menu_search li &#123;
   float&#58;right;
   margin-right&#58;5px;
&#125; 
Βγάλε το float και δοκίμασε display:inline;

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από cyberfreak » 22 Οκτ 2009 14:26

τωρα τα βγαζει σωστα αλλα βγηκε αλλο προβλημα τα βγαζει ποιο κατω απο το μπλε background

MasterX
Δημοσιεύσεις: 92
Εγγραφή: 13 Οκτ 2009 13:29
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από MasterX » 22 Οκτ 2009 14:27

Η εκτύπωση που κάνει είναι καθρέφτης της εκτύπωσης που θέλεις.

Αντι για

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

float&#58;right&#58;
δοκίμασε

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

position-right&#58;500px;

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από cyberfreak » 22 Οκτ 2009 14:34

πως θα γινει να φερω λιγο ποιο δεξια το αριστερο μενου κ λιγο ποιο αριστερα το δεξι μενου

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από Basilakis » 22 Οκτ 2009 14:53

με margin και padding, ανάλογα εάν έχεις ή οχι div απο πάνω του :)

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από cyberfreak » 22 Οκτ 2009 14:56

αχχ περιεργα πραγματα :D κολλησαμε στην πρωτη γραμμη αντε να κανεις ολη την αρχικη του face σε css

MasterX
Δημοσιεύσεις: 92
Εγγραφή: 13 Οκτ 2009 13:29
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από MasterX » 22 Οκτ 2009 15:14

cyberfreak έγραψε:πως θα γινει να φερω λιγο ποιο δεξια το αριστερο μενου κ λιγο ποιο αριστερα το δεξι μενου
Αντί για float:left βάλε margin-left:10px;
Αντί για position-right:500px; βάλε position-right:510px;

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από cyberfreak » 22 Οκτ 2009 16:28

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

<body>
	<div id="container">
       	<div id="menu">
         	<ul id="menu_cont">
				<li><a href="#"><img src="images/facebook.jpg"/></a>
            	<li><a href="#">Αρχική σελίδα</a></li>
               	<li><a href="#">Προφίλ</a></li>
            	<li><a href="#">Φίλοι</a></li>
            	<li><a href="#">Εισερχόμενα</a></li>
            </ul>
			<ul id="menu_search">
				<li><a href="#">Alexandros Mavridis</a></li>
				<li><a href="#">Ρυθμίσεις</a></li>
				<li><a href="#">Αποσύνδεση</a></li>
				<li><a href="#"><img src="images/search.jpg" /></a></li>
			</ul>
        </div>   
		<div id="left_menu">		</div>
		
		<div id="main">		</div>  
		           
     </div>

</body>



τι css χρειαζεται για να ερθει το γκρι πλαισιο στην εικονα στη θεση του πρασινου :(

Εικόνα

MasterX
Δημοσιεύσεις: 92
Εγγραφή: 13 Οκτ 2009 13:29
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από MasterX » 22 Οκτ 2009 16:59

Υποθέτω ότι το γκρι πλαίσιο είναι το id="main"..
Θα δοκίμαζα

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

position&#58;absolute;
position-left&#58;100px;  <-- όσο είναι το width του left_menu
position-top&#58;32px;
widht&#58;          <---Δώσε πλάτος και ύψος
height&#58;

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από cyberfreak » 22 Οκτ 2009 18:38

το εκανα απο design mode και μου εβγαλε αυτα

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

#main&#123;
	background-color&#58;#CCCCCC;
	position&#58;absolute;
	position-left&#58;130px;
	position-top&#58;32px;
	width&#58; 910px;
	height&#58;422px;
	left&#58; 144px;
	top&#58; 48px;
&#125;

MasterX
Δημοσιεύσεις: 92
Εγγραφή: 13 Οκτ 2009 13:29
Επικοινωνία:

μου τα βγαζει αναποδα η εγω κατι μπερδεψα

Δημοσίευση από MasterX » 22 Οκτ 2009 22:16

Κοντά έπεσα :)

Απάντηση

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

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

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