Forum Moderators: not2easy
it looks alright in firefox but not that good in safari.
in the attached file are 2 pictures; one is landscape, one is portrait.
the landscape one looks alright (the borders are all equal), but the portrait one is somehow unequal on the left and right side.
what i basically want is to have a container which dynamically resizes to the picture it contains whilst having the same distance to the top all the time (resizing to the left, right and bottom, but not to the top).
i hope i made myself clear enough... :p
<snip>
thanks in advance,
dize
[edited by: engine at 4:33 pm (utc) on June 30, 2008]
[edit reason] No urls, please post code, thanks [/edit]
welcome to WebmasterWorld!
Please read the Forum Charter, [webmasterworld.com] which will explain to you how to post code.
It will explain to you how to post your styles and your (x)html so that we can take a look at it.
4~css
it's quite a lot of code and two pictures.
i thought it'd be easier to just zip it...
[edited by: dize at 2:45 pm (utc) on June 30, 2008]
Your links are going to be removed by a mod.
Please read and follow what it states to do with your code.
Your zip doesn't work, and of course for security reasons I'm sure you understand why this would not be allowed. :)
Posting of your code is how we help here at WebmasterWorld. We are here to help each other to learn. By going through the code to find issues within it, it not only helps you, but it helps others to learn as they go forward with learning web design.
all you need to do is post the relevant code for the area. Make sure you let us know what dtd you are using, as well as if this is in all browsers that you are having the issue, or if it is just in one browser, and what browser it is that you are having issues with.
I hope this helps to explain things a little bit for you.
4~css~
HTML
<body>
<div id="navigation">
<span class="menu">
<a href="#" title="Return to Homepage">Home</a> ¦
<a href="#" title="Browse">Browse</a> ¦
<a href="#" title="Info">Info</a> ¦
<a href="#" title="Contact">Contact</a>
</span>
</div><span class="title2">Lorem Ipsum</span><br />
<div id="container">
<!-- insert "1.png" for portrait picture -->
<img src="2.png" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" id="photo" />
<div id="image-navigate">
</div>
<div id="image-info">
<span class="addcomment">+ Comments</span>
<span class="image-previous">Previous</span>
<span class="image-next">Next</span><br /><br />
<span class="title">Lorem</span> - 01.11.1111
<table width="100%">
<tr>
<td id="image-notes">Country: Lorem<br />City: Ipsum</td>
</tr>
</table>
</div>
</div>
</body>
CSS
body {
background-color: #fff;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0.5px;
color:#fff;
padding:0px;
margin:0px;
margin-bottom:20px;
text-align:center;}
html, body {
min-height:100.1%;
}
/* .............................. */
/* Links */
/* .............................. */
a {
color: #000;
text-decoration:none;
}
a:hover {
color: #fff;
text-decoration:underline;
}
/* .............................. */
/* Headings */
/* .............................. */
.title2 {
font-weight:bold;
font-size:11px;
letter-spacing:1px;
color:#000;
}
/* .............................. */
/* Navigation and menu */
/* .............................. */
#navigation {
background: url(menu.png) no-repeat right;
padding:5px;
height:15px;
margin-bottom:20px;
color: #fff;
}
.menu {
float:right;
clear:right;
text-align:right;
font-size:11px;
}
.menu a {
padding:7px;
padding-left:10px;
padding-right:10px;
color: #fff;
}
.menu a:hover {
text-decoration:underline;
color:#fff;
}
/* .............................. */
/* Content */
/* .............................. */
#photo {
background:#000;
padding:10px;
margin-top: 5px;
}
#container {
background:#000;
width: 42%;
margin: 30px auto 0;
}
/* .............................. */
/* Image Navigation */
/* .............................. */
#image-navigate {
padding:15px;
height: 5px;
color: #fff;
margin: -15px auto 25px;
}
#image-navigate a {
padding:5px;
color: #fff;
}
#image-navigate a:hover {
background: #000;
}
.image-previous {
float:left;
}
.image-previous a{
color:#fff;
}
.image-previous a:hover;{
text-decoration:underline;
color:#fff;
}
.image-next {
float:left;
margin-left: 10px;
}
.image-next a{
color:#fff;
}
.image-next a:hover;{
text-decoration:underline;
color:#fff;
}
/* .............................. */
/* Image Info */
/* .............................. */
#image-info {
background: #000 url(bg-page.png) no-repeat right bottom;
color: #fff;
padding: 28px;
text-align:justify;
margin: -60px auto 25px;
line-height:16px;
}
#image-notes {
vertical-align:top;
}
#image-exif {
padding-top:10px;
text-align:right;
width:25%;
vertical-align:top;
}
.addcomment {
float:right;
clear:right;
padding:0px;
color: #fff;
}
.addcomment a {
color: #fff;
}
.addcomment a:hover {
color: #fff;
text-decoration: underline;
}
