Grow your CSS skills. Land your dream job.

Site mockup – Tips & Tricks plz?

  • # December 7, 2008 at 10:03 am

    Well this is my first post here so I would like to say hello fellow forumers ;)

    Well this is my first webpage layout and I am atm figuring out how I would use this combined with HTML/CSS ;( I am going for a manga page but in spanish "MangaenLinea"=MangaOnline so I am aiming for a onemanga type of page. I would love if any of you killersite forumers could help me here and there… not "spoon feed" but your insight will help me complete my project

    [img]http://i172.photobucket.com/albums/w8/HollowVoyd/mangaenlinealayout.png[/img]

    Questions:

    1. How would I be able to display the Most viewed manga (manga mas visitado) I am guessing its with javascript. Same with Actualizaciones recientes (Recent Updates)

    2. General tips on how to implement this layout to my html. I would guess it would be slicing & using div classes for each "part".

    3.How do you know how to position a div in your container???Like does dreamweaver give me a tool that I point at a certain spot and it tells me px’s em’s…etc. Or do I need like a math formula…or just trial and error ?!?

    Yes I am a total noob (well maybe not 100% but close to it ;D) I do have ALOT more questions but I will save them for when I know a little more about what I am doing

    THX for your help
    ~Voyd :D

    # December 7, 2008 at 5:39 pm

    I’d probably divide it up like this (there might be other/better ways of doing this, but here’s one example):

    [img]http://i112.photobucket.com/albums/n195/s17ence/mangaenlinealayout.jpg[/img]

    *Right click and save the image to your computer for to see the entire thing.

    You could start slicing up the images and little snippets of the background in order to have the columns and content areas expand as they fill up.

    Try watching the screencasts provided on this site for some helpful hints.

    Rob
    # December 7, 2008 at 6:15 pm

    Hi :) this is how I would slice it up.

    http://www.svgonline.co.uk/slice.png

    Remember too many DIVs isnt always good :) UL (unordered list) H1 and other Block element tags can be styled like divs.

    You can actually use the <body> and <html> as your wrapping containers, although IE7 isnt too keen on that, hence the container…

    Also I would look into a WordPress powered site – if you develop your site into a wordpress tempate all your questions above can be done easily.

    You can find a walk through of how to develop a theme here:

    http://css-tricks.com/video-screencasts … -part-one/

    3 parts, the other parts link off that page.

    Enjoy! :)

    # December 7, 2008 at 6:47 pm

    I was going to mention that you did not need a separate div for navigation also :D

    And I forgot a footer.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".