Announcement

Collapse
No announcement yet.

how can I format this page with HTML and CSS?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • how can I format this page with HTML and CSS?

    What code should I use in order to make it look exactly like this design.


  • #2
    Originally posted by llina220 View Post
    What code should I use in order to make it look exactly like this design.
    Do you have any experience making pages with HTML/CSS?

    Basically, you'll have to make a <div> for each of those "divisions," setting its respective dimensions, margins, padding, etc., then adding the content using HTML <div>HERE</div>.

    But, your question reads as though you want someone to just post all the code you need to render this whole thing, and I doubt you'll get that, here or anywhere.
    I'd rather be killed than come to your party, but if you don't invite me, I'll kill myself.

    Comment


    • kemingMatters
      kemingMatters commented
      Editing a comment
      <img src='LocationOf/YourImage' />

      That'd render an exact copy of that whole thing, it's definitely not the way I'd suggest going about it, but it'd look exactly like what's shown...

    • llina220
      llina220 commented
      Editing a comment
      Thanks. Yes I have basic knowledge in HTML and CSS, I was just wondering what's the easiest and most organised way to format a page with lots of images in them.

    • llina220
      llina220 commented
      Editing a comment
      Keming Matters,,

      that's actually a great idea. except that I want each individual image to open to a different page.

  • #3
    Your question is so broad that it's not possible to answer well in anything less than a book. So if you really want to know how to build web pages, find that book, read through it and practice what you've read.

    Comment


    • llina220
      llina220 commented
      Editing a comment
      I know basic HTML and CSS.. What I meant by my question is if I have a lot of images layed out this way, in differen sizes, what code to use to style it?

      Should I first make the images into <ul> then adjust the sizes and padding in CSS
      or is there a quicker way?

      Thanks a lot

    • EC
      EC commented
      Editing a comment
      Thanks for the clarification. So honestly, what I'd do is use WordPress and a good responsive layout builder plugin where you can drag and drop the columns to create the layout. OOps I meant to respond to your comment below.

  • #4
    I really hope you're not asking for people to provide you with code for an entire web page, or planning to copy somebody else's design for that matter. Perhaps you want to rethink your question?
    You can fool some of the people all the time, and those are the ones you want to concentrate on. --GWB

    Comment


    • llina220
      llina220 commented
      Editing a comment
      That's my own design in Illustrator, I have also coded some pages previously using HTML/ CSS . but my question is what code should I use to format a page that has a lot of images? only divs? or can it be used with multi column

    • EC
      EC commented
      Editing a comment
      See above. I've not used it but Beaver Builder seems popular now, I use Divi personally -- I could build this layout in maybe one hour with that. It's important to know CSS & HTML but there's just so many great tools available now that make your life exponentially easier - I'm no hero, I use them.

  • #5
    It's all pretty simple, but the bottom part is obviously blog content pulled dynamically from a database. If you're looking for copy/paste solution you're going to be missing a large portion of the intended functionality of the site. Unless you happen to know PHP (which I doubt since you don't know basic CSS).
    "I used to wonder what friendship could be, Until you all shared its magic with me." - Jesus Christ

    Comment


    • #6
      Agreed with EC. The quickest and easiest way you're going to build this site is using a CMS like Wordpress based on your level of experience with CSS and HTML (which appears to be very basic).

      Avada is another Wordpress theme that could build this. I've not used Divi as previously suggested but I can vouch for the support, reliability and flexibility of Avada.

      Comment


      • llina220
        llina220 commented
        Editing a comment
        Thank you!

    Search

    Collapse

    Sponsor

    Collapse

    Incredible Stock

    Latest Topics

    Collapse

    • mixlikes
      Reply to How they did the drawings like this?
      mixlikes
      For perfect drawing, you need to learn photoshop so that you can give a nice texture to an image. There are lots of tools to edit an image that can be used for many purposes....
      Today, 02:27 AM
    • hank_scorpio
      Reply to I apparently "need" to get a new laptop.
      hank_scorpio
      Don't have the new mac book pro.

      What type of software are you using? Is it specific for the Mac? What type of work are you doing?

      Do you really need a Mac? You can put together...
      Today, 12:59 AM
    • Magical Unicorn
      I apparently "need" to get a new laptop.
      Magical Unicorn
      The laptop I'm writing this post on is *calculating in head* going on 7 years old. It's a well loved 13" white MacBook from when I started high school in 2010. I've vehemently stated that I don't...
      Yesterday, 11:38 PM
    • B
      Reply to Please review my -responsive design- website
      B
      As for content, an obvious addition would be the inclusion of several good before-and-after samples of audio that you've cleaned up.
      Yesterday, 06:54 PM
    • RMo
      Reply to Please review my -responsive design- website
      RMo
      Hey,

      some quick things:
      • your page is just a tiny bit too wide. There is a scrollbar at the bottom. That shouldn't be there
      • add a favicon
      • there is a massive amount of space after loading
      ...
      Yesterday, 03:18 PM
    GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
    Working...
    X