I'm trying to code a Nav bar for my site but as soon as I implemented css imgBox my links stopped working. The're in the same directory so I don't believe this is the problem but for the life of me I can't figure out what's wrong
here's the HTML code
<ul id="menu">
<li> <div class="imgBox" id="img1"> </div> </li>
<li> <div class="imgBox" id="img2"> </div> </li>
<li> <div class="imgBox" id="img3"> </div> </li>
</ul>
and here's the css
.imgBox
{
float:left;
border: 1px solid #9325BC;
}
#img1
{
background: url(images/home.png) no-repeat;
width: 129px;
height: 50px;
}
#img2
{
background: url(images/media.png) no-repeat;
width: 112px;
height: 50px;
}
.imgBox:hover
{
-moz-box-shadow: 0 0 30px #0000cc;
-webkit-box-shadow: 0 0 30px #0000cc;
box-shadow: 0 0 30px #0000cc;
}
Any help will be greatly appreciated
You must close all tags you open. link tags and div tags. Also if you want your link to be visible it must contain at least a word or image.
<ul id="menu">
<li><div class="imgBox" id="img1"> Index </div> </li>
<li> <div class="imgBox" id="img2"> Media </div></li>
<li> <div class="imgBox" id="img3"> Social media</div></li>
</ul>
<ul id="menu">
<li> <div class="imgBox" id="img1"> </div> </li>
<li> <div class="imgBox" id="img2"> </li>
<li> <div class="imgBox" id="img3"> </li>
</ul>
Is this what you're trying to do?
Working version of your question can be found here: JSFIDDLE
<li> <div class="imgBox" id="img1"> Some Text here </div> </li>
The problem was that you did not close your href element
Related
I'm trying to set up separate sections within the body that would show info in them like this
using float: left; doesn't help, it only messes up the page layout.
here's my html...
#a,
#g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
<section>
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
</div>
Why are you using the same name for multiple instances of the same id for your images? ID's are supposed to be unique, you're better of using a class if you're going to group. Check my solution out for your question:
#a, #g {
color: #bdc3c7;
list-style: none;
}
.pic {
margin:+5% 0 0;
border: 3px solid black;
float:left;
}
.sections {
height:100px;
background-color: #6d6d6d;
}
.info {
margin:+5% 10px;
float:left;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section class="sections">
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
<section class="sections">
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
</div>
I classed the section tags as that's what you would need to add the background colour to and set a height. You would need to set a height as the items are floating so they would not stretch the section automatically, so you need to provide a fixed height.
I added classes to your paragraphs as these would also need to be floated left as well as your images. Also you needed to add the same margins as your images.
I changed your pics ID's to classes.
If you have any questions, let me know.
change id="pic" to class="pic". because ID should be used 1 time in a page..
then write in css:
.pic {
float: left;
}
Try using float:right
#wrapper ul {
padding: 0;
margin: auto;
width: 80%;
list-style-type: none;
}
#wrapper ul li {
background-color: #6d6d6d;
padding: 30px;
margin-bottom: 20px;
display: table;
width: 100%;
}
#wrapper ul li img {
float: left;
}
#wrapper ul li .details {float: right;width: 75%;}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
</ul>
</section>
</div>
I changed your code and list things a bit.. Tell me if i misinterpreted your question..
<html>
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<style>
#a, #g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
width: 100%;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
display:table-cell; width:100px;height:100px;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
section{
width: 100%;
}
</style>
</head>
<body>
<div Id="wrapper">
<section>
<a href="img/appstore.jpg" id="a">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/appstore.jpg" width=180px alt="">
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
<section>
<a href="img/googleplay.jpg">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/googleplay.jpg" alt="" width=180px>
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
</div>
</body>
</html>
In the following code I've found that the div size doesn't equal at the top and bottom of the ul.
The div still doesn't have equal size even though I put the padding equal.
What is wrong?
.footer {
background-color: #4dbce9;
padding: 40px 0;
text-align: center;
color: #fff;
}
.footer ul,
li {
display: inline-block;
}
.footer a {
font-size: 14pt;
padding-right: 20px;
color: #fff;
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ul>
<li>
<a href="https://www.facebook.com/rony.fhebrian" />Facebook
</li>
<li>
<a href="https://www.twitter.com/ronyfhebrian" />Twitter
</li>
<li>
<a href="https://ronyfhebrian.wordpress.com" />Blog
</li>
<li>
<a href="mailto:rony.fhebrian#outlook.com">Contact
</li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
The <a> closing tag is missing.
.footer {
background-color: #4dbce9;
padding: 40px 0;
text-align: center;
color: #fff;
}
.footer ul,
li {
display: inline-block;
}
.footer a {
font-size: 14pt;
padding-right: 20px;
color: #fff;
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
Your ul element should look like this :
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
the 'a' link tag is not self closing
try to close the <a>tags ..
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<ul>
<li>
<a href="https://www.facebook.com/rony.fhebrian" />Facebook</a>
</li>
<li>
<a href="https://www.twitter.com/ronyfhebrian" />Twitter</a>
</li>
<li>
<a href="https://ronyfhebrian.wordpress.com" />Blog</a>
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
I am trying to make a list of images horizontal. They keep displaying vertical. Any idea what I am doing wrong?
<div ng-repeat="i in product.images">
<ul id="navlist">
<li>
<img class="thumbnail" ng-src="{{i.image}}"> </img>
</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
You need to put the 'ng-repeat' in the li tag (not the div), otherwise you are repeating the entire div, which is not inline. Here's a link to a CodePen with this code http://codepen.io/jwncoexists/pen/XbdOVY
<body ng-app="ImageDemo">
<div ng-controller="Demo.controller">
<div>
<ul id="navlist">
<li ng-repeat="i in product.images">
<img class="thumbnail" ng-src="{{i.image}}">
</li>
</ul>
</div>
</div>
</body>
calthoff, if you remove the ul, li and float the images..then how about this for simplicity's sake:
<div ng-repeat="i in product.images">
<img class="thumbnail" ng-src="{{i.image}}">
</div>
img
{
float: left;
padding-right: 20px;
}
<div ng-repeat="i in product.images">
<ul id="navlist">
<li>
<img class="thumbnail" ng-src="{{i.image}}" />
</li>
<li>
<img class="thumbnail" ng-src="{{i.image}}" />
</li>
</ul>
</div>
< img > tags are self-closing, your code should work like this.
I am trying to display several social media icons side by side in a footer. I have tried using the float: left property which did not work. Can someone spot my error?
I have the following html code:
<div id="footer">
<div id="v_line"></div>
<div class="social-popout">
<div class="columns">
<ul id="lpro">
<div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook">
</ul>
<ul>
<div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In">
</ul>
<ul>
<img id="social_me" src="googleplus.png" alt="Google Plus">
</ul>
</div>
</div>
</div>
And the following CSS:
.social_me {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
Remove unnecessary ul tags and add li to each item
CSS:
ul li {
display:inline-block;
}
HTML:
<ul id="lpro">
<li><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook">
</li>
<li><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In">
</li>
<li><img id="social_me" src="googleplus.png" alt="Google Plus">
</li>
</ul>
DEMO
Just correcting some html errors:
1) Remove the unnecessary ul
2) Remove the div inside the <a> tags
3) Your id="social_me" is wrong.. It is a class, not an id.
4) After that, no need for css what so ever (<a> and <img> tags are already inline elements by default): http://jsfiddle.net/M665q/
<div id="footer">
<div class="social-popout">
<div class="columns">
<a class="social_me" href="https://www.facebook.com/" target="_blank"><img src="facebook.png" alt="Facebook" /></a>
<a class="social_me" href="https://www.linkedin.com/" target="_blank"><img src="linkedin.png" alt="Linked In" /></a>
<a class="social_me" href="https://plus.google.com/" target="_blank"><img src="googleplus.png" alt="Google Plus" /></a>
</div>
</div>
</div>
Put them all in one <ul> and the <div> tags next to the images was messing it up.
Something like this should work:
<div id="footer">
<div id="v_line"></div>
<div class="social-popout">
<div class="columns">
<ul id="lpro">
<img id="social_me" src="facebook.png" alt="Facebook">
<img id="social_me" src="linkedin.png" alt="Linked In">
<img id="social_me" src="googleplus.png" alt="Google Plus">
</ul>
</div>
</div>
</div>
<ul id="navlist">
<li><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></li>
<li><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></li>
<li><img id="social_me" src="googleplus.png" alt="Google Plus"></li>
</ul>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
float: left;
}
it sounds like you're having a problem linking your CSS to your HTML page. Try putting it into the head.
<html>
<head>
<style type="text/css">
.lpro li {
float: left;
padding: .5em;
list-style-type: none;
}
</style>
</head>
<div id="footer">
<div class="social-popout">
<div class="columns">
<ul class="lpro">
<li><img src="facebook.png" alt="Facebook"></li>
<li><img src="linkedin.png" alt="Linked In"></li>
<li><img src="googleplus.png" alt="Google Plus"></li>
</ul>
</div>
</div>
</div>
</html>
I was able to get it working by creating three different unordered lists. I used:
.column {
float:left;
padding: 10px 20px 0px 10px;
}
ul{
list-style-type:none;
padding-left:0px;
text-decoration:none;
padding-top: 10px;
}
.title-logo{
color: #5E81F4;
font-family: 'Inter', sans-serif;
margin-left: 10px;
}
.logo a{
display: flex;
justify-content: start;
align-items: center;
}
<div class="logo">
<a href="/#">
<div class="shap-logo">
<H1>O</H1>
</div>
<h3 class="title-logo">Ohara</h3>
</a>
</div>
I tried this for my code, but I don't know it's correct or not.
Got a small issue with this website structure: www.bigideaadv.com/xsp
Looking to have this container fill the middle of the screen between the top and bottom navigation. I'd also like to have the middle collapse with the resizing of the window with a scrollbar. Can't seem to make it work quite right. Anyone have any thoughts?
<div id="top_navigation">
<div id="navigation_inside">
<ul id="navigation">
<li>Schedule Demo</li>
<li>Sales</li>
<li><p style="float:left; margin:0;">Search</p> <form style="margin:0 0 0 5px; padding:0; float:left;"><input class="search" type="text" /><input type="hidden"></form></li>
</ul>
<ul id="navigation2">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>People</li>
<li>News + Events</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="container">
<div id="scroller">
</div>
</div>
<div id="bottom_navigation">
<div id="twitter_bar">
<div id="twitter">
<h5><img src="images/twitter_bird.png" width="23" height="16" /> <b>#XSPGlobal:</b> </h5>
<p>Loading...</p>
<noscript><h5>This feature requires JavaScript</h5></noscript>
</div>
</div>
<div id="blog_posts">
<p>Here is where the blog posts will go.</p>
</div>
<div id="bottom_navigation_inside">
<ul>
<li>Partners</li>
<li>Interfaces</li>
<li>Careers</li>
<li>XACT Blog</li>
<li>Milestones</li>
<li>Awards + Recognition</li>
<li>Client Testimonials</li>
<li>Press Releases</li>
<li>Social Responsibility</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div id="social_links">
<img src="images/facebook.png" width="23" height="24" />
<img src="images/twitter.png" width="23" height="24" />
<img src="images/linkedin.png" width="23" height="24" />
</div>
</div>
CSS:
#container {
margin: 72px 0 72px 0;
width: 100%;
height: 100%;
}
#top_navigation {
position: fixed;
min-width: 1010px;
width: 100%;
height: 72px;
background: url('../images/opaque.png') repeat;
text-transform: uppercase;
}
#bottom_navigation {
position: absolute;
min-width: 1010px;
width: 100%;
height: 172px;
background: url('../images/opaque.png') repeat;
text-transform: uppercase;
}
set the container to position fixed with a top of 72px and a bottom of 172px.