Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img
Related
I am trying to display a font awesome spinner horizontally center. With the below CSS it is displaying only on the left hand side. Can anyone help me how to fix this?
loading.component.html
<div class="container">
<div class="loading-overlay">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
loading.component.scss
.loading-overlay {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
z-index: 2;
}
.container {
width: 100%;
}
Thanks
Remove the position: absolute; and you are fine.
.loading-overlay {
align-items: center;
display: flex;
justify-content: center;
z-index: 2;
}
.container {
width: 100%;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="loading-overlay">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
I can't get things to float correctly in firefox.
If you open it in FireFox you will notice its all on top of itself.
But it works fine in IE, and Chrome.
I may be doing it wrong, but you can see I have tried moz-inline-stack, and putting the float elements first.
Here is a Fiddle link.
https://jsfiddle.net/james_freeman/zWxbL/10/embedded/result/
<div style="background-color:white;">
<div id="psNav" style="color: #0475b8;">
<div class="psNav-right dropdown">
<a href="#" id="navbarMenu" class="dropdown-toggle psNav-link" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">MENU <i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" style="padding:0;">
<li>Conversations
</li>
<li>Directory
</li>
</ul>
</div>
<div class="psNav-right"> <a class="psNav-link" id="logoutLink" href="">Logout</a>
</div>
<div class="psNav-right"> <a class="psNav-link" id="displayName">Doe, John</a>
</div>
<div class="psNav-left"> <a class="psNav-link" href="">
<img id="navBarLogo" src="" alt="Company Logo">
</a>
</div>
<div class="psNav-center"> <a class="psNav-link" id="navbarPageTitle">somewhere</a>
</div>
</div>
</div>
#psNav {
display: inline-block;
display: -moz-inline-stack;
vertical-align: top;
width: 100%;
text-align: center;
height: 90px;
clear: both;
font-family:'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.5em;
border-bottom-color: #e7e7e7;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
*display: inline;
}
.psNav-center {
display: inline-block;
display: -moz-inline-stack;
margin: 0 auto;
height: inherit;
}
.psNav-left {
float: left;
height: inherit;
padding-left: 10px;
}
.psNav-right {
float: right;
height: inherit;
padding: 0 20px 0 20px;
}
.psNav-link {
vertical-align: middle;
line-height: 85px;
text-decoration: none !important;
}
.psNav-link:visited {
color: #0475b8;
}
.psNav-link:hover {
color: #0475b8;
}
.psNav-link:active {
color: #0475b8;
}
#displayName {
cursor: default;
font-weight: 300;
}
#navbarPageTitle {
cursor: default;
}
#navBarLogo {
height: 55px;
}
I'm not sure what you thought -moz-inline-stack was going to achieve, but it is the cause of your broken layout.
Removing it from the fiddle results in the layout returning to exactly what how it looks in the other browsers.
I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/logo.png">
</div><!--header group -->
</a>
</div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-4">
<p> </p>
</div>
<div class="col-xs-6 col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div>
</div>
External CSS sheet
.header {
width: 100%;
height: auto;
margin: 0 auto;
background: red;
}
.header_group {
background-color: none;
width: 100%;
height: auto;
display: inline-table;
font-size: 1.5em;
font-weight: 400;
font-family: 'Roboto', sans-serif;
color: #f0fff0;
clear: none;
margin-top: 5%;
}
.header_text {
vertical-align: middle;
display: inline;
text-align: center;
color: #f05152;
}
.nav {
width: auto;
height: auto;
margin-top: 12%;
}
.nav a {
color: #000;
padding-left: 10%;
margin-left: 4%;
}
.navbar {
width: 100%;
height: 20%;
padding-top: 0;
}
.wrapper {
width: 100%;
height: 500px;
background: url(../../../images/yellow.png) repeat,
}
Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.
FYI: From the documentation...
Content should be placed within columns, and only columns may be immediate children of rows.
Move .header.
Can someone please take a look at my code and see what I am doing wrong...
I'm a beginner jquery person and
I tried reading all the forum post and implementing them my self and I still get errors... this is taking me two days and I'm about to kill my laptop
thanks so much in advance,
~ grace
$(document).ready(function() {
//parent. on click anchor
$('.tab').on('click', '.clk', function(event) {
event.stopPropagation();
//Find the child by traversing
$(this).closest('.clk').find('.reveal').slideToggle();
//Show the child
});
});
body {
width: 350px;
margin: 0 auto;
}
h1 {
font-size: 1em;
color: #FF7F50;
}
.tbCont {
/* width: 100%;float:left; this works too*/
overflow: hidden;
border: 1px solid red;
text-align: center;
}
ul {
padding-left: 0;
}
li {
list-style: none;
display: inline-block;
zoom: 1;
width: 90%;
}
.cHolder {
display: none;
}
/*hides related content*/
.reveal {
width: 100%;
background-color: pink;
display: inline-block;
zoom: 1;
border-bottom: 2px solid #aaa;
}
.reveal span {
float: left;
width: 40%;
margin: 10px;
}
.reveal img {
float: right;
width: 40%;
height: 40%;
margin: 10px;
background-color: #fff;
}
a {
width: 100%;
text-align: left;
border-style: none;
border-bottom: 2px solid #aaa;
background-color: white;
font-size: 2em;
color: #aaa;
display: block;
text-decoration: none;
}
a:hover {
color: orange;
border-bottom: 2px solid orange;
}
a:active {
color: #7FFFD4;
border-bottom: 2px solid #7FFFD4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div class="tbCont">
<h1>Title</h1>
<ul class="tab">
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here.</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
</ul>
</div>
<!-- End your code here -->
</body>
</html>
I tried to correct in this fiddle, look if this helps :
http://jsfiddle.net/h9u2g6bu/
Notice display:none should be applied to what you want to toggle, i.e. .cHolder .reveal instead of .cHolder :
.cHolder .reveal {
display: none;
}
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/