Social media icons are too close together - html

For some reason my social icons are too tight to each other.
It must be something within my extensive CSS that's causing it as when i place the css and html in a new document it looks ok, can someone help, thanks
Here is the html
<body>
<div id="wrapperfull">
<div id="head">
<div id="header">
<img src="../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<div class="menu-holder">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li><a href='#'>Work</a>
<ul class="submenu">
<li>Print
</li>
<li>Branding
</li>
<li>Photography
</li>
</ul>
</li>
<li>Blog
</li>
<li>Inspired
</li>
<li>Contact
</li>
</ul>
</div>
<!-- menu-holder end -->
</div><!-- end navigation div -->
</div>
<div class="heading">
<h1>CONTACT</h1>
</div>
<div class="blog-container">
<p2>
For further information or to request a quote, <br />
feel free to contact me
</p2>
<p> </p>
</p2>
<p2>
07866 36 39 38
</p2>
<p> </p>
<p2>joel#justjoel.co.uk</p2>
<div id="social">
</a><a target="_blank" href="http://twitter.com/JustJoel_"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/TwitterSocialMediaIcon_zps379a327e.png width="40" height="40" alt="Twitter"></a>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=119632044&goback=.nmp_*1_*1_*1_*1_*1_*1_*1_*1_*1_*1&trk=spm_pichttp://www.linkedin.com/profile/view?id=119632044&goback=.nmp_*1_*1_*1_*1_*1_*1_*1_*1_*1_*1&trk=spm_pic"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/LinkedinSocialMediaIcon_zps134a0ab5.png width="40" height="40" alt="Linkedin"></a>
<a target="_blank" href="http://pinterest.com/justjoel80/boards/"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/PinterestSocialMediaIcon_zps9d3a3e93.png width="40" height="40" alt="Pinterest"></a>
<a target="_blank" href="http://instagram.com/mole80"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/InstagramSocialMediaIcon_zpsdd09d3a4.png width="40" height="40" alt="Instagram"></a>
<a target="_blank" href="https://plus.google.com/107489686537237947777/posts"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/GooglePlusSocialMediaIcon_zps9d93776b.png width="41" height="40" alt="Googleplus"></a>
</div>
</div>
</div>
</div>
</body>
Here is the CSS
#social {
width: 210px;
height: 50px;
margin-top: 100px;
float: left;
padding-right: 5px;
}
http://jsfiddle.net/Q6Lze/1/

You have a div with 'a' inside, right? So, you need to configure properties for elements inside this div. You need something like:
#social a{
padding-left: 5px;
(...)
}

Related

Nav on top of background img

I am trying to put my navigation bar on top of my background image, and I would like to know what is the best and cleanest way to do so using the code below, here is my code:
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
<figure>
<img src="home_coffee_img.jpg" height="100%" width="100%" alt="Coffee Beans" style="height:100%;">
</figure>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8"><!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li><!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>
You can add your the image as a background image using css. Apply it to the element that is wrapping the header and the navigation elements, in this case that would be body.
body {
background-image: url(YOUR_IMAGE_PATH)
}
See the example in the code snippet.
body {
background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/04/15/16/china-coffee-cup.jpg?w968h681);
}
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8">
<!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li>
<!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>

How to center main part of navbar?

I have a navbar which has 4 anchor tag buttons in the center (home, about, services, contact). I dont know how to center it on the navbar. I have another anchor tag on the far left of the navbar (a phone number link). It appears that the part I want to center is centered between the boundary of that far left link and the far right of the page.
I cant figure out how to center these 4 tags on the grid.
Hope that makes sense, im not too good with the jargon.
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<!-- Dropdown Cart Overview
<li>
<div class="dropdown">
<span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span>
<ul class="dropdown-list custom-content cart-overview">
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-subtotal">
Sub Total
<span class="amount"><span class="currency">$</span>15.00</span>
</li>
<li class="cart-actions">
View Cart
<span class="icon-check"></span> Checkout
</li>
</ul>
</div>
</li> -->
<!-- Dropdown Search Module
<li>
<div class="dropdown">
<span class="icon-magnifying-glass"></span>
<div class="dropdown-list custom-content cart-overview">
<div class="search-form-container site-search">
<form action="#" method="get" novalidate>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type & hit enter...">
<span class="border"></span>
</div>
</div>
</div>
</form>
<div class="form-response"></div>
</div>
</div>
</div>
</li> -->
<li>
<div class="v-align-middle" style="margin-left: 60px;">
<i class="fab fa-facebook-f"></i>
</div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
You can use floats to position elements side by side on the page and then play with the widths and padding to arrange them how you like. If you are unsure how to use CSS I suggest following some online tutorials.
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 60px;
margin: 0px;
padding: 0px;
}
nav ul li span {
font-size: 0.7em;
}
nav ul li i {
font-size: 2em;
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<nav>
<div class="left">
<p>000 000 0000</p>
</div>
<div class="right">
<ul>
<li><i class="fas fa-phone"></i><br><span>Contact</span></li>
<li><i class="fas fa-wrench"></i><br><span>Services</span></li>
<li><i class="fas fa-at"></i><br><span>About</span></li>
<li><i class="fas fa-home"></i><br><span>Home</span></li>
</ul>
</div>
</nav>
there is alot of existing css that came with this template. For me to run your css and html, it would change too many properties to the point where its unrecognizable. Despite that this is a perfect answer. HOWEVER: I took your css:
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
and i changed it to these values:
nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
}
Its centered. But now the container is vertically huge. Need it the original height
Screenshot
Ok lets start over. I just want to center these 4 anchor tag li's inside of this ul.
Is there someway I can wrap these four into one container, and then move them to the left with css? I just want those 4 items to appear centered in that ul.
Heres a picture of what im talking about
Below is my total header in html. Theres a lot of CSS so i dont know what to link people to but ill put what i have been playing with below.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}

css content image placement

why doesn't this work ??
CSS
.iconM-display {
content : url('../images/mthc/companyoverview-icon.png');
}
HTML... OF THE ENTIRE MENU
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<a href="index.html">
<h2 class="iconM iconM-world text-center">HOME</h2>
</a>
<ul>
<li class="iconM-display">
<a class="iconM-display" href="#">What is Music Therapy?</a>
<div class="mp-level">
<h2 ">What is Music Therapy?</h2>
<a class="mp-back" href="#">back</a>
<ul>
</ul>
</div>
</li>
<li class="iconM iconM;arrow-left">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Who Benefits?
<div class="mp-level">
<h2>Who Benefits?</h2>
back
<ul>
<li>Autism</li>
<li>PMLD</li>
<li>Dementia</li>
<li>Mental Health</li>
<li>SEN</li>
</ul>
</div>
</li>
<li class="iconM iconM">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Vignettes/Media
<div class="mp-level">
<h2>Vignettes/Media</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Zak</li>
<li>Geoff</li>
<li>Jill</li>
<li>Simon</li>
</ul>
</div>
</li>
<li class="iconM iconM;arrow-left">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Who are Musability?
<div class="mp-level">
<h2>Who are Musability?</h2>
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">back
<ul>
<li>History</li>
<li>Mission</li>
<li>Local Links</li>
<li>Supporting Merseyside</li>
</ul>
</div>
</li>
<li class="iconM iconM">
<img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Workshops
<div class="mp-level">
<h2><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Workshops</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Schools</li>
<li>Councils</li>
<li>Healthcare Professionals</li>
<li>Social Worker profession</li>
</ul>
</div>
</li>
<li><img src="images/mthc/contactus-icon.png" height="20px" width="20px" hspace="10">Referrals/Contacts</li>
<li><img src="images/mthc/speechbubbles-icon.png" height="20px" width="20px" hspace="10">Testimonials</li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
the question refers to the first li where I have defined iconM-display as per the css ... very strange I am obviously missing something basic no doubt any advice much appreciated.
I only just noticed. But you are trying to assign {content:""} on a non-pseudo selector.
https://css-tricks.com/css-content/
CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.
you basically have to have either ::before or ::after once you have typed content.... worked perfectly for me

make menu not mess up my page lay-out

So i've got a drop-down menu on some elements in the middle of my page. This menu works with purely html and css. Now without any hover the menu items look like this: http://prntscr.com/3es3n8.
With hover however it looks like this: http://prntscr.com/3es3y2.
Now the hover itself works fine and i can style the child elements just fine. My question would be if it was possible for the child element to actually hover over the other items. I know z-index is supposed to do something like this but im not sure how to implement that. I'll try to post as much code as possible but the site is already in ModX.
I'm sorry about all the extra code but the general idea of the situation should be there. http://jsfiddle.net/C8sBp/1/
<div class="row">
<div class="small-12 large-12 columns">
<ul class="small-block-grid-1 large-block-grid-4">
<li>
<div class="icon">
<a href="producten/producten/" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/producten/" title="Kunsmest">
Kunsmest
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">test</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Kunsmest
</div>
</li>
<li>
<div class="icon">
<a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/zaden" title="Zaden">
Zaden
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Zaden
</div>
</li>
<li>
<div class="icon">
<a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/handelsartikelen" title="Handelsartikelen">
Handelsartikelen
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Handelsartikelen
</div>
</li>
<li>
<div class="icon">
<a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/veevoer/" title="Veevoer">
Veevoer
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">pietjes eten</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Veevoer
</div>
</li>
<li>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="diensten" title="Diensten">
Diensten
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Diensten
</div>
</li>
</ul>
</div>
</div>
There are a variety of solutions, I've paired back your code a little to make the solution a little clearer, but have a look at this
http://codepen.io/dave_agilepixel/pen/cDtLk
I wouldn't repeat the item, or have the wrapper around the if you can avoid it, if you need the h2 for styling then use css or change the code to something like
<nav>
<ul>
<li><h2>Object</h2></li>
</ul>
</nav>
Also with the icons it might be easier to have those as CSS background images and use padding/background-position to set them in the design.
I hope that helps, in my example I've used position absolute and left to get the sub menu to work, but you could use display:none; or some other methods, if you use a combination of opacity and top then you can also add in css3 transitions to make it look jazzy.

How to style 3 unorderd lists horizontally in 1 div

How Can I display 3 unordered lists horizontally next to each other?
The 3 ul are wrapped in 1 div called 'tax'.
I've tried the following, but it's not showing correctly.
I know I can solve this by wrapping each ul with a div, but I don't want to use extra markup when it's not necessarily.
Example:
http://jsfiddle.net/Eric87/LKp69/13/
HTML
<div id="tax">
<hr>
<h2>
Recent News </h2>
<ul id="recent-news">
<li>
<a href='#'>
new release </a>
› </li>
<li>
<a href='#'>
testing titel </a>
› </li>
</ul>
<h2>
Categories </h2>
<ul id="categories">
<li>
<a href="#">
Audio </a>
› </li>
<li>
<a href="#">
Uncategorized </a>
› </li>
</ul>
<h2>
Archives </h2>
<ul id="archives">
<li>
<a href=''>
August 2013 </a>
</li>
<li>
<a href='#'>
July 2013 </a>
</li>
<li>
<a href='#'>
May 2013 </a>
</li>
<li>
<a href='#'>
December 2012 </a>
</li>
</ul>
CSS
#tax {
margin-top:100px;
}
#tax ul {
width:33%;
list-style:outside;
}
#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
Create a wrapper for each item and assign each item a class called "pull-left". And then, add style below:
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
<div class="pull-left">
<h2>Title</h2>
<ul>
<li>...</li>
</ul>
</div>
Here is your css code for pull-left class:
.pull-left { float: left; }
You're trying to align two elements horizontally, both the h2 and the ul that goes with it, that's why it's not working 'as expected'. The only way to solve this, to make both those elements act as one, is to add an extra markup element around both of them, and apply regular horizontal layout rules to that element. I'd recommend a section for this, like:
<section id="archives">
<h2>Section title</h2>
<ul><!-- bunch of list items --></ul>
</section>
This isn't "unnecessary extra markup", this is required markup if you want 2 elements to layout as 1.
HERE IS A WORKING LIVE DEMO: CLick HERE
i have a add a extra <div> for all <ul> and put it to float:left:
basically its all
here create one wrapper div for including with header tag and ul. For example here I create wrapper div with name of "test".
<div id="tax">
<div class="test">
<h2>
Recent News </h2>
<ul id="recent-news">
<li>
<a href='#'>
new release </a>
› </li>
<li>
<a href='#'>
testing titel </a>
› </li>
</ul>
</div>
<div class="test">
<h2>
Categories </h2>
<ul id="categories">
<li>
<a href="#">
Audio </a>
› </li>
<li>
<a href="#">
Uncategorized </a>
› </li>
</ul>
</div>
<div class="test">
<h2>
Archives </h2>
<ul id="archives">
<li>
<a href=''>
August 2013 </a>
</li>
<li>
<a href='#'>
July 2013 </a>
</li>
<li>
<a href='#'>
May 2013 </a>
</li>
<li>
<a href='#'>
December 2012 </a>
</li>
</ul>
</div>
</div>
Css :
<style type="text/css">
#tax {
margin-top:100px;
}
#categories,#archives,#recent-news {
display:inline-block;
float:left;
}
.test{width:33%;
float:left;}
</style>
see demo
For horizontal you basically have to use div to wrap ul.
http://jsfiddle.net/5d5eM/
div {
width: 50px;
border: 1px solid #000;
float: left;
}
br { clear: left; }