PDA

View Full Version : div centering and position issues



lugi
02-27-2015, 11:59 PM
Hello,
I made a site (Domenico Pezzato fotografo (http://domenicopezzato.com/)) using cargocollective, I tried to make an heavy modification of the template in the page Domenico Pezzato fotografo (http://domenicopezzato.com/prova) introducing a full width header background image and some divs to do the 4 boxes.

However I faced a lot of problems that I'm not able to resolve:

1. in the box up-left (box1) the yellow text "contemplata aliis tradere" isn't centered in the red box header
2. the colored header of some boxes doesn't fit the box (boxes bottom-left (box3) and bottom-right (box4))
3. in the top-right box I inserted a map whith :hover but the map doesn't fully fit the box and it is also covered by the box header. Moreover when I mouse over it the size of the 2 top boxes changes.

this is the HTML i put for the boxes:



<div class="containerw">
<div>
<div id="box1"><div id="image1"><h2>Contemplata<BR> Aliis Tradere</h2></div><div><h3>Mostra fotografica</h3><p>Una selezione di fotografie analogiche in grande formato sui paesaggi del territorio, scattate con il banco ottico e stampate personalmente dall'autore in oltre 20 anni di lavoro</p></div>
</div>
<div id="box2"><div id="hover"><div id="image2"><h2>23-39 maggio</h2></div><div><h3>Dove?</h3><p>Nel cuore di Treviso, in Via Roggia 12, presso il palazzo di francia</p></div></div>
</div>
</div>
<div>
<div id="box3"><div id="image3"><h4>Locandina</h4></div><div><h3>Mostra fotografica</h3><p>Una selezione di fotografie analogiche in grande formato sui paesaggi del territorio, scattate con il banco ottico e stampate personalmente dall'autore in oltre 20 anni di lavoro</p></div>
</div>
<div id="box4"><div id="image4"><h2></h2><div><h3>Bucolicon I</h3><p>Tityre, tu patulae recubans sub tegmine fagi siluestrem tenui musam meditaris auena:nos patriae finis et dulcia linquimus arua. nos patriam fugimus: tu, Tityre, lentus in umbra formosam resonare doces Amaryllida siluas.
O Meliboee, deus nobis haec otia fecit. namque erit ille mihi semper deus, illius aram saepe tener nostris ab ouilibus imbuet agnus.
ille meas errare boues, ut cernis, et ipsum ludere quae uellem calamo permisit agresti.
</p></div></div><div></div></div></div>
</div>


and this is the css:



/*
images
*/
h2 {
display: block;
margin:auto;
font-family: josefin-sans, sans-serif;
font-size: 35px;
text-align: center;
padding-top: 75px;

}
h4 {
display: block;
margin:auto;
font-family: josefin-sans, sans-serif;
font-size: 35px;
text-align: center;
padding-top: 45px;

}

h3 {
display: block;
margin:auto;
font-family: josefin-sans, sans-serif;
font-size: 25px;
color: black;
text-align: left;
padding-top: 5%;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 2%;

}
p {
color: black;
font-size: 18px;
text-align: justify;
padding-left: 10%;
padding-right: 10%;
padding-top: 0;
overflow : hidden;

}

.containerw {
display: table;
border-collapse: separate;
border-spacing: 20px;
table-layout: auto;
position: absolute;
left: 0;
right: 0;
margin-top: -310px;
width: 100%;
font-family: josefin-sans, sans-serif;
text-align: center;

}

.containerw > div {
display: table-row;

}
.containerw > div > div {
display: table-cell;
max-width: 300px;
}

#box1 {
height:400px ;
min-width: 400px;
background-color:white;
color: #FFD630;
}

#box2{
height:400px ;
min-width: 400px;
background-color:white ;
color: #9f30ff;


}

#hover:hover {
background-image: url(http://payload356.cargocollective.com/1/16/517836/9420839/Immagine_742.png);
height: 400px;
background-repeat: space;
background-size: cover;
}

#box3 {
height:400px ;
min-width: 400px;
background-color:white;
color: #ffd630;

}
#box4{
height:400px ;
min-width: 400px;
background-color:white ;
color: #000000;
}

#image1 {
height:190px;
background-color:#e45050;
}

#image2 {
height:190px;
background-color: #9cbfcc;
background: url(http://payload356.cargocollective.com/1/16/517836/9420839/path3117-9_421.png);
background-repeat: space;
background-size: cover;
}

#image3 {
height:60px;
background-color:#50c68d;
padding:90px;
}

#image4 {
background-color:#e4c882;
padding:50px;
}


sorry, I'm a noob, i think that this code is quite messy.. and this is my first post ( I hope I gave all the right infos to fix these problems)

I would like some help for you

Thanks in advance