DesignBySLS

On firefox on my laptop the information is out of context completely and resting in the top right corner of the page. Te purchase link is out of place as well.

I like it. Much like I had pictured. The only thing I might have done because I am a girl and we do things like that is used a rounded corners technique and played with it... Maybe not rounded but a geometric shape... But then that is my style and yours is much more classic. I like it. S

I suppose the other option would be an overlay over the bottom of the photo with the text... The problem is again with the amount of text... It can get a bit much unless you are keeping it short and sweet.

I looked and logically it is not off centre. However I think I know where you are struggling. Have you considered some visual detailing behind the text to the right to give it a visual balance? Maybe a 1-3 shade colour difference box effect with either rounded corners or some other funky corners effect? Or a gradient effect that gives that area something a touch brighter to balance things? The reason I ask this is because if you move the header over it will essentially end up very unbalanced overall and it will look like the text is floating out of context. Why not do a screen capture or mock-up on your graphic editing program to play with location. I am on the run right now and can't do it before I go out or I would show you.

*soft smile* No problem at all... Yes I suppose it could be a lot of work for some. I remember when I was starting out and it would be a lot of work, but now it comes with a lot more ease. At some point it will come as you code and you won't have to tweak things, but rather know that if you include certain things in your code it flows faster. The learning of the process is why I wanted to explain the processes, steps and problems as I went and show you what I did and why. Did you use a template as a base or did you start coding from nothing? Both are great options... Now days I code for myself but I also often take a piece of paper and a package of coloured pencils. I look at the design mock-up I have done, and figure out where my divs will be if I have something a bit more complex. Outer wrapper, header, content, left & right columns, footer... all seem to be standard for me. Though my header could be inside or outside my content as needed. It helps me wrap my head around the hierarchy of it all. And then when I look at the CSS to style it I look at the layout blocking to see what order I should be putting things in.

Yes... You have to include the text you want centred under the image in the same DIV. Without doing this the text applies to the DIV it is in. Simply put it applies to POST and You need a PIC DIV. Ok so as follows are a number of things I kept finding as i went through. To be fair to fix one thing to have it break for you isn't going to work... I broke it down, explained why things can't be done but at the end of this long post it is all cleaned up to a point. It is up to you to edit the h1 and the p tags that were empty to use them or get rid of them. Here is your existing code: <div id="post"> <div id="floater"> <p>This is a special box with some text next to the main wrapper.</p> </div> <img src="laimages/lowhangingstorm.jpg" width="720" height="479" title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach" > <p> </p> <div class="arrownav"> <a href="beach.html"><img src="laimages/rightarrow.jpg" alt=""></a> </div> <div class="arrownav2"> <a href="lonewave.html"><img src="laimages/leftarrow.jpg" alt=""></a> </div> <h3>storm brews over barbados beach</h3> <p class="right"><a href="prints2.html">Purchase Info</a></p> </div> Here is the placement which will float that text centred under the image: <div id="post"> <div id="floater"> <p>This is a special box with some text next to the main wrapper.</p> </div> <div id="pic"> <img src="http://www.waynewillison.com/laimages/lowhangingstorm.jpg" width="720" height="479" title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach" > <h3>storm brews over barbados beach</h3> <p class="right"><a href="prints2.html">Purchase Info</a></p> <div class="arrownav"> <a href="beach.html"><img src="http://www.waynewillison.com/laimages/rightarrow.jpg" alt=""></a> </div> <div class="arrownav2"> <a href="lonewave.html"><img src="http://www.waynewillison.com/laimages/leftarrow.jpg" alt=""></a> </div> </div> </div> #pic { width: 750px; float: left;} Next... I noticed you have an issue with the location of the arrows to move forward or back to the previous/next image. I would suggest (from much past experience with these type of things) that for the sake of continuity and consistency page to page... You put those two DIV's inside another DIV. You can use clear:both; applied to the main DIV and it will sit below the image, title text and purchase info, OR you can even apply positioning to position it overlaying the image though be careful with this as it will affect the text box to the right should you have a larger amount of text there. <div class="picnav"> <div class="arrownav"> <a href="beach.html"><img src="laimages/rightarrow.jpg" alt=""></a> </div> <div class="arrownav2"> <a href="lonewave.html"><img src="laimages/leftarrow.jpg" alt=""></a> </div> </div> (placed before the closing tag for the PIC div) with .picnav { width: 25%; clear: both; position: relative; margin:auto;} .arrownav {position: relative; float:right; top: 20px;} .arrownav2 {position: relative; float:left; top: 20px; } Next: THIS was ultimately the start of your conflict... #post p {margin-top: 15pt; margin-bottom: 5pt;margin-left: 130pt; margin-right: 130pt;} You need to put your CSS in a different order. If you want that to apply to all the text within POST... Great. If you want floater to follow those rules too. If you do not want floater to follow them you need place paragraph attributes for floater in the CSS and ideally the FLOATER attributes should be listed after POST as it is the last attributes the system applies that show. It cascades down the levels. Oh heck... Ultimately I messed with your code so it looked as I would put it *blush* seeing future problems as I solved one so here is the css, and the code: *{margin: 0; padding: 0;} body { color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; background:#080808 url(http://www.waynewillison.com/laimages/nongradient.jpg) repeat-x top fixed;} .background { width:; position: fixed; left: 0; right: 0; top: 0; z-index: -1; } #wrapper { background: #151515; margin: 170px auto; width: 960px; padding: .5em; } #wrapper2 {background:#151515; margin: 15px auto; width: 960px; padding-top: 1em; } /*I eddited things here - you needed this to be before floater to not apply attributes superceeding floater attributes */ #post img {display:block; margin: 0 auto;} #post {text-align:left;} #post p {margin-top: 15pt; margin-bottom: 5pt;margin-left: 130pt; margin-right: 130pt;} /*I eddited things here - you needed paragraph attributes here */ #floater { width: 150px; background: white; position: relative; float: right; top: 50px;} #floater p{ margin-top: 15pt; margin-bottom: 5pt;margin-left: 5pt; margin-right: 5pt; } /*I eddited things here - wrapping the image and the title text is just good practice and allows the text to be centered to the image. The arrow nav also in this. */ #pic { width: 750px; float: left;} /*I eddited things here - why do you need arrownav3? */ .picnav { width: 25%; clear: both; position: relative; margin:auto;} .arrownav {position: relative; float:right; top: 20px;} .arrownav2 {position: relative; float:left; top: 20px; } .arrownav3 {position: absolute; left:1100px; top: 200px; } #header {text-align:center;} h1 { font-family:Arial, serif;font-weight:normal; color:#C1BEB3;letter-spacing:.1em;} h1,h2,h3 { margin:15px auto;} h2,h3 { font-size: 100%;font-family:Arial,serif;font-weight:normal;color:#C1BEB3;letter-spacing:.1em;} h3 {text-align:center;} h4 {text-align:left; margin:15px;margin-bottom:0px;} a{text-decoration:none;} a:link {color:#ffcc99} a:visited {color:#99cc33} a:hover {color:#993300} a:active {color:#ffcc99} p {font-size:90%} p.left {text-align:left;} p.center {text-align: center;}#content {margin: 35px;}p{ margin: 15px 0;} p.right { text-align:right; } p.text {font-color: white; font-size:70%; } #navlist li {display: inline; list-style-type: none; } #navlist a {padding: 3px 5px; } #navlist a:link, #navlist a:visited{color: #fff;background-color: #151515; text-decoration: none} ul#navlist{margin:15px auto; white-space: nowrap; text-align:center;} #navlist a:hover{color: #fff; background-color: #808000; text-decoration: none;} table{margin: 10px 50px;} img.displayed {display:block; margin-left: auto; margin-right: auto } #footer { text-align: center; font-size: .6em; clear:both; padding-bottom:5px;color:#C1BEB3} .text { color: #C1BEB3 } #shoppingcart { float:left; } img {border-style:none;} #images img{float:left;} #images p{clear:both;} #images img{margin:0 55px 0;padding: 15px;} #images img {border: 0; } #images limg{margin:0 55px 0;padding: 5px;} #images timg{margin:0 55px 0;padding: 5px;} #thumbs img {border:0; } div.float { float: left; margin-left: 50px;margin-right: 30px; } div.float p.float {text-align:center; } PLEASE... be mindful. I edited things, cleaned it up to do the same thing in less code, without extra bits on your css, and html. You will find 2 of these "What is this? DO YOU NEED ME HERE?" to decided if they are needed or bits of code that should have been taken out. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Everglades, Landscape, New Day, Canal in Sawgrass </title> <link rel="stylesheet" type="text/css" href="testing.css"media="all"> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="header"> <h1>What is this? DO YOU NEED ME HERE?</h1> <h2> Artistic nature photography</h2> </div> <ul id="navlist"> <li><a href="index.html">home</a></li> <li><a href="aboutus2.html">about</a></li> <li><a href="gallery2.html">everglades</a></li> <li><a href="islandlife.html">shorelines</a></li> <li><a href="maninnature.html">man in nature</a></li> <li><a href="contact2.html">contact</a></li> <li><a href="prints2.html">prints</a></li> </ul> <div id="post"> <div id="floater"> <p>This is a special box with some text next to the main wrapper.</p> </div> <div id="pic"> <img src="http://www.waynewillison.com/laimages/lowhangingstorm.jpg" width="720" height="479" title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach" > <p>What is this? DO YOU NEED ME HERE?</p> <h3>storm brews over barbados beach</h3> <div class="picnav"> <div class="arrownav"> <a href="beach.html"><img src="http://www.waynewillison.com/laimages/rightarrow.jpg" alt=""></a> </div> <div class="arrownav2"> <a href="lonewave.html"><img src="http://www.waynewillison.com/laimages/leftarrow.jpg" alt=""></a> </div> </div> </div> <p class="right"><a href="prints2.html">Purchase Info</a></p> </div> <div id="footer"> <p>© All material and copyright by Wayne Willison. All rights reserved.</p> </div> </div> </div> </body> </html> See end result here. - See the two "What is this? DO YOU NEED ME HERE?" - without that code it looks like this.

I've played with 7 a bit here and there but I had been holding off until they rolled it out officially for the core + the 15 modules I seem to use most frequently (all having pledged to roll out with 7). I might take another look through this weekend to check those 15 mods but until they all work there is no point in me jumping up to 7. I work on productions sites that often need a fair number of modules.

I've gone through versions 4, 5 and 6... with 7 pending. Zen is commented really well and page source can usually net you the class you want. I tried adaptive but it wasn't versatile enough for me... Feel free to PM me if you hit a glitch or just need to bounce something off with Drupal. PM's notify me on my blackberry. Shelley

Might I ask which basic theme you had been playing with? Most tend to prefer one of a handful of "starter" themes... zen seems to be the most popular and the one I use most. And in the event that you have not already done this... Please make sure your modified theming is in a folder at sites/all/themes even if you are just modifying another theme... it is very important that the modified CSS be there, and the calls be directed to there. The reason for this is that when you end up doing an update (which you will - I love Drupal but the number of updates can be high over time) you may inadvertently end up going over existing styles/code. It is a hard less to learn which is why I mention it.

Acrobat is required to edit PDF files... *sigh* Which is a pain... However... Open office, and google docs can be saved as word docs and acrobat ~DOT~ com It has a trial feature: "Not quite sure yet? We also offer a free plan: 5 PDF file conversions in total, 3-person web conferencing, unlimited file downloads, online office applications, and forum-based support."

I've used cushy for a client and it is effective. If you want it branded with your own info it is 30/month otherwise it is free... though I've not tried multi-users with liited editing on one site as I would lean toward drupal with nodeaccess specified for that.

I have fireworks on both laptop and desktop (desktop with custom assets, etc.), photoshop 7.0 on desktop (have added custom brushes, etc. that would take months to recompile for newer versions) but with running vista on the laptop it won't take my photoshop 7. *grin* I had elements in the past... I am pretty much leaning toward that with one of the other two. It is the other two I have been mulling over for the last 12 hours.

Any thoughts on selecting between the lot of these: I get 2: AND Pick 2 of the following: Adobe? Photoshop? Elements (PC) (457 MB) Autodesk? SketchBook? Express 2010 (28 MB) Corel? Painter? Sketch Pad (74 MB) Anyone used any of these? I should note I am notably a fireworks lover.

Hi Susie! Thanks! Me too!