grabenair

You need what is called responsive web design. Google it to get more info. But here is the short version. You add a style sheet and link it in your header or add some css to the bottom of your style sheet. If you add a style sheet in the header make sure it is under the main css. Here is what you do if adding to the bottom of your css write this line of code. This is called a media query. @media (max-device-width: 320px) { Your new css rules here. They will only apply to media that is 320 px and under in width. You can change the 320px to anything that you want. What you do is change the size of your stuff to fit. Like content from 960px to 315px. } I know this probly made it worse but this is a very big subject this is way I gave you what to google. Here are a couple of links that I like to get you started. http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ http://www.lynda.com/Web-Responsive-Design-tutorials/Responsive-Design-Fundamentals/104969-2.html

Oh sorry then. I was taught wrong. I was taught that the * is the short cut for html in css. Also I built a site that the header was full width and to make it go all the way in the browser window I had to put in the body tag with the *. This was a few years age. So maybe things changed. I also just went and looked at random sites all of them had * body in the css. Do not get me wrong I want to do things the right way and do not want to give the wrong advice.

I do not understand. I just reed the article and did it not say that she could use sms text massage to verify her identity. I do not see a problem here other then someone trying to get another stupid lawsuit going like the one where the lady spilled coffee on herself and won. So to sum up coffee is hot and read the fine print.

I just wanted to add you probably should put the body tag in your zeroing out css. * body { code here } The reason is the body will put margin on automatically. Sometimes it will not matter and sometimes it will. Especially when doing a full width web site. You will have a little white space on the sides. Putting the body tag in takes care of this.

The best help that I can give you on this is to install firebug in your firefox browser. This will allow you to see the code that they used to do this with.

This might git you started. Just some stuff from my jQuery library folder. I think you should be abel to take this and change it to tip the div with your plane in it. Position Animation with Relative Coordinates One unique trait of position-based jQuery animation is that we can animate an element's x and y coordinates relative to its current location, without having to do calculations on our own. Instead, jQuery allows us to simply use += or -= operators as demonstrated below: $(document).ready(function() { $("#target").animate({ top: "+=100px" }, 1000); }); Isn't this great? The target element will be moved from its original position (let's say 200px) to a new position (300px) on the vertical Y-axis (which top: property is responsible for.) In this scenario this smooth animation will take place over a period of 1 second. Note: when doing relative position animation, we must use double (or single) quotes on the value, otherwise the script will generate an error because these are the rules of the animate method (as mandated by JavaScript identifier names and Object Literal syntax principles). And of course there are some issues with the "px" which is not always necessary. But if you must use "px", the entire value must be wrapped in quotes. Consider the following examples. $(document).ready(function() { $("#target").animate({ top: 100px }, 1000); // Error, no quotes around px $("#target").animate({ top: +=100px }, 1000); // Error, no quotes $("#target").animate({ top: "+=100" }, 1000); // Ok $("#target").animate({ top: "+=100px" }, 1000); // Ok $("#target").animate({ top: "100px" }, 1000); // Ok for double quotes $("#target").animate({ top: '100px' }, 1000); // Ok for single quotes $("#target").animate({ top: 100 }, 1000); // Ok, without quotes if no px or += present }); Animating Position You can animate pretty much any CSS property which makes sense to animate. We are not limited to font size or colors. For example, a popular animation technique is to dynamically move the object around on the screen. This can be achieved by animating it's left: and top: properties. But we also need to ensure that the target's element's position is set to absolute: $(document).ready(function() { $("#target").css({ position: "absolute" }); // Force position: absolute $("#target").animate({ top: "100px", left: "125px" }, 5000); // Slide to 100/125 in 5 seconds });

If you do not have photoshop to make image optimizations try gimp it is free. Also for simple image resizing try photosizer http://www.fotosizer.com/ I like this when I have a lot of photos to resize because you can do more then one at a time or a whole folder.

I am going to suggest you check out the Adobe website there are tutorials that go into this in depth. But here is the short version. For photos use jpeg and images with gradients or transparencies use png. jpeg will give you a smaller file size. This is your goal. In the save for web dialog box start with the guilty ay 80 and then go down to 60 and see what it looks like and move up until there is no pixel distortion. Sometimes 60 is good depending on the colors in the photo. As you make changes in the dialog box look in the bottom left corner and you will see the file size. You goal will be to make the file size as small as posable without loosing img guilty.

First a little fix in your css. You can put px behind but it is better to leave it off when you want to zero something out like margins and padding. the reason is if you put px behind it is only stripping the px. But what about %, em, pt by leaving it at just 0 you make sure that you have it all. Yes I know we do not use pt for web but print, but I have seen it done. * body{ margin: 0; padding:0; } Here is how you center something inside of the body or any container element. body { margin: 0 auto 0 auto; } This is shorthand code. Think of it as a clock the first property value of 0 at 12 = top, 3 = right, 6 = bottom, 9 = left. So the 2 0's are the top and bottom margin thus the 2 autos are left and right. You can even make this shorter body { margin:0 auto; } The 0 is now top and bottom and the auto is left and right. I put both ways because sometimes you you might want the top to be pushed away from an element. Like if you wanted a space from your wrapper if you did not want your site at the top af the browser window.

That works. I put it in my footer and on my localhost no more jumping. I was thinking it has something to do with my code. But I went and looked at my sites in my portfolio and they all do that little jump, although not a prominent as my site. I got the facebook code from the facebook developer page, which I am sure you can tell. Maybe I should try writing my own and see if that changes things then I would know if it was there code if it went away.

Well I fixed all of the grammer. Thanks bunches!!! Also fixed the jumping links. The facebook thing I am at a loss. Tried all kinds of stuff, moving the div inside of the content, adding height and a lot of other stuff. Some day I will figure out what is causing it. I did a lot of fine tuning, like getting rid of the | after the last link. I changed the footer to be inside of the content instead of full width bottom:0 because I am going to add stuff down there. THANK YOU for all of your help even with out asking. You Rock Girl!!

I am not sure with out seeing the html. But you might try this $(".nav_home, .nav_contact, .nav_projects, .nav_about").click(function(){ I think this is the part that controls the banner staying out of site. Although do not trust me on this, I am not all that good with jQuery. I am the guy who looks up code in a library and makes some changes to what I need it to do.

I Googled how to make the nav stay fixed when scrolling the page and came up with a lot of answers but this one is what I believe you are looking for http://stackoverflow.com/questions/6980821/fix-object-to-top-of-browser-window-when-scrolling/6981076#6981076 Hope this helps, if not I did see it somewhere in the jQuery library but do not remember where off hand.

Thank You, I will make the changes right now. I really need to find a good grammer checker. I will look into it tomorrow. I think the jumping on the links is because I have them sit to bold on hover. I will change this also. Again many thanks.

Good eye benjaminmorgan. I catch myself doing that all the time, writing the way I talk instead if proper english. Might even try making the heading, what we have, all small caps and centering it. font-weight: bold; font-variant: small-caps; text-align: center; Just an idea. Also maybe make the body background a little darker. To me it is kinda bright. But remember that is just me. I just noticed that you have a rounded border on the img in the main content. If you make the div holding the img a little bigger, start at 2px and go from there. It will look better for the rounded corners not being cut off from the img. You will probably have to align the img after you make the div bigger but maybe not.

I fixed my dumb doctype mess up. I did not know the site would even work at all with that extra stuff in it and do not know how i did it. I am guessing copying and pasting. I fixed the jumping menu. The problem was that I put a | after the closing li tag on each link. I took it out and added the class to put a border right on the links. The facebook thing I can not figger out. I think it is the javascript. I think the problem that I am seeing on my Mac Book pro might be because of the retina display. Because it is only on my Mac Book and in Chrome. I think I am just going to live with it. All it is is a little darker blue in my divs. I ran my code the the w3c valdator and it looks good except for the php in the footer for the date, <p id="copyRight">© 2008 - <?php echo date("Y") ?> - Midwest Web Design Studio</p> it says that HTML5 does not support it, but it works so I am going to leave it alone for now. By the way I got that line of code from you, Andrea, a few months ago. Thanks I use it a lot. I am done with the site. Thanks

I myself am just learning jQuery. But I just want to point out that the tutorials that I am using all tell me to put the link to the jQuery library first and then the link to the jQuery file that you write.

The general difference between the versions are updates to code hinting, php, spry which is just javascript. There are more but would take a lot to list them all. If you are going out and spending the money for Dream Weaver you will be getting CS6 from the Adobe site. You do not need Dream Weave although. Some free code editors are notepad++, Komodo edit, AptanaStudo3. Notepadd++ is for windows, but the other two have mac versions. There are more out there but these are my three favorites. If you go and get Dream Weaver remember that in the Design view your site will more then likely not look like it will on line. So remember to look at it in a browser. Dream Weaver will generate a lot of code for you. Remember to look at the code as you go to help you learn it. I would suggest split screen view. Also DW does not have anywhere near all the CSS that is out there to build a site. I always suggest to learn code then use something like DW to speed you up. Even though DW writes code for you you still have to have a basic understanding of code to find and fix problems as they pop up, as they will a lot. There will be times when you will want a img inside of a p tag and some times out side. This is just a couple of times when you can not relay on DW for coding. Hope this helps and not made is worse.

I just redid my portfolio site and on the Mac the background gradient looks funny. You can see my div lines, but go away after scrolling. What i meen is the gradient changes shade. This is only on my Mac and only in Chrome on the pc and all of the other browsers it looks fine. My question is has anybody else in-countered this problem and if so is there a fix? http://www.midwestwebdesignstudio.com I am not sure that I should be posting this with my portfolio site, but if not I am sure Andrea will zap me.

It looks good. But in the footer maybe move take out the adress and put this @the year and the name of the store all the way left and on the right put the name of you web design company with it linking to your site. On the font align left. Also put 5 to 7px padding on your img to get the text away from it. On the proof reading, Iam not all that good at it, take out the : from all the like. I think there should be at least 2 paragraphs if not 3, again I am not all that good at writing. As Andrea said take out the dates on the photos. You can do this in photoshop easily. Other than that it is a lot better then my first site. Oh ya almost forgot the adress in the header is kinda blurry.

The paypal site has all the info that you need to sit this up. For scripts that you are looking for the one that I use most is hotscripts.

Is there some kind of code to fix this? My site http://www.freetradingworldwide.com has a Safari problem on the mac but not on the PC. On the PC everything is fine. On the about,boat and some other pages the border does not go all the way to the bottom. Chrome had the same problem on the mac. Although I fixed it in Chrome on the mac by making the content a min-height. The content is the wrapper. It did not fix it in Safari on the mac. I have noticed that it is only not working right when the aside is shorter then the sidebar and on the pages where the aside grows below the side bar it is fine. I am very new to the mac and have no idea what could be causing this.

This is just my personal opinion but I like wordpress. To me it is a lot simpler to use.

The web site http://www.freetradingworldwide.com The problem, Well first everything works fine on my pc in every browser. Now although when I go to my mac book pro, this is what happens. In chrome and safari when you are on a page where there are scroll bars, when you scroll you end up with a gap at the top and bottom. Meaning that the whole pages moves leaving a gray space. I am very new to the Mac, I have only been using it for 3 weeks now and do not know if it is just a Mac thing thing. PS If you go and look at my code it is a wordpress site and I have not gotten rid of all the unnecessary code yet.

Just thought I would sure this, had a friend ask me today how to fix his footer from showing up half way up on the page. To keep the footer at the bottom of the browser window no matter the size of the monitor. You just need to wrap everything in a div and add a little css. This works on any website including templates in WordPress or Joomla. Here is the HTML: <body> <div =id”keepFooterAtBottom”> or what ever you want to call it. <div id=”header”> </header> <div id=”content”> </content> <div id=”sidebar”> if you have one. </sidebar> <div id=”footer”> </footer> </keepFooterAtBottom> </body> Here is the CSS: html, body { margin:0; padding:0; height:100%; } #keepFooterAtBottom{ min-height:100%; position:relative; } #body { padding:10px; padding-bottom:20px; /* Height of the footer */ } #footer { position:fixed; bottom: 0; width:100%; height:20px; /* Height of the footer */ background:#E6F3F9; } Important: The position has to be what is specified for each css rule. Also The padding for the bottom of the body and the height of the footer has to be the same. You can place the css rules through out your css style sheet or you can do what I do and place them at the very bottom. I place them at the bottom and give them a comment /*keeping footer at the bottom css*/ this way I know it will work and nothing in the serendipity will over ride the new rules.