Tag Archives: css

CS 601 – Clearing Divs

by

One of the issues that came up was where cases where divs floated (left, but I suppose it could happen to right floated ones as well) is that they are misaligned when they don’t fill the space. Below is an example of this from my registration form. What I want is to get fields in the form:

City     State   Zip

Phone     Email

Instead I get:

I fixed this to get the desired result:

How did I do this? I used a “clearing” div as follows:

        <label for="zipcode"><span>Zip</span>
            <input type="text" name="zipcode" />
        </label>
        <div class="clearing"></div>  <=== Relevant Code
        <label for="phone"><span>Phone</span>
            <input type="text" name="phone" />
        </label>
        <label for="email"><span>Email</span>
            <input type="text" name="email" />
        </label>

(Note, I omitted the City and State as the State select input has a bunch of irrelevant PHP code.)

An here's the CSS:

.clearing {
    clear: both;
}

Based on some quick reading, this is telling the browser to not allow floating elements on both sides, hence resetting the floats. I have to admit, I didn't realize this now. Instead, I have been using it extensively for float issues in the BU WordPress installation used for the Chemistry website. (It works even better now that they're not lost when someone edits a page with the visual editor instead of the HTML editor.)

Based on some additional reading, it seems like another way to do this is to put the objects in a containing div and then setting the width and overflow: auto . (See http://www.quirksmode.org/css/clearing.html.) I actually think the "old" way is better as you don't have to readjust the width of the container if the inner elements change and you don't have to have the extra CSS to set the width for each and every container. (Instead, I have one CSS selector for div.clearing.) Also, In my mind it's cleaner to have the single, self-contained div line in the HTML instead of the div wrapping a bunch of other code.

CS 601 – Scrollable Divs

by

While doing my styling, I realized the menu is going to be much longer than the space I have allotted for it in the design. I used the technique listed at http://www.htmlite.com/faq015.php to make the menu div scrollable. Here’s the CSS:

.menu {
    height: 700px; /* Same height as content div */
    overflow: auto;
}

Here’s what it looks like:

I’m not sure I like what it looks like, and I may replace it with some nicer Javascript. For now, however, it works.

CS 601 – Different Footers Depending on State

by

One of the things I’m doing with the site is to have different footers depending on if a user is logged in. The footer will contain a second, static menu for accessibility reason. This would be pretty straightforward to do in PHP in the footer page except I have different numbers of items depending on if a customer is logged in, if an employee is logged in, or if no one is logged in. This means the div widths have to change to keep it centered in the footer menu wrapper div. I could do this in the page, but I thought it would get messy and cumbersome. Instead I use includes.

In index.php:

$loggedinCustomer = True;  // Just here for styling testing.
$loggedinEmployee = False; // Will be extracted from login cookie.

In footer.php:

if ($loggedinCustomer) {
    include('footermenuCustomerLoggedIn.html');
} else if ($loggedinEmployee) {
    include('footermenuEmployeeLoggedIn.html');
} else {
    include('footermenuNotLoggedIn.html');
}

Each of the HTML pages is the html for just the menu and not a complete page (with head and body elements, etc.) The main.css file then contains selectors for different divs, etc., classes of NotLoggedIn, CustomerLoggedIn, and EmployeeLoggedIn. In fact, considering it, I could even import different CSS files depending on the login state, but that might be overkill for this.

This looks like an interesting solution. and I may use it for more than this. It also follows the model-view-controller (MVC) desing concept presented by Murach.

PS, coming soon will be the post about MySQL developer which I promised a couple of weeks back. I’m also going to do one on the Netbeans IDE. For the latter, suffice to say that if you’re not using it (or an equivalent IDE), get it.

CS 601- Putting input labels on top of text boxes

by

I was working on my login form and wanted to put the text labels above the text boxes. While searching for how to do so, I came across an interesting blog post on thinking about where they’re placed. The bottom of that post links to an article on UXmatters.com that analyzes eye-tracking data for different placements that was also interesting. (That site looks like it might have other interesting and applicable information.)

Anyway to the topic at hand. Taking inspiration from a post on Stackoverflow.com, I managed to get it working and tweaked to look decent.
Here’s the HTML code (in header.php):

       <form>
            <label for="username">
                <span>Username</span>
                <input type="text" id ="username" />
            </label>
            <label for="password">
                <span>Password</span>
                <input type="text" id="password" />
            </label>
            <label class="button">
                <span>&nbsp;</span>
                <input class="button"type="submit" value="Log In" />
            </label>
        </form>

The <span>&nbsp;</span> is to help align the button with the text fields. I could also do this by using positioning in the CSS, but I thought this might be more robust as changes to the font sizes on the labels (which I’m still playing with) don’t require a change in the positioning. (I do have to make the box a bit smaller for some reason, but I do that in the CSS.)
Here’s the CSS:

.loginform {
    float: right;
    position: relative;
    top: 70px;
}

.loginform label {
    width: 150px;
    float: left;
    margin: 0 10px 0 0;
}

.loginform label.button {
    width: 50px;
}
.loginform span {
    display: block;
    margin: 0 0 3px;
    color: white;
    font-size: 0.7em;
}

.loginform input {
    width: 150px;
    border: 1px solid #000000;
    padding: 0px;
    height: 20px;
}

.loginform input.button {
    width: 50px;
    height: 19px;
    font-weight: bold;
    font-size: 0.7em;
    color: #FFFFFF;
    background-color: #3B5998;
    
}

I think a key is the block display setting for the span. I’m not exactly sure what this does, but I’ll look into it more to understand it better. The .button selectors are simply to style the button a bit differently than the other inputs and to make it narrower since it doesn’t have to accept text. I also want to add a “Forgot your password?” link and maybe a register button. (I’m not sure how I’ll layout the register button yet.)

CS 601 – Using Google Fonts

by

I started building my actual page template after building most of my pages as pages in Powerpoint for quick drafting. I currently have the main sections laid out and now need to start doing more of the design. (Actually, first I have to figure what I want the restaurant to be, but I have some ideas.) While working on this, I started exploring the use of Google’s open source web fonts. This is pretty straightforward as is done as follows:

  1. Go to the Google web font site.
  2. Click “Quick Use”
  3. Under 3., choose the @import tab. Copy this text and paste it into your CSS file. (the text should look like: 
    @import url(http://fonts.googleapis.com/css?family=Federant);
  4. Use the font in your declarations, remembering to include a fall back. 
    .content h1 {
    font-family: 'Federant', cursive;
    color: #330099;
}

What it looks like:

(P.S. — No comments on the actual font please. I’m just using this as an example and trial.)

CS 601 – Centering Body

by

While doing the table to divs exercise, I was having trouble centering the body text. I finally managed to do it using the following css code:

#main {
width: 800px;
margin: auto;
}

This didn’t seem to work, and I couldn’t figure out why. It turns out I missed the size unit (px) on the width, which caused it to be ignored. So, as a note for the future, ensure all lengths have a unit. (I might even use it for 0 lengths despite the fact that it’s not needed. That way, if I ever change it later, I won’t miss it again.) Luckily, the validator will catch this (as I just found out by validating an old version of the css file). When I have problems that I can’t figure out, I should validate it as a debeugging check.

CS 601 – CSS Attribute Selector

by

Last Tuesday’s class was an introduction to CSS (Cascading Style Sheets). This was very interesting as it was something I had encountered during my work with websites, but not something I had a good handle on. As explained during class, it’s really quite simple, at least for basic CSS. One topic that came up was the use of attribute selectors. I found an nice use of this in the BU Flexi Theme to give icons to links:

Here’s the CSS code:

#content a[href^="mailto:"] {background:url(images/icons/email.png) no-repeat right center;padding:2px 20px 2px 0;}
#content a[href$=".pdf"] {background:url(images/icons/pdf.png) no-repeat right center;padding:2px 20px 2px 0;}
#content a[href$=".doc"], #content a[href$=".docx"] {background: url(images/icons/doc.png) no-repeat right center; padding:2px 20px 2px 0;}
#content a[href$=".xls"], #content a[href$=".xlsx"] {background: url(images/icons/xls.png) no-repeat right center; padding:2px 20px 2px 0;}