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
}
Related
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>
I want to create a menu bar with a list, but it's all in one place!
If I play with the position of the menu (absolute, fixed, ...), it's good, but I want that the menu will be fixed.
CSS:
img.logo {
max-height: 90px;
width: auto;
position: fixed;
clip: rect(5px, 95px, 90px, 5px);
}
a,
li {
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: fixed;
text-decoration: none;
}
li {
border: 1px solid black;
}
***HTML:***
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li>
<img class="logo" src="img/logo.png" alt="problem">
</li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Run it and you will see what I see...
What is wrong?
PS: Can you say how can I make it all in one line, like a real menu bar
I've made a few changes by simplifying your css content.
You just need to use display: block and float:left to arrange your menu items properly. I've added a few more tweaks to it to suit what you wanted to achieve.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border: 1px solid #000;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<style>
img.logo {
max-height:90px;
width:auto;
position:fixed;
clip: rect(5px,95px,90px,5px);
}
a, li {
list-style: none;
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: relative;
text-decoration: none;
display: inline;
}
li {
border:1px solid black;
}
***HTML:***
</style>
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Just changing display:inline-block to inline worked for me. Preview this on full page as this is not responsive example.
Hope This could help. :)
You should remove position:fixed from img-logo, a, li and add position:fixed or position:sticky to their parent container
.navbar{
float: right;
position: sticky /* use can use position:fixed */
}
img.logo{
max-height:90px;
width:auto;
clip: rect(5px,95px,90px,5px);
}
a, li{
color:inherit;
list-style:none;
text-align:center;
padding-right:10px;
padding-left:5px;
padding-bottom:10px;
font-size:16px;
font-family:Odin rounded;
vertical-align:text-top;
text-decoration:none;
display: inline-block;
}
li {
border:1px solid black;
}
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</div>
</body>
</html>
hello I am having issue while create this navbar...because i cant space divs exactly s i want. please suggest some oher way to figure this out.
and i have nothing to say more as i have included the image and code i have tried yet stackoverflow is asking me to add some more detail.
I am trying to create this navbar:
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
width: 90%;
margin: 0 auto;
background-color: white;
border-bottom: 1px solid black;
align-items:center;
justify-content:center;
flex-wrap: wrap;
}
.container .rightmenu{
flex-direction: row-reverse;
}
div:nth-of-type(1) {flex-grow: -1;}
div:nth-of-type(2) {flex-grow: 1;}
div:nth-of-type(3) {flex-grow: 15;}
div:nth-of-type(4) {flex-grow: 5;}
div:nth-of-type(5) {flex-grow: 1;}
.container li{
display: inline;
padding: 12px;
color: #6b6b6b;
font-weight: 400;
font-family: sans-serif-light;
font-size: 14px;
}
a{
text-decoration: none;
}
.img{
padding: 2px;
text-align: center;
}
.img img {
width:44px;
height: 44px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jJio Nav Bar</title>
<link rel="stylesheet" type="text/css" href="style.css"
<body>
<div class="container">
<div class="imghome"> <img src="jio/home-white-icon.png" />
</div>
<div class="leftmenu">
<ul>
<li>PLANS</li>
<li>DEVICES</li>
<li>APPS</li>
<li>FIND A STORE</li>
</ul>
</div>
<div class="img"><img src="jio.png" /> </div>
<div class="rightmenu">
<ul>
<li>SUPPORT</li>
<li>SIGN IN</li>
<li>QUICK PAY</li>
<li>CART 0</li>
</ul>
</div>
<div class="imgsearch"><img src="jio/search-white-icon.png"/>
</div>
</div>
</body>
</html>
If you remove all the flex-grow properties and edit your img class in this way
.img {
padding: 2px;
text-align: center;
margin: 0 auto;
}
your page will look like the image you included.
Hope this helps you.
I have this basic navigation bar, and I want to make the menu buttons centered, and also I want a separating line between them. Also I think my code may have some unnecessary parts.
Here is an image of what I am trying to create:
Here is my source code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="nav" align="center">
<span>
<ul>
<li><img src="img/notify_icon.png" alt="notify_icon" width="30px" /></li>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</span>
</div>
</body>
</html>
And here is my CSS file:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #353539;
height: 50px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
}
#nav ul {
padding: 7px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
padding-left:50px;
}
#nav ul li a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body
{
background-color:#c5c5c5;
}
DEMO
This should do what you like.
margin:0 auto centers elements on the page, so you simply had to set the li parent to an auto width with this css attatched.
I am using the following codes to create a layout, the issue is, the navigation menu won't center, the text centers, but the rest of the navigation bar doesn't.
Here is my HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<h1>Test</h1>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="content">
</div>
<div id="footer">
<p>Test</p>
</div>
</div>
</body>
</html>
And here is my CSS:
/***** Body *****/
body {
font-family: arial, helvetica;
text-align:center;
}
div#container {
}
/***** Navigation Menu *****/
ul#navigation {
margin: 20px;
padding: 0;
list-style: none;
width: 525px;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
text-decoration:none;
padding: 5px 0;
width: 100px;
background: #485e49;
color: #eee;
float: left;
text-align:center;
}
ul#navigation a:hover {
background: #FF00FF;
text-align:left;
}
ul#navigation a:active {
text-align:right;
}
Change your ul#navigation to
ul#navigation {
padding: 0;
list-style: none;
width:400px;
margin:0 auto;
}
Example: http://jsfiddle.net/jasongennaro/3WS7B/
What happened is your width was off. Once that was fixed to 400px, applying margin:0 auto worked.
You can add this to the ul#navigation css to center it:
margin:0 auto 0 auto;
Alternatively:
margin-left:auto;
margin-right:auto;