I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.
$(document).ready(function() {
$('#show_icon,.showhide_icon').hover(function() {
$(this).next().slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Login/Register</div>
</div>
</li>
<li class="listmenu">
<div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
<div id="categories">
<div CLASS="showhide_icon">Shopping Bag</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
The CSS Properties goes like this.
CSS Properties
.listmenu {
float: left;
width: auto;
margin-right: 0;
height: 30px;
padding: 0 10px;
overflow: hidden;
}
#categories {
display: none;
width: 200px;
}
slideToggle() animates on the height of the element which is why you're seeing it open downward.
If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.
Edit: After reviewing your question again, a better solution might be to handle this with css:
The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:
.listmenu {
display: inline;
}
.umMenu {
height: 16px;
max-width: 14px;
display: inline-block;
overflow: hidden;
}
.listmenu:hover .umMenu {
max-width: 500px;
/*Can be any # of sufficient width to display all content*/
transition: 2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
<div class="container">
<div class="nav-header">
<div class="pull-right hidden-sm">
<ul>
<li class="listmenu">
Login/Register
</li>
<li class="listmenu">
Shopping bag
</li>
</ul>
</div>
</div>
</div>
</header>
Related
I have a little problem where my web page is displaying fine on my pc screen but when i go live on my laptop or mobile phone the layout is all messed up. Does anyone know how i can fix this? Its is completely ruined in other screens and is not user friendly, but on my main computer where i was using to preview and create my website, it is basically ready.
/*PLAYER PAGE*/
.container {
padding: 40px 20px 0;
max-width: 2000px;
margin: 0 auto;
border-bottom: 2px solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 20px;
}
h1 {
margin: 0;
text-align: center;
font-size: 50px;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 25px;
font-family: "BatmanForeverAlternate";
padding: 40px;
}
.luxxreno {
text-align: left;
position: relative;
left: 400px;
padding-top: 80px;
bottom: 150px;
}
.luxxreno img {
border-radius: 50%;
width: 600px;
padding-bottom: 10px;
position: relative;
top: 80px;
}
.meet-the-owner {
padding: 50px;
border-top: 2px solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
flex: right;
text-align: left;
position: relative;
left: 300px;
bottom: 10px;
font-size: 21px;
}
.questions p {
padding: 10px;
position: relative;
top: 30px;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
padding-bottom: 35px;
position: relative;
left: 12px;
font-size: 50px;
}
.owner {
font-family: "BatmanForeverAlternate";
position: relative;
left: 12px;
color: red;
}
.luxx-socials {
position: relative;
left: 9px;
top: 50px;
}
.luxx-socials ul li {
padding: 10px 30px;
position: relative;
top: 15px;
list-style-type: none;
display: inline-block;
right: 30px;
font-family: "BatmanForeverAlternate";
font-size: 25px;
color: #ffd700;
transition: 0.5s;
}
.luxx-socials ul li a {
text-decoration: none;
}
.luxx-socials ul a li:hover {
color: red;
}
#keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
<head>
<!--
<script>
ScrollReveal({
reset: true
});
</script>
-->
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Players | LuxxMob</title>
<link rel="stylesheet" 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=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<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=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<!--END OF NAV-->
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”>
<li>487 # YouTube</li>
</a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”>
<li>2.6k # Instagram</li>
</a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”>
<li>3k # Twitch</li>
</a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”>
<li>2.5k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”>
<li>657k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”>
<li>360 # YouTube</li>
</a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”>
<li>193 # Instagram</li>
</a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”>
<li>2.6k # Twitch</li>
</a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”>
<li>142 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”>
<li>23.6k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”>
<li>400 # Twitch</li>
</a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”>
<li>1.2k # Twitter</li>
</a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”>
<li>1.1k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <b>Honestly don’t want a super power just wanna be Iron Man.</b></p>
<p>Favourite Artist of All Time: <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”>
<li>353 # YouTube</li>
</a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”>
<li>115 # Instagram</li>
</a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”>
<li>2.1k # Twitch</li>
</a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”>
<li>392 # Twitter</li>
</a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”>
<li>60k # TikTok</li>
</a>
</ul>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>© 2021 LuxxMob</h4>
<h4>Made with ❤ by #truechow</h4>
</div>
</footer>
<!--
<script>
ScrollReveal().reveal('footer', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.luxxreno', {
duration: 2000
});
</script>
<script>
ScrollReveal().reveal('.header');
</script>
<script>
ScrollReveal(options);
</script>
-->
</body>
This is likely because your webpage is not responsive. An easy fix is to always use percentages instead of specific pixels to position items.
eg top: 5% instead of top: 15px
I think it's because you have to use media queries to make your website responsive on all devices.
Check it out here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Another tip is not to use only pixels as a unit of measurement, also use 'em', 'rem', vw (for the font) and '%'
Check it out here too:
https://www.w3schools.com/cssref/css_units.asp
There's a couple of random things in your css that I don't know why they're there. max-width: 2000px, why is this 2000 pixels, it would be way too much for most phones and screens (perhaps there's a reason like the player map being large, I dunno). overflow: hidden, why is there an overflow on a h1 tag. border-width: 100%, why are you setting border widths to 100%. margin: 0 auto why is there a margin auto on a 2000px wide container, it'll never be the center of anything. position: relative, why is everything relative. There's a bunch of random CSS that I don't know what it's doing or why it's there (it shouldn't be).
Along with that you shouldn't ever use pixels for fonts, it won't scale on a mobile phone so your text (and containers containing text) will get messed up. Use font-size: 100% on the html container and then use font-size: 1rem // or 1.2 or 1.4 on anything else so you scale everything according to root.
Along with that you've used pixels everywhere to define borders/tops/alignment, which will almost never work out (unless you're just lucky). You should be using flex for page layout and pixels if you want to define specific containers. You've not shown body and the main page CSS but from container I can see you've not used that. You should have:
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
}
.container {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
Or something similar for your page layout. You don't need any #media stuff for that because flex will work correctly across all devices.
I want the header of the Modal to be fixed as the modal is scrolled, but position:fixed; is not working. I am using Materialize CSS for the modal construction. But position:sticky is working.
$(document).ready(()=>{
$('#missionModal').modal();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="">
<div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">
</div>
<div style="margin-top:100px;height:550px">
<p>This ois naven don</p>
</div>
</div>
<div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
Maybe try this one. I reconstructed your HTML and CSS code:
Just identify which is your header and give a fixed height on your modal body to be scrollable. And, materialize css has a default overflow-y: auto I just give it initial so that the whole modal will be not scrollable.
Please take a look at my code:
$(document).ready(()=>{
$('#missionModal').modal();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.modal {
overflow: initial !important;
}
.modal-header {
height: 100px;
background: #0a2701;
font-size: 40px;
padding: 20px;
color: #ffffff;
}
.modal-body {
overflow-y: auto;
height: 120px;
background: #fff;
}
.modal-body div {
height:550px
}
.modal-close {
float: right;
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="modal-header">This is a header.</div>
<div class="modal-body">
<div>
<p>This ois naven don</p>
</div>
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/
I'm using Bootstrap 3 and jQuery 1.9.1 to make a website where profile picture is shown in a <li> tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.
Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile {
margin-top: 10px;
width: 200px;
/* if image is bigger it will adjust according to parent width */
height: 250px;
display: inline-block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-profile {
opacity: 0.5;
}
.img-wrap .hover-div {
display: none;
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
z-index: 10;
/* width of image container */
}
.img-wrap:hover .hover-div {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div">Update Image
</div>
</li>
</ul>
</div>
</div>
Yoy should try this. that is exactly you want.
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
$(this).closest("li").find("a").show();
},
function () {
$(this).fadeTo(200, 1);
$(this).closest("li").find("a").hide();
});
})
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" />Link that you want
</li>
</ul>
</div>
</div>
you can achieve all that using css alone.
html
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
css
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
opacity: 1.0;
filter:alpha(opacity=100);
}
.text {
display: none;
}
img-profile:hover {
opacity: 0.45;
filter:alpha(opacity=45);
}
img-profile:hover + .text {
display: block;
}
check this fiddle
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
Update Image
</li>
</ul>
</div>
</div>
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
#side-menu li a{
display:none;
}
#side-menu li:hover a#update{
display:block;
}
JS
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
I am working on a 960 px-design at the moment, and I am trying to do a menu in where it is supposed to be 6 "buttons" with a 5 px margin between each one. I know how to do this, and I cannot seem to find what is wrong with my code. It would be very helpful if someone could look through my code with some fresh eyes and tell me where the issue is...
http://jsfiddle.net/9tx8v/
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
Sorry for include a shitload of unnecessary code, but I'm so fed up atm I might just include the whole thing...
Thanks in advance
How about closing your DIV's? And you need a float:left for any DIV
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}
First at all as a better practice keep the closing tags for </div> elements.
<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...
Then just float each element you don't need to float the nav:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float:left; /* Add this*/
}
Check this Demo Fiddle
First, close your divs:
<div id="två"><img src="menu.jpg"/></div>
<div id="tre"><img src="menu.jpg"/></div>
<div id="fyra"><img src="menu.jpg"/></div>
<div id="fem"><img src="menu.jpg"/></div>
<div id="sex"><img src="menu.jpg"/></div>
Add float: left in you css:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float: left;
}
<nav> should contains <a> , else it is not a <nav>.
Do not forget to close your tags and adapt their display if needed on a row , sized or on top of each others :)