I'm trying to add a few images to my site but for some reason vertical bars are showing under and to the right of the images.
Here's my website URL: http://bit.ly/Lcspfp
The problem images are the brand logos at the bottom of the page.
Here's the code im using to display the brand logos:
<ul id="brands">
<li><a><img src="images/brand1.png" alt="" /></a></li>
<li><a><img src="images/brand2.png" alt="" /></a></li>
<li><a><img src="images/brand3.png" alt="" /></a></li>
<li><a><img src="images/brand4.png" alt="" /></a></li>
<li><a><img src="images/brand5.png" alt="" /></a></li>
<li><a><img src="images/brand6.png" alt="" /></a></li>
<li class="last"></li><p>
</ul>
Here's an image of the images with the vertical bars that I dont want there: http://i.imgur.com/9g1do.png
Add this CSS rule:
ul#brands a {
background:none;
}
Change line 644 of your styles.css file to the following:
.footer ul a { padding-right:5px; margin-right:3px; }
Delete this CSS-rule :
background: url(../images/links_separator.gif) no-repeat 100% 50%;
It creates those vertical lines.
Related
This is the current state:
and I want it like this:
I have done editing through photoshop to show my desired output. I have tried many things but i'm not successful.
This is the HTML:
<body>
<header>
<h1>Maxtergo - Guaranteed Perfect Product</h1>
<nav class='main-menu'>
<ul>
<li>
<a class='active' href='#'>Home</a>
</li>
<li>
<a href='#'>Portfolio</a>
</li>
<li>
<a href='#'>Services</a>
</li>
<li>
<a href='#'>Feature</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Help</a>
</li>
</ul>
</nav>
</header>
<div id='slider'>
<div id='bannerscollection_zoominout_opportune'>
<div class='myloader'></div>
<!-- CONTENT -->
<ul class="bannerscollection_zoominout_list">
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText2" ><img src="images/02_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText3" ><img src="images/03_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText4" ><img src="images/04_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText5" ><img src="images/05_opportune.jpg" alt="" width="2500" height="1172" /></li>
And no css is on the slider.
and this is header CSS:
header {
overflow: hidden;
padding: 25px 0px;
width: 960px;
margin: 0 auto; }
To make sure your header is shown above add z-index
header {
z-index: 99999;
overflow: hidden;
padding: 25px 0px;
width: 960px;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Firstly wrap up your both of your <header> and "slider" inside a
wrapper. Make sure that you have to provide it position "relative".
After that you have to go for making <header> as position absolute and
provide height and width as per your requirements. Then you must have to
add z-index to <header>. your <header> styles we will code here'll
look like this:
header {
position:absolute;
top:0;
bottom:auto;
left:0;
right:0;
margin:auto;
width:100%;
height:auto;
}
I am trying to keep some image in a single row. I am using bootstrap and image also including responsive class.
After 12 image new row has create for the rest of the image. But I want all image keep in a single row.
I have my code in this format
<ul class="people">
<li><a><img ></a>
<li><a><img ></a>
</ul>
Any kind of help will be appreciated. Thanks
After 12 image new row has create for the rest of the image. But I
want all image keep in a single row.
These images stays in a single row no matter how many.
.people li {
display: inline;
white-space: nowrap
}
<ul class="people">
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
<li><a><img src="http://lorempixel.com/100/100/sports" ></a>
</ul>
The simplest way in twitter-bootstrap is the class row whit div
<div class="row">
<div><a><img src='your_img_1' ></a></div>
<div><a><img src='your_img_2'></a></div>
<div><a><img src='your_img_3'></a></div>
</div>
Or If you need the image in <ul class="list-inline"> you need an inline block style
or for img
img {
border: 0 none;
display: inline-block;
height: auto;
max-width: 100%;
vertical-align: middle;
}
Please take a look at this Plunker.
HTML code:
<ul class="people">
<li>
<a><img src="http://blue-engineering.nl/wp-content/uploads/2014/10/Slider-blue.png"></a>
</li>
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png"></a>
</li>
</ul>
CSS code:
img{
width: 50px;
height: 50px;
}
li{
display: inline-block;
list-style-type: none;
}
Hope this is what you asked for :)
Try this :
li{
display: inline-block;
}
You may use display or float code for this.
Example:
li{
display:inline-block;
}
OR
li{
float:left;
}
But its better to use display code. because if you want to use float code, then you need to add a clear code after finish floating..
Example:
<ul class="people">
<li><a><img ></a>
<li><a><img ></a>
</ul>
<div class="people2">
your stuff... here
</div>
CSS
li{
float:left;
}
.people2 {
clear:both
}
So... I think its better to use display:inline-block
You can use
li
{
display:inline-block;
}
After 12 image new row has create for the rest of the image
li:nth-child(12n)
{
clear:both;
}
Basically, the navbar works perfectly, it stays statically stuck to the top of the screen when the user scrolls. When it is text-only, everything works fine. When I want to add the Twitter and Facebook icons, I can simply do so and it will work. However, as soon as I add an <a href="#"> to enclose the image, it breaks completely. Occasionally, the navbar will work even with the image links, but around 90% of the time it will simply fail, the navbar will not appear, and even though Inspect Element reveals that it should be loaded, nothing is shown.
Relevant:
Working HTML
<div class="" id="header">
<ul class="menu">
<li class="menu-item first">Gallery</li>
<li class="menu-item second">Charity</li>
<li class="menu-item third">About Me</li>
<li class="menu-item fourth">Contact</li>
<li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
<img src="TaiwanSite_files/fb.png" height="25"></li>
<li class="menu-top">
<img src="TaiwanSite_files/top-arrow.svg" height="61" width="61">
</li>
</ul>
</div>
Broken HTML
<div class="" id="header">
<ul class="menu">
<li class="menu-item first">Gallery</li>
<li class="menu-item second">Charity</li>
<li class="menu-item third">About Me</li>
<li class="menu-item fourth">Contact</li>
<li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
<img src="TaiwanSite_files/fb.png" height="25"></li>
<li class="menu-top">
<img src="TaiwanSite_files/top-arrow.svg" height="61" width="61">
</li>
</ul>
</div>
The relevant CSS:
.menu {
padding:0;margin:0 auto;position:relative;max-width:1024px;height:2.4em;padding-left:62px;padding-right:62px
}
.menu:after {
display:block;content:"";clear:both
}
.menu-logo {
position:absolute;top:.18em;left:0;right:0;text-align:center;z-index:-1
}
.menu-logo img {
width:4.8em;margin:0;padding:0
}
.menu-item {
display:block;float:left;min-width:20%;text-align:right;height:1.2em;margin-top:.58em
}
.menu-item.first {
text-align:left
}
.menu-item.second {
text-align:left
}
.menu-item.third {
text-align:left
}
.menu-item.fourth {
text-align:left
}
.menu-item.media {
float:right;text-align:right
}
.menu-item a {
text-decoration:inherit;font-family:inherit;color:inherit;font-weight:inherit;line-height:inherit;display:none
}
If there is any additional information I can provide at this time, please inform me and I will try my best to do so. Thank you very much in advance for your time and assistance.
Add a special class to your a tags (in this case on):
<a class="on" href="https://twitter.com/">
<img src="TaiwanSite_files/twitter.png" height="25"></a>
<a class="on" href="https://facebook.com/">
<img src="TaiwanSite_files/fb.png" height="25"></a>
Then add this to your styling:
.on {
display: inline-block !important;
}
for the images to display side-by-side, or this:
.on {
display: block !important;
}
for the images to be one on top of the other.
This should help.
I tried to make a footer for a Website im doing for shool. I want to have something like the Impressum on the right and little images for social media on the left. I made it work for the right side but I dont know why the images arent on the right side. I already googled but the things they said didnt worked for me.
JSfiddle demo :
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<ul id="socialmediaicons">
<li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
My suggestion is to just place them outside the footer but I need to have them in there.
If you want the pictures on the left as you mentioned first, add a class to the list items for the socialmedia icons and give it a display: inline-block that should do what you need. If you want them on the right they are there.
.leftFoot {
display: inline-block;
}
<footer id="footer-wrapper">
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<ul id="socialmediaicons">
<li class="leftFoot"><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li class="leftFoot"><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
</footer>
You have to put the elements in reverse order when floating "right" things :
demo
<ul id="socialmediaicons">
<li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
This line displays my logo:
<li><img class="logo" src="selector/logo.png" alt="" /></li>
How can I add a clickable link to this image?
Try this here:
<li>
<a href="target.html">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
You want properly also to remove the border around the image. To fix that use this CSS:
.logo {
border: 0;
}
Are you just asking how to make the image a hyperlink to itself? Like this?:
<li>
<a href="selector/logo.png">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>