Skip to content

Instantly share code, notes, and snippets.

@pancanin

pancanin/CSS-Positioning-Homework.markdown

Created June 29, 2014 09:26
Show Gist options
  • Save pancanin/f385d88c94dd192a0d09 to your computer and use it in GitHub Desktop.
Save pancanin/f385d88c94dd192a0d09 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Valeri Hristov.
Raw
CSS-Positioning-Homework.markdown
Raw
index.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="head.css"/>
<title>SoftUni Header</title>
</head>
<body>
<header>
<section id="logo">
<a href="https://softuni.bg" target="_blank">SoftUni Logo</a>
</section>
<div id="wrap-main-head-items">
<section id="user-search">
<div id="notifications">
<a href="#"><span>0</span></a>
</div>
<div id="user">
<select>
<option value="" disabled selected style="display:none;">USER</option>
<option value="main">My Profile</option>
<option value="edit">Edit</option>
<option value="courses">Courses</option>
<option value="out">Log Out</option>
</select>
</div>
<div id="search-bar">
<form>
<input type="search" name="search"/>
<input type="submit" name="sub" value=""/>
</form>
</div>
</section>
<section id="menu">
<ul>
<li><a href="">News</a></li>
<li>
<select>
<option value="asd" selected disabled style="display:none">About the University</option>
<option value=""><a href="">Plans</a></option>
<option value=""><a href="">Trainers</a></option>
<option value=""><a href="">Testimonials</a></option>
</select>
</li>
<li>
<select>
<option value="asd" selected disabled style="display:none">Training Courses</option>
<option value=""><a href="">C# Basics</a></option>
<option value=""><a href="">Java Basics</a></option>
<option value=""><a href="">CSS Pro</a></option>
</select>
</li>
<li><a href="">For Companies</a></li>
<li><a href="">Forum</a></li>
<li><a href="">Contacts</a></li>
</ul>
</section>
</div>
</header>
</body>
</html>
Raw
style.css
body, html, div, section, header, a {
margin: 0;
padding: 0;
}
header {
display: block;
height: 145px;
width:100%;
color:#D0D0D0;
background: #234465;
}
#logo, #logo a {display: inline-block;}
#logo a {
width:416px;
height: 145px;
background-image: url('logo.png');
text-indent: -9999px;
}
#wrap-main-head-items {
display: inline-block;
width:925px;
height: 146px;
vertical-align: top;
}
#user-search {
position: relative;
display: inline-block;
width:416px;
height:65px;
text-align: center;
line-height: 65px;
overflow: hidden;
background:#234465;
float: right;
}
#user-search #notifications, #user, #search-bar, span {
display: inline-block;
}
#user-search #notifications, #user-search #user, #user-search #search-bar {background-color:#234465;}
#user-search #notifications span {
width:50px;
text-align: left;
color:#D0D0D0;
font-family: Verdana;
font-size:20px;
background-image: url('https://cdn3.iconfinder.com/data/icons/miniglyphs/500/044-128.png');
background-size:30px;
background-repeat: no-repeat;
background-position: right;
}
#user-search #user select {
height: 30px;
width:80px;
color:#D0D0D0;
background:#234465;
border:0;
border-radius:20px;
font-family: Verdana;
font-size:20px;
}
#user-search input[type="search"] {
height: 30px;
font-size:18px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right:0;
border:white;
}
#user-search input[type="submit"] {
position: relative;
height: 30px;
width:30px;
background-color:white;
background-image: url('http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Very-Basic-Search-icon.png');
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-bottom:5px;
margin-left:-6px;
cursor: pointer;
border-left: 0;
border:white;
}
#menu {
display: inline-block;
width:100%;
height: 75px;
background:#234465;
vertical-align:middle;
}
#menu ul {display: inline-block; margin-left:-15px;}
#menu ul li {
list-style: none;
position: relative;
display: inline-block;
margin-right:5px;
}
#menu ul li a {
display:inline-block;
padding:10px;
text-decoration: none;
font-family: Verdana;
font-size:18px;
color:white;
border-radius: 10px;
}
#menu ul li a:hover {
background:#FF3300;
}
#menu ul li select {
padding:10px;
font-family: Verdana;
font-size:18px;
color:white;
background: #234465;
border-radius: 10px;
border:0;
}
#menu ul li select:hover {
background:#FF3300;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment