Good Morning everyone , [TABLE] [TR] [TD="class: votecell"][/TD] [TD="class: postcell"] I am pretty new to we-design and am building a site for my artwork. I am stuck with how to properly build this photo gallery and have it positioned where I need it to be. The gallery must be positioned perfectly because it needs to line up with the background image that acts as the frame for the gallery images. I have designed this based on % in the attempt to eventually make it responsive to four different screen-size ranges. When I test what I have so far it just falls apart when it hits the different browsers. It does fine in dreamweaver's live view but when I test it in any browser either the background image won't show up, or the images stack up on the left side of the page, and it does not respond at all when I shrink the screen. I know I need to learn a LOT and am studying web-design everyday, but in the meantime I need to get this site up while I continue to learn. ANY and ALL help is so so so appreciated I am just stumped . Thank You in advance! Colin Here is the jsfiddle link to view the code. If this post is not formatted correctly or will deter people from answering PLEASE let me know. http://jsfiddle.net/squigworm/FrsGp/3/ [/TD] [/TR] [/TABLE]
Hi squigworm. I still consider RWD (responsive web design) as a new animal in web-design: one page to handle various resolution of devices, especially mobiles. And up to this moment, I myself still have hard time designing it Usually I put the whole codes (HTML and CSS) into a server, and test that with some target browsers/ devices. So one question... if you placed it into jsfiddle, could you really test it? Hendra
Hi Hendra, Thank You for responding and You are correct about jsfiddle. Yesterday was the first day I used it and I now see that particular limitation. I am starting to realize that the responsive design is very much in the beginning phases of its inception. I am very new with this and was just starting where I thought I was supposed to, but now I am not sure about that decision lol. What I need is a site that has four different sizes - I am willing to write completely separate code for each size (especially after trying to deal with making it responsive) I am just not sure exactly how to go about linking the four pages together. If you have any advice or suggestions I am open to try anything. Colim
Something like the following perhaps? <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"> <title>Test</title> <link rel="stylesheet" type="text/css" href="../_css/main_full.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:769px) and (max-width:1088px)" href="../_css/large.css" /> <link rel="stylesheet" type="text/css" media="only screen and (min-width:449px) and (max-width:768px)" href="../_css/medium.css" /> <link rel="stylesheet" type="text/css" media="only screen and (min-width:252px) and (max-width:448px)" href="../_css/small.css" /> </head> <body> ... </body> </html> PHP: ... And each styling file, such as small.css (except that main_full.css) would look like: @charset "UTF-8"; /* CSS Document */ /* Layout Small Screens */ .page_container { width: 448px; height: 1050px; margin: 0% auto 0% auto; background-image: url(../_page_components/gallery/gallery_small.jpg); } PHP: Hint: I don't know how easy to get this in Dreamweaver, but if you are quite comfortable with text-based editor like Notepad++ then it is
Why are you putting padding to each spot for different id's?.. Just use 1 class to seperate them from each other like : padding:5px;, add some dimension codes like; width:100px; height:auto; or you can put percentages as you want.. And finally you must add float:left; to make them "float" .. I hope this help.. Hasan
Cool! - I will work with this when I am back in front of the code - Thanks again for taking the time to respond - Oh, and I am very grateful that dreamweaver exists but I do not think I will be using it again; A simple / well functioning, text-based editor is looking more and more attractive! I do have more questions but I am going to try and work with this before I ask anything else. Thanks again.
Hey Hasan thanks for responding. If my code looks like patchwork, that's cause it is at this point - Just trying to learn as much as I can each day. I will be trying to implement these suggestions later today. Thanks again for taking the time to look and respond.
Just trying to learn as much as I can each day. I will be trying to implement these suggestions later today. Thanks again for taking the time to look and respond.