Θέση αρκετές divs σε ένα γονέα div

ψήφοι
1

Έχω ήδη δει μερικές ερωτήσεις προς αυτήν την κατεύθυνση, αλλά τίποτα δεν βοήθησε. Ο καθένας λέει ακριβώς ρυθμίσετε τη θέση div γονέα σε σχέση και το παιδί αυτοί που θα απόλυτο. Αλλά το πρόβλημά μου είναι ότι κάθε div είναι στο 0/0 σημείο της μητρικής div μου. Φαίνεται ότι τα εσωτερικά στοιχεία που δεν γνωρίζει ο ένας από τον άλλο.

Εδώ είναι που τη σελίδα μου θα πρέπει να μοιάζει:

http://imageshack.us/photo/my-images/854/unbenanntgoc.png/

Σε html μου ακριβώς ορίζουν divs μου:

<div id=content>

<div id=header />
<div id=naviContent />
<div id=imageContent />
<div id=tagContent />
<div id=textContent />

</div>

Έτσι navi divs εικόνα και το περιεχόμενο της ετικέτας θα πρέπει να επιπλέουν.

Και αυτό είναι το πώς css μου μοιάζει με:

@charset utf-8;

body {
    background-color:#33FF00;
}

#header {
    height:100px;
    background-color:#FFFFFF;
    position:relative;
}

#naviContent {
    width:25%;
    background-color:#F0F;
    float:left;
}

#imageContent {
    background-color:#000;
    position:absolute;
    float:left;
    width:800px;
    height:600px;
}

#tagContent {
    background-color:#900;
    position:absolute;
    float:left;
    width: 25%;
}

#textContent {
    background-color:#0000FF;
    clear:both;
}

#content {
    height:1600px;  
    width:1200px;
    background-color:#999999;
    margin-left: auto; 
    margin-right: auto;
    padding:10px;
    position:relative;
}

Έτσι ίσως κάποιος μπορεί να μου πει γιατί όλα τα στοιχεία μου (μαύρο, κίτρινο, κόκκινο, γκρι και πράσινο) τοποθετούνται στο 0/0 σημείο του ροζ ένα;

Ευχαριστώ εκ των προτέρων

Δημοσιεύθηκε 24/07/2012 στις 11:20
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
2

Θα πρέπει να κλείσετε το DIV σωστά -

<div id="content">

<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text  </div>

</div>

EDIT: Βιολί Εργασίας Θα πρέπει να ρυθμίσετε επιπλέει πλάτος και είστε έτοιμοι!

Απαντήθηκε 24/07/2012 στις 11:22
πηγή χρήστη

ψήφοι
0

Θέση απόλυτο δεν είναι ο συνήθης τρόπος, για μια σελίδα.

Αυτό που πρέπει να κάνετε είναι να αφαιρέσετε το χαρακτηριστικό θέση, επιπλέουν τα πάντα αριστερά και να πλάτη (παρακαλώ σημειώστε θα πρέπει το περιεχόμενο του div για να καταστήσει σωστά).

Μπορεί να θέλετε να εξετάσει τα συστήματα του δικτύου CSS, όπως 960.gs που χειρίζονται αυτό το μέρος της ανάπτυξης σας με τυποποιημένο τρόπο, χρησιμοποιώντας προκαθορισμένες κατηγορίες.

Απαντήθηκε 24/07/2012 στις 11:27
πηγή χρήστη

ψήφοι
0

θα πρέπει κώδικα όπως αυτό: - http://tinkerbin.com/J9CCZXRL

CSS

#content {
background:pink;
  width:500px;
  padding:10px;
  -moz-box-sizing:border-box;
  overflow:hidden;
}



#header {
  background:red;
  height:100px;

}

#left {
background:green;
  width:100px;
  height:400px;
  float:left;
}

#middle {
background:blue;
  width:260px;
  float:left;
  height:400px;
  margin-left:10px;
}
#right {
background:yellow;
  width:100px;
  float:right;
  height:400px;
}

#footer {
background:grey;
height:100px;
  clear:both;
}

HTML

<div id="content">
  <div id="header"></div>
  <div id="left"></div>
  <div id="middle"></div>
  <div id="right"></div>
  <div id="footer"></div>
</div>
Απαντήθηκε 24/07/2012 στις 11:42
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more