CODEWITHSUNDEEP
htmlcss
phpnet
phpnet

Reputation: 923

How to add spacing to text start in css

1 ) The text gets cut off by the rounded border . How do I add enough spacing so the text does not get cut off, should the text also be in the border?

2 ) Also, I want to create a border around the whole navigation bar but why is only the top border is appearing?

enter image description here

<style>
   
ul { 
    border: 2px solid;
    border-top-left-radius: 2em;
    list-style-type: none;
    margin: 0;
    padding: 0%;
    width: 100%;
    height: 100%;
    background-color: #dddddd;
}

li {
    float: left;
}

a {
    border: 2px solid;
    border-top-left-radius:2em;
    display: block;
    width: 100%;
    background-color: #dddddd;
    font-size:20px;
    font-family: "Times New Roman", Times, serif;
    font-style:bold,italic;
    color:red;
    text-align:center;
}

a:hover { 
    border: 2px solid;
    border-top-left-radius: 0em;
    background-color: red;
    font-size:20px;
    font-family: "Times New Roman", Times, serif;
    font-style:bold,italic;
    color:red;
}

</style>

Upvotes: 0

Views: 86

Answers (3)

CodeRomeos
CodeRomeos

Reputation: 2448

CSS

.fix{clear:both} /*Use this to clear float*/
ul { 
border: 2px solid;
border-top-left-radius: 2em;
list-style-type: none;
margin: 0;
padding: 0%;
background-color: #dddddd;
}
li {
float: left;
margin-left:16px; /*Adjust margin as per your need*/
}
li:first-child{margin-left:0px} /*add this to arrange first menu item*/
a {
border: 2px solid; 
border-top-left-radius:2em;
display: block;
width: 100%;
background-color: #dddddd;
font-size:20px;
font-family: "Times New Roman", Times, serif;
/*font-style:bold,italic; this is not correct, Add font-weight: bold and font-style:italic*/
font-weight: bold;
font-style:italic;
color:red;
text-align:center;
padding:3px 7px;
}
a:hover { 
border: 2px solid;
border-top-left-radius: 0em;
background-color: red;
font-size:20px;
font-family: "Times New Roman", Times, serif;
font-style:bold,italic;
color:red;
}

Added HTML (May not be same as yours)

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Company</a></li>
    <li><a href="">Contact</a></li>
    <div class="fix"></div>
</ul>

Output

See if it works.!

Upvotes: 2

Mousey
Mousey

Reputation: 1865

You need to set the padding-left, ideally to 1em (1 character) or less for each menu item, it Right look better with padding-right set to a small value too. How padding works

This belongs on your a { css:

    padding: 0 0.1em 0 0.4em;

The issue with the border is due to using float, as @CBroe pointed out. You can either set display:inline-block or overflow:hidden to fix this. See explanation here

A css validator would help avoid you being downvoted for not checking the code before posting. 

<style>       
   ul { border: 2px solid;
   border-top-left-radius: 2em;
   display:inline-block;
   list-style-type: none;
   margin: 0;
   padding: 0%;
   width: 100%;
   height:100%;
   background-color: #dddddd;
}
li {
    float: left;
}

a {
 border: 2px solid;
 border-top-left-radius:2em;
 display: block;
 width: 100%;
 background-color: #dddddd;
 font-size:20px;
 font-family: "Times New Roman", Times, serif;
 font-style:bold,italic;
 color:red;
 text-align:center;
 padding: 0 0.1em 0 0.4em;
}
a:hover 
{ border: 2px solid;
  border-top-left-radius: 0em;
  background-color: red;
  font-size:20px;
  font-family: "Times New Roman", Times, serif;
  font-style:bold,italic;
  color:red;
}
a:active
{

}
</style>

Upvotes: 0

Will
Will

Reputation: 4155

Try these additions/tweaks to your CSS:

/* make the UL wrap around the LIs */
ul {
    overflow: hidden;
    width: 100%; /* adjust to suit your design */
}

/* breathing room for the link text */
a {
    padding-left: 1em; /* again, adjust as needed. decimals like 1.3em are ok too */
}

The second problem you mention (the border around the entire nav) is a common CSS 101 problem and it has to do with "clearing floats".

Upvotes: 0

Related Questions