Now my website like look at this
i want to fix the text should be
middle on the yellow
bar or
i have somethings else mistake on another place?
i have try to make the font-size be more big like LOGO but the effect is not work what i want again if i make more less/big size 
index.html
<!doctype html>
<html>
<head>
<title>Furture Name</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<div id="warp_top">
<nav>
<ul id="warp_top_right">
<li class="warp_top_right"><a href="#">Home</a></li>
<li class="warp_top_right"><a href="#">User Name</a></li>
<li class="warp_top_right"><a href="#">Sign Out</a></li>
</ul>
</nav>
<ul>
<li class="warp_top_left">GPU</li>
<li class="warp_top_left">GEForce</li>
<li class="warp_top_left">AMD</li>
<li class="warp_top_left">Intel</li>
</ul>
</div>
<div id="warp_main">
</div>
<div id="warp_logo">
<ul>
<li><em><strong>LOGO</strong></em></li>
</ul>
</div>
</header>
</body>
</html>
style.css
/**--all--**/
body {
background-color: #F1F1F1;
}
header ul{
margin-right: 50px;
margin-left: 50px;
}
/**--warp_top--**/
#warp_top {
margin: -8px;
height: 45px;
background-color: #8E8800;
}
/**--warp_top Right--**/
#warp_top_right {
list-style: none;
float: right;
}
.warp_top_right {
display: inline;
margin-left: 20px;
}
.warp_top_right a{
color: white;
text-decoration: none;
font-family: Consolas;
}
.warp_top_right a:hover{
color: black;
text-decoration: underline;
}
/**--warp_top Left**/
#warp_top_left {
list-style: none;
float: left;
}
.warp_top_left {
display: inline;
margin-left: 20px;
color: white;
font-family: Consolas;
}
/**--warp_main--**/
#warp_main {
margin: -8px;
margin-top: 8px;
height: 40px;
background-color: #D5D400;
}
/**--warp_logo--**/
#warp_logo {
margin: -8px;
margin-top: 8px;
height: 108px;
background-color: white;
}
#warp_logo ul{
list-style: none;
float:left;
}
#warp_logo li{
display: inline;
font-family: Consolas
}
#warp_logo strong{
font-size: 60px;
}
Hi there kennyko3167,
you are over complicating you HTML. 
Keep it simple…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
#warp_logo {
background-color: #fff;
font-size: 3.75em;
font-family: consolas;
font-weight: bold;
font-style: oblique;
text-align: center;
}
</style>
</head>
<body>
<div id="warp_logo">
LOGO
</div>
</body>
</html>
coothead
2 Likes
I explain the problem is not good and still thank so much for reply.
It was let me know some things new and i have try to search them learn it about.
<div id =nav_info_bar>
<div class="nav_info_left">
<nav>
<a href="#1 Page" title="GPU">GPU</a>
<a href="#2 Page" title="NVIDA">NVIDA</a>
<a href="#3 Page" title="AMD">AMD</a>
<a href="#4 Page" title="Intel">Intel</a>
</nav>
</div>
</div>
#nav_info_bar{
margin: -16px;
background-color: #8E8800;
height:45px;
}
.nav_info_left{
width: 960px;
padding: 15px;
margin-right:auto;
margin-left: auto;
text-align: left;
}
.nav_info_left a{
color: white;
text-decoration: none;
padding: 11px;
margin-left: 15px;
font-family: consolas;
font-size: 11;
}
.nav_info_left a:hover{
background-color: black;
}
Hi there kennyko3167,
does this help…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
margin: 0;
background-color: #fff;
font: 1em/1.62em consolas, arial, helvetica, sans-serif;
}
#header {
background-color: #8E8800;
font-size: 1.25em;
}
#header::after {
display: block;
clear: both;
padding:0.25em 0;
content: '\02003';
background-color: #d5d400;
}
#header ul {
float: left;
padding: 0;
margin:0 0 0 2em;
list-style: none;
}
#header ul:last-of-type {
float: right;
margin:0 2em 0 0;
}
#header li {
float: left;
margin: 0 0.1em;
color: #fff;
}
#header ul:first-of-type li{
padding: 0.25em 0.5em;
}
#header a {
display: block;
padding: 0.25em 0.5em;
color: #fff;
text-decoration: none;
}
#header li:hover{
background-color: #000;
}
#logo {
padding: 0.5em 1em ;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
@media screen and ( max-width: 44em ) {
#header ul, #header ul:last-of-type {
float: none;
display: block;
width: 100%;
margin: 0;
overflow: hidden;
text-align: center
}
#header li {
float: none;
display: inline-block;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>GPU</li>
<li>GEForce</li>
<li>AMD</li>
<li>Intel</li>
</ul>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">User Name</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div id="logo">LOGO</div>
</body>
</html>
coothead
1 Like
How can my ::after don’t work 
<!DOCTYPE html>
<html>
<head>
<title>Test CSS effects</title>
<meta charset="UTF-8">
<style>
.Header {
background-color: #4078aa;
height: 45px;
margin: -8px;
}
.Header a {
float: left;
padding: 12.6px;
font-family: calibri;
color: white;
text-decoration: none;
}
.Header a::after {
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="Header">
<a href="#">Item A</a>
<a href="#">Item B</a>
<a href="#">Item C</a>
<a href="#">Item D</a>
</div>
</body>
</html>
well, you initially coded it incorrectly and then went
on to apply the mishap to the wrong element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Test CSS effects</title>
<style media="screen">
body {
margin: 0;
}
.header {
background-color: #4078aa;
}
.header::after {
clear: both;
display: block;
height: 6.25em;
background-color: #000;
content: '';
}
.header a {
float: left;
padding: 0.75em;
font-family: calibri;
color: #fff;;
text-decoration: none;
}
</style>
</head>
<body>
<div class="header">
<a href="#">Item A</a>
<a href="#">Item B</a>
<a href="#">Item C</a>
<a href="#">Item D</a>
</div>
</body>
</html>
Also note that you should really be using a list element
rather than a div element to contain the links.
coothead
2 Likes
system
Closed
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
