Solved

Urgent need help ASAP With CSS

Posted on 2016-11-16
5
21 Views
Last Modified: 2016-11-16
Hi guys,


Having a nightmare trying to work out what is wrong with my code.

Basically I am trying to get the bottom border to align with the ul text, so it starts at the 1st li and ends on the download button.

Bare in mind I have put a pink background on temporeraly just to understand my positioning.

Here is what I have so far
Screen-Shot-2016-11-16-at-10.50.09.png
here is an example of what I am trying to achieve, I want the border to start and end on the white vertical lines and I need to get rid of the sections where the red cross are.
Screen-Shot-2016-11-16-at-10.50.09-c.png
Here is the code :

HTML

<div id="mainnav">
        <ul> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Pricing</a></li>
            <li class="download"><a href="#">Download</a></li>
        </ul>
     </div>     

Open in new window


CSS

/* START MAIN NAV  */

#mainnav {
    width: 100%;
    
}


#mainnav ul { 
float: right;
margin-top: 90px; 
margin-right: 50px;
border-bottom: 1px solid white; 
padding-bottom: 30px;
background-color: pink; 

   

}

#mainnav ul li {

display: inline; 
list-style-type: none;
font-weight: bold; 
margin-left: 20px; 


    
}

#mainnav ul li a {

color: white; 
text-decoration: none;


    
}
#mainnav ul li a:hover{
    
    color: #AF2621;
    
}


/* END MAIN NAV  */

Open in new window


Any help is highly appreciated, Thanks.
0
Comment
Question by:Mike Moore
  • 3
  • 2
5 Comments
 
LVL 17

Expert Comment

by:Pawan Kumar Khowal
ID: 41889481
Try 1 Added width:

#mainnav ul 
{ 

float: right;
margin-top: 90px; 
margin-right: 50px;
border-bottom: 1px solid white; 
padding-bottom: 30px;
background-color: pink; 
width: 100%;   

}

Open in new window


try 2


#mainnav ul 
{ 

float: right;
margin-top: 90px; 
margin-right: 50px;
border-bottom: 1px solid white; 
padding-bottom: 30px;
background-color: pink; 
width: 300px;

}

Open in new window

0
 

Author Comment

by:Mike Moore
ID: 41889498
Unfortunately, Still no luck. But thanks for trying.
0
 
LVL 17

Accepted Solution

by:
Pawan Kumar Khowal earned 500 total points
ID: 41889505
Try this

<html>
<head>
<style>
/* START MAIN NAV  */

#mainnav {
    float:left;
    
}


#mainnav ul { 
float: right;
margin-top: 90px; 
margin-right: 50px;
border-bottom: 1px solid white; 
padding-bottom: 30px;
background-color: pink; 
padding-left : 0px;
   

}

#mainnav ul li {

    display: inline;
    list-style-type: none;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;


    
}

#mainnav ul li a {

color: white; 
text-decoration: none;


    
}
#mainnav ul li a:hover{
    
    color: #AF2621;
    
}


/* END MAIN NAV  */
</style>
</head>
<body>
<div id="mainnav">
        <ul> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Pricing</a></li>
            <li class="download"><a href="#">Download</a></li>
        </ul>
     </div>     
</body>
</html>

Open in new window


Output

EE
0
 

Author Closing Comment

by:Mike Moore
ID: 41889510
that worked perfect, Thanks.
0
 
LVL 17

Expert Comment

by:Pawan Kumar Khowal
ID: 41889514
Welcome Mike !!
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now