Imitating a website-VBForums
Results 1 to 10 of 10

Thread: Imitating a website

  1. #1

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Candon City, Ilocos Sur, Phils.
    Posts
    10,816

    Arrow Imitating a website

    I stumbled into this site, it really looks simple and I want to imitate it but I am not knowledgeable enough with website design so I am asking for your help guys. Perhaps my 1st question is: regarding the underline, is that a HR? How do I place it in a margin?

    Thanks for any help with my stupid questions. Just want to explore things.

    I've got this starting code in case you are interested:
    Code:
    <html>
    <head>
    	<title>testing</title>
    </head>
    
    <body>
    	<p style="font-family:verdana;font-size:4em;margin: 1cm 1cm 1cm 1cm; ">this is my name</p>
    	<hr />	
    </body>
    </html>
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  2. #2
    Randalf the Red honeybee's Avatar
    Join Date
    Jun 2000
    Location
    off others' brains
    Posts
    4,334

    Re: Imitating a website

    You are off to a great start!

    Seriously, first question is why do you want to imitate another site.

    Second is you can save the page as Complete HTML and then open it to find what styles and tags it uses. Then use the same to design your own page.

    Beware, the site design could be copyrighted!

    .
    I am not a complete idiot. Some parts are still missing.
    Check out the rtf-help tutorial
    General VB Faq Thread
    Change is the only constant thing. I have not changed my signature in a long while and now it has started to stink!
    Get more power for your floppy disks. ; View honeybee's Elite Club:
    Use meaningfull thread titles. And add "[Resolved]" in the thread title when you have got a satisfactory response.
    And if that response was mine, please think about giving me a rep. I like to collect them!

  3. #3
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,102

    Re: Imitating a website

    Quote Originally Posted by dee-u View Post
    place it in a margin?
    What margin? I don't see any margin in that code.

    stupid questions. Just want to explore things.
    Don't worry! The world is built on them.
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    Please consider giving me some rep points if I help you a lot.
    Links to my code examples can now be found on my website: My websites
    Please rate my post if you find it helpful!
    Technology is a dangerous thing in the hands of an idiot! I am that idiot.

  4. #4

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Candon City, Ilocos Sur, Phils.
    Posts
    10,816

    Re: Imitating a website

    Perhaps I may have better stated "Studying a website" or something. I just want to explore how it was done and not totally imitate it, just to gain more knowledge since I have been idling with website development for years. The CSS and javascripts looks like stored in the server so I have no way of knowing those or do I?
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  5. #5

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Candon City, Ilocos Sur, Phils.
    Posts
    10,816

    Re: Imitating a website

    Quote Originally Posted by Nightwalker83 View Post
    What margin? I don't see any margin in that code.
    As you can see that horizontal line is centered, is it not a margin? If not then how could I do the same thing? Thanks for looking.
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  6. #6
    Frenzied Member Jmacp's Avatar
    Join Date
    Jul 2003
    Location
    UK
    Posts
    1,958

    Re: Imitating a website

    No js and css are client side they have to be downloaded locally into your cache, only server side scripting like asp/php is non viewable. If using firefox there is a plugin called save complete which allowed you to download the whole page including the stylesheets and js. Although i am not sure if the save complete plugin is out of date now. Otherwise you can just pick through the html and find the direct links the the css/js.

  7. #7
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,504

    Re: Imitating a website

    Downloading a page to investigate it is overkill (and not always useful if your download leaves out scripts or styles). For a simple look at things, you can just view source (right-click on an empty part of the page and select "View Page Source" or whatever the phrasing is in your browser of choice). For a more nuanced view, check out Firebug in Firefox, or the developer tools in Chrome and/or Safari - they allow you to point and click to pick out an element on a page, see what it is and what styles are applied to it.

    So here's Firebug:

    I used Firebug's selector to pick out the element. The purple and blue overlay shows you the area that the element takes up (the blue) and its padding (the purple). On the bottom left, you can see the page's markup, with the selected element highlighted. On the bottom right, there's a list of styles applied to the element: the line on the top of the element is a border-top.

  8. #8

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Candon City, Ilocos Sur, Phils.
    Posts
    10,816

    Re: Imitating a website

    Cool, thanks for the info regarding the firebug.
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  9. #9
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,102

    Re: Imitating a website

    Quote Originally Posted by dee-u View Post
    As you can see that horizontal line is centered, is it not a margin? If not then how could I do the same thing? Thanks for looking.
    A margin is a type of border!

    I am I correct in thinking you want the horizontal rule directly underneath the text without the space?

    Edit:

    You might like to check my assignments on my website to give you some idea about what to do.
    Last edited by Nightwalker83; May 26th, 2011 at 05:47 AM. Reason: Adding more!
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    Please consider giving me some rep points if I help you a lot.
    Links to my code examples can now be found on my website: My websites
    Please rate my post if you find it helpful!
    Technology is a dangerous thing in the hands of an idiot! I am that idiot.

  10. #10
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,504

    Re: Imitating a website

    As you can see that horizontal line is centered, is it not a margin? If not then how could I do the same thing? Thanks for looking.
    I understand what your original post was asking, but "margin" is like a reserved word in CSS: it has a special meaning to the language. Check out the CSS box model for example (the top picture is the correct box model, the lower one is a buggy IE version of it). There's the content area of the element, surrounded by padding on the inside of the box, surrounded by a border (if there is one), and then margin is the space that you can put outside of the box to push it away from adjacent elements.

    The application of this can been seen in the screenshot I posted earlier: the element has its content area, then there is padding on the top, then there is a border on top of that - there is no margin on the element.

    I'm not meaning to be pedantic or anything, but the box model and its respective terms are good to familiarize yourself with.

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.