This is the html content I want to add.
These are 4 verticals of my firm and they have individual clients and I want the logo of these clients yo appear in the same box moving downwards shifting the remaining text downward and the logo gallery running downward.
<div class="box1">
<div class="box1_bot">
<div class="box1_top">
<div class="pad" >
<h2>CLIENTS</h2>
<ul>
<li>Consultants4manpower</li>
<li>Corporate Training</li>
<li>English and PD Training</li>
<li>Career Counselling</li>
</ul>
</div>
</div>
</div>
</div>
<html>
<head>
<script>
function show_logo_home(){
var loc = document.getElementById("logo");
var linknews = document.getElementById("news");
var linkcontact = document.getElementById("contact");
var linkabout = document.getElementById("about");
loc.style.visibility="visible";
loc.style.marginTop="-227";
linknews.style.marginTop="150";
}
</script>
<style>
#logo {
background-color: #F00;
height: 150px;
width: 150px;
margin-left: 30px;
position: absolute;
visibility:hidden;}
</style>
</head>
<body>
<div class="box1">
<div class="box1_bot">
<div class="box1_top">
<div class="pad" >
<h2>CLIENTS</h2>
<ul>
<li >Consultants4manpower</li>
<li id="news">Corporate Training</li>
<li id="contact">English and PD Training</li>
<li id="about">Career Counselling</li>
</ul>
</div>
</div>
</div>
</div>
<div id="logo"></div>
</body>
</html>
<div id="demo"></div>
<button id="btn"onclick="popup()">click me</button>
<style>
#demo {
-webkit-transition: all 2s ease 0s;
-o-transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
transition: all 2s ease 0s;
height: 0px;
width: 0px;
}
</style>
<script>
function popup(){
document.getElementById('demo').style.cssText='height:500px; width:500px;background-color:red;position:absolute;'
document.getElementById('demo').style.marginLeft=250;
document.getElementById('demo').style.marginTop=50;
}
</script>
Related
im doing a website for videogames news and updates.I have to add a translation option, so i decided to add google translate button, but it disables the links in the menu on the right side.Please help!
HTML:
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset = "UTF-8">
<link rel="stylesheet" type = "text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src = "gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class = "card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class = "button">
Explore
</div>
<div class="social">
<ul>
<li> <img src="facebook%20white.png", id="facebook-main"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id="instagram-main"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-main"></li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li> <img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png", id="facebook-menu"></li>
<li> <img src="Black-icon-Instagram-logo-transparent-PNG.png", id = "instagram-menu"></li>
<li> <img src="Black-icon-Twitter-logo-transparent-PNG.png", id="twitter-menu"></li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function(){
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
CSS:
.menu{
position:absolute;
background-color:#ffd700;
top:0;
right:0;
width:15.62vw;
min-height:100vh;
display:flex;
justify-content: center;
align-items:center;
z-index:-5;
}
.menu.sticky{
position:fixed;
}
.menu ul{
position:relative;
list-style:none;
}
.menu ul li{
padding:1.04vh 1.04vw;
}
.menu ul li a{
text-decoration: none;
color:black;
font-size:4.5ch;
}
.menu ul li a:hover{
color:dimgray;
}
.translate-1{
position:absolute;
left:3vw;
top:16vh;
display:flex;
justify-content: center;
align-items:center;
}
.translate-2{
position:absolute;
left:3vw;
top:76vh;
display:flex;
justify-content: center;
align-items:center;
}
Here are some photos:
this is the page with the translate button
this is the menu on the right, when opened
The links in the menu, should become gray when u hover on them, but due to the google translate button, they don't. When i remove the google translate button, it works, so the problem is there.
JS for the menu is included in the html
And also, im really sorry for my bad formatting, im new to this :(
Your menu has a negative z-index value, so it's just falling behind everything. Make it a positive value or remove it altogether and you're set. If you have a specific reason for using the z-index on the menu, then you'll need to add it to the other elements as well so they're layering correctly and the menu items are accessible.
SO's snippet doesn't seem to like the Google translate script so here's a fiddle that shows that it still works with the z-index property modified:
https://jsfiddle.net/astombaugh/hwo73b64/8/
.menu {
position: absolute;
background-color: #ffd700;
top: 0;
right: 0;
width: 15.62vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.menu.sticky {
position: fixed;
}
.menu ul {
position: relative;
list-style: none;
}
.menu ul li {
padding: 1.04vh 1.04vw;
}
.menu ul li a {
text-decoration: none;
color: black;
font-size: 4.5ch;
}
.menu ul li a:hover {
color: dimgray;
}
.translate-1 {
position: absolute;
left: 3vw;
top: 16vh;
display: flex;
justify-content: center;
align-items: center;
}
.translate-2 {
position: absolute;
left: 3vw;
top: 76vh;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<head>
<title> GameDog | Video games info </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section class="page">
<nav>
<div class="logo">
<img src="gamedoglogo.png">
<p> <b> GameDog </b> </p>
</div>
<div>
<ul>
<li>
<div class="toggle"></div>
</li>
<li id="aboutme">About me</li>
<li id="news">
News about ↓
<ul>
<li> Fortnite</li>
<li> Rocket League</li>
<li> League of Legends</li>
<li> CS:GO</li>
</ul>
</li>
<li id="main">Home</li>
</ul>
</div>
</nav>
<h1 class="topic"> Home Page </h1>
<div class="card-info">
<h3> Hey Gamers, </h3>
<br>
<h4> welcome to the site. Here you can find the latest news about your favourite games. We provide information about the current updates, changes and improvements. Here, in the site, you can also find the patch notes for the last update of your favourite
games. Explore by clicking the button below or the News section above.</h4>
</div>
<div class="button">
Explore
</div>
<div class="social">
<ul>
<li>
<img src="facebook%20white.png" , id="facebook-main">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-main">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-main">
</li>
</ul>
</div>
<div class="translate-1">
<div id="google_translate_element"></div>
<span>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', includedLanguages: 'de,it,fr,ru,tr,bg', autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</span>
</div>
</section>
<div class="menu">
<ul>
<li> Home </li>
<li> News </li>
<li> About me </li>
</ul>
<div class="social-menu">
<ul>
<li>
<img src="toppng.com-facebook-black-white-icon-facebook-face-book-png-facebook-icon-for-footer-473x473.png" , id="facebook-menu">
</li>
<li>
<img src="Black-icon-Instagram-logo-transparent-PNG.png" , id="instagram-menu">
</li>
<li>
<img src="Black-icon-Twitter-logo-transparent-PNG.png" , id="twitter-menu">
</li>
</ul>
</div>
</div>
<script>
const menuToggle = document.querySelector('.toggle')
const page = document.querySelector('.page')
menuToggle.addEventListener('click', function() {
menuToggle.classList.toggle('active')
page.classList.toggle('active')
})
</script>
<script>
window.addEventListener("scroll", function() {
var navbar = document.querySelector("nav");
var menu = document.querySelector(".menu");
navbar.classList.toggle("sticky", window.scrollY > 0);
menu.classList.toggle("sticky", window.scrollY > 0);
})
</script>
</body>
I'm working on a website. I'm coloring the menu items, but when coloring in the top left image (background color), it gets colored in square.
I would like to have it colored in skewed, so that it follows the black outline.
A screenshot of the problem and some of the html:
Is there anything I could do to make this work?
The html code of the bar:
<div class="iwgh2-bar">
<div class="iw2-layout iw2-default-breakpoint">
<div class="iw2-wrapper iw2-default-margin">
<div class="iw2-inner-wrapper">
<div class="iwgh2-navigation">
<a class="iw2-branded" href="https://www.vlaanderen.be/nl" target="_self">
<div class="iwgh2-branding-logo"></div>
<span>Vlaanderen</span>
</a>
<div class="iw2-menu iw2-menu-has-items" data-show-menu-help="Toon navigatie menu" data-hide-menu-help="Verberg navigatie menu">
<div class="iwgh2-navigation-menu-toggle-wrapper">
<div class="iwgh2-navigation-menu-toggle-animation-wrapper" style="">
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Agentschap Binnenlands Bestuur</a>
<a class="iwgh2-navigation-menu-breadcrumb" style="" href="http://www.gelijkekansen.be">Gelijke Kansen</a>
<a class="iwgh2-navigation-menu-toggle iw2-exclude-from-outbound-link-tracking" href="javascript:;" aria-expanded="false" aria-owns="64ed92f1-fece-e61f-2d15-0af8093d9040" aria-controls="64ed92f1-fece-e61f-2d15-0af8093d9040"><span class="iw2-visually-hidden iw2-help-text"> Toon navigatie menu </span></a>
</div>
</div>
<div class="iwgh2-flyout-wrapper iw2-window-closed" style="display: none; left: 375.4px;" tabindex="-1" id="64ed92f1-fece-e61f-2d15-0af8093d9040">
<div class="iwgh2-search iw2-hidden" role="search">
<div class="iwgh2-form-label">
<label for="iwgh2-search-field">Zoeken</label>
</div>
<div class="iwgh2-form-textfield">
<input id="iwgh2-search-field" class="iwgh2-search-field iwgh2-form-text" name="query" type="search">
</div>
<div class="iwgh2-form-actions">
<div class="iwgh2-form-action">
<div class="iwgh2-form-button">
<input class="iwgh2-form-submit" name="op" value="" type="submit">
</div>
</div>
</div>
</div>
<ul class="iw2-menu-items" tabindex="-1">
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://lokaalbestuur.vlaanderen.be" target="_self">Lokaal Bestuur</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://www.thuisindestad.be" target="_self">Vlaams Stedenbeleid</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://integratiebeleid.vlaanderen.be" target="_self">Integratie en Inburgering</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://www.vlaamserand.be" target="_self">Beleid Vlaamse Rand</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://brussel.vlaanderen.be/home.html" target="_self">Beleid Brussel</a></li>
</ul>
</div>
</div>
</div>
<div class="iwgh2-extensions">
<div class="iwgh2-extension-contact" data-show-menu-help="Toon menu" data-hide-menu-help="Verberg menu">
<a class="iwgh2-extension-contact-toggle iw2-exclude-from-outbound-link-tracking" href="http://www.gelijkekansen.be/Praktisch/Contact.aspx" target="_self" aria-owns="906864c8-0db7-9b35-52ce-143b0e4d962a" aria-controls="906864c8-0db7-9b35-52ce-143b0e4d962a" aria-expanded="false"><span class="iw2-visually-hidden iw2-help-text"> Toon menu </span>Contacteer ons</a>
<div class="iwgh2-extension-contact-wrapper iwgh2-flyout-wrapper">
<div class="iwgh2-contact-menu iw2-window-closed iw2-menu-has-items" style="display:none;" tabindex="-1" id="906864c8-0db7-9b35-52ce-143b0e4d962a">
<div class="iwgh2-contact-menu-header">
<span class="iw2-menu-item-title">Gelijke kansen</span>
</div>
<ul class="iw2-menu-items">
<li class="iw2-menu-item iw2-contact-section-entry iw2-contact-section-entry-icon-link iw2-contact-section-entry-type-link"><a class="iw2-menu-item-wrapper" href="http://www.gelijkekansen.be/Praktisch/Contact.aspx" target="_self"><span class="iw2-menu-item-title">Contacteer ons</span>
<div class="iw2-menu-item-description"></div>
</a></li>
<li class="iw2-menu-item iw2-contact-section-entry iw2-contact-section-entry-icon-link iw2-contact-section-entry-type-link"><a class="iw2-menu-item-wrapper" href="http://binnenland.vlaanderen.be/klachten" target="_self"><span class="iw2-menu-item-title">Klachten</span>
<div class="iw2-menu-item-description">Waar kan ik terecht met een klacht?</div>
</a></li>
</ul>
</div>
<div class="iwgh2-windows">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.iwgh2.iwgh2-redesign .iwgh2-bar {
background-color: #fff;
border-bottom: 1px solid #cbd2da;
}
.iwgh2.iwgh2-redesign.iwgh2-default-margin .iw2-layout .iw2-wrapper.iw2-default-margin {
padding: 0;
}
.iwgh2-bar .iw2-wrapper {
*zoom: 1;
position: relative;
}
.iw2-wrapper .iw2-inner-wrapper {
position: relative;
}
.iwgh2-navigation {
float: left;
white-space: nowrap;
}
.iwgh2.iwgh2-redesign .iwgh2-navigation>a {
color: #333332;
font-size: 1.1875em;
line-height: 2.31579em;
text-transform: none;
transition: color 0.2s;
}
.iwgh2.iwgh2-redesign.iwgh2-redesign-alt .iwgh2-branding-logo {
position: relative;
width: 47px;
background-color: #FFE507;
overflow: hidden;
}
.iwgh2 .iw2-menu {
display: inline-block;
vertical-align: bottom;
position: relative;
}
.iwgh2.iwgh2-redesign.iwgh2-default-margin .iw2-layout {
max-width: none;
}
.iwgh2-bar .iw2-layout {
position: relative;
overflow: visible;
}
Take a look at this fiddle and see if that is what you wanted
#trapezoid {
border-bottom: 100px solid #FFE507;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
https://jsfiddle.net/CaffeinatedCod3r/r7deqakL/
More CSS Shapes : https://css-tricks.com/the-shapes-of-css/
Using below code, I am able to highlight the element with value 2 and 3 instead of element 3. I tried using last child and nth-last-type but didn't work as expected. Issue is with highlighting immediate next element of class - active and apply blink to both tick mark of 3 and value 3 and change of active class to change blink
No Jquery solution, as currently trying to implement using CSS3
I am trying to choose first element of class hightlight without active class using CSS only
HTML:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr>
<tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
CSS3:
.highlight{
color:white;
width:20px;
height:20px;
border-radius:50%;
background: rgb(234,116,0);
display: inline-block;
text-align: center;
}
.active{
background:green;
}
#keyframes blink {
to { background: rgb(234,116,0); }
}
.active + .highlight{
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 1: Jquery
You can do it using jquery like so
$(".active:last").next().addClass("blink")
And change your css to have blink class
.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Working Js fiddle
Method 2:
If you want to do it only using css , you need to book keep your last element
by adding a class to the last element say .last
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active last">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
and then do you css like
.last + .highlight {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 3:
change your css to
div.active + div:not(.active){
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Basically it finds the element which has class active before it and the next class which does not have the class active.
working jsfiddle
Instead of nth-last-type you may use:
.highlight + .highlight:not(.active):nth-of-type(3) {
The snippet:
.highlight {
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(234, 116, 0);
display: inline-block;
text-align: center;
}
.active {
background: green;
}
#keyframes blink {
to {
background: rgb(234, 116, 0);
}
}
.highlight + .highlight:not(.active):nth-of-type(3) {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>1.</td>
<td><span>one</span></td>
</tr>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>2.</td>
<td><span>two</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>three</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>four</span></td>
</tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
Hello Stack Overflow Pros
Id like to hover multiple divs when i hover the image.
There is a nav bar on top of different images, when i hover the
image i want to trigger the navigation above.
Here some code:
You can see that the nav is underlined. I want it to trigger, when i clicking on the image.
Thanks a lot for your help!
#nav_start_container {
float:left;
position:relative;
margin-left:60px;
}
#nav_start_container ul li {
min-width:136px;
float:left;
position:relative;
margin:0;
}
.nav_start {
min-width:136px;
display: inline-block;
color: #495d7f;
text-decoration: none;
font-size: 15px;
font-weight: 550;
margin-bottom:20px;
text-align:center;
}
.nav_start:hover {
text-decoration: underline;
background: #fff !important;
color: #495d7f;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#current {
text-decoration: underline !important;
background: #fff !important;
color: #495d7f !important;
}
.bannerbild {
margin:0;
}
.bannerbild:hover {
padding-top:7px;
position:absolute;
}
<div id="nav_start_container">
<ul id="nav">
<li>
<a href="portrait.html">
<span class="nav_start">test2</span>
<img src="images/1a.jpg" alt="…" class="bannerbild" />
</a>
</li>
<li>
<a href="portrait.html">
<span class="nav_start">test2</span>
<img src="images/1b.jpg" alt="…" class="bannerbild" />
</a>
</li>
<li>
<a href="portrait.html">
<span class="nav_start">test2</span>
<img src="images/1c.jpg" alt="…" class="bannerbild" />
</a>
</li>
<li>
<a href="portrait.html">
<span class="nav_start">test2</span>
<img src="images/1d.jpg" alt="…" class="bannerbild" />
</a>
</li>
<li>
<a href="portrait.html">
<span class="nav_start">test2</span>
<img src="images/1e.jpg" alt="…" class="bannerbild" />
</a>
</li>
<li>
<a href="portrait.html">
<span class="nav_start">test2</span>
<img src="images/1f.jpg" alt="…" class="bannerbild" />
</a>
</li>
</ul>
<div class="clear"></div>
</div>
You could combine the required elements for each menu item in the link.
<li>
<a href="test2.html">
<span class="link-text">test2</span>
<img src="images/1b.jpg" alt="…" class="banner-image" />
</a>
</li>
Now, if you set an :hover definition to the link, it will work if you mouse over the link text or the image. You also shouldn't repeat all the main navigation links (they will be read twice by assistive technologies and search engine bots…)
I'm very new to CSS and Bootstrap.
I have large brand image (logotipo-white), and I want to resize it to 30% of its original size. However, when I apply the following code the image appear small but still occupies the original space, pushing the nav links to another line.
How can I solve this?
HTML:
<body>
<div class = "navbar navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
<ul class = "brand"><img src="images/logotipo-white.png"></ul>
<ul class = "nav">
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
CSS:
body{
background-image:url('../images/bg-green.jpg') ;
}
.brand img{
max-width: 30%;
}
in the html don't use an ul for your brand as this is not needed, use an a-tag instead:
<a class="brand" href="#"><img src="images/logotipo-white.png" /></a>
and to solve your issue, in css do the following: CSS:
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
If it's built with bootstrap, then everything is placed within Spans. Trying making the span it is in smaller.
You shouldn't use <img> directly inside <ul>.
The markup could be like this :
<ul class = "nav">
<li class="brand"><img src="images/logotipo-white.png"></li>
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
Or this :
<ul class = "brand"><li><img src="images/logotipo-white.png"></li></ul>
<ul class = "nav">
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
or this :
<div class = "brand"><img src="images/logotipo-white.png"></div><!--make me float/display:inline-block/other -->
<ul class = "nav">
<li class = "active">
Home
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
In Joomla! 3 template css add max-width: 80% to .brand line 7137
.brand {
color: #001a27;
max-width: 80%;
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
transition: color .5s linear;
}