Member Avatar for Acidburn

Hello,

I've been playing around with some CSS in an attempt to grow my knowledge. Now, I've drafted up a design on paper and the idea was to have a login box on the right hand side. A sub menu in the middle and a fairly large title banner.

So I started with the menu and managed to position that to where I wanted it - that seemed to be straight forward so I decided to add next my logon. This is where I ran into trouble. I want to have a Username <field> then a <br> following by a Password <field>

So all in all, it should look like this
Username: <inputbox>
Password: <inputbox>
then a login button.

but that failed.

Here's the CSS.

<style type="text/css">
.{}
div#menuheader
{
    width:100%;
    background-color:#545454;
    height:180px;
}
div#menuTitle
{
    color:white;
    font-size:50px;
}
span#menu
{
    position:relative; /* position used for firefox */
    height:30px;
    margin-top:40px;
    margin-left:60%;
}
span#menu .menuitem
{
    /*background-color:00ffff;*/
    color:white;
    padding-left:2.5px;
    padding-right:2.5px;
}
.menuitem .text
{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size: 15px;
}
div#login
{
border-style:solid;
border-width:2px;
color:white;
height:90px;
}
div#infopanel
{
    font-size: 15px;
    padding-top:10px;
    padding-bottom:5px;
}
</style>

and here's the html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
<div id="menuheader">
<div id="menuTitle">Welcome to the portal</div>
    <div id="login">
<form>
        <div class="infopanel">Username:  <input type="text" name="pwd" size="35"/></div>
        <div class="infopanel">Password:  <input type="password" name="pwd" size="35"/></div>
</form>

    </div>
    <span id="menu">
        <span class="menuitem"><span class="text">Menu item 1</span></span>
        <span class="menuitem"><span class="text">Menu item 2</span></span>
        <span class="menuitem"><span class="text">Menu item 3</span></span>
    </span>
    </span>
</body>
</html>

what am I doing wrong?

  • 2 Contributors
  • 6 Replies
  • 110 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

There are a few items you need to clean up first...

Line #8 in your HTML. There is no closing DIV tag that matches this start tag.
Line #11 in your HTML. If you are using the <form> element, there are other required properties such as action. So you tell the form what to do.
Line #22 in your HTML. Seems to be an extra closing <span> tag. There is no matching start tag.

In your <form> element, there is no input element of type submit. If you want the forum child elements to line up, you'll need to add additional CSS code for your divs (better solution), or place these elments within a table with rows and cells.

Member Avatar for Acidburn

Thank you Jorge, I've corrected the markup :) The credentials now format correctly. I've just got the awkward issue of moving the credentails from the left to the right. Can I just use the margin-right attribute of the css?

Member Avatar for JorgeM

Not sure exactly what you mean, but if you are talking about aliging the input boxes to the right, there are several ways. Here is an example. Wrap the two divs with an outerdiv. Float the outer div to the left, then add float:right; to the div.infopanel CSS block. I just added the style to the HTML element as an example. Move the style to your stylesheet so you have all of your CSS code in one place. By the way, just noticed two other things.

in your CSS file, since you assigned a class to the divs, your CSS should be div.infopanel, not div#infopanel. Also, both your input elements have the same name assigned. One should be uname and the other can remain as pwd, for example.

CSS

div.infopanel
{
    font-size: 15px;
    padding-top:10px;
    padding-bottom:5px;
    float:right;
}

HTML

<div style="float:left;">
   <div class="infopanel">Username:<input type="text" name="uname" size="35"/></div>
   <div style="clear:both;"></div>
   <div class="infopanel">Password:<input type="password" name="pwd" size="35"/></div>
</div>
Edited by JorgeM
Member Avatar for JorgeM

Picture of right alignment...

align.JPG 15.86 KB align.JPG 15.86 KB
Member Avatar for Acidburn

Thankyou Jorge, I'll ammed the css code and the html input boxes. I'm still playing around with the markup, now struggling to add some padding between the two input boxes just like your image. I suspect its got a lot to do with the span# and div# being wrong.

Am I right in assuming if its an id - that needs to have a div# and if its a div class it needs to be div.? What happens if its a span? The same rules apply?

Member Avatar for JorgeM

So you use "#" when you target IDs and "." when you target classes. this is the same with all elements you target. so for this element <span id="one"> you target it in your CSS as span#one. If you use a class instead, <span class="two"> then you target it in your CSS as span#two.

In another example, say that you apply the class to more than one element (such as div and p). if you specificy #two, it will apply to all elements that have the class assigned as "two". However, if you only want to target div elements, then you specify div.two in your CSS, not just .two.

In your example above, in the case of the class called "infopanel", you could apply CSS to your divs, by specificying either div.infopanel, or just .infopanel. However, if you use .infopanel, and you apply the class to also a span element, then whatever code you have in .infopanel will apply to both elements. If you only want to apply somethign to a div with a class of infopanel, then you specify it in your CSS as div.infopanel.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.