Jump to content

newseed

Members
  • Posts

    501
  • Joined

  • Last visited

Everything posted by newseed

  1. Click on your user name located at the upper right of the page. Select My Profile. Once on the next page you will see the default profile image on the far left. Just hover over that image and you will see a small button appear called "Change".
  2. As with any design, it's best to keep it a simple as possible especially for mobile devices. The more you try to do things visually the more complicated it becomes.
  3. text-align: center or justify is not good practice when it comes to reading content. Aligning text to be left is practical and easier for users to read.
  4. I think you are over using your media queries. You should not have to use width or max-width but instead just min-width. You also do not have to use height of any kind. The first thing is setting up your site to appear correctly for 320px which would be your standard css and then you use media queries for higher screen pixels. Naturally, the media queries stuff should come after the standard css. All your standard css should satisfy how it looks for Iphone. Then you set media queries for all other smartphones, then tablets and then desktop. So for Iphone you would set the design to fit 320px width which is portrait view. Now the media queries: @media (min-width: 360px) { } /*this will satisfy all smartphones that have min resolution of 360px (mostly portrait)*/ @media (min-width: 480px) { } /*this will satisfy all smartphones that have min resolution of 480px (mostly landscape)*/ @media (min-width: 550px) { } /*this will satisfy Iphones in landscape view that have min resolution of 550px)*/ **note: Iphones differ in screen sizes and so the above media query is used to satisfy the landscape view @media (min-width: 640px) { } /*this will satisfy most tablets that have min resolution of 640px (mostly portrait)*/ @media (min-width: 768px) { } /*this will satisfy most tablets that have min resolution of 768px (mostly landscape)*/ @media (min-width: 992px) { } /*this will satisfy most tablets that have min resolution of 992px (mostly landscape) and some desktops/laptops*/ You can keep add more but as you can see that the smaller resolution should be listed first on up the desktop resolution. This should take care of almost all devices. However, you may find that one device is just not quite right because it has a different resolution. Let's say that one phone resolution is 400px by 800px. You would add the smaller size first in between the two media queries like this: @media (min-width: 360px) { } /*this will satisfy all smartphones that have min resolution of 360px (mostly portrait)*/ @media (min-width: 400px) { } /*special for a device using 400px*/ @media (min-width: 480px) { } /*this will satisfy all smartphones that have min resolution of 480px (mostly landscape)*/ And for the 800px (landscape): @media (min-width: 768px) { } /*this will satisfy most tablets that have min resolution of 768px (mostly landscape)*/ @media (min-width: 800px) { } /*special for a device using 800px*/ @media (min-width: 992px) { } /*this will satisfy most tablets that have min resolution of 992px (mostly landscape) and some desktops/laptops*/ There are other methods in practicing media queries but I find using the above works best for me. Whatever you use, just remember to start at the smallest resolution and work your way up to the largest. Finally, the example you've provided from that site is gearing towards apple devices only. You can no longer ignore the Android market.
  5. Yes...find the div that wraps the 'Review' and use display: none;
  6. You can simple get rid of the scroll bar but you will need to hit every instances of fixed height and some position absolute to allow the browser to scroll the page. This will take some time. You best bet is to install Firebug for Firefox and then use it to find the html and css that requires editing. Tip: make a backup copy of your existing template and css for safe keeping. At times people would make changes only to make a mess of things.
  7. It's not much to go on. The issue you are having are typically handled by adjusting the css/html. The border can be removed via css. The 'Review' box can be hidden by editing the html code.
  8. You can use css media queries which is what you already have listed in your css code (see red) you've posted. Here's your code again with the added font size for the h3 tag listed in bold below. @media only screen and (max-width: 1024px) { .heading-and-icon [class^=icon-], .heading-and-icon [class*= icon-] { font-size: 55px; margin-right: 10px; vertical-align: -12px; width: 35px; } .heading-and-icon img{ float:left; margin-right:1px; width: 40px; height: 40px; } .heading-and-icon h3 { padding-top:5px; display:inline-block; *display:inline; *zoom: 1; padding-left:10px; font-size: 40px; }}
  9. The easiest way is to upload the movie to YouTube or Vimeo. Once uploaded you can then get a iframe code for that video and add it to your html. That's all there is too it.
  10. You can use tables for tabular data. However, if you must use div then see this example: http://jsfiddle.net/gionaf/A2M22/
  11. Look into using a Wordpress Framework: http://blog.templatemonster.com/2012/04/13/five-best-wordpress-frameworks/ Keep in mind that they are just frameworks and so you still need to either build a theme or buy one at any of the theme sites. In some cases free themes will work with certain frameworks.
  12. No matter what you choose you are going to have to make some effort to either learn about the template or make your own. Either way it's going to take some time. My suggestion would be to use Wordpress and search for WP related themes but if you want one of those commercial themes then you will have to get them from the seller's site. Some are very robust while others are plain. In most cases a good theme will allow you to make simple changes via the WP admin such as header image, logo, etc. Whatever you do you are going to roll up your sleeves and dig in to the codes if you want to customize a theme to your likings.
  13. If you are going to build a site that is going to fit any size screen then you need to avoid anything with px. Use percentages instead. Keep in mind that creating something like this can be time consuming but the main thing you have to remember that you want the layout to flow as naturally as possible. Don't use position: absolute for your layout structure.
  14. You will need to add some php to make that work. Do you know php? If not then I suggest get some basic before you attempt to add the logic. Basically, you tell php a condition that if it's the home page then show this image otherwise show different image. This is a question you should post in the php forum
  15. Add a class to the p tag and then define a hover for it. The css would be something like this: p.target:hover a { background-color: yellow }
  16. 1. Additional edits made by alternate or different developer other than the original 2. New scripts/plugins added such as slideshows, scrollers, popups, etc that has it's own css. 3. Added css for specific pages but had no clue how to set them to render only the specified css for each specific page using php or asp. Having 2-3 css is really no big deal but I have seen sites that have14-20 css files and I really think that's an overkill and it requires the server to make 14-20 http request verses 2-3 which would make a small difference in download speed.
  17. The display: block is not listed in the css you've provide but it's elsewhere in your css file. However, you have since changed the html from unordered list to using divs. Unnecessary. Also you ought to use unordered list for the top menu as well. Never the less, if you feel comfortable with what you have now and that it now works in Chrome then I'd say keep moving forward.
  18. The only thing I can see is set the display:block to be display:inline-block
  19. It doesn't tell me too much about why it doesn't launch. What OS? Did you install this with anti-virus turned off? Normally it should install with it turned on but it's possible that the anti-virus is preventing it from launching. Check your anti-virus software to see if can configure so that it allows EW4 to launch. I think the first thing you should do is to see if your Windows is up to date with all security, patches and updates via Windows Update. There is a fix for this very issue. If you are up to date and it still doesn't launch I would then check the anti-virus software. Also, have you tried rebooting? Sometimes the installer file is still running causing it to not open EW4. You can check via Task Manager to see if you can find any instance of the installer running. Also, did you totally uninstall EW4 via using Uninstall from the Control Panel before you tried to install it a second time? If that fails then you can try this: EW Crashes
  20. There a number of good free web editor tools but you want one that meets today's standard. Some people use Notepad...others Dreamweaver (costly). It's a matter of preference. If found using Expression Web 4 (EW4) does just about everything I need and it's free. Expression Web 4 Regardless what tool you use, WYSIWYG do not always give you optimal results which is why it's very important to learn and understand HTML and CSS. I use EW4 because of the user interface. I never use the WYSIWYG editor to design a site/page and I always use IE, Firefox, Chrome and Safari for test each page. If you find that building websites uses up too much of your time then you might want to hire a web developer to build it for you. But if time is what you have then learn HTML/CSS. I hope this helps.
  21. You going to be in for a real nightmare because you are using tables for one. Some of your cells/tables have valign of middle which is not going to work well and you set your background image to be aligned to the bottom. For long pages and short pages it will work not unless you set a fixed height. Even if you have a fixed height, tables will not stay that way unless ALL your pages are of the same amount of content. BAD practice. Second, you should be using divs for you layout and let it flow naturally. I would break up that background image into two separate images. One for the header area and the other for the body area. For pages that have different backgrounds (different diamonds on the left) you will just need to replace that but it must be contained within that table area below the header area. I really don't see a quick fixed other than what I mentioned. CSS can do so much more than what you have so far and I would rebuild it so that you can get the most out of using CSS.
  22. This should help: http://www.w3schools.com/cssref/pr_text_direction.asp
  23. Is this promo thing a plugin? If so, check to see if the plugin has a settings/options that may allow you to adjust this. When I see empty paragraph tags like this: <div class="avia-promocontent"> <p></p> <div style="font-size: 18px; color: #07bfd7; padding-top: 3px;">Contact us for a complimentary consultation to see how we can assist you.</div> <p></p> </div> ...it tells me that it was inserted using WP's editor or maybe a plugin's editor. I would look for that. For the WP editor it usually has a 2 tabs and choosing the View Text tabs will show the html code.
×
×
  • Create New...