Witam, oto wygląd tworzonej strony ( kolorowe tła bloków są ustawione specjalnie dla testu czy wszystko jest równe ) :
To kod html:
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<header class="introduced">Witaj w naszej galerii!</header>
<div class="content">
<!--////////////////////////////////////////////////////////////////////////////////-->
<div class="imageLeft">
<figure class="imgBox">
<a href="images/1full.jpg" target="_blink">
<img class="picture" src="images/1.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="imageRight">
<figure class="imgBox">
<a href="images/2full.jpg" target="_blink">
<img class="picture" src="images/2.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="nextRow"></div>
<!--////////////////////////////////////////////////////////////////////////////////-->
<div class="imageLeft">
<figure class="imgBox">
<a href="images/3full.jpg" target="_blink">
<img class="picture" src="images/3.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="imageRight">
<figure class="imgBox">
<a href="images/4full.jpg" target="_blink">
<img class="picture" src="images/4.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="nextRow"></div>
<!--////////////////////////////////////////////////////////////////////////////////-->
<div class="imageLeft">
<figure class="imgBox">
<a href="images/5full.jpg" target="_blink">
<img class="picture" src="images/5.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="imageRight">
<figure class="imgBox">
<a href="images/6full.jpg" target="_blink">
<img class="picture" src="images/6.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="nextRow"></div>
<!--////////////////////////////////////////////////////////////////////////////////-->
<div class="imageLeft">
<figure class="imgBox">
<a href="images/7full.jpg" target="_blink">
<img class="picture" src="images/7.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="imageRight">
<figure class="imgBox">
<a href="images/8full.jpg" target="_blink">
<img class="picture" src="images/8.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="nextRow"></div>
<!--////////////////////////////////////////////////////////////////////////////////-->
<div class="imageLeft">
<figure class="imgBox">
<a href="images/9full.jpg" target="_blink">
<img class="picture" src="images/9.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="imageRight">
<figure class="imgBox">
<a href="images/10full.jpg" target="_blink">
<img class="picture" src="images/10.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="nextRow"></div>
<!--////////////////////////////////////////////////////////////////////////////////-->
<div class="imageLeft">
<figure class="imgBox">
<a href="images/11full.jpg" target="_blink">
<img class="picture" src="images/11.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="imageRight">
<figure class="imgBox">
<a href="images/12full.jpg" target="_blink">
<img class="picture" src="images/12.jpg" alt="img"/>
</a>
<figcaption class="imgCaption">image</figcaption>
</figure>
</div>
<div class="nextRow"></div>
<!--////////////////////////////////////////////////////////////////////////////////-->
</div>
</div>
</body>
</html>
A to CSS:
#container {
background-color: red;
}
.content {
width: 700px;
margin-left: auto;
margin-right: auto;
padding: 50px;
background-color: yellow;
}
.introduced {
text-align: center;
font-size: 30pt;
color: #0a75b3;
font-weight: bold;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 50px;
padding: 50px;
border-bottom: 5px #0a75b3 dotted;
margin-left: auto;
margin-right: auto;
background-color: green;
}
.nextRow {
clear: both;
}
.picture {
width: 325px;
height: 200px;
}
.imgBox {
padding: 0;
margin: 0;
text-align: center;
}
.imgCaption {
padding: 5px;
}
.imageLeft {
width: 325px;
height: 200px;
margin-right: 50px;
margin-bottom: 50px;
float: left;
background-color: blueviolet;
}
.imageRight {
width: 325px;
height: 200px;
float: left;
margin-bottom: 50px;
background-color: blueviolet;
}
Mój koszmar dotyczy żółtego bloku ( od id content ). Ma on szerokość 700px, i jak widać jest ona optymalna... najgorsze jest to że mi z wyliczeń wychodzi coś innego :/
No więc mamy dla tego bloku padding 50px ( z każdej strony ), dwa zdjęcia o szerokości 325px oraz prawy margines dla tego po lewej stronie wynoszący 50px. Więc dodajemy:
( 50px * 2 ) + ( 325px * 2 ) + 50px = 800px. Więc z wyliczeń wynika że szerokość diva content powinna wynosić 800px, w praktyce pasuje jednak 700px... Myślę nad tym już naprawdę długo, nie wiem kompletnie co się ze mną dzieje ;( ;(
Jest to problem w stylu: mierze wieloryba od lewej do prawej i od prawej do lewej i w obu przypadkach wychodzi mi inny wynik... w takim samym potrzasku jestem teraz.
Będę wdzięczny za pomoc...