• 0

What am I doing wrong?


Question

Im doing a dynamic site where images in a gallery resize depending on your screen resolution. So far the resize code has been working good but I cant make the images to center in the screen. I dont know what I'm doing wrong. Maybe someone can point me out the error?

This is how it looks like right now:

post-4652-0-39065500-1340824637.jpg

This is how it should look:

post-4652-0-94852100-1340824640.jpg

This is my code, both css and html:


@charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
height: 100%;
line-height: 1.5em;
width: 100%;
word-spacing: 1px;
}

#content_container {
clear: both;
display: block;
position: relative;
width:100%;
}

@font-face {
font-family: 'MonacoRegular';
src: url('monaco-webfont.svg#MonacoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.lowcase2 {
font-size: 11px;
font-style: normal;
text-transform: lowercase;
color: #000000;
text-decoration: none;
text-align: center;
letter-spacing: 0.05em;
line-height: 15px;
word-spacing: -0.05em;
padding: 0px;
}
.nombre
{color:#999;}
a {color:#000; text-decoration:none;}
a:hover { background-color:#000;
color:#FFF;}

img {
border:0;
}

#slideshow {
width:100%;
}
#gallery {
text-align:left;
width:100%;
}
#gallery img {
max-width: 90%;
height: auto;
width: auto\9; /* ie8 */
}

#next,#next-page {
position:fixed;
right:10%;
top:50%;
}
#prev,#prev-page {
position:absolute;
left:10%;
top:50%;
display:none;
}
#nav-tip {
position:absolute;
right:15px;
bottom:10px;
text-align: left;
}
#wrapper {
display:block;
}
* {
margin:0;
padding:0;
}
[/CODE]

[CODE]
<body>
<div id="content_container">
<div id="slideshow" class="lowcase2">
<div id="prev"><a href="javascript:;"><img src="images/prev.png" alt="Previous image"/></a></div>
<div id="next"><a href="javascript:;"><img src="images/next.png" alt="Next image"/></a></div>
<div id="gallery" align="center">
<p><img src="faith/1.jpg" alt="" /><br>Test</p>
<p><img src="faith/2.jpg" alt="" /></p>
<p><img src="faith/3.jpg" alt="" /></p>
</div>

</div>
</div>
</body>
[/CODE]

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

margin: 0 auto;[/CODE]

Is how you center block elements with a defined width, not align: center or text-align: center. Also this:

[CODE]
<p><img src="faith/1.jpg" alt="" /><br>Test</p>
[/CODE]

Should be:

[CODE]
<img src="faith/1.jpg" alt="" /><p>Test</p>
[/CODE]

Link to comment
Share on other sites

  • 0

margin: 0 auto;[/CODE]

Is how you center block elements with a defined width, not align: center or text-align: center. Also this:

[CODE]
<p><img src="faith/1.jpg" alt="" /><br>Test</p>
[/CODE]

Should be:

[CODE]
<img src="faith/1.jpg" alt="" /><p>Test</p>
[/CODE]

I have to insert the image in a paragrapgh because the transition script Im using has been modified to transition from a <p> to a new <p>. This is because pictures have different captions.

Link to comment
Share on other sites

  • 0

Seems I fixed it on my own. I had to specify individual margins in #gallery p

Link to comment
Share on other sites

  • 0

Seems I fixed it on my own. I had to specify individual margins in #gallery p


margin:0 auto;
[/CODE]

As specified earlier in the post should suffice. :p

Link to comment
Share on other sites

This topic is now closed to further replies.