CSS positioning

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

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

Απάντηση
Άβαταρ μέλους
kallileo
Δημοσιεύσεις: 66
Εγγραφή: 05 Μαρ 2007 13:05

CSS positioning

Δημοσίευση από kallileo » 07 Μάιος 2007 13:15

Το καταραμενο CSS μου εχει σπασει τα νευρα....
Θελω να εχω ενα container layer το οποιο ειναι κεντραρισμενο στην σελιδα(margin:0 auto;) και μεσα σε αυτα να εχω αλλα 2-3 των οποιων η πανω αριστερη γωνια να ειναι στην πανω αριστερη γωνια του container. Εχω δοκιμασει ολους τους δυνατους τροπους αλλα με τον εναν δεν δουλευει σε IE και με τον αλλον σε Opera.

Οποιος μπορει ας βοηθησει....Thanks. :hammer:
Συνημμένα
css.png

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS positioning

Δημοσίευση από manolism » 07 Μάιος 2007 13:32

Εάν κατάλαβα καλά έφτιαξα το παρακάτω

CSS CODE

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

body {
	margin-top: 10px;
	padding: 0;
}

#container {
	width:780px;
	height:600px;
	background-color:#FF0000;
	margin:0 auto;
	padding:0px;
	text-align:left;
}

#green {
	width:400px;
	height:400px;
	background-color:#00FF99;
}

#yellow {	
width:200px;
	height:200px;
	background-color:#FFFF00;
}
HTML CODE

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="green">
<div id="yellow"></div>
</div>
</div>
</body>
</html>
Και δουλεύει και σε ΙΕ - ΟΠΕΡΑ - FF

Άβαταρ μέλους
kallileo
Δημοσιεύσεις: 66
Εγγραφή: 05 Μαρ 2007 13:05

CSS positioning

Δημοσίευση από kallileo » 07 Μάιος 2007 15:39

Σωστο...Thanks.
Απο τι βλεπω πουθενα δεν χρησιμοποιεις το property "positioning". Εχω καταμπερδευτει για το ποτε πρεπει να το χρησιμοποιουμε και ποτε οχι.
Η default τιμη του positioning ποια ειναι??

Επισης αν βαλω εικονα στο μεσα στο green div το yellow div δεν μενει στην θεση αλλα μετακινειται ακριβως κατω απο την εικονα.

Άβαταρ μέλους
porcupine
Δημοσιεύσεις: 2
Εγγραφή: 01 Ιουν 2007 20:54

CSS positioning

Δημοσίευση από porcupine » 01 Ιουν 2007 21:36

Στο CSS ο lunarmedia δεν έχει χρησιμοποιήσει positioning γιατί αυτόματα το div τοποθετείται πάνω κι αριστερά.

Το positioning έχει μεγάλη χρησιμότητα όταν π.χ. θες να δώσεις απόλυτες αρνητικές τιμές π.χ. το μπλε div του παραδείγματός σου να κάτσει πιο ψηλά από το πράσινο, παρότι εμπερικλείεται σε αυτό.

Η default τιμή στο position είναι static.

Είναι λογικό το yellow να αλλάζει θέση όταν τοποθετήσεις κάτι στο green div, γιατί καταλαβαίνει ότι κάτι άλλο υπάρχει εκεί, οπότε πετάγεται κάτω.

Απάντηση

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

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

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