Οριζόντια τοποθέτηση DIV

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

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

Απάντηση
Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13308
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Οριζόντια τοποθέτηση DIV

Δημοσίευση από EneMe » 07 Φεβ 2013 21:19

Προσπαθώ, αλλά δεν ξέρω πώς να το κάνω...

Θέλω ένα div πλάτους 250px να είναι μόνιμα στοιχισμένο 500px δεξιά του κέντρου της σελίδας και να μην ανεβοκατεβαίνει, να είναι μόνιμα εκεί, ανεξαρτήτως scrollαρίσματος.

Για την οριζόντια στοίχιση -που με ενδιαφέρει και περισσότερο- σκέφτηκα ότι πρέπει να συνδυάσω:

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

margin-left:auto;
margin-right:auto;

position:relative;
left:500px;

width:250px;
αλλά -προφανώς- δεν δουλεύει...

Καμιά βοήθεια;

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Οριζόντια τοποθέτηση DIV

Δημοσίευση από dva_dev » 07 Φεβ 2013 22:24

Δοκίμασε κάτι τέτοιο

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

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.centered-fixed &#123;
    position&#58; fixed;
    margin&#58; 0 50%;
    width&#58; 0px;

    border&#58; solid 1px red;
    background-color&#58; #FFCCCC;
&#125;
.right-50 &#123;
    position&#58; relative;
    left&#58; 50px;
    width&#58; 250px;

    border&#58; solid 1px blue;
    background-color&#58; #CCCCFF;
&#125;
</style>
</head>
<body>
    <div class="centered-fixed">
        <div class="right-50">This is 50px to the right</div>
        this is centered
    </div>

<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
<p>some long content</p><p>some long content</p><p>some long content</p><p>some long content</p>
</body>
</html>
Το έχω πάει 50px δεξιά γιατί μου βγαίνει εκτός οθόνης με 500px :D

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13308
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Οριζόντια τοποθέτηση DIV

Δημοσίευση από EneMe » 08 Φεβ 2013 13:54

Το πας με 2 χωριστά βήματα βλέπω...

Δεν υπάρχει τρόπος να γίνει σε ένα;

Αυτό που φοβάμαι είναι μήπως το "αόρατο κενό" του πρώτου div, από το κέντρο και δεξιά (το σημειώνω πράσινο χρώμα παρακάτω) με ένα z-index 999 καλύπτει ότι υπάρξει από κάτω (πχ αν υπάρξει από κάτω ένα link, δεν θα είναι clickable).

Θα υπάρξει τέτοιο πρόβλημα σε κάποιον browser ή θα λειτουργεί κανονικά;

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Οριζόντια τοποθέτηση DIV

Δημοσίευση από dva_dev » 08 Φεβ 2013 18:13

Δεν ξέρω αν έχεις τη δυνατότητα να δηλώσεις κάποια θέση και σαν % και σαν px (π.χ. left: 50% + 50px);
Βέβαια δεν το έχω δοκιμάσει αλλά δεν νομίζω να παίζει.

Το εξωτερικό div έχει πλάτος 0px (του έχω βάλει red border και κάποιο περιεχόμενο για να φαίνεται που τοποθετείται και που τοποθετείται το εσωτερικό - blue - σε σχέση με αυτό).
Εσύ λογικά ούτε border θα βάλεις ούτε περιεχόμενο στο εξωτερικό div οπότε δεν θα πιάσει κάποιο χώρο.
Τώρα αν το link είναι κάτω από το μπλε div τότε λογικό είναι να μην δουλέψει το click.

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Οριζόντια τοποθέτηση DIV

Δημοσίευση από gvre » 08 Φεβ 2013 19:01

Δοκίμασε το παρακάτω. Το 500px προκύπτει από τα 125px δεξιά που πηγαίνει το div με το left: 50% + το 375px από το margin-left.
Αν το div πέφτει πάνω σε κάποιο link τότε αυτό δεν θα είναι clickable.

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

<body>
        <div style="background&#58; yellow; width&#58; 250px; position&#58; fixed; left&#58; 50%; margin-left&#58; 375px;">fixed div</div>
</body>

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13308
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Οριζόντια τοποθέτηση DIV

Δημοσίευση από EneMe » 08 Φεβ 2013 20:43

Έφτιαξα -με τον πρώτο τρόπο ουσιαστικά- αυτό

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

<div style="position&#58; fixed; margin&#58; 0 50%; width&#58; 0px; border&#58; 0px; background-color&#58; #000000;">
	<div style="position&#58; relative; left&#58; 490px; width&#58; 250px; border&#58; solid 0px; background-color&#58; #FF0000;">
		<p>mydivcontent</p>
	</div>
</div>
και δούλεψε μια χαρά!

Ευχαριστώ πολύ!

Απάντηση

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

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

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