Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A couple simple HTML & CSS Questions.

    Hello,

    Just wondering a few things:

    1. I am creating my first ever website, It's going to have products on it and I just noticed I'm going to need like 100+ .html files for each product to have it's page is there a more efficient way to do this?

    2. I'm ..kind of getting there with CSS but I am still having a lot of trouble positioning things just as I want them and having things do what I want them to do. HTML & CSS seem very straight forward why
    is there no tool like say MS Paint to make websites, or is there? What I mean by this is I would love to be able to just draw my website in a application like MS Paint and have it spit out the HTML & CSS is
    there not anything like this? I mean dead simple like MS Paint.

    Thanks.

  • #2
    New Coder
    Join Date
    Dec 2013
    Posts
    14
    Thanks
    1
    Thanked 1 Time in 1 Post
    Dreamweaver, or adobe muse are both wysiwyg (what you see is what you get) editors. The problem with such editors is they produce very messy code making mainainance and updates much more difficult than is nessassary. I would suggest learning to hand code to prevent such issues. Have you thought about having multiple products on each page? If not I would suggest setting up a database containing the products and supporting information and calling up each item on the server. But as it's your first ever page that maybe too much work.

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well the way I have it planned out is. Along the top will be a Navigation bar with 5 Buttons (Menu 1 - 5) each will be a different category of product so for example Menu1 will be Diving Torches & Menu2 will be Mining Torches and so on. When you click on one of the top 5 Menu's lets say Mining Torches (Menu2) the Left Side bar Menu should update to say 10-20 Links related to Mining Torches and when you click on one of those links the main body in the middle will update to display product information but nothing else will change.

    So the only way I know to do this is to create a new HTML file for each sub-menu item and just copy & paste the HTML & CSS from the original page and just update the information displayed in that page but in the end this means I'll end up with 100+ HTML files for each item.

    Does that sound extremely inefficient or is that pretty normal? If it is I don't mind doing it.
    I would be happy to try and set up a database I just have no idea where to start could you provide me with any links to a guide teaching me how? I'm not even sure what to google.

  • #4
    New Coder
    Join Date
    Nov 2011
    Location
    ON, Canada
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    You need javascript to toggle display between "none" and "block|inline-block|etc..." If you haven't used javascript before then honestly this would be the perfect opportunity to learn because the difficulty level of the javascript needed to toggle display is very low. If you are familiar then perfect! Or JQuery can do exactly the same, but the point is you will need something other than HTML and CSS to make this work.

    I'm not sure if your design idea is the best approach, but I'll give you a little blurb anyway about how to go about this:

    Create one really big HTML file (The people accessing this page will have to wait for such a big file all at once but we can worry about optimizing client experience later)
    In that big HTML file, type everything you want your site default home page to be.

    Then make one <div> for EVERY menu page you wish to be able to display. Give each one a unique ID. Doesn't matter what your naming convention is as long as each one is unique.
    I personally would do something like
    Code:
    <div id="menu1-1"></div>
    <div id="menu1-2"></div>
    ...
    <div id="menu5-20"></div>
    So basically you will have one div for every menu item. Whatever you want to be displayed for a menu choice will go inside those divs.

    in each menu item in your menubar you need to add an "onclick" attribute and set it to run a javascript function which makes all menu divs set to "display: none;" except for the one which was clicked.
    You could make your javascript function take a parameter which is the id of the div to display:

    Code:
    <li onclick='foo_sauce("menu1-1");'>Show Diving Torches</li>
    <li onclick='foo_sauce("menu1-2");'>Show Mining Torches</li>
    ...
    <li onclick='foo_sauce("menu5-20");'>Show SomeOther Torches</li>
    All this is really doing is placing those 100 divs all in the same spot, but making all of them hidden except for one, and then you control which one is visible with the menu by coding it such that each menu will tell the javascript function which one to make visible.

    -----

    If you are having trouble with positioning, just remember that there are two types of elements in html in regards to positioning: block and inline. Inline elements don't mind sitting beside another element, but block elements INSIST that they have nothing else beside them, even if there's more than enough room to fit. There are very few ways to get around this stubborn behaviour of block elements. Use "float: left" or "display: inline-block" if you would like a block element to have things beside it.

    Hope that helps!
    Last edited by AGENT_P6; 05-05-2014 at 02:17 AM.
    sudo chmod / 000ps!

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Please DONT create a separate page for each product. That's what databases are for. Using a server side language such as ColdFusion, php, or asp.net, you can create ONE single page to display as many products as you could ever have.

    Databases also make product maintenance so much easier. What happens when you need to add another 100 products to your site? What happens when you have a price increase across the board for all products. Without a database, these processes could take hours, even days to accomplish. With a database, this can be done in a matter of minutes.

    You can layout websites with photoshop, or it's free equivalent, GIMP, but if you're planning on doing this as more than just a fad or hobby, I suggest you learn some basic of HTML/CSS. It snot really that hard to layout a simple page.
    Last edited by teedoff; 05-05-2014 at 02:58 PM.
    Teed

  • #6
    New to the CF scene
    Join Date
    May 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys, I have decided to scrap everything and start from scratch as it's clear I've been going about this the wrong way. I don't really have any deadline as this is more of a side project so no harm done. All a learning experience after all.

    I don't really even have experience in HTML & CSS let alone anything else but I will try and learn these things so thanks for telling me about them and a bit about how they work/will help me.

    Also thanks AGENT_P6 for all of that but especially the part at the end about positioning. I didn't know that stuff and that will definitely help me out, much appreciated!

    Hope you all have a good day.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    There are a number of open source PHP scripts available for example see PHP E-Commerce Shopping Cart Scripts - Open source, free and commercial PHP scripts
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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