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.

Results 1 to 3 of 3
  1. #1
    Junior Member set2stun's Avatar
    Join Date
    Dec 2014
    Location
    New York, New York
    Posts
    2
    Member #
    41061

    Is this HTML or some other animal altogether? PLEASE HELP!

    Hi everyone,

    I am a total newb and this is my first post ever so please excuse me if i inadvertently breach any protocols. I was searching online today for ideas that i could use for my own bio/vital-stats page on my own website. I came upon a website that had screenshots of some bio pages and one sparked my interest because of its hi-tech look. I am really going for a Star-Trek looking vitals profile page for myself and this page is the closest i have come to what i am looking for. The problem is that its only a screenshot and the site doesn't exist anymore so i can't inspect its elements. Here is a link to an image of the site and i have also pasted the image into the message below with my questions. Specifically i am perplexed as to how the web designer created those lines that seem to be part of the image border to the right. Is that just slight of hand and really just some type of "line code" that extends to a border surrounding the image to the right? If not, how do you layer HTML on top of or between image elements? If it is indeed code could you let me know the code?

    My second question pertains to the grid which is hard to make out in my upload of the website. The web designer created a grid with fine fluorescent green grid lines and a black background with those cool little plus symbols as bullets. I know this is the stupidest question to ever come across this forum but how did he do that and how do you install little images like that as bullet points?

    BTW, i am not dead set on this template if you guys have some even techier looking ideas for a bio/vitals section for my site. Basically i want something that looks like it is a CIA profile of a person. Its not a paragraph based "About Me" page, but more a bulleted list of stuff like "EYE COLOR: blue" and so on. I was thinking lots of lines and schematics would look awesome but i have no idea how to create lines in html. I certainly don't want to create a big image file. I mean is it even possible to create horizontal and vertical lines in html? I would really love your suggestions and you can send me any links you might have in mind.

    I am so sorry if my questions are too beginner for this forum. If they are can you please let me know a good place i could go to ask them. I can't thank you guys enough for your help. I hope you all have a wonderful Holiday!

    awesomewebsite.jpg

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times

    Is this HTML or some other animal altogether? PLEASE HELP!

    Well we cannot really tell you how the person did it for certain without seeing the site and code but i can tell you how id do it.

    First off no this is not JUST html. It is HtML and CSS. Or at least how id do it is.

    For the vertical lines you only need to add a top and bottom border to match the border around the image. Then just make sure they line up side by side.

    As for the grid. I cannot see it so im not sure how it was done. Im on my phone so maybe someone on a desktop can see and answer with a better solution but id guess its just an image set as the background of the div.

    The custom bullets its also done in CSS. You will create the image of the bullet and insert it in using CSS. This tutorial will help you so that i dont need to go into as much detail here http://techforluddites.com/replacing...ges-using-css/


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  4. #3
    Junior Member set2stun's Avatar
    Join Date
    Dec 2014
    Location
    New York, New York
    Posts
    2
    Member #
    41061
    Quote Originally Posted by Vapr_Arts View Post
    Well we cannot really tell you how the person did it for certain without seeing the site and code but i can tell you how id do it.

    First off no this is not JUST html. It is HtML and CSS. Or at least how id do it is.

    For the vertical lines you only need to add a top and bottom border to match the border around the image. Then just make sure they line up side by side.

    As for the grid. I cannot see it so im not sure how it was done. Im on my phone so maybe someone on a desktop can see and answer with a better solution but id guess its just an image set as the background of the div.

    The custom bullets its also done in CSS. You will create the image of the bullet and insert it in using CSS. This tutorial will help you so that i dont need to go into as much detail here Replacing List Bullets with Images Using CSS | Tech for Luddites


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

    You're AWESOME! Thank you so much!!


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
  •  

Tags for this Thread

All times are GMT -6. The time now is 10:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com