Im making my own Website and i inserted a picture of the Instagram Logo as a link to get to my Instagram, but on the Live server is the Instagram logo fully funktional BUT there is a Dot before the logo...
<div class="Contact">
<h1>
How can i get in Touch with you?
</h1>
<p>
You can Contact me on Instagram,Discord or via Email!
</p>
<li class="ContactLink" style="margin-left: 600px;">
<img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px">
</div>
The logo with dot
I actually didnt wanted to anwser this question as it is already anwsered in the comments. However as a "wrong" anwser and an insufficient anwser was given, I will anwser it to have a correct solution.
The issue with your code:
The dot you having is the list-style bullet you getting by having this line of code: <li class="ContactLink" style="margin-left: 600px;">. However this line of HTML code is invalid for 2 reasons. First you miss the closing tag </li>. Last but not least, a list must always be wrapped inside an ordered <ol> ... </ol> or undeorder list <ul> ... </ul>.
How to fix it:
First close your list tag by adding </li>. Then wrap the entire list inside an unordered list with <ul> ... </ul>. Give the class name to the ul. Use list-style-type: none; to remove the list-style bullet.
.ContactLink {
text-align: right;
list-style-type: none;
}
<div class="Contact">
<h1>
How can i get in Touch with you?
</h1>
<p>
You can Contact me on Instagram,Discord or via Email!
</p>
<ul class="ContactLink">
<li>
<a href="https://www.instagram.com/dennisprivate04/">
<img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px">
</a>
</li>
</ul>
</div>
The dot is caused by the <li> tag. You could just remove it and keep remaining of your instagram logo.
<img src="./img/Insta.png" alt="InstaLogo" height="50px" width="50px" style= "text-decoration: none;">
Related
Im new in coding. I'm making my first website (mobile first). It were all fine, all divs working, responsive, all great! But now I added a new div(nothing special I guess) but when I try to just put a single code (even without media queries) it doesn't work in mobile version. Tablet and desktop are working correctly. I tried to modify other divs and they work fine too.
Here is the code.
HTML
<section class="flvcko-wear">
<ul class="lista-articulos">
<div class="articulo">
<li>
<img src="img/cap.png" alt="">
<p>Flvcko cap</p>
</li>
</div>
</ul>
</section
CSS
.flvcko-wear ul{
list-style-type: none;
}
It doesn't even recognize the 'list-style-type:none;'
It's probably caused by that weird HTML structure – div is not allowed as child of ul (try pasting your code into HTML validator).
This would make more sense:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li>
<div class="articulo">
<img src="…" alt="…">
<p>…</p>
</div>
</li>
</ul>
</section>
Or even omitting the div altogether, since you can style li, too:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li class="articulo">
<img src="…" alt="…">
<p>…</p>
</li>
</ul>
</section>
I agree with the previous answer, try eliminating the div. Try changing your code to the following:
HTML:
<section class="flvcko-wear">
<ul class="lista-articulos">
<li>
<img src="img/cap.png" alt="">
<p>Flvcko cap</p>
</li>
</ul>
</section>
CSS:
ul.lista-articulos {list-style-type: none;}
I am having trouble with my nav bar, the first link in the nav bar is always to low. There seems to be a hidden <a> tag in it that I can not remove. This wasnt there until I added a link to the logo on the left. When the logo was not a link the first link stayed in the correct position. I have uploaded some of the code to codepen
https://codepen.io/BitRot86/pen/qXgQzE
Any ideas would be helpful
There are two small typo mistakes in your HTML code.
<ul class="nav navbar-nav" id="navLeft">
<li>
#*<a href="index.php"><img src="http://gbcsite.ca/v5/images/GBC-logo.png" class="img-responsive" width="200px"><a />*#
<a href="index.php">
<img src="http://gbcsite.ca/v5/images/GBC-logo.png" class="img-responsive" width="200" />
</a>
</li>
</ul>
First, you've not closed the <img> tag.
Second, you've incorrectly closed <a> tag under image link.
I've fixed it at my end and it is working.
So, I have this list contained within a specific id. I only want to manipulate the link colors for this specific id, which is #icon-header. So here is the problem:
I want the whole li element to be the link, but instead of having the background color change on hover, I want all of the text elements to to the color #2BA6CB. And no matter where the user clicks, I want the whole li element to be the link.
So, I was wondering if there was something wrong with where I am putting the a tag, and also what your suggestions were for the css of it all.
The i tag is a webfont. I need that to change with the h4 and the p tag all at the same time when the user hovers over the li.
Any help would be amazing. Here is the html:
<div class="row hide-for-small" id="icon-header" align="center">
<ul class="large-block-grid-6 small-block-grid-1 medium-block-grid-6">
<li></li>
<li>
<a href="#">
<i class="fi-male size-60"></i>
<h4>Ready</h4>
<p>Create a personal health and fitness profile.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-checkbox size-60"></i>
<h4>Set</h4>
<p>Set goals and chart your progress.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-upload-cloud size-60"></i>
<h4>Go</h4>
<p>Upload your exercise data from anywhere.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-graph-bar size-60"></i>
<h4>Learn</h4>
<p>View real results and develop healthy patterns.</p>
</a>
</li>
<li></li>
</ul>
</div>
You need to give the a-tag the dimensions (width & height) of the li Element instead of styling the li Element. Then you will have the effect, that you can click the whole highlighted area instead of only the link.
To give an inline element like ´a´-Tag a width and height you need to give it ´display:block;`.
Make the 'a' tag display: block in the css. Note that wrapping an anchor tag around block level elements is only allowed in html5. Older specs explicitly disallow it.
I'm having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle:
So at the top of my page I have a title and a facebook logo. Here's a working example: fiddle
So everything is in a neat row at the top of the page. However, I want the logo and the text Join us on... to be on the right side, and the heading stays where it is. I've tried adding class="pull-right" to the 2nd and 3rd <li> elements, like this. But you can see how that really screws up the vertical alignment. Other than the alignment that's how I want it to look.
Any ideas on how to fix the alignment?
You can apply the pull-right on the li. Also, H4 will cause a break so, you should put the img and "Join Us..." inside the H4.
Try this:
<ul class="inline">
<li><h3 class="muted">Heading</h3></li>
<li class="pull-right">
<div class="media">
<h4 class="media-heading">
<a href="#">
<img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
</a>
Join Us on Facebook
</h4>
</div>
</li>
</ul>
you should add another element and give it "pull-right" class. Your join us code should be in that .
So you should have like this;
<ul>
logo
</ul>
<ul class="pull-right">
join us
</ul>