www.webdeveloper.com
Results 1 to 15 of 15

Thread: Any One can Help - Responsive Website Design

  1. #1
    Join Date
    Dec 2013
    Posts
    7

    Any One can Help - Responsive Website Design

    I had created my website as I know core PHP and advanced, but website developed in core, as i had used normal html5, CSS, PHP. But when the browser shortens everything mismatch, so please suggest any solution.

  2. #2
    Join Date
    Jul 2013
    Posts
    351
    Huh????

  3. #3
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,926
    Sounds more like a client-side issue (HTML, CSS, JavaScript) than a PHP issue?
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  4. #4
    Join Date
    Dec 2013
    Posts
    7
    Yaa It is client side issue, basically CSS, I am using external css, created different div but more div coding used in same height and width, while shorting the browser, the div's merge into one another, there is solution that someone told me about responsive template, like to set position:relative, Position:absolute, top:0, left:0, ... but how to make use of then if have any example and code provide.. as I know core php, and advanced php, but developing project in core php.

  5. #5
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,926
    In which case I'm going to move this to the CSS forum.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  6. #6
    Join Date
    Dec 2013
    Location
    Bangalore
    Posts
    2
    Can you please elaborate the problem? Sharing URL will do great

  7. #7
    Join Date
    Dec 2013
    Posts
    7

    Here is prob.. with snaps and coding...

    <body style="background-color:#FF9;">
    <div style="width:100%; height:100%;">


    <div id = "content">
    </div>
    <div style="background-color:#0F0;
    margin-left:100px;
    margin-right:100px;
    height:40px; margin-top:100px; border-radius:50px 50px 50px 50px; box-shadow:10px 10px 10px 10px #303;">
    <ul style="float:left;
    height:2px;
    margin-top:10px; width:100%; list-style:none;">
    <li style="float:left;
    width:20%;"><a href="index.php?link=home" style="text-decoration:none;">IBSEOTECH</a></li>
    <li style="float:left;
    width:20%;"><a href="services.php?link=services" style="text-decoration:none;">SERVICES</a></li>
    <li style="float:left;
    width:20%;"><a href="blog.php?link=blog" style="text-decoration:none;">BLOG</a></li>
    <li style="float:left;
    width:20%;"><a href="seo.php?link=seo" style="text-decoration:none;">LEARN SEO</a></li>
    <li style="float:left;
    width:20%;"><a href="contact.php?link=contact" style="text-decoration:none;">CONTACT US</a></li>
    </ul>
    </div>

    <div style="margin-top:50px; height:50px; width:200px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">

    <p style="text-align:center; height:50px;"><strong>SEARCH ENGINE OPTIMIZATION</strong></p>
    </div>
    <div style="margin-top:60px; height:50px; width:200px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
    <p style="text-align:center;"><strong>PAY PER CLICK</strong></p>
    </div>

    <div style="height:50px; width:200px; margin-top:-175px; margin-left:550px; box-shadow:10px 10px 10px 10px #303; border-radius:50px 50px 50px 50px">
    <p style="text-align:center;"><strong>SOCIAL MEDIA OPTIMIZATION</strong></p>

    </div>
    <div style="height:50px; width:200px; margin-top:-50px; float:right; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
    <p style="text-align:center;"><strong>ATTRIBUTION</strong></p>
    </div>

    <div style="height:50px; width:200px; margin-top:50px; float:right; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
    <p style="text-align:center;"><strong>EMAIL MARKETING</strong></p>
    </div>
    <div style="margin-left:520px; margin-top:20px;">

    <video width="250" height="100" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
    </div>
    </div>
    <div style="margin-top:-300px; text-align:center; height:50px; width:150px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
    <p><strong>WEB DESIGN</strong></p>

    </div>
    <div style="text-align:center; margin-top:-60px; height:60px; width:150px; margin-left:550px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
    <p><strong>WEB DEVELOPMENT</strong></p>

    </div>
    <div style="text-align:center; margin-top:-70px; height:60px; width:150px; margin-left:150px; float:right; margin-right:200px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
    <p><strong>INFOGRAPHIC</strong></p>

    </div>

    </div>











    Snaps...
    ibseo.jpeg


    This is simple ..


    Here is when browser shortens...
    ibs.jpg



    No doubt it is design problem as I need to over come this problem, need help from some experience one, as I ma using different div but they overlap each other when browser shortens, explanation require in as simple steps....

  8. #8
    Join Date
    Jul 2013
    Posts
    351
    Absolutely horrible coding style. Learn ot use css properly. Learn to post here properly.

  9. #9
    Join Date
    Dec 2013
    Posts
    7
    How may I manage it.. would any one direct for the same page...

  10. #10
    Join Date
    Jul 2013
    Posts
    351
    Is that a question?

  11. #11
    Join Date
    Dec 2013
    Posts
    7
    Quote Originally Posted by ginerjm View Post
    Is that a question?

    Help in this matter as it is request .. because in the code I had used the inline css, same I need through Internal css in head section, if help me I am very thankful for you..

  12. #12
    Join Date
    Jul 2013
    Posts
    351
    ok - could you simply ask a question that we (I) can understand? I have no idea what you want to do. Perhaps if you cleaned your code (move the css into a style section instead) you might be able to see the forest thru the trees.

  13. #13
    Join Date
    Dec 2013
    Posts
    7
    Quote Originally Posted by ginerjm View Post
    ok - could you simply ask a question that we (I) can understand? I have no idea what you want to do. Perhaps if you cleaned your code (move the css into a style section instead) you might be able to see the forest thru the trees.



    I have different div,, like ..
    <div>

    <p><strong>SEARCH ENGINE OPTIMIZATION</strong></p>
    </div>
    <div>
    <p><strong>PAY PER CLICK</strong></p>
    </div>

    <div>
    <p><strong>SOCIAL MEDIA OPTIMIZATION</strong></p>

    </div>
    <div>
    <p><strong>ATTRIBUTION</strong></p>
    </div>



    But I need to adjust all these in same rows and colums one after another, like -
    SEARCH ENGINE OPTIMIZATION PAY PER CLICK SOCIAL MEDIA OPTIMIZATION ATTRIBUTION


    For that I have to put internal css, but putting internal css no doubt they come in menu... but when shorting browser they overlap each other, so I need they adjusted themselves if browser shortns....for that css property position: is used but i dont understand how to use it....

    So would it possible to provide the internal css coding......
    for the mentioned div so they inherit overlap...Thankx

  14. #14
    Join Date
    Jul 2013
    Posts
    351
    Why use divs?

    Define "shorting browser" and "internal css" please. I don't know what you mean

  15. #15
    Join Date
    Dec 2013
    Posts
    7
    Quote Originally Posted by ginerjm View Post
    Why use divs?

    Define "shorting browser" and "internal css" please. I don't know what you mean
    Only I need a simple page to design.. would you help me..if them plz share code having...
    following elements..

    Home Services News Contact

    When Click to home..
    Home
    Image - floating(changing)
    then text appear in seperate blocks - 4 blocks in same live

    line
    copy right....
    Thanks if you provide code regarding this.. page...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles