2 Replies - 861 Views - Last Post: 10 July 2012 - 04:02 AM

#1 TheCompBoy  Icon User is offline

  • D.I.C Regular

Reputation: 11
  • View blog
  • Posts: 314
  • Joined: 21-April 11

First website, Menu bar and site "frame"?

Posted 09 July 2012 - 03:36 PM

Hello dear D.I.C!

I have been mixxing out with my own first little website.

I did bump on some intresting problems which i would like to learn how it works. If you look at this webpage which my friend have made for me and i try to go through it to make my own version of it: http://opelex.com/brandom/

Im trying right now to understand how the 4 buttons on top of the site is implemented and how their placed next to eachother that way. Im still very new to web developement but i find it quite intresting. I did look at the webpage's source but all i could find and understand that it was about theese 4 buttons was this peace of code:
<div class="menu">
      <div align="right">
        <ul>
          <li><a href="index.html" class="active"><span>Home</span></a></li>
          <li><a href="about.html"><span>About </span></a></li>
          <li><a href="about.html"><span>Download</span></a></li>
          <li><a href="contact.html"><span>Forum</span></a></li>        
        </ul>
      </div>
    </div>

But all what it does is giving me 4 lines of text in rows.

Also one of my main question about making my own site is how do you make it so centered? I see like here there is a big background picture on the site i linked which covers the screen but the actual content is only in a little "Box" in the center of the page i am intrested to know how to make my current project like this too.

Also if there is any place i can learn more about web delevelopement please send me there. I've been to w3schools and gone through all their HTML tutorials which didn't explain anything about theese kind of things.

Thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: First website, Menu bar and site "frame"?

#2 GunnerInc  Icon User is offline

  • "Hurry up and wait"
  • member icon




Reputation: 858
  • View blog
  • Posts: 2,286
  • Joined: 28-March 11

Re: First website, Menu bar and site "frame"?

Posted 09 July 2012 - 04:20 PM

Most sites nowadays use Cascading Style Sheets for formatting.

Look at http://opelex.com/br...m/css/style.css it defines the layout for all the classes. In your DIV code above, it is telling the browser to look in the css file for info for the class - menu.

Now look in the css file, and you will find:
/*menu*/
.menu { float:right; padding:55px 0 0 0; margin:0 auto; width:580px;}
.menu img { float:right; margin:0; padding:0;}
.menu ul { float:left;  padding:0; margin:0; list-style:none; border:0; height:31px;}
.menu ul li { float:left; margin:0; padding:0 2px; border:0;}
.menu ul li a { float:left; margin:0; padding:9px 0; color:#545454; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.8em;}
.menu ul li a span { padding:9px 13px; background:none;}
.menu ul li a:hover {  background: url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span {  background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active {  background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}
/* main */


This defines various formatting options for ANY class named menu. Try changing some things to see what happens.
Was This Post Helpful? 1
  • +
  • -

#3 TheCompBoy  Icon User is offline

  • D.I.C Regular

Reputation: 11
  • View blog
  • Posts: 314
  • Joined: 21-April 11

Re: First website, Menu bar and site "frame"?

Posted 10 July 2012 - 04:02 AM

Big thanks, Very intresting for me. I tho still trying to figure out how the whole page is centered in the way so all the content is displayed in the center if you know what i mean.

And also the code you posted im not sure how to implement since when i paste it into my document it just gives me plain text when i refresh the html document.

Big thanks for helping me understand!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1