Zaloguj | Zarejestruj | FAQ
Anonymous

Buttons with lost shape

+ Odpowiedz

Posty: 4 Strona 1 z 1


Buttons with lost shape

przez Fangorn » Cz lip 10, 2014 6:50 pm

Hi everybody.

I would like to compose my webpage using boxes, boxes over boxes.
The first thing I thought to do was to create little boxes as buttons for links, and insert them on my header.
Header and its buttons are the only objects of my webpage so far.
I created the buttons following the teachings of 2createawebpage. They are an unordered list with the attributes:

list-style: none;
display: inline;

Then I created a class (boxbuttons) for the buttons and invoked it inside the tag <li>
My intention was to give each link a shape described by the class boxbuttons, but something went wrong.
The result is just a hint of the shape I wanted. The major problem is that I was not able to control the dimensions of the buttons.
The buttons result as wide as the link and get wider if the linked word gets longer. The height is also without control.

Outside the header everything is fine, as you can see: that is the shape that should be repeated in the header according to my intentions.
Does anyone of you have any idea why I am unable to have my button links in my header, my little boxes inside the wider box?

The following is my html code:

Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

   <head>
   <title> BOXES OVER BOXES </title>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="Style.css" />
   
   
   </head>
   <body>
   
   <div id="container">
   
   <div id="header"> This is the header
      <div class="headerbuttons">
         <ul>
            <li class="boxbuttons"><a href="http://html.net"> button 1 </a></li>
            <li class="boxbuttons"><a href="http://html.net"> b2 </a></li>
            <li class="boxbuttons"><a href="http://html.net"> b3 </a></li>
            <li class="boxbuttons"><a href="http://html.net"> b4 </a></li>
            <li class="boxbuttons"><a href="http://html.net"> b5 </a></li>
         </ul>
   
      </div>
   
   </div>
   
   <div class="boxbuttons"><a href="http://html.net"> b6 </a></div>
   
   </div>
   
   </body>
   </html>



My css sheet is:

Kod: Zaznacz cały
#container {width: 900px;
         margin: auto;}

#header {width: 900px;
      height: 100px;
      background-color: #CC6633;
      border-radius: 10px;
      box-shadow: 10px 10px 5px #888888;
      padding-left: 10px;
      font-family: "courier new";}      
      
.headerbuttons {margin-top: 62px;
            margin-left: 280px;}
            
.headerbuttons ul {margin: auto;}
            
.headerbuttons li {margin: 0px 40px 0px 0px;
            list-style: none;
            display: inline;}
            
.boxbuttons {height: 30px;
            width: 80px;
         border-radius: 7px;
         box-shadow: 10px 10px 5px #000033;
         background-color: #330000;
         text-align: center}
         
#leftnav {width: 140px;
       background-color: #CC6633;
       float: left;}
      
#rightnav {width: 140px;
        background-color: #CC6633;
        float: right;}

#body {background-color: #33CC33;
     margin-left: 140px;}

#footer {clear: both;
      width: 900px;
      background-color: #FF3300;}


-------------------------

You can have a look directly at: http://jsfiddle.net/kcnyg/Q9Ukc/

Many thanks in advance
Avatar użytkownika

Fangorn

  • Posty: 17
  • Dołączył(a): Wt cze 24, 2014 3:28 pm

Re: Buttons with lost shape

przez Fangorn » Pt lip 11, 2014 7:11 pm

Hi,

I did not understand why my code did not produce what I expected. So I changed my code.
First of all I discharged all the lists. After that I found 2 solutions, one with the use of margin, the other with the use of position: absolute.

In both cases I used the attributes inside the html documents, so the only class for buttons I preserved describes the objects without assigning information about position.
Therefore I discharged the class concerned with the position of buttons.

You can check the output for the first solution at: http://jsfiddle.net/kcnyg/L86tM/

As for the second solution, have a look at: http://jsfiddle.net/kcnyg/d96Lv/


I am satisfied :)
Avatar użytkownika

Fangorn

  • Posty: 17
  • Dołączył(a): Wt cze 24, 2014 3:28 pm

Re: Buttons with lost shape

przez Fangorn » Pn lip 14, 2014 7:34 am

The following solution is the best one, from a css point of view:

http://jsfiddle.net/kcnyg/8Whh6/


I still have not much control over the text inside the buttons. I wish it could be more vertically centered, but I am unable to make it descend.

Cheers
Avatar użytkownika

Fangorn

  • Posty: 17
  • Dołączył(a): Wt cze 24, 2014 3:28 pm

Re: Buttons with lost shape

przez Fangorn » Cz lip 24, 2014 5:08 pm

With the help of CubeSquare I devised the following codes.
Now it should be better...

http://jsfiddle.net/kcnyg/8Whh6/6/

The line-height for the text in the button-boxes is 17, so I decided for a margin-top of 6px. The button-boxes height is 30px. So (30-17)/2 = 6.5px

Now the text looks vertically centered.

I found fundamental for text position the instruction 'display:block;' within '#header ul li a' in the css file, even thought I still have to understand completely how it works.
Avatar użytkownika

Fangorn

  • Posty: 17
  • Dołączył(a): Wt cze 24, 2014 3:28 pm


+ Odpowiedz

Strona 1 z 1