3
\$\begingroup\$

I am new to HTML and CSS. I was wondering if anyone could give me some advice on my use of markup and CSS to achieve this result. I am trying to get a fixed full height sidebar with a list with sprite image for each item.

This is the code I have which achieves this.

HTML

<div class="container">
    <div class="col_left"> <a href="url"><img src="logo.png"></img></a>

        <ul>
            <li class="navimg" id="user"><a href="url">User</a></li>
            <li class="navimg" id="vacancy"><a href="url">Vacancies</a></li>
            <li class="navimg" id="company"><a href="url">Company</a></li>
        </ul>
    </div>
    <div class="col_right">
        <ul>
            <li><a href="#">Create New</a></li>
        </ul>
         <h1>Title</h1>

         <h2>Create new list</h2>

        <form name="input">
            <input type="text" name="Title">
            <input type="text" name="Location">
            <input type="text" name="Description">
            <input type="text" name="Closing date">
            <input type="submit" value="Add">
        </form>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
li {
    list-style-type: none;
}
.container {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    background-color:white;
}
.column_wrap {
    position:relative;
}
.col_left {
    background-color:#f2f2f2;
    width:250px;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    height:auto;
    display: block;
}
.col_left img {
    float:right;
    display: block;
    line-height:40px;
    margin-left: auto;
    margin-right: auto;
}
.col_left li a {
    color: gray;
    display: block;
    line-height: 26x;
}
.col_left li a:hover {
    color: green;
}
.col_right {
    margin-left:250px;
}
.col_right li {
    float: right;
}
.col_right a {
    float: right;
    background: green;
    padding: 10px;
    color: white;
    font-weight:bold;
}
.col_right a:hover {
    background: blue;
}
input {
    display: block;
    border: 2px solid gray;
    padding: 10px;
    margin: 10px
}
input:hover {
    border: 2px solid blue;
}
input:focus {
    border: 2px solid blue;
}
.navimg {
    background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
width: 0px;
    height: 20px;
    padding-left: 30px;
}
#user {
    background-position: -10px -6px;
}
#vacancy {
    background-position: -48px -6px;
}
#company {
    background-position: -88px -6px;
}

However, I think there might be some areas where my code is inefficient, messy or non symantic. Can anyone give me any advice please? I would really appreciate it.

\$\endgroup\$
  • \$\begingroup\$ What is supposed to happen with the green button at the right? the "Create New"? Will that send you to a different page, display a modal, etc? \$\endgroup\$ – JGallardo Feb 6 '14 at 17:43
  • \$\begingroup\$ I don't understand why you are floating your logo to the right. Do you have a mockup of what you are trying to achieve? \$\endgroup\$ – JGallardo Feb 6 '14 at 17:50
2
\$\begingroup\$

A few suggestions

You were using this to pass classes to your main logo

.col_left img {
    float:right;
    display: block;
    line-height:40px;
    margin-left: auto;
    margin-right: auto;
}

But that will create problems if you introduce any other images there. So instead try giving that element a class. For example, a class of logo or anything that you want to name it. This way there will not be any unexpected conflicts caused by CSS inheritance

HTML

<a href="/" class="logo">
  <img src="http://placehold.it/100x60">
</a>

CSS

.logo {
  float:right;
  display: block;
  line-height:40px;
  margin-left: auto;
  margin-right: auto;
} 

In testing, can use image placeholders. In my example, I used Placehold.it which allows you to just give a desired height

All of your <li>s on the left have the same rules. So you might as well give that <ul> a class and pass rules that way. However some rules may not apply. Also you gave both an id and class to those <li>s. this is what I did

HTML

<ul class="options">
  <li class="user">
    <a href="#">User</a>
  </li>
  <li class="vacancy">
    <a href="#">Vacancies</a>
  </li>
  <li class="company">
    <a href="#">Company</a>
  </li>
</ul>

CSS

.user, .vacancy, .company {
  background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
  width: 0px;
  height: 20px;
  padding-left: 30px;
}

.user { background-position: -10px -6px; } 
.vacancy { background-position: -48px -6px; }
.company { background-position: -88px -6px; }

I did it that way so that you can choose to add in what you want to accept what CSS rules.

in testing. When you have links, it is common to just use href="#"

Full code available at this CodePen.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.