Log in

View Full Version : css help


npsychd
10-15-2013, 07:48 PM
hi all, I am a newbie to CSS and learning through sample templates posted on web..currently i am looking for an answer on one of the template i am going through..its html page goes on like this...

<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Hyacinth</a></h1>
<span>Template Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a></span> </div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
<li><a href="#" accesskey="3" title="">About Us</a></li>
<li><a href="#" accesskey="4" title="">Careers</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
</div>

the css part of the file goes as follows...

#header-wrapper
{
overflow: hidden;
padding: 5em 0em;
}

#header
{
}
.container
{
margin: 0px auto;
width: 1200px;
}
#logo
{
padding: 5em 0em;
text-align: center;
}

#logo h1
{
font-size: 3.5em;
}

#logo a
{
text-decoration: none;
color: #FFF;
}

#logo span
{
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 0.90em;
color: rgba(255,255,255,0.5);
}

#logo span a
{
color: rgba(255,255,255,0.8);
}
#menu
{
}

#menu ul
{
text-align: center;
}

#menu li
{
display: inline-block;
}

#menu li a, #menu li span
{
display: inline-block;
margin-left: 0.50em;
padding: 1em 1.5em;
letter-spacing: 0.20em;
text-decoration: none;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #FFF;
}
#menu .current_page_item a
{
background: #67128F;
border-radius: 8px;
color: #FFF;
}


Question on html code:
1. from the above code, apart from the div id="header-wrapper" why is it that another div="header" declared and why isnt "container" class declared inside div id="header-wrapper"? Is it a good practise to declare the class="container" along with the id="header-wrapper"? if so then why do u think the coder coded it this way?
2. inside the span element there is a hyper link attribute in which there is a property called rel="nofollow" , what does this mean?
question on css code:
1. what does 'em' stands for padding attribute? is this the best practise of doing it or in pixels?
2. under logo span a: color is declared as rgba(255,255,255,0.8); why is it done like this when the color looks similar to grey?
3. under #menu .current_page_item a: border-radius is given as 8px, now what does this mean?
Please help me with these queries...Thanks!
FrickenTrevor
10-15-2013, 09:06 PM
from the above code, apart from the div id="header-wrapper" why is it that another div="header" declared and why isnt "container" class declared inside div id="header-wrapper"? Is it a good practise to declare the class="container" along with the id="header-wrapper"? if so then why do u think the coder coded it this way?

The coder made it this way so the header-wrapper can be controlled in a more manageable way. Its like you have 20 or so apples, instead of trying to carry all of them wouldnt it be better to put all of them in a box? This way the widths and/or heights of the content inside the header-wrapper can be controlled. It is kind of hard for me to explain this one.



2. inside the span element there is a hyper link attribute in which there is a property called rel="nofollow" , what does this mean?

"Nofollow" provides a way for webmasters to tell search engines "Don't follow links on this page" or "Don't follow this specific link". This way, other pages that have that in the link on your site will not show up on Googles search results.



what does 'em' stands for padding attribute? is this the best practise of doing it or in pixels?

The “em” is a scalable unit. It is better than using pixels (px) because an em is equal to the current font-size. Using em's will allow your text to be scaled down with however big or small the browser is, compared to pixels that will stay whatever font size you declare. Pixels stay the font size you give them, while em's will flex and bend to your will.



2. under logo span a: color is declared as rgba(255,255,255,0.8); why is it done like this when the color looks similar to grey?

The rgba stands for Red Green Blue Alpha. The reason why it looks grey is because the color is set to black (using the RGB) with a 0.8 Alpha (or transparency) added to it. Using the RGBA format allows a color to be added to text and then if the coder desires transparency as well.



under #menu .current_page_item a: border-radius is given as 8px, now what does this mean?

This simply means that the link for #menu .current_page_item will have rounded corners like a rounded button.

I can explain everything a bit more if you still do not understand

2ez! :cool:
npsychd
10-16-2013, 07:08 AM
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>

thanks for your reply, Just have a doubt on the above element where its mentioned accesskey="1". What does it stand for??
FrickenTrevor
10-16-2013, 07:43 PM
The accesskey attribute allows the user to activate a control on a page using a keyboard shortcut
npsychd
10-18-2013, 05:44 PM
The accesskey attribute allows the user to activate a control on a page using a keyboard shortcut

thanks for the help. I did get quite a lot solutions on the web but some concepts are a bit confusing till now..
1. What is the main purpose of a span element?

I also tried out some coding on my own but got a few queries on it also when i run it on IE latest version the content of the page doesn't go even as compared to running on firefox. The menu becomes unevenly structured while running in an IE than on a Firefox..why does it occur? Here is a sneak peak of the code..


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<script></script>
<link rel="stylesheet" href="../css/fonts.css" />
<link rel="stylesheet" href"http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" />
<link rel="stylesheet" href="../css/login.css" />
</head>

<body>
<div id="header" class="container">
<h2><span class="icon"></span><a href="#">O|<span>M</span>|R</a></h2>
<p>OMR</p>
</div>
<div id="wrapper" class="container">
<div id="menu" class="container">
<ul>
<li class="current_item"><a href="#" accesskey="l" title="">Login</a></li>
<li><a href="#" accesskey="r" title="">Register</a></li>
</ul>
</div>
</div>
</body>

The Css part....

/*********************
********body*********/
html, body{
height:100%;
}

body{
margin:0px;
padding:0px;
background:#E9E9E9 url(../images/bg01.png) repeat;
font-family:verdana, Arial, Helvetica, sans-serif;
font-size:11pt;
font-weight:400;
color:#969696;
}

h1, h2, h3{
font-weight:900;
}

p{
}

ol, ul{
}

a{
}

a:hover{
}

.container{
width:1200px;
margin:0px auto;
}
/****************************
**********header************/
#header{
background:#E73030;
height:50px;
padding:10px 0px;
box-shadow:0px 0px 10px 5px rgba(0,0,0,0.1);
}

#header a{
font-style:none;
text-decoration:none;
color:#FFF;
margin:3em;
}

#header p{
letter-spacing:0.20em;
text-transform:uppercase;
margin:1px;
color:#FFF;
line-height:1%;
font-size:10pt;
padding:0 0 1em 0;
}

#header span{
}
/**************menu***************/
#menu{
background:#01A9DC;
}

#menu ul{
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}

#menu li{
display:inline-block;
}

#menu a{
color:#FFF;
display:block;
padding: 0em 2em;
line-height: 40px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 1em;
font-weight: 600;
}

#menu .current_item a{
background:#E73030;
}

#menu a:hover{
background:#E73030;
}
/***************wrappers**********/
#wrapper{
position: relative;
padding: 0em 0em 5em 0em;
background: #FFF;
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}

Problems faced..
1. From the above code what ever is mentioned inside the <p> element gets invisible when i run on both IE and Fire Fox.
2. The menu is unevenly proportioned while running on an IE but its perfect while run on Firefox
Please help me in solving the above...