List wont appear Inline when CSS Rule is added - html

Here is my HTML:
<div class="info">
<ul class="items">
<li>
<img id="fb" src="imgs/logo-partner-facebook-Marketing.png" alt="Facebook Marketing Partner Black Logo">
<p>Facebook Premier Level Agency Partner</p>
</li>
<li>
<img id="google" src="imgs/Google-Partner-logo.webp" alt="Google Partner Black Logo">
<p>Google Endorced Marketing Partner</p>
</li>
<li>
<img id="forbes" src="imgs/FAC-Badge-Circle-Blue2022.png" alt="FAC Badge 2022">
<p>Forbes Agency Council Member</p>
</li>
<li>
<img id="inc" src="imgs/Inc5000_PrimaryBlackStackedLogo.png" alt="Inc 500 Black Logo">
<p>Inc. 5000 Fastest Growing Company</p>
</li>
<li>
<h1>$100M</h1>
<p>In Annual Digital Ad Spend</p>
</li>
<li>
<h1>15+</h1>
<p>Years of Facebook Avertising Experience</p>
</li>
</ul>
</div>
My CSS:
.info {
margin-top: 70px;
display: flex;
flex-direction: row;
align-items: center;
}
.items li {
list-style: none;
display: inline;
}
Here is also a JSFiddle:
https://jsfiddle.net/5xy7zqm6/2/
Basically, I use the same code on my Navbar menu and it works, but here it just wont budge.

you should add display: flex to the ul
<div class="info">
<ul class="items" style="
display: inline-flex;
">
<li>
<img id="fb" src="imgs/logo-partner-facebook-Marketing.png" alt="Facebook Marketing Partner Black Logo">
<p>Facebook Premier Level Agency Partner</p>
</li>
<li>
<img id="google" src="imgs/Google-Partner-logo.webp" alt="Google Partner Black Logo">
<p>Google Endorced Marketing Partner</p>
</li>
<li>
<img id="forbes" src="imgs/FAC-Badge-Circle-Blue2022.png" alt="FAC Badge 2022">
<p>Forbes Agency Council Member</p>
</li>
<li>
<img id="inc" src="imgs/Inc5000_PrimaryBlackStackedLogo.png" alt="Inc 500 Black Logo">
<p>Inc. 5000 Fastest Growing Company</p>
</li>
<li>
<h1>$100M</h1>
<p>In Annual Digital Ad Spend</p>
</li>
<li>
<h1>15+</h1>
<p>Years of Facebook Avertising Experience</p>
</li>
</ul>
</div>

Related

How to style images in a list with CSS

I'm trying to make all the images I have in a list the same size and remove the bullet that gets placed beside them.
This is the HTML I'm using:
<ul id = "imageList">
<li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
<li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li>
<li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
<li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
<li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
<li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
<li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
<li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
<li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>
I set the hardcoded values as squares because I don't know what your actual images look like.
ul {
list-style: none;
}
ul img {
width: 100px;
height: 100px;
}
<ul id = "imageList">
<li> <img src='../img/Movie1.jpg' alt="Dunkirk"> </li>
<li> <img src='../img/Movie2.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='../img/Movie3.jpg' alt="The Big Sick"> </li>
<li> <img src='../img/Movie4.jpg' alt="The Lovers"> </li>
<li> <img src='../img/Movie5.jpg' alt="Everybody Loves Somebody"> </li>
<li> <img src='../img/Movie6.jpg' alt="Happy End"> </li>
<li> <img src='../img/Movie7.jpg' alt="Okja"> </li>
<li> <img src='../img/Movie8.jpg' alt="Cars 3"> </li>
<li> <img src='../img/Movie9.jpg' alt="Despicable Me 3"> </li>
<li> <img src='../img/Movie10.jpg' alt="Baby Boss"> </li>
</ul>
I use of !important for override on each other style.
#imageList {
list-style: none !important;;
}
#imageList img {
width: 50px !important;;
height: 50px !important;;
}
<ul id = "imageList">
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Dunkirk"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="Kong: Skull Island"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Big Sick"> </li>
<li> <img src='http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg' alt="The Lovers"> </li>
</ul>

My <ul> only displaying a bullet point for the first list item, not the rest

I'm having an issue with my <ul> not displaying bullet points after the first list item.
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
<p>IT Services </p>
<p>Human Resources </p>
<p>Other </p>
</li>
</ul>
</div>
No idea what I'm doing wrong, could someone please advise?
ul li {
padding: 5px;
}
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
IT Services
</li>
<li>
Human Resources
</li>
<li>
Other
</li>
</ul>
</div>
You have put only one <li>.
I have removed p tag, instead of having p you can give css to ul and li based on your needs.
Hope this helps.
Do you want this?
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
<p>IT Services </p>
</li>
<li>
<p>Human Resources </p>
</li>
<li>
<p>Other </p>
</li>
</ul>
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
<p>IT Services </p>
</li>
<li>
<p>Human Resources </p>
</li>
<li>
<p>Other </p>
</li>
</ul>
</div>
This should work
ul li {
padding: 5px;
}
<div id="links" class="info">
<h6><strong>Useful links</strong> <img class="linkimage" src="link.png" border="0" /></h6>
<ul>
<li>
IT Services
</li>
<li>
Human Resources
</li>
<li>
Other
</li>
</ul>
</div>

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; }

Strange border line in IE8 that I didn't add

Same HTML, CSS, and image file, but in IE8 I have this weird border line.
HTML:
<div id="admin_link_div">
<ul id="vertical_menu">
<li>
<a href="/admin/appointment_list">
<div id="sidebar_left_box">
Room List
</div><img id="admin_arrow_img_roomlist" src="/images/arrow_off_icon.gif"></a>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
User Management
</div><img id="admin_arrow_img_userlist" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
User List
</li>
<li>
User Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Company Mangement
</div><img id="admin_arrow_img_register" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Company List
</li>
<li>
Company Register
</li>
</ul>
</li><div id="sidebar_line"></div>
<li>
<a href="#">
<div id="sidebar_left_box">
Service Management
</div><img id="admin_arrow_img_service" src="/images/arrow_off_icon.gif"></a>
<br>
<ul>
<li>
Server Management
</li>
<li>
Barbie Management
</li>
</ul>
</li>
</ul>
</div>
CSS:
#admin_arrow_img_userlist{
margin-left: 10px;
margin-bottom: 2px;
}
Any good reason???
add this to your image #
outline:none;
border: none;
because IE sets a border for images by default!!
Try this CSS on image
img
{
border:0;
outline:none;
}
Use border 0 Check link more appropriate.

Social media icons are too close together

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;
(...)
}