MrWobbles's Profile User Rating: -----

Reputation: 31 Craftsman
Group:
Contributors
Active Posts:
328 (0.15 per day)
Joined:
11-April 08
Profile Views:
7,314
Last Active:
User is offline May 22 2012 05:15 AM
Currently:
Offline

Previous Fields

Country:
US
OS Preference:
Windows
Favorite Browser:
FireFox
Favorite Processor:
Who Cares
Favorite Gaming Platform:
XBox
Your Car:
Who Cares
Dream Kudos:
25

Latest Visitors

Icon   MrWobbles has not set their status

Posts I've Made

  1. In Topic: css error divs not lining up

    Posted 14 May 2012

    First off, your HTML and CSS are a mess - I've gone through and cleaned most of it up and got the site working and looking mostly like what you have. You still have a ways to go, but I think (with what I see so far) you could do it without any images.

    Basically - you are making this way to complicated. Floats are kind of a pain, but can be useful in the right situations. I suggest for you to use 'display: inline-block' to get it all to line up correctly. If you are dead set on using a float though, just use float: left and it should prevent the vendor from dropping down like that.

    Here is what I threw together (HTML & CSS are seperate files)

    HTML:
    <html>
        <head>
            <title></title>
            <link rel="stylesheet" href="main.css" />
        </head>
        <body>
            <div class="container outer">
                <div class = "blocklogo"></div>
                <div class="container">
                    <hr/>
                    <div class="login customer">
                        Customer Login
                        <div>
                            Username:
                            <input type= "text" />
                            <div>
                                Password:
                                <input type= "text" />
                            </div>
                        </div>
                    </div>
    
                    <div class="login vertHR">
                        &nbsp;
                    </div>
    
                    <div class="login vendor">
                        Vendor Login
                        <div>
                            Username:
                            <input type= "text" />
                            <div>
                                Password:
                                <input type= "text" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class ="footer"></div>
    
        </body>
    </html>
    
    


    CSS:
    body{
        background: white;
    }
    
    hr{
        border: 1px solid lightblue;
    }
    
    .container.outer{
        background: lightblue;
        border-radius: 15px;
        border-width: 0px;
        margin: 0;
    }
    
    .container{
        border-radius: 10px;
        background: #fff;
        padding: 25px;
        border: darkblue 3px solid;
        text-align: center;
    }
    
    .login{
        display: inline-block;
        padding: 50px 75px;
        margin: 35px 0 0 0;
        background: lightblue;
        border-radius: 4px;
        text-align: left;
    }
    
    .vertHR{
        width: 1px;
        background: lighblue;
        height: 250px;
        padding: 0px;
        margin: 0 12px;
        vertical-align: top;
    }
    
    


    To other developers - if you see something that I've done that doesn't make sense, please let me know! I am always open to suggestions/correctional advice.

My Information

Member Title:
D.I.C Regular
Age:
28 years old
Birthday:
January 17, 1986
Gender:
Location:
Here
Interests:
Games, video and board
Web Design/Code
School (i am weird i like to learn stuff)
Reading (most fantasy, some science fiction)
Full Name:
Sean Collins
Years Programming:
4
Programming Languages:
VB.Net, Java (its been awhile), ActionScript, CSS, XHTML, JavaScript, SQL, PLSQL (again its been awhile)

Contact Information

E-mail:
Click here to e-mail me

Friends

Comments

MrWobbles has no profile comments yet. Why not say hello?