I changed CSS Class so my other list doesn't run the same code by CSS but the text-align code in the first code didn't run and I don't know why
I tried to put p tag and align right but it doesn't work, I also tried to put align attribute in "a" tag and it doesn't run too. I tried to put text-align attribute in CSS and it also doesn't run. But, only the text-align property which doesn't work. The rest of the CSS is fully working.
here's my CSS code:
.navbar-text ul{
flex: 1;
text-align: right;
}
.navbar-text ul li{
display: inline-block;
list-style: none;
margin: 0 25px;
}
.navbar-text ul li a{
text-decoration: none;
color: #000;
padding: 0 10px;
width: 100%;
position: relative;
}
And here's my HTML code:
<div class="navbar-text">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And this:
<ul>
<li><img src="instagram.png" alt=""></li>
<li><img src="twitter.png" alt=""></li>
</ul>
Related
I am trying to follow some online HTML CSS course and tried to code an website like this website
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
When I tried to see the hided button Merchandise, Extras, Media 's information, I saw the Elements and I saw that the padding is 8px 16px, as you can see in this picture
But when I coded like them, used their information, the block became small. Like this picture
Here is some of my code
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
</div>
My styles.css file is here
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav li:hover .subnav {
display: block;
}
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
top :100%;
left :0;
}
#nav .subnav a {
color: #000;
padding: 0 16px;
}
My question is, why I set padding exactly they display but it became fell in ?
Thank you very much for your time.
If I understand correctly, your question is why the widths of your <li> elements are shorter than the example.
In short, add min-width: 160px; under your #nav .subnav a CSS selector.
#nav .subnav a {
min-width: 160px;
color: #000;
padding: 0 16px;
}
Explanation:
As in your screenshot, the original example has CSS "width: 100%" which I believe you've tried but didn't work as expected. In fact, that 100% means it will follow the father <div> width (shown in following screenshot), which is set to "min-width: 160px;". Instead of following the exact structure, you may want to keep it simple, so just add "min-width" to <a>!
CSS of example page
I have all my buttons of my nav bar and I have my logo already in top left but the bigger i make it, the thicker my nav bar becomes because i have padding set in css and my image URL is set in the Html:
css
li a {
display: block;
color: white;
text-align: center;
padding: 25px 50px;
text-decoration: none;
border: 1px;
}
HTML
<ul>
<li><a class="active" href="#home.asp">HOME</a></li>
<li style="float:right">
<a href="#logo">
<img src="logo.png" alt="bandlogo" height="25px" width="50px">
</a>
</li>
</ul>
Is there a way to counter this issue like make a different <ul> or an addition to the li.
Thank you
Have text styles and image styles separate:
#nav li .text {
padding: x
}
#nav li .logo {
padding: x
}
I want to target a specific element and whatever properties I set on the logo overrides the other listed items. For example, I have a border style that is solid and it runs through all the listed items of #nav. I just want to make the image link logo an exception to this. The logo is located right in the middle between portfolio and projects. How do I do this?
<!--NAVIGATION-->
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li id="logo"><img src="assets/img/jp-logo.png" /></li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
#nav{
list-style-type: none; /*gets rid of bullets*/
padding: 0;
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
text-align:center;
}
#nav li{
display: inline; /*display list horizontally*/
}
#nav a{
display: inline-block; /*don't break onto new lines and follow padding accordingly*/
padding:10px;
}
I assume the problem is more about removing the border from the logo than targeting the element since it has an id, thus targeting is as easy as #logo.
The first thing you need to do in order to exclude the logo from the border is apply the property to the list-items instead of the container <ul> then you just override the style in a following rule:
#nav li{
display: inline-block; /*display list horizontally*/
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
}
#nav #logo{
border: 0;
}
Finally, if you go and apply this styles you'll notice a gap in between your list items, this is caused by the display:inline-block property and the whitespace in the HTML markup, you can check this answer for multiple ways to properly handle that.
Here's a complete demo of the solution in jsFidlle
You can do
#nav > #logo a
This matches with an element with id logo, tag <a> and children of element with id nav
Or even
#logo a
is enough.
Check this Fiddle
Give border-top and border-bottom to you li and target your #logo with border:none; this will solve your problem.
And for the gap you can see in between li elements this can be solved by setting the parent elements font-size:0; and then define the font-size:npx to your li element.
HTML
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li id="logo"><img src="http://placehold.it/50x50/" /></li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
CSS
ul#nav {
margin:0;
list-style-type: none;
/*gets rid of bullets*/
padding: 0;
text-align:center;
font-size: 0;
}
#nav li {
margin:0;
display: inline;
/*display list horizontally*/
}
#nav a {
display: inline-block;
/*don't break onto new lines and follow padding accordingly*/
padding:10px;
border-top:1px solid #FFB405;
border-bottom:1px solid #FFB405;
margin:0;
font-size: 16px;
}
ul#nav li#logo a {
border-top:none;
border-bottom:none;
}
I want to have the phone number and email address vertically align with the little icons next to them. I'm trying to change their line-height, but that changes the line height of all the li's in that area. I think that is because they are inline. Here is the site and the css.
LINK: www.matthewtbrown.com/newsite
HTML:
<ul class="contact">
<li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
<li class="contacttext">mbrown74#rocketmail.com</li>
<li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
<li class="contacttext">978-761-1205</li>
</ul>
CSS:
.contact {
color: #fff;
text-align: center;
float:none;
}
.contact > li {
display: inline;
}
.contacttext {
font-size: 19px;
padding-left: 5px;
}
That's where vertical-align comes into play which aligns inline elements to each other:
In your case the following should work:
.contacttext{
vertical-align:text-top;
}
Also note, that if you want to have your li contain the img properly, it needs a display-type other than the default inline - inline-block might be suited most.
Try something like this:
li {
display: inline;
vertical-align: top;
line-height: 25px;
}
after this i have this result:
try this
<ul class="contact">
<li class="contacttext">
<img src="http://s7.postimg.org/64ux9a1if/email.png">mbrown74#rocketmail.com
</li>
<li class="contacttext">
<img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>
I just kept the icons and the text in the same li's
I got it. I did:
.contacttext {
font-size: 19px;
padding-left: 5px;
display:inline-block;
vertical-align:middle;
}
You could add margin-bottom to your <img> to solve this issue.
li img {
margin-bottom: 3px;
}
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}