Jump to content

DesignBySLS

Moderators
  • Posts

    67
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by DesignBySLS

  1. I was bored and played around with this a bit - this might be another approach. The box floats relative, so at lesser resolutions, it starts pushing over the picture, but I don't think that's all bad, plus that would only affect those with much lower resolutions, but it doesn't push the image over either. If I had more time, I'd play around with background transparency a bit, but gotta tun:

     

    http://aandbwebdesign.com/KSforum/everglades2.html

     

    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.

  2. I've settled on this. At least for now. And I appreciate the help very much. I think the grey text box looks pretty good. Any thoughts? My link

     

    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

  3. That you explained the processes was a great help in me understanding the what's and why's of coding.

    I started from nothing but this forum and few dozen googles. But the helpful people here is what made it all a lot easier. Btw, I like how you describe looking at the whole design in order to plan the order of the css.

     

    Okay, I've gone through my whole website making the coding corrections you outlined above. I also made a few changes in wrapper dimensions, etc, but now

    the nav bar and page heading(Artistic...) are off center. Actually they're obviously centered for the wrapper, but it looks awkward and I'd like to move them to the center of the image. I managed to move the h3 heading, but messed up the navbar in my attempt. If there's a solution in Css only it would save a lot of work, as I've already had to go through the entire site's html pages.

     

    Here's the link to a page as it is now My link

     

    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.

  4. Wow. Thanks tons.

    I'll get this done tomorrow and post the finished product. That was a lot of work. I really appreciate it.

     

    *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.

  5. My mistake. Now that I moved it up to follow the navlist as you did it works.

     

     

    Here's the css #floater {

    width: 150px; color: white; position: relative; float: right; top: 50px;}

     

    Now that the text is showing in the box, it has moved all the existing image text off center of the image,while it is still centered in the wrapper.(the image moved left to accommadate the extra space needed for the floater text box). Any way of correcting that?

     

     

    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.

    • Upvote 1
  6. 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.

  7. I'm using the Adaptive theme, tried the Zen but somehow didn't get on that well with it.

     

    Themes area saved in sites/all/themes.

     

    Still much to learn and the thinness of documentation doesn't help. For those that have been using Drupal since the early days it is not so bad, but when you read stuff that talks about a previous version or shows screenshots of earlier versions that look nothing like the modules they are talking about it gets annoying.

     

    I stick with it, but haven't had the nerve to switch a site over yet.

     

    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

  8. 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.

  9. 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."

  10. 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.

  11. Hi Wickham... I only shared some of it. It is a nasty thing that no one can avoid... I am truly sorry it made anyone feel miserable though.

     

     

    Hey Stefan! From what I have been told I likely still have a fairly long journey ahead of me but the improvements are amazing so far. It is people like you who've kicked an illnesses but that make me face this with a smile and determination in my eyes. It helps tremendously.

     

    S

  12. So again I got silent... It has been a whirlwind of things on the road to recovery and I let my forum posting slide (though I should probably say I do stop in to check if there are spam posts anyone has missed).

     

    I am sure some of the newer members will have no clue as to who I am/was but doing a post in open forum for those who do know me is something I have been looking forward to so here goes:

     

     

    The good news... I am 5 months into treatment for Lyme. The great news... In the last 2 months I have been on IV antibiotics (as mine was in my central nervous system/brain) and I have had some amazing things happen. The headache I had since 2001 - gone! The ringing in my ears since 1995 - gone! The reading glasses that went to all the time glasses - gone! My cognitive function is up about 35% overall which for me is still a hard push - it takes me a few days to wrap my head around a new program still instead of the couple hours - but I can follow threads, and conversations again 6 out of 7 days.

     

    I'm not going to say I am not still someone benefiting from accessible sites, or needing it as I am still in treatment and there may be some lasting damage but I can say I am very lucky so far.

     

    Anyway this is just a quick post to send out love, and great thoughts to all and remind you that DEET is important when outdoors! ;):P

     

    Shelley

  13. Well... I have to update this thread... Because this is worth posting. Here is the extreme content removal:

     

    The site that ripped part of my .biz site is presently down. I took the time to contact others who had been ripped as it was a plethora of ripped content in a very close knit industry. We might not all chat and get along but many of us are women now days and we're not the type to take things lightly... Or nicely at times.

     

    In contacting others I did the research prior and provided it the others who had been ripped who keep a legal representative on contract. *looks innocent*

     

    I was/am fully aware that a couple companies and persons in question have those resources, and while I tried the direct method... And failed as soon as this guy realized who I was... They went legal.

     

    As of today the site is GONE. It stands to reason that this person may resurface and I will still have to check things from time to time... But I doubt they will make the same mistake again.

  14. If you want a "joke"... my content was ripped, submitted to an article ezine and still has the GTA in it when it has been edited a little to reflect India... LMAO!

     

    I am dyin here! :P

     

    S

     

    ETA: I contacted all the places I found it... One already responded, took the article down, and provided me with the alternate contact for the person. *thumbs up!*

     

     

     

     

    ETA2: OMG! Would you believe I found another one copying a different page. I now have to check all pages. Low and behold it is a direct rip re the .biz site.

×
×
  • Create New...