alexandros

Hello! I'm nearly done with this project - i really need to finish this soon. I've managed to make it look good and work in Safari/Chrome/Ipad. But Firefox doesn't work so well. The header is really low and it messes with my slideshow. What is going wrong? Why does it work well in the other browsers and ipad? Example Thank you for any advice. A.

I'm confused... It looks ok on my 1440x900 resolution. Not well when i try the 1024x768 resolution on my firefox or safari browser.... Not sure how it looks on ipad cause i haven't got one - but people can let me know. The same applies with larger screens. It's confusing me because there's the #content element which carries a carousel slideshow. I'm thinking it's best to adjust the #content instead of the carousel for different screen resolutions. Am i right to think that? Should i have a non-media queries css rule for my #content or is it ok to break it up in to each resolution with the different set of rules? Does that make any sense? EXAMPLE This is what my CSS looks like: @charset "UTF-8"; /* CSS Document */ html {height:100%; } body { font-size: 12px; letter-spacing:-0.02em; /*font-family: Verdana, Geneva, sans-serif;*/ text-align:center; } .wrapper { margin:0 auto; text-align:center; min-height:100%; } #header { margin:0 auto; text-align:center; min-height:100%; margin-top:9%; position:fixed; } #logo { margin: 0 auto; min-width:100%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #content { text-align:center; overflow: hidden; padding-top: -50px; } .wrapper {margin:0 auto; max-width : 768px; text-align:center;} .header { max-width: 768px; align: center; border: 0; margin:0 auto; } img {max-width:768px; height:auto;} } /* For general iPad layouts */ @media screen and (min-device-width: 1024px) and (max-device-width: 1440px) { #content { text-align:center; overflow: hidden; padding-top: 170px; }} @media screen and (min-device-width: 1445px) and (max-device-width: 1920px) { #header { margin:0 auto; text-align:center; min-height:100%; margin-top:10%; position:fixed; } #content { text-align:center; overflow: hidden; padding-top: 250px; } } @charset "UTF-8"; /* CSS Document */

Thank you for the reply... I'm not really sure what i'm doing wrong. I followed your instructions but it seems to change things for my 1440 screen resolution too.....?

Hello, I've been trying to make my site load a different set of CSS rules when the screen resolution is 1920x1080 The basic css for the element is #content { text-align:center; overflow: hidden; padding-top: 110px; } and if the resolution is 1920x1080 i want it to be #content { text-align:center; overflow: hidden; padding-top: 190px; } How can i do this??? For Ipad i've used <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" /> and i'm not even sure this works to be honest.... This is the link EXAMPLE Thank you.

Thank you again, I can't use Notepad++ but i got TextWrangler... The li/ul tags are for the dropdown menu not the slides.... so maybe that's not the problem that causes the slideshow to appear offcenter on load... It seems to be suggesting to put a </li> before the last </ul> of my menu. But it doesn't seem to go through the validation again...it comes up with other issues. Can u maybe tell me what you see it's badly coded? Thank you.

Thank you for the input, I fixed some of those, but still get weird messages in that concerning my dropdown menu? Help? Also, the carouFredSel still doesn't load the first time you visit the page.... ?

Hi people, I've been designing this website and using carouFredSel amongst other scripts... I'm curious as to why on some browsers such as Chrome and Safari the page needs refreshing to work properly - if it does - and on Firefox for example, it works ok... Can u take a look and let me know if you notice something off??? CarouFredSel Page Thank you for your time. A.

Hello, I am working with this page And what i'm trying to achieve is to have a slideshow with bigger thumbnails that run on top or below (or even on the side) of the content. The content should be clickable (lightbox) and should run in a filmstrip (carousel?). More so, i would like to add the function of mousewheel - so to be able to scroll through the images as well as click on them to go there. I'm struggling because i don't want to deconstruct the whole site and build a whole new gallery but would like to implement the above in the existing design. Any thoughts? Thank you for your time. a.

Hello, I am working on this site : galleria And I would like to use IMG TITLE or ALT instead of text on the image file like it is now. So, essentially it the HTML would look like this : <div id="galleria"> <a href="press/cosmopolitanoct2011.jpg"> <img src="press/thumbs/cosmopolitanoct2011.jpg" img title="Cosmopolitan, October 2011" alt="blah blah blah"> </a> more images.......etc </div> Now, my issue is that the default classic theme for Galleria has this CSS : .galleria-info { width: 50%; top: 15px; left: 15px; z-index: 2; position: absolute; } .galleria-info-text { background-color: #000; padding: 12px; display: none; /* IE7 */ zoom:1; } .galleria-info-title { font: bold 12px/1.1 arial,sans-serif; margin: 0; color: #fff; margin-bottom: 7px; } .galleria-info-description { font: italic 12px/1.4 georgia,serif; margin: 0; color: #bbb; } .galleria-info-close { width: 9px; height: 9px; position: absolute; top: 5px; right: 5px; background-position: -753px -11px; opacity: .5; filter: alpha(opacity=50); cursor: pointer; display: none; } .notouch .galleria-info-close:hover{ opacity:1; filter: alpha(opacity=100); } .touch .galleria-info-close:active{ opacity:1; filter: alpha(opacity=100); } .galleria-info-link { background-position: -669px -5px; opacity: .7; filter: alpha(opacity=70); position: absolute; width: 20px; height: 20px; cursor: pointer; background-color: #000; } .notouch .galleria-info-link:hover { opacity: 1; filter: alpha(opacity=100); } .touch .galleria-info-link:active { opacity: 1; filter: alpha(opacity=100); } Which places the box containing the information on the image 15px left and 15px top And also has this function of clicking the "i" (information) button to reveal the title and also has an "X" icon to hide it again. I would like it to be as simple as possible, where under each image, the title comes up - centered - without having to click on anything to reveal or hide.... I've tried playing with the CSS and managed to place the title box under the image (centered) BUT the title is clickable and disappears onclick... This is galleria Classic in case someone is not familiar : http://galleria.aino.se/themes/classic/ In other words, How can I get the ALT text of the Galleria slideshow to appear under the slideshow....?? I made this work using jquery cycle here Can someone maybe push me towards the right direction?? Thank u!

The splash page is a request from the client. I have changed the way the site looks. Can someone please have a look... Is this more ipad/iphone friendly? On my blackberry half of the site is cut off. Not because it doesn't fit...it's just cut. ...

Hello, I am the designer and developer of this site : www.lucasnascimento.com I would like you to take a look and let me know what you think. The idea is to have a splash intro page that fills the window. On clicking Enter it will fade out to the main page which has a menu on the left hand side that loads (Ajax content) the slideshows (jquery cycle plugin) on the right. It seems like on the browser it's working nicely. I'm concerned about ipad and iphone because the simulators that are online seem to have some issues with it. 1. In ipadpeek.com the site is cut off on the right hand side....The images from S/S 12 are not showing up entirely. 2. In iphoney, the images as squashed to fit onto the page.... is this because of the img{max-width:100%;} ?? Any help appreciated. A.

Thank you It sure looks like a big subject. ....When you say fluid grid, you mean the : container (or wrapper) div which includes : menu (div) content (div) right? All CSS should be in %.? Here's how these look in the CSS : html, body { background-color:#FFF; text-align:center; padding:2%; } body { font-size: 12px; letter-spacing:-0.02em; font-family: Verdana, Geneva, sans-serif; } #container { max-width:100%; text-align:left; } .menu { line-height: 20px; text-align: left; float:left; position:fixed; } img { max-width: 100%; } #content { max-width:100%; max-height:100%; text-align:left; overflow: hidden; padding-left: 25%; padding-top:0.3%; } Does this look ok?

Hello, This is the site i'm designing : http://www.lucasnascimento.com If you go through the splash you will find a static website, with images (jquery cycle with pager). My issue is to do with how this site is viewed on different platforms. Different screen sizes, resolutions etc. Ideally, I would like it to resize so it fits the screen of the user. I've incorporated the 'max-width:100%' on images and it seems to be doing something...But in terms of height, it is necessary to scroll.... Also, img { max-width: 100%; } makes some of the larger images stretched or it even cuts them off if i resize my browser. How can you make them resize with proportions constrained? And ALSO, when I resize my browser, the #content changes position in layout. Help?

Hello, Returning after some time to state that I am still lost! I have purchased this book Learning PHP, MySql & Javascript but I feel too intimidated to begin. Do you think the website you proposed is easier to follow? Is there any other resource aimed directly at this sort of dynamic site? Is HTML5 another option...?

Thanks for all the replies.. To be honest, the Wordpress solution is kind of relevant, but yes, it would mean trying to strip things down to a bare minimum to get a result that seems achievable from the other way around....from scratch. That's the impression i'm under anyway The only thing that would make me go with Wordpress is that my client then would be able to manage his website by him self, without having to call me up to update the site adding a new project or new category etc. I will soon start developing this so watch out, I am sure I will be back for more PHP magic! thanks again.