HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

HTML and CSS markup to achieve desired result

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewcssstackoverflowbeginnerhtml
resultcssachievedesiredmarkupandhtml

Problem

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


     

        
            User
            Vacancies
            Company
        
    
    
        
            Create New
        
         Title

         Create new list


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 a

Solution

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


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
  • s on the left have the same rules. So you might as well give that ` a class and pass rules that way. However some rules may not apply. Also you gave both an id and class to those
  • s. this is what I did



HTML


  
    User
  
  
    Vacancies
  
  
    Company


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.

Code Snippets

.col_left img {
    float:right;
    display: block;
    line-height:40px;
    margin-left: auto;
    margin-right: auto;
}
<a href="/" class="logo">
  <img src="http://placehold.it/100x60">
</a>
.logo {
  float:right;
  display: block;
  line-height:40px;
  margin-left: auto;
  margin-right: auto;
}
<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>
.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; }

Context

StackExchange Code Review Q#40701, answer score: 2

Revisions (0)

No revisions yet.