PDA

View Full Version : 2 questions

idaida
08-29-2008, 05:16 PM
1. I would like to center my photos. The width of the space is set to the horizontal images, and my vertical images end up in the right corner. Can they be centered?

2. I cannot put my cursor in the comment fields. Every time I click the fields nothing happends, and the only way to manage to write something in the fields is by "tabbing" (using the tab-button) my way through the entire site. What is wrong?

Here is my photoblog: http://www.idaida.net/foto

My image_template.htm-code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><SITE_TITLE> - <IMAGE_TITLE></title>
<!-- Link for ATOM feed autodiscovery -->
<ATOM_AUTODETECT_LINK>
<!-- Link for RSS feed autodiscovery -->
<RSS_AUTODETECT_LINK>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="content-type" name="keywords" content="PhotoBlog,<SITE_TITLE>,<IMAGE_TITLE>,Pixelpost" />
<meta http-equiv="content-type" name="description" content="<SITE_TITLE>-PhotoBlog: <IMAGE_TITLE>, <IMAGE_NOTES_CLEAN>" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="templates/Ida_BlackJack/style.css" media="all" />
</head>

<body>
<div class="container">
<div id="menu">
<img src="../pic/om.jpg"><br>
<img src="../pic/portfolio.jpg"><br>
<img src="../pic/foto.jpg"><br>
<a href="http://www.idaida.net/blogg"><img src="../pic/blogg.jpg" border="0"></a>
</div>
</div>

<div class="body">
<div class="left">
<div id="image" style="width: <IMAGE_WIDTH>px; height: <IMAGE_HEIGHT>px; float:right">
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"><img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE> [klicka för att se nästa fotografi]" id="photo" /></a>

<div class="imgnav">
<a href="index.php?showimage=<IMAGE_NEXT_ID>">&lt;&lt; nyare</a> -
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>">&auml;ldre &gt;&gt;</a>
</div>
</div>
</div>

<div class="right">
<h2><IMAGE_TITLE></h2>
<div class="info">
<h5><IMAGE_NOTES></h5><br />
<IMAGE_CATEGORY_PAGED>
</div>

<div class="data">
<h4>Datum: <IMAGE_DATETIME><br />
Kamera:&nbsp;<EXIF_CAMERA_MODEL><br />
Slutare:&nbsp;<EXIF_EXPOSURE_TIME><br />
Bl&auml;ndare:&nbsp;<h3><EXIF_APERTURE><br />
ISO:&nbsp;<EXIF_ISO><br />
<EXIF_FLASH></h4><br />
<br />
</div>
<script language='javascript' type='text/javascript'>
</script>
</head>
<body>
<div id="wrapper">

<div id="addcomment">
<blockquote>
<form method='post' action='index.php?popup=comment&amp;x=save_comment' name='commentform'>
Namn:<br />
<input type='text' name='name' class='input' /><br />
Hemsida: <br />
<input type='text' name='url' class='input' /><br />
Kommentar:<br />
<textarea name='message' rows='2' cols='8' class='input' style='width:180px;height:30px;'></textarea><br />
<input type='submit' value='Hit it!' style="font-family: Verdana; font-size: 10px; text-decoration: none" />
<input type='hidden' name='parent_id' value='<IMAGE_ID>' />
</form>
</blockquote>
</div>
<div id="comments">
<IMAGE_COMMENTS>
</div>

</div>
<div class="info">
<a href="index.php">Senaste fotografiet</a><br />
<LINK_TO_PAGED_ARCHIVE><br />
</div>
<div class="info">
<SITE_PHOTONUMBER> fotografier<br />
<ADVNCD_SITE_VISITORNUMBER> bes&ouml;kare<br />
Copyright Ida Stavenow 2008<br />
</div>
</div>
<br class="clear" />
</div>
</body>
</html>
idaida
08-29-2008, 05:17 PM
and here is the style.css-code:

/* CSS Document */
html, body {
width: 100%;
height: 100%;
}

body {
margin: 0px 0px 0px 0px;
padding: 140px 0em 0px 0em;
background-color: #ffffff;
background: url('http://www.idaida.net/pic/bgr.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-color: #000;
}

* html .container {
height: 100%;
}

.container {
display: block;
min-height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
padding: 140px 0em 0px 0em;
}
.menu {
float: left;
margin: 0px 0 0 0;
}

/*-- HEADINGS --*/
h1 { /*Site Title*/
color: #699db3;
padding: 12px 0px 0px 12px;
margin: 0;
}

h2 { /*Image Title*/
font-size: 20px;
text-transform:uppercase;
background-color:#FFD700;
line-height: 120%;
font-family: Century Gothic, Tahoma, sans-serif;
font-weight: normal;
letter-spacing: 1px;
}

h3 { /*EXIF Info*/
display: inline;
padding: 0px;
font-size: 11px;
color: #000;
font-weight: normal;
line-height: 12px;
}

h4 { /*EXIF Title*/
display: inline;
padding: 0px;
font-size: 10px;
color: #000;
font-weight: normal;
line-height: 12px;
}

h5 { /*Image Notes*/
padding: 0px;
margin: 0px;
font-size: 12px;
font-weight: normal;
line-height: 13px;
}

/*-- LINKS --*/

a:link, a:visited {
color: #000;
text-decoration: none;
}

a:hover, a:active {
color: #fff;
text-decoration: none;
background-color: #000;
}

h1 a:link, h1 a:visited, h1 a:hover {
color: #699db3;
text-decoration: none;
}

/*-- COMMON --*/
.clear {
clear: both;
}

.header {
height: 0px;
}

.menu {
width: 150px;
float: right;
text-align: right;
padding: 6px;
}

.menu a:link {
color: #6d6d6d;
text-decoration: none;
}

.menu a:visited {
color: #6d6d6d;
text-decoration: none;
}

.menu a:hover {
color: #c16c17;
text-decoration: none;
}

.footer {
clear: both;
left: 0px;
bottom: 0px;
width: 100%;
height: 20px;
padding: 8px 0px 0px 0px;
margin: 75px 0px 0px 0px;
}

.foot_left {
margin-left: 50px;
float: left;
text-size: 10px;
}

.foot_right {
margin-right: 50px;
float: right;
text-size: 10px;
}

.left {
width: 650px;
float: left;
text-align: right;
padding-left: 200px;
padding-bottom: 75px;
}

.right {
width: 200px;
padding-left: 15px;
float: left;
text-align: left;
}

.info { /* Image Information */
border-bottom: 1px #000 dotted;
padding-bottom: 3px;
padding-top: 5px;
padding-left: 5px;
font-size: 10px;
}

.info a:link, .info a:visited {
font-size: 10px;
color: #000;
text-decoration: none;
}

.info a:hover .info a:active{
font-size: 10px;
font-color: #000;
background-color: #FFD700;
text-decoration: none;
}

.data { /* Image Data */
padding-top: 5px;
padding-left: 3px;
}

.category { /* Image Categories */
border-bottom: 1px #000 dotted;
padding-bottom: 5px;
padding-left: 3px;
}
.category a:link, .category a:visited {
font-size: 10px;
color: #000;
text-decoration: none;
}

.category a:hover .category a:active{
font-size: 10px;
font-color: #000;
background-color: #FFD700;
text-decoration: none;
}

.comment { /* Image Comments */
border-top: 1px #000 dotted;
padding-top: 5px;
padding-left: 3px;
}

/*-- IMAGE --*/
.image {
padding-right: 8px;
}

.imgnav {
padding-top: 2px;
font-size: 10px;
}
.imgnav a:link, .imgnav a:visited {
color: #000;
text-decoration: none;
}

.imgnav a:hover, .imgnav a:active {
color: #fff;
text-decoration: none;
background-color: #000;
}

#photo {
padding: 1px;
background: #000000;
border: 4px #242424 solid;
}

/*-- ABOUT --*/

.about {
margin-right: 8px;
width: 615px;
height: 408px;
background: #242424;
float: right;
text-align: left;
padding: 8px;
border: 1px #000000 solid;
}

.about h2 {
padding: 0px 0px 2px 2px;
font-size: 13px;
font-weight: normal;
border-bottom: 1px #3b3b3b solid;
}

.aboutlinks {
width: 300px;
float: left;
margin: 0px 2px;
}

.data img {
padding-top: 5px;
}

/*-- ARCHIVE --*/

.archive {
padding-right: 15px;
padding-left: 20px;
width: 600px;
float: right;
text-align: left;
}

.archivenav {
clear: both;
text-align: right;
padding-right: 20px;
}

#taglist {
list-style: none;
margin: 0px;
padding: 0px;
}

.thumbs img {
margin: 5px;
}

.thumbnails {
padding: 1px;
background: #000000;
border: 2px #242424 solid;
margin-bottom: 10px;
filter: alpha(opacity=75);
opacity: 0.65;
}

.archive .thumbnails {
margin: 5px;
}

.thumbs a:hover img, .archive a:hover img{
filter:alpha(opacity=99);
opacity:0.99;
}

/* rollover effects */
#image {
padding: 0px;
position: relative;
margin: 0 8px 0 auto;
padding-right: 8px;
background: url(img/imgload.gif) no-repeat 50% 50%;
}

#menu_browse{
position: absolute;
margin: 0px auto;
padding: 0px 0px 0px 0px;
top: 0px;
left: 0px;
}
#menu_browse a{ outline: none;}
#menu_browse_prev, #menu_browse_next{
width: 50%;
height: 100%;
background: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#menu_browse_prev {
left: 0px;
float: left;
margin-left: 4px;
}
#menu_browse_next {
right: 0px;
float: right;
margin-right: -6px;
}
#menu_browse_prev:hover, #menu_browse_prev:visited:hover {
background: url('img/prev.gif') no-repeat left 85%;
cursor: pointer;
}
#menu_browse_next:hover, #menu_browse_next:visited:hover {
background: url('img/next.gif') no-repeat right 85%;
cursor: pointer;
}

/*-- COMMENTS --*/
#wrapper {
padding:1px; margin:0px auto; border:1px dotted #000; width:200px;
text-align:left; background-color:#fff;
}
#addcomment {
font-family:Verdana, Helvetica, sans-serif;
padding:1px;
}
#comments {
width:100%;
border:0px solid #444;
font-family:Verdana, Helvetica, sans-serif;
}
#comments ul {
padding:0px;
margin:0px;
display:block;
list-style:none;
width:100%;
}
#comments li {
padding-bottom:10px;
padding-top:10px;
padding-left:5px;
padding-right:0px;
margin:0px;
border-top:0px;
border-left:0px;
border-right:0px;
border-bottom:0px dotted #444;
}
#comments li a {
text-decoration:none;
color:#000;
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
.input {
border:1px solid #000; font-family: Verdana; font-size: 10px; color: #000; text-decoration: none; background-color: #fff;
}
blockquote {
margin-left: 5px;
margin-right: 0px;
}