kuran Posted April 9, 2010 Share Posted April 9, 2010 (I have included a (hopefully detailed enough) rough sketch of the layout I am trying to create.)I have built everything in Coda for Mac, which is a great app.. but for me this is the first time where I attempt to try to generate clean code without returning to WYSIWYG Dreamweaver which is bloated and illogical on Mac.My problem is that I want the CONTENT PANE to be a horizontally scrolling 'frame' inside the layout, that has its own scrollbar. (the native browser one)The images are each a link to a new page.So my question is, what would be the best and most efficient way to implement this content pane? Many many thanks in advance for any help or tips.. ! PS.As I do not quite know the best implementation to use, I hope I did not post this in the wrong forum.. feel free to move it if so!I don't think posting the code that I have so far would be of any help, because all I have is the HEADER and MENU panes. Flash would be the easiest and most obvious answer for a beginner like me, but I do not have a license and want to maintain iPhone compatibility, and would love to learn! Link to comment Share on other sites More sharing options...
jeffman Posted April 9, 2010 Share Posted April 9, 2010 I've used spans in place of images, and I haven't bothered with links, but this should get you pretty close.CSS div.gallery { /* important */ white-space: nowrap; overflow-x: scroll; /* cosmetic */ height: 350px; background-color: #000;}span.item { /* important */ display: inline-block; /* cosmetic */ height: 200px; width: 150px; margin: 50px; background-color: #fff;} HTML <div class="gallery"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span></div> Link to comment Share on other sites More sharing options...
kuran Posted April 9, 2010 Author Share Posted April 9, 2010 Thank you Deirdre's Dad!I managed to implement it, but I do have a few further questions.. - How do I make div.gallery maintain a margin to the bottom of the screen? ( I want it to always maintain a margin of 60px from the bottom of the window)- Is there a way for the scrollbar to disappear when it is not needed? ea. ( When the user's browser window is wide enough to show all items. )And now for the most important question,- How would I go about implementing an Image/text/link combo for each item in div.gallery?I'm very sorry if I am asking too many questions, but it seems almost impossible for me to try and find the answers by myself..Thank you once again! Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 Here is the code that I currently have... it probably will be laughable to more experienced users, haha!Something is preventing me from having div.gallery stick to the bottom of the browser window, always maintaining a 60px margin.. but I cant even get it to work without that margin.Also found a glitch where Firefox for some reason puts a thick outline around every image with a hotlink.. weird problems! <title>title</title><head><div id="header"><div align="center"><a href="mailto: "><img src="images/logosm.png" width="275" height="11"/></a></div><img</div></head><style type="text/css" media="all">a:link { text-decoration: none; color: #7f7f7f;} /* unvisited link */a:visited {text-decoration: none; color: #7f7f7f;} /* visited link */a:hover {text-decoration: none; color: #333333;} /* mouse over link */a:active {text-decoration: none; color: #333333;} /* selected link */body {font-family: Helvetica, Verdana, Arial, sans-serif;color: black;width: auto;}div.gallery { /* important */ margin-left: 60px; margin-top: 80px; white-space: nowrap; overflow-x: scroll; /* cosmetic */ height: 350px; background-color: white;}span.item { /* important */ display: inline-block; /* cosmetic */ height: 250px; width: 100px; margin: 10px; background-color: white;}div#header {padding: 40px;background-color: white;color: white;font-size: 28px;outline: none;}div#menu {font-style: normal;font-weight: normal;color: #333333;font-family: Helvetica, Verdana, Arial, sans-serif;font-size: 10.5px;position: absolute;top: 40px;left: 10px;margin-left: 60px;padding-top: 100px;}</style> <div id="menu"><a href=>TEXT LINK</a><br />TEXT LINK<br><br><a href=>TEXT LINK</a><br /><a href=>TEXT LINK</a><br /></div></body><div class="gallery"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span></div></html> Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 I've spent the whole day working on this project and subsequently learned a lot of how to create HTML and use CSS.. so I was able to solve my question about having the bottom gallery slider stick to the bottom of the window.. using margin-top: 20%; in the style sheet.I still have no real idea how to put content into the items.. ( <span class="item"></span>)And I have a new question, is it possible to have a <div> with text inside of it, FADE IN at the loading of the website? Or if a smooth fade is not possible, could I time its appearance on the website?I have a slideshow that loads on the page, which smoothly fades into view at the loading of the page.. it would be great if the menu could fade into view at roughly the same time..!Thanks for the help, and I apologize if I posted too many times in my own thread.. Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 EDIT: I did not see your new post before I began posting. I'm skeptical of the margin-top solution. Have you tried resizing the screen to see the effect? What happened to the 60px margin you wanted at the bottom?I'm pretty sure this will not work in IE6. It also may have problems in higher versions of IE if you do not use a strict doctype. Other than that, it works everywhere I've tested it (FF, IE7, Chrome).Notice the change to overflow-x from scroll to auto. If I'd been thinking, I'd have done it that way from the start. The width definition has to be there because I changed the display property to absolute. A normal div fills the entire screen width. Absolute positioning kills that property.Are you sure you want that left margin? With the changes I've made, it does really nasty things. Even without the changes, a scrollbar that begins in the middle of the page just looks funky, IMO. If all you want is empty space, consider adding a left margin to the first element inside the gallery. If there are other considerations I don't know about, explain them and I can maybe come up with something.The definition for the html and body elements is optional. I added it in case you dislike the automatic scrollbar in IE. Since your gallery is 60px up from the bottom, it seemed like you'd have no need for vertical scrolling, and you might like this better. If not, just ignore it. html, body { overflow-y: hidden;}div.gallery { /* important */ position: absolute; bottom: 60px; width: 100%; overflow-x: auto; white-space: nowrap; /* cosmetic */ margin-left: 60px; margin-top: 80px; height: 350px; background-color: white;} Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 I still have no real idea how to put content into the items.. (<span class="item"></span>)What's the content? Just an image, or other stuff too? What should it look like? Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 It's been a while since I've written a fade-in. Could you just Google that? If you're not already using jquery and don't feel like learning it, ignore any solutions that rely on it.The technique involves timers that change the CSS opacity property. Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 What's the content? Just an image, or other stuff too? What should it look like?Hey!The content is basically an image file, with underneath some text linking to a new page.This is a sketch of the content:I can definately google the fade in effect, thank you for putting me on the right track.. now I know what I have to look for. Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 It's been a while since I've written a fade-in. Could you just Google that? If you're not already using jquery and don't feel like learning it, ignore any solutions that rely on it.The technique involves timers that change the CSS opacity property.Quick question, why would you discourage me from learning or implementing jquery? Is it because it would add yet another factor of learning a new language, or because it has compatibility/quality issues? Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 I said "if you don't feel like learning it." It's up to you. There's nothing wrong with jquery, except that it's a pretty steep learning curve that you'd be adding to the learning curve you're already on.Adding content to the spans is turning out more difficult than I expected. Everything is fine except in Safari/Chrome; those browsers are puzzling me.What I've been trying to avoid is having to know in advance exactly how many images the gallery will hold, in case you ever want to change it, or if you want to use the same CSS for multiple pages. If the content never changes, and the space between the images never changes, then we can assign a fixed width to the gallery div and all will work fine. But changing any element's dimensions would require a change to the width of the gallery also. So I'm thinking about this. It might take a while. Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 I don't know why I've had such a brain ###### about this. Let's scrap the whole span idea and put this sucker in a table. (For any lurkers out there, I believe this is a semantically correct use of a table.)CSS div.gallery { /* important */ position: absolute; bottom: 60px; width: 100%; overflow-x: auto; /* cosmetic */ height: 350px; background-color: #fff;} div.gallery table { height: 325px; /* make room for the scrollbar */ border-collapse: collapse; } div.gallery td { width: 150px; max-width: 150px; min-width: 150px; padding-left: 50px; background-color: #fff; overflow: hidden; } div.gallery a { display: block; text-align: center; } HTML (sample content) <div class="gallery"> <table> <tr> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> <td> <img src="flowers.jpg"> <a href="#">hello</a> </td> </tr> </table></div> Just be aware that different browsers are flaky about table cells honoring max-width and overflow rules. So if you need the caption-text centered below the image, the table cell width definition should be related to the image width. Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 Thank you so much for your effort, I tried your new code and it worked as it should.. But then I previewed the code on an iPhone simulator, and noticed that the mobile browser would not display the tables properly.Thats one of the big reasons why I had to abandon the idea of using this horizontal scroller to display the images.. and I have decided on something more traditional.-I really appreciate the effort you put into this, and implementing and figuring out your code has taught me a great deal!My new idea is traditional, but being without a WYSIWYG option I am as of now perplexed on how to execute it.. I have included an example layout of my desired effect.Basically the images are laid out in rows of three, I created a <div> for the whole set of images, but after doing this I have no idea how I will proceed to position each image so that it has fixed margins between the images, and that they are all positioned in the proper place.Furthermore, I wonder if it would be possible to implement code in my interface <div> so that it stays in its place, even when the user has to scroll down to see the rest of the images. So it would have to follow the scrolling of the user...Once again, I hope you are not upset that I did not end up using the code you helped me with.If it is any help, this is the code I have as of now.. without specific links.] <html><head><link rel="stylesheet" type="text/css" href="css/style.css" /><title>Title</title><div id="header"><img src="images/logo.png" width="275" height="11"/></div></head><body><div id="menu"><a href=link>LINK 1</a><br /><a href=link>LINK 2</a><br /></div> <div id="images"> <img src="images/"><br /><br /><br /> "description" <br /><a href="info">click here for more information</a> </div> </body></html> Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 I know nothing about mobiles. How certain can you be of the widow width? Are the widths of your images constant? If so, this is easy. Just give me some numbers.It's also easy to fix a div so that it's position is always relative to the window, not the document. Assuming mobiles support that. I don't know. But we can experiment. Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 I know nothing about mobiles. How certain can you be of the widow width? Are the widths of your images constant? If so, this is easy. Just give me some numbers.It's also easy to fix a div so that it's position is always relative to the window, not the document. Assuming mobiles support that. I don't know. But we can experiment.The images are indeed constant (they are 152 px wide), so I guess it would be possible like you say, but I already made up my mind about using the more traditional design. Even still I would like to see if your newer implementation would work.Even if the sideways scrolling would render perfectly on mobiles, it would still be fussy to navigate.. Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 Sorry, I thought you still wanted help. And I'm fine with the traditional design. But if you've got it working, great. Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 Sorry, I thought you still wanted help. And I'm fine with the traditional design. But if you've got it working, great. Well, actually I wanted to see if you could give me some advice on how to place the grid of images using CSS.. as I can't wrap my head around it. (A year ago I would just throw everything on a grid in Dreamweaver and be done with it)And maybe you know how to stay in the same location on the screen, even when the user scrolls up or down?Thank you so much for your help already! Link to comment Share on other sites More sharing options...
kuran Posted April 10, 2010 Author Share Posted April 10, 2010 Well, actually I wanted to see if you could give me some advice on how to place the grid of images using CSS.. as I can't wrap my head around it. (A year ago I would just throw everything on a grid in Dreamweaver and be done with it)And maybe you know how to stay in the same location on the screen, even when the user scrolls up or down?Thank you so much for your help already!I figured out my first question, at least I found out that I can get the desired effect using tables.. would you say that is the most efficient way to go about this?I hope you can still help me with my interface question..!I never thought I would say this, but messing about with code is actually so much fun! Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 A table is okay. Here's another. Just change the spans to images. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> div#nav { position: fixed; top: 50px; left: 50px; height: 100px; width: 100px; background-color: #67f; } span.normal { display: inline-block; float: right; margin: 0 50px 50px 0; width: 100px; height: 200px; background-color: #000; } span.first { clear: both; } </style> </head> <body> <div id="nav"></div> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> </body></html> Link to comment Share on other sites More sharing options...
kuran Posted April 11, 2010 Author Share Posted April 11, 2010 That did it! Thank you so so much for your great help and effort. Link to comment Share on other sites More sharing options...
kuran Posted April 11, 2010 Author Share Posted April 11, 2010 That did it! Thank you so so much for your great help and effort.I seem to be unable to get the spans to center on the page.. how would I best do this? Link to comment Share on other sites More sharing options...
jeffman Posted April 11, 2010 Share Posted April 11, 2010 Put them in a container and center the container. Calculate the total with of the elements, including any margins and padding and borders. Define the container div to be that width. You can center the div by defining margin-left and margin-right both as auto. Link to comment Share on other sites More sharing options...
kuran Posted April 11, 2010 Author Share Posted April 11, 2010 Once again, thank you. Link to comment Share on other sites More sharing options...
kuran Posted April 13, 2010 Author Share Posted April 13, 2010 A table is okay. Here's another. Just change the spans to images.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> div#nav { position: fixed; top: 50px; left: 50px; height: 100px; width: 100px; background-color: #67f; } span.normal { display: inline-block; float: right; margin: 0 50px 50px 0; width: 100px; height: 200px; background-color: #000; } span.first { clear: both; } </style> </head> <body> <div id="nav"></div> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> <span class="first normal"></span> <span class="normal"></span> <span class="normal"></span> </body></html> So now that I have the list of images that I want, I realize I need to have some sort of category system.. Lets say I have three buttons, "ALL" "TOMATOES" and "ORANGES", if I press ALL, I see all of the spanned images, but if I press TOMATOES it will only show me the spans with the TOMATO tag. Does this make sense and it is possible in this way? Or should I just build seperate pages with manual filtering?I've been searching, but it's hard to find a tutorial or guide for a specific question like this. Link to comment Share on other sites More sharing options...
Synook Posted April 13, 2010 Share Posted April 13, 2010 You can use JavaScript to loop through all the spans and then hide all the ones with (or without) a certain tag. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.