Coding <a> under <ul> confusion - html

I'm trying to get my codes work but not sure where's the issue. The links for the first 2 classes don't work and I cannot click on to open linked pages.
Here's the HTML:
footer {
width: calc(100%-80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style-type: none;
font-family: 'Catamaran';
font-size: 24px;
color: #fff;
line-height: 40px;
}
.footer-links-news {
display: none;
}
.footer-sm {
width: 50px;
float:right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
}
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="Images/plugsin-icon-yt.png" alt="Youtube Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-fb.png" alt="Facebook Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-tt.png" alt="Twitter Icon">
</a>
</div>
</footer>


The text of the link needs to go inside the anchor:
<!-- this -->
Home
<!-- not this -->
Home


You need the anchor to actual contain something so it is clickable.
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>


Text should be between HERE tags
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
</footer>

Related

How to set items on left and right to center align image

I have really basic question for most of HTML and CSS guy. I am trying to align list to center aligned image but not able to set list left or right to the image.
That what my code look like right now
<div>
<ul >
<li> Web Development</li>
<li> Application Development</li>
<li> Website Design</li>
<li> UI/UX Design</li>
<li> SEO Service</li>
</ul>
<img src="images/Mobile-Screen.png" alt="" width="332" height="506" style="text-align:center; display:block; margin:auto; float:none" align="center">
</div>
But i want my screen to look like this. Please guide me to get it done in right way.

You need something like this?
Result:
Codepen
.features-title {
margin-bottom: 50px;
text-align: center;
}
.features-col li {
position: relative;
padding-left: 80px;
}
.features-col li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-position: center;
background-size: cover;
border-radius: 50%;
}
.item-1::before {
background-image: url("https://picsum.photos/id/70/300/300");
}
.item-2::before {
background-image: url("https://picsum.photos/id/71/300/300");
}
.item-3::before {
background-image: url("https://picsum.photos/id/72/300/300");
}
.item-4::before {
background-image: url("https://picsum.photos/id/73/300/300");
}
.item-5::before {
background-image: url("https://picsum.photos/id/74/300/300");
}
.item-6::before {
background-image: url("https://picsum.photos/id/75/300/300");
}
.features-col {
flex-grow: 1;
list-style: none;
}
.features-col--center img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.features-inner {
display: flex;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.features-col--center {
flex-basis: 25%;
flex-grow: 0;
}
.features-col--left,
.features-col--right {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
<section class="features">
<h2 class="features-title">Lorem ipsum dolor sit amet consectetur.</h2>
<div class="features-inner">
<ul class="features-col features-col--left">
<li class="item-1">Lorem ipsum dolor sit.</li>
<li class="item-2">Lorem ipsum dolor sit.</li>
<li class="item-3">Lorem ipsum dolor sit.</li>
</ul>
<div class="features-col features-col--center">
<img src="https://picsum.photos/400/700">
</div>
<ul class="features-col features-col--right">
<li class="item-4">Lorem ipsum dolor sit.</li>
<li class="item-5">Lorem ipsum dolor sit.</li>
<li class="item-6">Lorem ipsum dolor sit.</li>
</ul>
</div>
</section>

Hope this help you.
Please try below css.
.mobile_container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;justify-content: space-around;
}
<div class="mobile_container">
<ul >
<li> Web Development</li>
<li> Application Development</li>
<li> Website Design</li>
<li> UI/UX Design</li>
<li> SEO Service</li>
</ul>
<img src="https://i.ebayimg.com/images/g/p1UAAOSw1ZBbkPDW/s-l300.jpg" alt="image here" width="232" height="406" style="text-align:center; display:block; float:none" align="center">
<ul >
<li> Web Development</li>
<li> Application Development</li>
<li> Website Design</li>
<li> UI/UX Design</li>
<li> SEO Service</li>
</ul>
</div>

try this code and you will get the same layout as you want.
*{box-sizing: border-box;}
.left_box,
.center_box,
.right_box{
float: left;
width: 33.33%;
padding: 30px;
}
.center_box{
text-align: center;
}
<body>
<div>
<div class="left_box">
<ul>
<li> Web Development</li>
<li> Application Development</li>
<li> Website Design</li>
<li> UI/UX Design</li>
<li> SEO Service</li>
</ul>
</div>
<div class="center_box">
<img src="https://i.ebayimg.com/images/g/p1UAAOSw1ZBbkPDW/s-l300.jpg" alt="image">
</div>
<div class="right_box">
<ul>
<li> Web Development</li>
<li> Application Development</li>
<li> Website Design</li>
<li> UI/UX Design</li>
<li> SEO Service</li>
</ul>
</div>
</div>
</body>

You can split the ul items using jquery and then apply css.
<div>
<ul id="menu" style="visibility:hidden;">
<li> Web Development</li>
<li> Application Development</li>
<li> Website Design</li>
<li> UI/UX Design</li>
<li> SEO Service</li>
</ul>
</div>
<div class="row">
<div id='leftCol' class="col-md-4"><ul></ul></div>
<div id='leftCol' class="col-md-4"><img src="images/Mobile-Screen.png" alt="" width="332" height="506" style="display:block; margin-left: auto; margin-right: auto;" align="center"></div>
<div id='rightCol' class="col-md-4"><ul></ul></div>
</div>
<script>
$(document).ready(function() {
var lis = $('#menu li').length;
var half = lis/2;
half = Math.ceil(half);
for(var i=0; i<half; i++){
var liText = $('#menu li').eq(i).html();
$("#leftCol ul").append("<li>"+liText+"</li>");
}
for(var i=half; i<lis; i++){
var liText = $('#menu li').eq(i).html();
$("#rightCol ul").append("<li>"+liText+"</li>");
}
});
</script>

How to place content in a footer next to eachother?

I'm trying to create a footer kind of like this one here
Right now the issue I'm having is getting the content to sit beside eachother instead of stacked on top of eachother.
I've tried using display:flex but that moves everything, including text I want to stay in place, and that isn't the result I'm aiming for, so I'm not sure what to try next.
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.pleft {
width: 20%;
color: rgba(255, 255, 255, 0.74);
}
<div class="footer">
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
<hr>
</div>
If anyone can help me figure this out, it'd be greatly appreciated.

used display:flex
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
display: flex;
}
.pleft {
/* width: 20%; */
color: rgba(255, 255, 255, 0.74);
}
.footer div {
width: 33.333%}
<div class="footer">
<div>
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
</div>
<div>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
</div>
<div>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
</div>
<hr>
</div>

Dropdown menu issue - pure css

Hello Stackoverflowers
I try to make a dropdown menu in pure css but I get one problem that's tearing me apart.
CSS:
ul #mul-s
{
padding-top:17px;
padding-bottom: 10px;
margin-left: 7px;
text-align: center;
}
.main-ul .main-li ul li.allmant
{
padding-bottom: 4px;
text-align: center;
}
.main-ul .main-li ul li.allmant ul.ul-s
{
padding-top: 7px;
margin-left: 5px;
text-align: center;
}
.main-ul .main-li ul li.allmant ul.ul-s li.li-s
{
display: none;
}
.main-ul .main-li ul li.allmant:hover ul.ul-s li.li-s
{
display: block;
}
HTML:
<li class="main-li">KATEGORIER ▾
<ul id="mul-s"> <!-- Kategorier sub1 -->
<li class="allmant">ALLMÄNT <!-- ALLMÄNT OPEN LI -->
<ul class="ul-s"> <!-- SUB FOR ALLMÄNT - OPENING UL -->
<li class="li-s">BLABLABLA<hr></li>
<li class="li-s">Shopping<hr></li>
<li class="li-s">Q&A<hr></li>
<li class="li-s">Fogels<hr></li>
<li class="li-s">Musik & Film</li>
</ul> <!-- SUB FOR ALLMÄNT - CLOSING UL -->
</li> <!-- ALLMÄNT CLOSE LI -->
<hr>
<li>KREATIVT</li>
</ul> <!-- Kategorier sub2 -->
</li>
Okay, so when I hover over "ALLMÄNT" Then everything is good, the dropdown menu pops from display:none to display:block, but then when I try to hover over "KREATIVT" the dropdown menu closes.
FYI: This code is in a dropdown by it self, "KATEGORIER" is a dropdown menu too, but I have not pasted it's CSS
Cheers!
EDIT:
Added a fiddle: http://jsfiddle.net/xc6nx12x/ , Not the prettiest, but yeah

I have change the location of your </ul> and it seems to work:
<div id="fixed-nav">
<ul class="main-ul">
<div style="position: absolute; height: 50px; background-color: rgb(233, 233, 233); top: 0px; left: 65%; width: 1.3px;" class="vline"></div>
<li class="main-li">KATEGORIER ▾
<ul id="mul-s">
<!-- Kategorier sub1 -->
<li class="allmant">ALLMÄNT
<!-- ALLMÄNT OPEN LI -->
<ul class="ul-s">
<!-- SUB FOR ALLMÄNT - OPENING UL -->
<li class="li-s">BLABLABLA
<hr>
</li>
<li class="li-s">Shopping
<hr>
</li>
<li class="li-s">Q&A
<hr>
</li>
<li class="li-s">Fogels
<hr>
</li>
<li class="li-s">Musik & Film
</li>
<!-- SUB FOR ALLMÄNT - CLOSING UL -->
</li>
<!-- ALLMÄNT CLOSE LI -->
<hr>
<li>KREATIVT
</li>
</ul>
</ul>
<!-- Kategorier sub2 -->
</li>
</ul>
</div>
Please fiddle this.

Cannot get :hover to function

I am trying to get a mega menu to work by using hover to activate divs
i have tried it numerous ways, but i just cant get them to show on hover
here is the basic idea in jsfiddle : http://jsfiddle.net/mXx64/5/
and here is the code
HTML
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1">
menu1
</li>
<li class="menu2">
menu2
</li>
<li class="menu3">
menu3
</li>
<li class="menu4">
menu4
</li>
</ul>
</div>
<div class="menu-area1">
menu1
</div>
CSS
.nav-container ul li a:hover .menu-area1 {
display: block;
}
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
any help would be appreciated
edit please ignore the spelling mistake, i know its there, but the code doesnt work when it is fixed anyway :(

It will not work because your ".menu-area1" is not in the anchor if you want keep this structure you need to add jQuery otherwise just do like below
working- http://jsfiddle.net/R37rr/
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1"> menu1
<div class="menu-area1"> menu1 </div>
</li>
<li class="menu2"> menu2 </li>
<li class="menu3"> menu3 </li>
<li class="menu4"> menu4 </li>
</ul>
</div>
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
.nav-container ul>li:hover .menu-area1 {
display: block;
}

I'm not good on JQuery but this what I got:
Fiddle
$('li').hover(function () {
$('.menu-area1').show();
});
$('li').hover('out',function () {
$('.menu-area1').hide();
});

Navigation bar issues - steps forming

I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>

Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.

html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>​
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example