Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
Like Tree2Likes

Thread: Help with HTML/CSS structure of onepage

  1. #1
    Junior Member
    Join Date
    Apr 2016
    Posts
    9
    Member #
    53934

    Help with HTML/CSS structure of onepage

    Hi to all.I have a little problem with my onepage design.I tried to do html/css form of web design like this https://snag.gy/hytuNC but its no use .My main problem is how to do HTML structure from header(logo and menu positions),below picture a green part with text,and shop content is the hardest.How to set 6 products like in design(i want to have 3 separate parts of one products(text,pic. of product and a little shop circle-how to set in right place) and finaly part below shop,with 2 pics and 2 rectangle(i want to be linked).I tried but i cant figure out what i need to do.Pls can someone help me.
    Last edited by NemanjaWP; Apr 23rd, 2016 at 03:51 AM.

  2.  

  3. #2
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    It might be helpful to show us what you've done so far and highlight specific areas that are causing you problems.

  4. #3
    Senior Member
    Join Date
    Feb 2006
    Posts
    800
    Member #
    12463
    Liked
    298 times
    khenney is right. It is hard to tell what your problems are with out seeing what you have tried. What are your skill levels in HTML/CSS? Are you up to date with HTML5/CSS3?

    You might even want to break this down into individual sections. Why don't you post your code for the header section first.

  5. #4
    Junior Member
    Join Date
    Apr 2016
    Posts
    9
    Member #
    53934
    My main problem is how to set shop just like in this picture https://snag.gy/fTdvej.jpg .And section below shop( how to set elements in a right place just like in this picture https://snag.gy/mStL9H.jpg .

    for shop section i tried this code:
    https://jsfiddle.net/qr40s5nc/

    and for section below shop :

    https://jsfiddle.net/3pkm9934/

  6. #5
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    Ok, so focusing on the shop section:
    I'd suggest using classes for elements that you're going to reuse, so having Product1, Product2, etc as the only class on each product box isn't helpful. Use a generic class like "product", then give each one a unique ID if you need to style them individually. Since you're going for a two column layout, I'd also add a class of odd or even to each one so you can apply styles to align each column.

    I made those changes to the classes on the product boxes and floated the odd boxes left and the evens right. I also added a clearfix class for the #shop div so that it contains the floated product boxes: https://jsfiddle.net/ux3wey3p/1/

    There's a lot more formatting to do to get it looking exactly like your mockup, but that should get you on the right track.
    NemanjaWP likes this.

  7. #6
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    On the footer, I think you're confusing absolute and relative positioning. You'd probably want the text to be positioned relatively and the images at the top and bottom positioned absolutely, and you were doing the opposite. Just quickly adding correct positioning to your images got me to here: https://jsfiddle.net/2nw4rjg7/1/

    Hopefully you can refine that to your specific needs - those probably aren't the precise sizes and positions you need, but it should get you on the right track.
    NemanjaWP likes this.

  8. #7
    Junior Member
    Join Date
    Apr 2016
    Posts
    9
    Member #
    53934
    I solved a problem thx.I have one more question.How to change header color after scrolling.I tried but wont work https://jsfiddle.net/rttpo6sj/ i want header like this https://razorfrog.com/ i mean the concept.

  9. #8
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    Are you trying to use jQuery? If so, you have to load the jQuery library first.

    jsfiddle might be a poor choice for debugging this since the results window doesn't scroll and the effect you're trying to achieve relies on scrolling.

  10. #9
    Junior Member
    Join Date
    Apr 2016
    Posts
    9
    Member #
    53934
    I google it,and i saw it that for change the header color(at first i want to be transparent-but after scrolling to change to white) scrolling i need to use a jQuery.I use a Brackets text editor.But nowhere i cant find how to use a jQuery for header section.

  11. #10
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    The javascript you had in the jsfiddle page was jQuery, but you weren't loading the jQuery library.

    The easiest way to do that would be to include this in the HEAD of your html page, before the other javascript your using to change the header color:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    That will load the library from Google's servers (you can change the version number in the URL if you find out you need another version).


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com