The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
Browser compatibility woes.
Sublimus
Artist.nowhereRegistered User regular
Artist.nowhereRegistered User regular
So I'm trying to put together a small portfolio site to try and get an internship/entry level gig doing web design. I'm more of an artist/designer, so I only know so much about code.
I've been trying to get this little image previewer thing working with only CSS and HTML. It appears to be working fine in firefox, but it's not working in chrome (and probably not IE, but I have yet to check it as I'm a new mac user.)
Here is the CSS
And the HTML
I basically found most of this code in a tut and tried to retrofit it to my needs.
Any thoughts?
Thanks!!
I've been trying to get this little image previewer thing working with only CSS and HTML. It appears to be working fine in firefox, but it's not working in chrome (and probably not IE, but I have yet to check it as I'm a new mac user.)
Here is the CSS
div.projecthighlight
{
position:absolute;
top:178px;
left:448px;
height:347px;
width:530px;
border:1px solid #999;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid #999;
margin-right: 10px;
}
.thumbnail:focus{
background-color: transparent;
}
.thumbnail:focus img{
border: 1px solid #999;
}
.thumbnail span{
visibility: hidden;
position:absolute;
top:0px;
left:0px;
height:347px;
width:530px;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:focus span{
visibility: visible;
top: -361px;
left: 0px;
z-index: 50;
}
And the HTML
<div class="projecthighlight"> <img src="images/p4_highlight01.jpg" /> </div> <div class="projectshadowbox"> <div class="projectthumbshadow"> </div> <div class="projectthumbshadow"> </div> <div class="projectthumbshadow"> </div> <div class="projectthumbshadow"> </div> </div> <div class="projectthumbbox"> <div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="images/p4_t1.jpg"border="0" /><span><img src="images/p4_highlight01.jpg" /></span></a> <a class="thumbnail" href="#thumb"><img src="images/p4_t2.jpg" border="0" /><span><img src="images/p4_highlight02.jpg" /></span></a> <a class="thumbnail" href="#thumb"><img src="images/p4_t3.jpg" border="0" /><span><img src="images/p4_highlight03.jpg" /></span></a> <a class="thumbnail" href="#thumb"><img src="images/p4_t4.jpg" border="0" /><span><img src="images/p4_highlight04.jpg" /></span></a> </div> </div>
I basically found most of this code in a tut and tried to retrofit it to my needs.
Any thoughts?
Thanks!!
Sketchbook | | Website
Sublimus on
0
Posts
I know there a fair amount of web guys on here, but maybe I should post on a web specific help forum...
An example of what I have going on can be seen here.
Basically the big image should change when clicking on the thumbnails. Like I said, it works fine in firefox, and I checked it in IE, and it works there too. But the images do not change out when clicking on the thumbnails in chrome.
I'm not committed to this method of showing images either, so if there is a better way to achieve this effect, then I'm all ears.
You could use the more appropriate :active state. However, you'll find that some browsers only apply :active while the mouse is being held down.
I would suggest that you change :focus to :hover and remove the instructions to click on the thumbnails.
I'd also suggest that if you don't understand the code, then you are absolutely not a web designer. You're only a good designer if you understand the technology that the design is being applied to, be it paper or html. You should probably put your site up in a critique thread in the artists corner as well. There are a few things that could definitely use improvement. The most glaring is the way that the screenshots don't line up in the page you linked. They should be aligned so that the nav bar doesn't move around. Right now it jumps a pixel or two each time you switch images.
JacksWastedLife: Thanks for the input. :hover seemed to work across all browsers, but it's not really the functionality I'm looking for. And yeah, the :active state only worked while holding down the mouse click, which isn't what I'm looking for either.
I agree that I am not an accomplished markup writer, but that is why I am looking for and internship/entry level position.
It took me a sec to understand what you meant about the nav jumping, but I see what you mean. I'll fix that no prob.
So basically what I'm reading is, this method will not really work for what I want unless I set it to hover. Can anyone offer any alternatives? An iframe, maybe?
<main container with defined size to fit the full images> all of your full-size images, with display: none </main container> <button container> Your thumbnail images. No need for anchors; just style the thumbnails to have the cursor change on :hover </button container> <script> switchFunction(id of image to display) { set currently displaying full image back to display:none clear display:none on specified image } run switchFunction with default image id bind switchFunction to the click action of each of the thumbnails - some creative use of IDs can let you do this in one statement instead of hardcoding for each thumbnail </script>JacksWastedLife has a point though. You really need to do a lot more research and practice on your own before considering applying for jobs/internships in the field because employers sure aren't going to consider you at the current level. I don't mean to be harsh, but there's no shortage of skilled (and unfortunately, unskilled) people in the industry already that rushing in at such a disadvantage will only hurt your reputation. A web designer who can't craft in HTML/CSS/JavaScript is like a painter who can't figure out a brush. You're on the right track though, and building your own site is a great learning experience. Make up projects for yourself, try to help out on open-source projects, read and experiment and make little tech demos, hone your eye so that you can spot even the smallest pixel imperfections, etc.
A print designer who creates a design that requires a 7 color printing damn well better know that and have done it intentionally. The difference in cost can be hundreds of thousands of dollars. Similarly, a designer who doesn't appreciate web technologies is going to waste at least their portion of the project costs. And if you're doing small scale freelance work, you also had better add some information architecture, content strategy, and SEO skills to your repertoire.
I know I'm probably coming off harsh, but it's damaging to web design as a discipline when visual designers add "web design" to their resumes regardless of their actual knowledge of the field. It probably contributes to the reason that web designers on average make half as much as less skilled web developers. I know my first job as a web engineer pays more than twice what my first job as a web designer did.
As an aside, you're showing real strength in identity design. You're branding seems pretty spot on for the companies ideology and target demographics. Well done.
Thanks for all of the advice about the issue at hand as well as the broader scope advice about my skill set.
I don't mind harsh feedback. It's better than pussy-footing around the subject.
I agree that my code skills are minimal. I am in the process of teaching myself more as we speak (currently trying to learn some joomla). I'll keep practicing and learning. The plan right now is to basically make some websites for all of my friends that may need/want them. And then start applying.
Thanks again!