Comment on Weekly Feature-March(1) by Renata-s-art
This one has tablet display errors as well.
I could help you with HTML and CSS if I had the code..
I could help you with HTML and CSS if I had the code..
Here is the code:
.journalbox {background: url(fc06.deviantart.net/fs71/o/201…); cursor: default; padding: 0; border: 1px solid black;}
.journalbox acronym{cursor: help;}
a {
color: #c88e68;
text-decoration: none;
}
a:hover {
color: white;
}
.boxtop{background: transparent; font-family: 'verdana'; font-size: 0.9em; text-align:
right; padding: 123px 20px 0 110px; color: #502d11;}
.boxtop img{display:none;}
.boxtop h2{color: #724e34; font-family: 'verdana'; font-weight: normal; font-size: 25px; text-align: right; z-index: 1;}
.journaltext{background: transparent; text-align: left; font-family: 'verdana'; color: #d3bba8; font-size: 13px; margin: 0 10px 20px 150px;}
.journaltext img{vertical-align: middle;}
.journalbottom{background: transparent; font-family: 'verdana'; font-size: 16px;
color: #c0d0ca; text-align: center;}
.hsep{color: black;}
.f.list{background: transparent; padding: 10px 0 15px 20px; font-family: Verdana, sans-serif; font-size: 0.9em; line-height: 1.5em; color: #653f3a; text-align: left; }
.f strong {
color: #876561;
font-size: 1.1em; font-weight: normal;
}
.f.list li{background: none;}
.f .a{background: none;}
.subheader {margin: 10px auto; font-family: Verdana; font-size: 20px; color: #9f7355; text-align: center;}
.feature a{display: block; border: 3px solid black; margin-right: 5px;}
.feature a:hover {border: solid #32251b;}
div.scrollbox {
background-attachment: scroll;
width:350px;
height:300px;
border-width: 2px 2px 2px 2px;
border-color: #d2d4d9;
border-style: dotted;
background-repeat : no-repeat;
background-position : scroll;
padding: 6px 6px 6px 6px;
margin-top: 1px;
font-size:12px;
background-color:#7d818e;
color: #fff;
overflow: auto;
}
.butterfly {background: url(fc05.deviantart.net/fs71/o/201…) no-repeat;
width: 584px; height: 463px;
position: absolute; top: 10px; left: 10px; display: block;
z-index: 3;}
And don't you know how many thumbs can someone add?I tried adding more,but it turned into link instead of thumb.
.journalbox {background: url(fc06.deviantart.net/fs71/o/201…); cursor: default; padding: 0; border: 1px solid black;}
.journalbox acronym{cursor: help;}
a {
color: #c88e68;
text-decoration: none;
}
a:hover {
color: white;
}
.boxtop{background: transparent; font-family: 'verdana'; font-size: 0.9em; text-align:
right; padding: 123px 20px 0 110px; color: #502d11;}
.boxtop img{display:none;}
.boxtop h2{color: #724e34; font-family: 'verdana'; font-weight: normal; font-size: 25px; text-align: right; z-index: 1;}
.journaltext{background: transparent; text-align: left; font-family: 'verdana'; color: #d3bba8; font-size: 13px; margin: 0 10px 20px 150px;}
.journaltext img{vertical-align: middle;}
.journalbottom{background: transparent; font-family: 'verdana'; font-size: 16px;
color: #c0d0ca; text-align: center;}
.hsep{color: black;}
.f.list{background: transparent; padding: 10px 0 15px 20px; font-family: Verdana, sans-serif; font-size: 0.9em; line-height: 1.5em; color: #653f3a; text-align: left; }
.f strong {
color: #876561;
font-size: 1.1em; font-weight: normal;
}
.f.list li{background: none;}
.f .a{background: none;}
.subheader {margin: 10px auto; font-family: Verdana; font-size: 20px; color: #9f7355; text-align: center;}
.feature a{display: block; border: 3px solid black; margin-right: 5px;}
.feature a:hover {border: solid #32251b;}
div.scrollbox {
background-attachment: scroll;
width:350px;
height:300px;
border-width: 2px 2px 2px 2px;
border-color: #d2d4d9;
border-style: dotted;
background-repeat : no-repeat;
background-position : scroll;
padding: 6px 6px 6px 6px;
margin-top: 1px;
font-size:12px;
background-color:#7d818e;
color: #fff;
overflow: auto;
}
.butterfly {background: url(fc05.deviantart.net/fs71/o/201…) no-repeat;
width: 584px; height: 463px;
position: absolute; top: 10px; left: 10px; display: block;
z-index: 3;}
And don't you know how many thumbs can someone add?I tried adding more,but it turned into link instead of thumb.
First of all mixing em and px for font sizes is not pretty. Also, when you need margins over 100 px you should either use div size or cell size instead of aligning and then pushing it back with a padding. Tables are more stable than divs. Also, percentages for cell or div size leave more room for different browsers/viewers. I think tablets lack slider bars on the sides when things are too big for the class size. On the app that is. Haven't tested it on my browsers on my tablet.
And usually Apple and Android don't have the Verdana font. Try to supply a different option. Always remember that when you use a CSS that you should test it on different browsers and systems. I had to make styles for Design For All platforms. System independent and with scalable options and all images with an alt text for visually or otherwise impaired people. I don't know the limit on thumbnails.
PS. 'Verdana', verdana and 'verdana' are not the same. The second and third ones do not work. And don't forget spaces after using : . Like when you use width:350px; CSS needs exact codes.
That were my quick fixes for now..
And usually Apple and Android don't have the Verdana font. Try to supply a different option. Always remember that when you use a CSS that you should test it on different browsers and systems. I had to make styles for Design For All platforms. System independent and with scalable options and all images with an alt text for visually or otherwise impaired people. I don't know the limit on thumbnails.
PS. 'Verdana', verdana and 'verdana' are not the same. The second and third ones do not work. And don't forget spaces after using : . Like when you use width:350px; CSS needs exact codes.
That were my quick fixes for now..
Thanks.