Hi guys so basically I am trying to putt some social media logo and next to it i want to write the account detailes or any kind of text next to the icon i am strugling with that because i want to have some movement when someone put the mouse on the icon and here everything screw up so if someone know how to make the text and the icon next to each other at the same time both of them get the same effect when someone putt the mouse on the icon or the text
https://jsfiddle.net/asda12321/9mj5q8k4/1/
`<div id="bottom">
<div id="socia-midea-logo">
<ul>
<li></li>
<h1>Facebook</h1>
<li><img id="socia-midea-logo" src="../content/ico/whatsapp.png" alt="insta img"></li>
<h1>Whatsapp</h1>
<li><img id="socia-midea-logo" src="../content/ico/instagram.png" alt="insta img"></li>
<h1>Instgram</h1>
<li><img id="socia-midea-logo" src="../content/ico/world-wide-web.png" alt="insta img"></li>
<h1>Email</h1>
</ul>
</div>
</div>`
Css
#bottom{
padding-bottom: 100px;
background-color: turquoise;
}
#socia-midea-logo {
width: 1em;
position: relative;
top: 0.5em;
left: 1.5em;
margin: 5em 0em 0em 0em;
width: 4em;
}
#socia-midea-logo ul{
list-style: none;
}
#socia-midea-logo li a:hover{
position:relative;
background-color: rgb(255, 255, 255);
padding: 3.7em 2.7em 1.5em 0em;
align-items: center;
border-radius: 50em;
transition: 0.2s;
}
Always the text goes below the icon only
You have a lot of bugs in Yopurs code.
You can't mix H1 and LI elements
You cant use one id id="socia-midea-logo" in more than one element.
You should not use H1 without text section. This is not forbidden but it is still small document structure bug.
I suggest do it like this: https://jsfiddle.net/6jt94pab/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.social-media ul{
list-style: none;
width:100%;
box-sizing:border-box;
}
.social-media li{
display:block;
width:100%;
margin:5px;
box-sizing:border-box;
}
.social-media li a{
display:block;
height:40px;
line-height:40px;
padding-left:60px;
position:relative;
color:#555555;
box-sizing:border-box;
}
.social-media li img{
position:absolute;
left:10px;
top:2px;
width:38px;
height:38px;
transition:all 300ms ease;
}
.social-media li a:hover{
color:#0055AA;
background:#f0f0f0;
border-radius:5px;
}
.social-media li a:hover>img{
transform:rotate(360deg);
}
</style>
</head>
<body>
<div class="social-media">
<ul>
<li><img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook">Facebook</li>
<li><img src="https://cdn-icons-png.flaticon.com/512/174/174879.png" alt="Facebook">WhatsApp</li>
<li><img src="https://cdn-icons-png.flaticon.com/512/4812/4812397.png" alt="Facebook">Email</li>
</ul>
</div>
</body>
</html>
Related
I'm having some issues with the sliding menu links. Each sliding menu works as intended, but if I try to hover the sliding link in the same horizontal space as the h1 text (the first one, the one that says "PERFIL"), it doesn't work until the cursor leaves the h1 area.
<!doctype html>
<html class="video">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="wrapper">
<ul id="menu">
<li id="home">
PERFIL<img src="menu/home.png">
</li>
<li id="3d">
GRAFICA 3D<img src="menu/3d.jpg">
</li>
<li id="3">
AUDIOVISUAL<img src="menu/audio.jpg">
</li>
<li id="4">
FOTOMONTAJE DIGITAL<img src="menu/ps.png">
</li>
<li id="5">
CONTACTO<img src="menu/contact.png">
</li>
</ul>
</div>
<body>
<h1><div id="video">VIDEO</div></h1>
</body>
</html>
.wrapper * {
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
.wrapper ul li {
display:flex;
margin-bottom:10px;
}
.wrapper ul li a {
background:black;
color:white;
padding:5px 10px;
transform: translateX(calc(-100% + 45px));
transition: transform 1s ease;
text-decoration: none;
}
.wrapper img {
max-width:32px;
margin-left:5px;
}
.wrapper ul li a:hover {
background:black;
color:white;
padding:5px 10px;
transform: translateX(0);
}
.wrapper:hover a:focus {
left: 0;
background: none;
}
.video h1 {
font-family: verdana;
color: white;
text-align: right;
margin-right: 5%;
margin-top: -280px;
margin-bottom: 50px;
text-transform: uppercase;
background-position: center;
transform: skewX(-20deg);
transform-origin: top;
}
.video div {
padding: 2%;
display: inline;
border-radius: 15px;
}
#video {
background-color: black;
padding: 1%;
display: inline;
border-radius: 15px;
}
Here's a mockup of the site
(Jfiddle)
It's because the width of the h1 element overlaps the menu. You can change the width of the h1 and it should works as expected.
See updated fiddle
I made a dropdown menu with css and i wanted to activate it by hovering over menu button and it works just fine. But problem is that,when i hover below menu button dropdown menu is activated again ,and i don't want that. Here is my HTML and CSS and every help would be more than appreciate.
PS Sorry if you find some typos english is not my native language.
#charset "UTF-8";
body {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 100%;
}
* {
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.container {
width: 1000px;
height: 100%;
margin: 0px auto;
}
nav ul a {
color: white;
}
nav ul {
width: 100px;
height: 30px;
margin: 270px 460px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul li {
width: 100px;
height: 30px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
margin-top: 5px;
position: relative;
top: 17px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul:hover li {
opacity: 1;
}
nav ul li:hover a {
border-bottom: 2px solid white;
}
li:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
ul:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>HOME
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
Try this made some css changes to your code. see the overflow hidden changes.
nav ul{
list-style-type:none;
transition:all 0.3s;
max-height:50px;
overflow:hidden;
width:120px;
padding:0px;
}
nav ul li{
height:30px;
width:100px;
padding:10px;
margin-top:5px;
background:teal;
text-align:center;
cursor:pointer;
transition:all 0.3s;
}
nav ul li a{
color:white;
font-family:'segoe ui';
text-decoration:none;
}
nav ul li:hover{
background:yellowgreen;
}
nav ul li:not(:first-child){
opacity:0;
}
nav ul:hover{
max-height:600px;
}
nav ul:hover li{
opacity:1;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
Whenever I resize my screen, everything on screen stays where it is and a scroll bar appears... except for the my horizontal list. It keeps moving along with the screen and then becoming multiple layers and messing up. Is there a way for me to keep the list from moving? Previously I tried adding {white-space: nowrap} to the #primary_nav_wrap ul item. However, this then causes the drop down under "committee" to become a horizontal drop down rather than a vertical drop down menu. Is there a way to simply make the entire list not move and an the same time not cause the drop down to change? Could I just affect the parent and not the child?
Here's the CSS
#topbar{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin: auto;
top:0;
}
#topbar2{
background-color: #636363;
height:2.4em;
position:absolute;
width:81.8em;
margin:auto;
top:10em;
z-index:-1;
}
#title{
font-family:basic title font;
color:#ffffff;
position: absolute;
top:-0.6em;
font-size:1.6em;
left:17.4em;
z-index:1;
white-space: nowrap;}
#logo {
position:absolute;
top:2.6em;
left:36.5em;
z-index:1;
width:9em;
}
#text
{font-family:basic title font;
color:#636363;
position: absolute;
left:8em;
top:0.2em;
font-size:4em;
min-width:100%
z-index:1;}
#text2
{font-family:basic title font;
color:#636363;
position: absolute;
left:11.6em;
top:0.2em;
font-size:4em;
z-index:1;}
body {
color: #fff;
font-family: 'open sans';
font-size: 1.1em;
text-align: center;
text-decoration:none;
font-weight:100;
display:inline;
overflow-x:none;
overflow-y: scroll;
}
#primary_nav_wrap
{
margin-top:15px
z-index:100;
}
#primary_nav_wrap ul
{
list-style:none;
position:absolute;
float:left;
margin:0;
top:10em;
left:7em;
padding:0;
text-align:center;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family: 'open sans';
font-weight:100;
font-size: 0.9em;
color: #ffffff;
text-align:center;
padding-top:0.3em;
padding-bottom:0.3em;
padding-right:4em;
padding-left:4em;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
display: inline-block;
float: none;
margin: 0 -3px 0 0;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0%;
text-align:left;
background-color:#636363;
z-index:100;
}
#primary_nav_wrap ul ul li
{
float:none;
width:187px;
padding-left:1em;
padding-right:1em;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
.hvr-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
box-shadow: inset 0 2px 10px -5px #000000;
background-color: #2098d1;
color: white;
z-index:1
}
#bottomtext {
position:absolute;
bottom:-83%;
left:43%;
font-family:"myriad pro";
font-weight:300;
color:black;
font-size:0.8em;
z-index:10000;}
#bottomtext2 {
position:absolute;
bottom:-89%;
left:44%;
font-family:"myriad pro";
font-weight:200;
color:black;
font-size:0.6em;
z-index:1000000}
#bottom {
width:100%;
height:15%;
background-color: white;
position:absolute;
bottom:-88%;
z-index:1000;
}
And HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" type="text/css" href="execs2.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="all,index,follow" />
<title>KAS</title>
<meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" />
</head>
<body bgcolor="#F0F0F0">>
<p id="title">SOUTHERN TAIWAN MODEL UNITED NATIONS</p>
<p id="intro"></p>
<p id="text">20 </p>
<p id="text2">15 </p>
<p id="bottomtext">Kaohsiung American School <br>
www.kas.tw </p>
<p id="bottomtext2">(c) 2015 by STMUN PRESS TEAM</p>
<div id="bottom"></div>
<img id="logo" src="images/logo2.png">
<div id="topbar"></div>
<div id="topbar2"></div>
<div id="midbar2"></div>
<div id="midbar3"></div>
<div id="bar"></div>
<div id="bar2"></div>
<div id="box"></div>
<div id="textbox"></div>
<nav id="primary_nav_wrap">
<ul>
<li class="hvr-fade" class="current-menu-item">HOME</li>
<li class="hvr-fade" >INTRODUCTION</li>
<li class="hvr-fade">COMMITTEES
<ul>
<li class="hvr-fade">Security Council</li>
<li class="hvr-fade">CDIS</li>
<li class="hvr-fade">ECOSOC</li>
<li class="hvr-fade">HRC</li>
<li class="hvr-fade">General Assembly 1</li>
<li class="hvr-fade">General Assembly 2</li>
<li class="hvr-fade">General Assembly 3</li>
</ul>
<li class="hvr-fade">CONTACT</li>
<li class="hvr-fade">NEWS</li>
<li class="hvr-fade">MORE</li>
</ul>
</nav>
</body>
</html>
THANKS!!
You were almost there.
Add as you did
#primary_nav_wrap
{
white-space: nowrap;
....
}
And add also
#primary_nav_wrap ul ul li
{
float:left;
....
}
Instead of
#primary_nav_wrap ul ul li
{
float: none;
....
}
Regards.
If you dont want the LI to resize, just put it in a div tag and set the style of the div something like width= 200px etc. if you want it to resize to a base point then stop then in the style use something like min-width= 150px
CSS
body{
background-color:white;
color:black;
font-size:100%;
font-family: Arial;
line-height: 1.5%;
text-align: left;
}
.body{
margin: 0 0;
width: 100%;
clear:both;
}
.social-media{
position:fixed;
width:100%;
height: 40px;
background: -webkit-linear-gradient(top, #FF9C00, #FFB540);
background: -o-linear-gradient(top, #FF9C00, #FFB540);
background: -moz-linear-gradient(top, #FF9C00, #FFB540);
background: linear-gradient(top, #FF9C00, #FFB540);
}
.social-media nav ul{
list-style: none;
margin: 0 auto;
float: left;
}
.social-media nav ul li{
display: inline;
}
.social-media left{
float:left;
}
.social-media right{
float:right
}
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Project</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="social-media">
<nav>
<div class="left">
<ul>
<li><input type="button" value="Login"></li>
<li><input type="button" value="Register"></li>
</ul>
</div>
<div class="right">
<ul>
<li><img class="social-image" src="img/facebook.png"></li>
<li><img class="social-image" src="img/twitter.png"></li>
<li><img class="social-image" src="img/youtube.png"></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
It shows like this http://i.gyazo.com/b4355b1e3b84209023f594fa71fb83be.png
However I want the Facebook, twitter, and YouTube images on the right. However I can't seem to get it working. Just wondering if someone could give me some advice.
You are missing periods in your css class names (left and right).
.social-media .left{
float:left;
}
.social-media .right{
float:right
}
I'm having a small issue with some CSS/HTML. I'm unsure what it is. I think its me being stupid but i'm unsure...
The issue is this white line:
CSS
body{
width: 100%;
color: white;
margin: 0 0;
}
.main-header nav{
height: 40px;
width: 100%;
background-image:url('img/menu-bg.png');
padding: 15px 0px;
}
.main-header .logo{
float: left;
vertical-align: middle;
line-height: 12.5px;
}
.main-header .logo a:hover{
color:white;
text-decoration:none;
font-size: 150%
}
.main-header ul{
float: right;
list-style: none;
vertical-align: middle;
line-height: 12.5px;
}
.main-header ul li{
display: inline;
padding: 5px 5px;
}
.main-header nav a{
color:white;
text-decoration:none;
font-size: 150%
}
.main-header nav a:hover{
text-decoration:underline;
color: #FFBB00;
}
.main-header .nav-line{
width: 100%;
padding: 3px 0px;
background-color: #FFBB00;
color: #fff;
overflow: hidden;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Project 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<nav>
<div class="logo">
<h2>Project 2</h2>
</div>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Features</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Team</li>
</ul>
</nav>
<div class="nav-line"></div>
</header>
</body>
</html>
The Logo is pushing the line. Its line height is too tall to fit into the parent, so, setting .main-header .logo {line-height: 11px;} solves it.
Note that this is not the only solution, but is the solution which points the origin of the gap. You could also solve this by setting a height on the parent and overflow hidden.
Removing the overflow:hidden from the .nav-line div fixes it.
jsFiddle example
Or add overflow:auto; to your nav:
.main-header nav {
height: 40px;
width: 100%;
background:#000;
padding: 15px 0px;
overflow:auto;
}
jsFiddle example
Either way your top container content is pushing the content below it down by about a pixel.
I think your problem is the img/menu-bg.png who have one line of white pixels or 60% black.
Why you don't use background:#000; ?