Build a web site like adium

Discussion in 'Web Design and Development' started by ejk91, Feb 27, 2007.

  1. ejk91 macrumors newbie

    Joined:
    Feb 27, 2007
    #1
    I am building a new website, and I would like to know if it is possible to build a site with a design similar to the one adium has? if possible how can i do one like that? if you wanna check it out the url is http://www.adiumx.com/. Thanks
     
  2. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #2
    Of course you can. You can build a site to look like whatever you want. If you could be more specific about which feature(s) you particularly like and want to replicate, I could show you the code that does it.
     
  3. ejk91 thread starter macrumors newbie

    Joined:
    Feb 27, 2007
    #3
    Ok thanks a lot. I would like to know how i can display any feature any where on the page. I would also like to know how i can put links into a button format like the one on the adium website; and how i can put logos or pictures that can link to another page.
     
  4. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #4
    OK, it sounds like you're really starting from basics. You need to go read a primer on HTML and in particular CSS. There's lots of good tutorials out there. Once you read one, start playing around with a file of your own and try to position things and modify the look and behavior of links. When you run into a specific problem, by all means ask here. We want to help, but your questions are incredibly broad and would not be served well by someone here just rewriting what has already been written thousands of times around the web -- what is CSS and how to use it. For us to help you, you really need to come in with at least a basic working knowledge and ideally have made an attempt.

    I can answer your last question quite easily though: to make an image that links to another page, just put the regular link <a> tag around an image:

    Code:
    <a href="http://somelink.com"><img src="/images/blah.jpg"></a>
     
  5. iWill macrumors member

    Joined:
    Nov 24, 2006
    #5
    I agree he is being pretty vague but i think what he meant is how did the guys from Adium code the whole "tab" on the top right with such shapes colors etc etc...
     
  6. scokim macrumors regular

    Joined:
    Dec 22, 2005
    #6
    Cntrl+click on web page, select View Source will give you the code of the page.

    As mentioned earlier, you'll need to (at least) learn html+css to figure out the code.
     
  7. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #7
    EJK and iWill, I got your PMs, I'll just respond to you here.

    I want to help you guys, I really do. I love getting new people into the web design fold the right way. So please understand I'm not trying to be mean or unhelpful, it's just not in anyone's interest for me to give a sermon on CSS right here when it's so many other places on the web. As scokim mentioned, you can view the source of the Adium web site to see how they did it, but it's not going to mean anything to you unless you understand HTML and CSS. Without looking at their code, I can tell you how I would do the header portion:

    Code:
    <html>
    <head>
    <style type="text/css">
    body { margin: 0px; pdding: 0px; }
    
    #header {
      display: block;
      background: #006699; /* some shade of blue */
      height: 70px;
      position: relative;
    }
    
    #logo {
      color: white;
      font-size: 30px;
      font-weight: bold;
      float: left;
      margin: 20px;
    }
    
    #navigation {
      position: absolute;
      bottom: 4px;
      right: 5px;
    }
    
    #navigation a {
      padding: 4px 10px;
      background: #bbb;
      text-decoration: none;
    }
    
    #navigation a.selected {
      background: white;	
    }
    </style>
    </head>
    </body>
    <div id="header">
      <div id="logo">Your logo here</div>
      <div id="navigation">
        <a href="#" class="selected">Home</a>
        <a href="#">About</a>
        <a href="#">Contact us</a>
      </div>
    </div>
    </body>
    </html>
    
    That's a quick-and-dirty representation. Making it look nicer will require some additional CSS properties, and a background image for the tabs.
     
  8. ejk91 thread starter macrumors newbie

    Joined:
    Feb 27, 2007
    #8
    Actually, i know more than the basics on web, html, css ... but I just want to know how to emulate the exact same thing as the features shown on the adium site. I would like to create a css file that can create something like the one that they must have used to create the home page. I just want to be able to do that and then ill do the rest myself. Thx a lot for your help, I hope its precise enough, otherwise tell me what you dont understand so i can clarify.
     
  9. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #9
    Oh ok. I definitely got the impression you hadn't worked with this stuff before.

    See my above code, that should get you started. The one additional thing they have going on in the tabs is background images. The way you do that is make yourself a slight gradient image -- and since we're going to be repeating this in the x-direction it only needs to be a few pixels wide -- and then apply it like so:

    Code:
    #navigation a {
      padding: 4px 10px;
      text-decoration: none;
      background: #bbb url("path/to/image/relative/to/this/document.gif") top left repeat-x;
    }
    
    Let us know what beyond that isn't clear about their site. If you understand CSS and HTML though, you should be able to learn a lot from just looking at the source.
     

Share This Page