Προς το περιεχόμενο

Ερώτηση σε HTML/CSS

pbp

Από τον pbp
στο Web Design - Development

Προτεινόμενες αναρτήσεις

pbp Mentor

pbp

Δημοσ.
Δημοσ.

Γεια σας,

έχω φτιάξει το παρακάτω layout:

><html>
<head>
<title>test</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: black;
}
#wrapper{
width: 1000px;
height: 800px;
margin: auto;
padding: 0;
background-color: white;
}
#header{
height: 150px;
background-color: blue;
}
#navMenu{
height: 30px;
background-color: red
}
#left{
width: 20%;
height:580px;
background-color: green;
float: left;
}
#right{
width: 20%;
height: 580px;
background-color: green;
float: right;
}
#container{
height: 580px;
width: 100%;
background-color: yellow;
}
#footer{
height: 40px;
background-color: gray;
}
</style>
<body>

<div id="wrapper">
<div id="header">
</div>
<div id="navMenu">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="container">
</div>
<div id="footer">
</div>
</div>


</body>
</html>

 

Στη συνέχεια προσθέτω ένα <h1> στο id="container".

 

><html>
<head>
<title>test</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: black;
}
#wrapper{
width: 1000px;
height: 800px;
margin: auto;
padding: 0;
background-color: white;
}
#header{
height: 150px;
background-color: blue;
}
#navMenu{
height: 30px;
background-color: red
}
#left{
width: 20%;
height:580px;
background-color: green;
float: left;
}
#right{
width: 20%;
height: 580px;
background-color: green;
float: right;
}
#container{
height: 580px;
width: 100%;
background-color: yellow;
}
#footer{
height: 40px;
background-color: gray;
}
</style>
<body>

<div id="wrapper">
<div id="header">
</div>
<div id="navMenu">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="container">
<h1>Καλωσορίσατε στην ιστοσελίδα μας!</h1>
</div>
<div id="footer">
</div>
</div>


</body>
</html>

 

Όπως βλέπεται όταν βάλω το <h1> στο id #container το heading μπαίνει αλλά αναγκάζει τον container να κατέβει λίγο πιο κάτω.

Μπορείτε να μου πείτε τι φταίει??

Τι κάνω λάθος?

Ευχαριστώ.

pbp Mentor

pbp

Δημοσ.
  • Μέλος
Δημοσ.

Το διάβασα αλλά πάλι δεν μπορώ να διορθώσω το δικό μου παράδειγμα ...

Το #container έχει πατέρα το #wrapper το οποίο έχει margin: auto; .

Από κει και πέρα ?

Μπορείς να γίνεις λίγο πιο συγκεκριμένος ? :)

spartakoscs Proficient

spartakoscs

Δημοσ.
Δημοσ.

ξεκίνα το css σου με

 

>
*{
margin: 0px;
padding 0px;
}
body{
......

 

για να κάνεις ουσιαστικά reset το margin padding παντού !!! μετά τα ορίζεις όπως θες εσύ σε κάθε element !!!

ουσιαστικά λάθος εάν είδα καλά (είναι και περασμένη η ώρα … ) δεν κάνεις , απλά κάθε browser βάζει αυτόματα margin paddin και γενικότερα styling στις σελίδες . καλό είναι και κάνεις css reset πριν ξεκινάς να φτιάχνεις κάθε σελίδα !!! googlare css reset και θα βρεις έτοιμα block code για να χρησιμοποιήσεις !!!

parsifal Crazy Insomniac

parsifal

Δημοσ.
Δημοσ.

Το διάβασα αλλά πάλι δεν μπορώ να διορθώσω το δικό μου παράδειγμα ...

Το #container έχει πατέρα το #wrapper το οποίο έχει margin: auto; .

Από κει και πέρα ?

Μπορείς να γίνεις λίγο πιο συγκεκριμένος ? :)

Ο πατέρας (div#container) έχει margin-top μηδενικό. Το παιδί (h1) έχει μη-μηδενικό margin-top, έστω X. Τώρα, επειδή το h1 είναι το πρώτο παιδί του #container και εφάπτεται στο άνω όριο αυτού (κάνει δηλαδή το λεγόμενο "touch from inside"), συμβαίνει margin collapsing: συγκρίνονται τα margin-top και των 2 και το μεγαλύτερο υπερισχύει και εφαρμόζεται και για τα δύο elements. Άρα, ο πατέρας από εκεί που είχε μηδενικό margin-top, ξαφνικά τον βλέπεις να τραβιέται προς τα κάτω κατά X...

pbp Mentor

pbp

Δημοσ.
  • Μέλος
Δημοσ.

Είχα την εντύπωση ότι είχα δοκιμάσει να βάλω margin: 0; sto h1 και δεν δούλεψε.

Σας ευχαριστώ πάρα πολύ και τους δύο για τις υπέροχες απαντήσεις σας :)

Να 'στε καλα!

pbp Mentor

pbp

Δημοσ.
  • Μέλος
Δημοσ.

Α και μια άλλη απορία μου προέκυψε...

Πως μπορώ να κάνω κάτι ανάλογο της λειτουργίας text-align σε μία λίστα μέσα στο #content?

Δοκίμασα να το ελέγξω με margi-left και δεν γίνεται :(

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...