SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Entire layout

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Entire layout

    I want this entire layout to be fitted to 1024 * 768 as well as 1280*800 (present) and reduce gap beween those three icons and menu links could anyone suggest me how can i get those done this are following zip files.
    Attached Files Attached Files

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,492
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    could anyone suggest me how can i get those done
    Hire someone?

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Reducing the top padding on <ul id="menu"> will narrow the gap between it and the three icons above it.

    <div id="left-content"> has a width of 750px; <div id="sidebar"> has a width of 200px, padding-right: 270px. That's a total of 1220px, even without counting padding elsewhere. You need to reduce the overall width to under 1024px if you want it to fit in a 1024px viewport. Remember, you will need to allow a few pixels for the scroll-bar, etc.

    Without wishing to sound rude, these are basic and fairly simple things you should have been able to spot for yourself. I have the impression that you are trying to run before you can walk. If you're new to web design, then you need to start with simple layouts, and once you are comfortable with the basics and understand how CSS works, then move on to more complex designs. There are plenty of places on-line where you can find tutorials, for example:
    http://code.google.com/edu/submissio...ss-javascript/
    http://www.opera.com/company/education/curriculum/
    http://www.htmldog.com/guides/
    http://www.iraqtimeline.com/maxdesign/basicdesign/
    The SitePoint Reference is also helpful.

    As far as this design goes, there are a number of problems with the code, some of which I have already pointed out in your previous thread. Coding errors can cause inconsistencies in the way different browsers display a site. If you are not able to correct these yourself, then I suggest you follow guido2004's advice and hire somebody to do the job for you.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    could you suggest me in making this 1024*768 and 1280 * 800 compatible it will help me a lot buddy technobear the problem in that right side content 20% those boxes display fine in 1024*768 but the boxes behave strange in 1280*300 and get corrected if i code and give 16% can you help me in solving this issue so far this is the coded zip and i am trying my best but you have helped me a lot in this layout and even footer plays up and down and those boxes are to be made flexible four boxes on left side and right i am trying my best to solve this problems but your suggestion would help me a lot for this and future problems as well thank you for being kind so far.
    Attached Files Attached Files

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    I explained to you yesterday that there is no "quick fix" here. If you want your design to work at different viewport sizes, then you really need to plan for that from the beginning. The problem you have now is that you've changed the widths of your main sections to % measurements, but you still have margins, padding etc. set in px. 20% of 1280 is obviously wider than 20% of 1024, so if you use px to position things correctly at one width, they will be misplaced at a different width.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Footer error and boxes and text area flexible

    Hi i want footer to be in straight line and those four boxes to be in equal shape and make it flexible and right panel boxes to be flexible and text area in it to expand flexible but i tried various solutions never seem to worked i have sent you the code which i have kept clean and trying with my logic any suggestions for this would be great never got a solution till i posted this one if i get solution will post this entire first page layout so it may help others.
    Attached Files Attached Files

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    I have merged this post with your previous thread, because it is still the same issue.

    If you want the four boxes to be exactly the same size, then you will need to set a height on .boxcontent.

    Once again, I repeat that there is no easy solution to make this layout flexible.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Boxes i am trying to code but could you suggest how to bring those footer bottom line to same part i have tried everything but both copyright and links does not seem to get in one line.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Put the two items in the correct order in the HTML (i.e. copyright first). Clear <div class="footer_lef"> and add top padding to match <div class ="footer_rig">.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Put the two items in the correct order in the HTML (i.e. copyright first). Clear <div class="footer_lef"> and add top padding to match <div class ="footer_rig">.
    hi thanks for suggestion but it never works when i put it at top in correct order clearing the div as you said i gone through entire code but i am not getting where i am going wrong with the footer and those boxes are need do be done flexible and textarea must expand please could you give suggestion on this one as well

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    hi thanks for suggestion but it never works when i put it at top in correct order clearing the div as you said i gone through entire code but i am not getting where i am going wrong with the footer
    Then please paste here the code that you have used, because it worked just fine when I did it. I would need to see both the HTML and CSS for the footer to see where your mistake is.
    Quote Originally Posted by bhatpajju13 View Post
    and those boxes are need do be done flexible and textarea must expand please could you give suggestion on this one as well
    Yesterday you said you wanted the four boxes the same size. Now you want them flexible? What exactly do you mean by flexible? Which textarea must expand and how?
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    technobear please show me your code i will learn from it i am prematured web designer wandering here and there and doin my task's without help off anyone but you have helped me a lot flexible meaning it should go on expanding when i enter the text same for boxes as well as same for right panel rest all is fine excet those footer and boxes need to be flexible meaning can it be possible to make those equal size and flexible as well one box is bigger i want it to be equal size and display ... for other text which on pulling can be seen.text area as well then my layout is done i have a learned a lot till now with your help really thank you so much this is the following layout zip files please dont get frustated i am panicking one two three layouts under your guidance than i can also help others with you.
    Attached Files Attached Files

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div class = "footer_bot">
         
    			 <p>Copyright @ 2010 RoseInfomedia Technologies Pvt Ltd<p>
    			 
    			 <div class ="footer_rig">
    			   <ul id="menu-bot">
    				<li><a href="RoseInfomedia.html"><span><span>Home</span></span></a></li>
    				<li><a href="Services.html"><span><span>Services</span></span></a></li>
    				<li class="nav3"><a href="Client's.html"><span><span>Client's</span></span></a></li>
    				<li class="nav4"><a href="Aboutus.html"><span><span>About us</span></span></a></li>
    				<li class="nav5"><a href="Contactus.html"><span><span>Contact us</span></span></a></li>
    				</ul>
    			  </div>
    			   
    			   
    			
    			  
    		 </div><!----footer_bot--->
    Code:
    .footer_bot{width:100%;}
    .footer_bot p{float:left;font-size:15px;width:50%;padding-right:300px;padding-top:60px;}
    .footer_rig{float:right;font-size:15px;width:50%;padding-left:2%;}
    .footer_rig li {float:left;padding-left:15px;padding-right:30px;border-right:1px dashed #999;}
    .footer_rig a {font-size:15px;color:#f90;text-decoration:none;cursor:pointer}
    Last edited by TechnoBear; Oct 9, 2012 at 04:44. Reason: Replaced quote tags with code tags

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,057
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    flexible meaning it should go on expanding when i enter the text same for boxes as well as same for right panel rest all is fine excet those footer and boxes need to be flexible meaning can it be possible to make those equal size and flexible as well one box is bigger i want it to be equal size and display ... for other text which on pulling can be seen.text area as well then my layout is done
    The textarea will produce a scroll-bar to allow you to enter as much text as required. That is standard behaviour.

    If you don't set a size on a container, then generally speaking, it should expand with the contents. If you want your four boxes to start off with the same size but still be able to expand, then set a min-height instead of a fixed height.

    The reason your footer still doesn't work is that you have not done as I suggested in post #9. Go back and read the instructions again, then follow them carefully.

    Quote Originally Posted by bhatpajju13 View Post
    technobear please show me your code i will learn from it i am prematured web designer wandering here and there and doin my task's without help off anyone but you have helped me a lot ... i have a learned a lot till now with your help really thank you so much this is the following layout zip files please dont get frustated i am panicking one two three layouts under your guidance than i can also help others with you.
    I'm glad I've been able to help you, but really you are just confirming here what we've been saying all along - that you are really not ready to be doing work like this. You don't have a sufficient understanding of HTML and CSS. The best help I can give you is to recommend again that you use the tutorial links I have given you to start learning properly. I'm really not teaching you anything here, except how to patch up a few parts of a very poorly coded site.

    You are now suggesting that I should help you with two or three more layouts, and then you think you'll be able to manage by yourself. I'm sorry, but that is a very cheeky suggestion. You are being paid to do a job in web design. If you are unable to do that job, then you need to be honest with your boss and say so. It is not fair to him to pretend you are capable of the work, nor is it fair to other people who are capable of the work and who would be grateful for the job. To ask for your work to be done for you, free of charge, by forum volunteers is unacceptable.

    We have given you a good deal of help, and pointed you to suitable resources where you can find more. Please now take the time to do some proper learning, and do not post a request for more help until you can demonstrate that you have made a real effort of your own. I am closing this thread, as I think it has gone far enough.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •