CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: css help

  1. 10-15-2013, 07:48 PM #1
    npsychd
    npsychd is offline New Comer (less than 5 posts)
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css help

    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...
    HTML Code:
    <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...
    Code:
    #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!
    Reply With Quote Reply With Quote
  2. 10-15-2013, 09:06 PM #2
    FrickenTrevor's Avatar
    FrickenTrevor
    FrickenTrevor is offline Regular Coders
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Quote Originally Posted by npsychd View Post
    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.

    Quote Originally Posted by npsychd View Post
    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.

    Quote Originally Posted by npsychd View Post
    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.

    Quote Originally Posted by npsychd View Post
    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.

    Quote Originally Posted by npsychd View Post
    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!
    An inline div is a freak of the web and should be beaten until it becomes a span
    Reply With Quote Reply With Quote
  3. 10-16-2013, 07:08 AM #3
    npsychd
    npsychd is offline New Comer (less than 5 posts)
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML Code:
    <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??
    Reply With Quote Reply With Quote
  4. 10-16-2013, 07:43 PM #4
    FrickenTrevor's Avatar
    FrickenTrevor
    FrickenTrevor is offline Regular Coders
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    The accesskey attribute allows the user to activate a control on a page using a keyboard shortcut
    An inline div is a freak of the web and should be beaten until it becomes a span
    Reply With Quote Reply With Quote
  5. 10-18-2013, 05:44 PM #5
    npsychd
    npsychd is offline New Comer (less than 5 posts)
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default hi trevor

    Quote Originally Posted by FrickenTrevor View Post
    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..

    HTML 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....
    Code:
    /*********************
********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...
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules