v5net Δημοσ. 24 Μαΐου 2011 Δημοσ. 24 Μαΐου 2011 δεν είναι όμως ΄τοσο απλό γιατί συμβαίνει το εξής θέλω να κεντράρω οριζόντια ένα div μέσα σε ένα άλλο parent div,θα ήταν εύκολο αν το child div (αυτό που είναι μέσα στο άλλο) είχε σταθερό width αλλά εγώ χρειάζομαι το width να είναι auto χρησιμοποιώ αυτό στο css και δουλεύει #parent { position:absolute; width:1000px; height:52px; z-index:105; left: 0px; top: 383px; text-align: center; } #child { position: relative; height:52px; z-index:106; width:748px; margin: 0 auto; top: 0px; } δηλαδή αν υπάρχει κάποια τιμή στο width ενώ αυτό που θέλω: #parent { position:absolute; width:1000px; height:52px; z-index:105; left: 0px; top: 383px; text-align: center; } #child { position: relative; height:52px; z-index:106; width:auto; margin: 0 auto; top: 0px; } δεν δουλεύει καμμιά ιδέα;;
parsifal Δημοσ. 24 Μαΐου 2011 Δημοσ. 24 Μαΐου 2011 http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support Σημείωση: Την παραπάνω μέθοδο δεν την έχω δοκιμάσει για να σου πω με σιγουριά ότι δουλεύει!
spartakoscs Δημοσ. 24 Μαΐου 2011 Δημοσ. 24 Μαΐου 2011 Γιατί δεν κάνεις κάτι τέτοιο , ξερό ότι είναι μπακαλίστικο αλλά λειτουργεί !! > <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ background-color: black; } #parrent{ width: 1000px; height: 100px; background-color: #f3f3f3; margin: 0px auto; } #child{ height: 50px; background-color: blue; margin: 0px auto; } #trapezi{ margin: 0px auto; } </style> <script type="text/javascript" src="#"></script> </head> <body> <div id="parrent"> <table border="0px" cellpadding="0" cellspacing="0" bgcolor="green" id="trapezi"> <tr> <td><div id="child">ασδασ </div></td> </tr> </table> </div> </body>
v5net Δημοσ. 24 Μαΐου 2011 Μέλος Δημοσ. 24 Μαΐου 2011 @parsifal α είσαι πρώτος δουλεύει τέλεια. βέβαια το έκανα διαφορετικά αλλά η ιδέα είναι αυτή. αντι να το κάνω χρησιμοποιώντας όλο το πλάτος της οθόνης το έκανα βάζοντας 2 relative positioned divs μέσα σε ένα κεντραρισμένο absolute positioned div. ο κώδικας css εδώ: #menu { position:absolute; width:1000px; height:52px; z-index:105; left: 0px; top: 383px; } #menu-gr-cover { position:relative; float:left; width:auto; height:52px; z-index:106; top: 0px; left:50%; } #menu-gr { position:relative; float:left; width:auto; height:52px; z-index:107; top: 0px; right:50%; font-family:Verdana, Geneva, sans-serif; font-size:14px; } υπάρχει ένα μικρό προβληματάκι έτσι,ανοιγει το slider από κάτω αφου ο browser θεωρεί το πλάτος πιο μεγάλο λόγω του μεγέθους του div που τα έχει όλα μέσα,μάλλον θα το κάνω κι αυτό relative να πιάνει όλο το πλάτος, το προσπαθώ.. σε ευχαριστώ πολύ. @ spartakoscs τώρα είδα το ποστ σου, θα το κοιτάξω κι αυτό. α λύθηκε το πρόβλημα πρόσθεσα ένα overflow: hidden; στα δύο πρώτα ,μεγάλωσα και το hight στα 500px να μην κρύβεται το menu και όλα τέλεια¨ εδώ ο κώδιξ: #menu { position:absolute; width:1000px; height:500px; z-index:105; left: 0px; top: 383px; overflow:hidden; } #menu-gr-cover { position:relative; float:left; width:auto; height:500px; z-index:106; top: 0px; left:50%; overflow:hidden; } #menu-gr { position:relative; float:left; width:auto; height:52px; z-index:107; top: 0px; right:50%; font-family:Verdana, Geneva, sans-serif; font-size:14px; } άκυρο overflow απορρίπτεται αφου καλύπτει το πάνω μέρος του κειμένου και όποια άλλα λινκσ υπάρχουν εκεί, θα τη βρώ αργότερα τη λύση, πάω για καφε.... done όπως τα λέει ο ίδιος τύπος παρακάτω,δουλεύει και ο IE9, για τις άλλες version δεν ξέρω,δε με ενδιαφέρει..
Προτεινόμενες αναρτήσεις
Αρχειοθετημένο
Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.