make me as clear as you can Thanks this problem is killing me

Question

here i want to do is #site-brief = float: left, #site-bg = float: right, i want to lay #site-bg over #site-brief and after that #clog. Though #site-brief or #site-bg element are in order in normal view but in console when hovered background width shows from the very begining of page i forgot some part of css or what but please help me out in clear way please give 10 min or yoy precious time and help me sort out this for alyz and i cant as well change #logo radius to full circle so thank you so much for your help

<html>
<head>
    <title>index</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="one.css"></head>
        <body>
<header>
<div id="main-nav">
<li id="logo"><img src="images/logo.jpg"  alt="Freeware" class="slogo"></li>

<ul class= "mnav">
    <li> <a href=""> Windows <a></li>
    <li> <a href=""> Mac <a></li>
    <li> <a href=""> Anroid <a></li>
    <li><a href=""> ios <a></li>
    </ul>
</div>
</header> 
<div id="first-nav">
    <ul class="fnav">
        <a href=""><li> Driver</a></li>
        <a href=""><li> Top Apps </a></li>
        <a href=""><li> Feature </a></li>
        <a href=""><li> News </a></li>
        <a href=""><li> Updates </a></li>
    </ul>
</div>

<div id ="search">

       <form>
       <input type="text" placeholder="Search..." required>
       <input type="button" value="Search">
       </form>
</div>
<content>
<div id="site-bg">
<img src="images/logo1.png" class="sbg" alt="site-background">
</div>

<div id="site-brief">
<h2 class="briefhead"> THE LATEST VERSIONS <br> OF THE BEST SOFTWARE</h2>

<ul class="briefli">
<li>Hand picked software titles-only the best!</li>
<li>Tested for malware,adware and viruses</li>
<li>No added bundles, installers or toolbars</li>   
<li class="browsebtn"> Browse Software</li>
</ul>

</div>

<div id="clog">
<span class="cat"> CATEGORIES</span>
<ul class="item">
    <li> 
    Browser System Tunning File Sharing Compression Messaging  Networking File Transfer Drivers  Anti-Malware Photo/Image Security Multimedia Office/News Desktop Develpoer CD/DVD

</li>

</ul>
</div>
</content>
</body>
</html>

body{
 background:grey;
}


a:link{
    text-decoration: none;}

#main-nav{
min-height:100px;
width:100%;
background: #002873;
margin-top:3px;
margin-bottom:3px;
float:right;
}

#logo .slogo{
height:30%;
float:left;
padding:30px 400px 30px 70px;
list-style: none;
/*border-radius: 70%*/
}





.mnav li{
padding:20px 20px;
list-style: none;
font-size: 25px;
float:left;
color:white;
margin-top: 50px;
}



.mnav li a{
color:white;
}


.mnav li a:hover{
color:black;
}

#first-nav{
    min-height:70px;
    width:50%;
    display:block-inline;
    background:white;
    float:left;
}


.fnav li{
font-size:25px;
list-style: none;
float:left;
padding:0 13px;
color:#002873;
font-weight:bold;
}

#search{
width:40%;
min-height: 70px;
background:red;
float:right;
display:block;
padding:0 20px;
margin-bottom: 5px; 
}

#search::after{ 
   content: "";
   display: block; 
   clear: both;
}




#site-bg{
    max-width:50%;
    background-color:yellow;
}

.sbg{
height:50%;
float:right;
padding:10px;
display:inline-block;
margin-top: 20px



}

#site-brief{
background:blue;
width:50%;
display: inline-block;
margin-top:0 10px;
min-height:100px;
padding:20px;
}

.briefhead{
    padding-left:190px;
    line-height: 115%;
    color:white;
    word-spacing: 5px;
    font-size: 33px;
    display: block;
 }



.briefli{
      list-style-type: square;  
      list-style-position: inside; 
      padding-left:150px;
      font-size:20px;
      font-weight: bold;
      margin-top:10px;
      color:white;
    }




}

span .cat{
    background: yellow;
    width:60%;
    font-size: 30px;
    margin-top:5px;
    padding:20px 7px 12px 27px;
    display: block;
    }


ul.item{
background: yellow;
word-spacing: 20px;
font-weight: bold;
line-height: 400%;
list-style:none;
font-size: 110%;
width: 60%;
padding-left:34px;
}

Answer 1 · 2017-04-03T23:01:59Z

April 3, 2017 11:01pm

First, learn how to nest your css. Otherwise it won't be readable for the people who are trying to help you. You have a } too much;

.briefli{ list-style-type: square;
list-style-position: inside; padding-left:150px; font-size:20px; font-weight: bold; margin-top:10px; color:white; }

// Remove this one right over here }

span .cat{ background: yellow; width:60%; font-size: 30px; margin-top:5px; padding:20px 7px 12px 27px; display: block; }

For a reference to nesting: check out my own code: https://puu.sh/v8paC/d7ecf0af7d.png or go to http://www.htmldog.com/guides/css/intermediate/grouping/

Welcome to the Treehouse Community

Looking to learn something new?

krishna aryal

krishna aryal

make me as clear as you can Thanks this problem is killing me

1 Answer

Luc de Brouwer

Luc de Brouwer