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

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>

Related

Element ol is not allowed here (HTML)- Not sure what's going on

Admittedly, I'm new to coding so I'm sure there may be many issues in my code. The errors that are showing up right now are all " Element ol is not allowed here." If someone can please help me resolve this, it would be greatly appreciated, thank you. My code is listed below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paula's Lists</title>
<link rel="stylesheet" href="lists.css">
<style>
.instagramlogo{
position: absolute;
width: 50px;
left: 20px;
top: 20px;
cursor: pointer;
}
.linkedinlogo{
position: absolute;
width: 50px;
left: 100px;
top: 20px;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.column1 {
margin-top: 40px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column2{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column3{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column4{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column5{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
hr{
position: center;
margin-top: 10px;
border-color: #009688;
width: 40%;
margin-left: 31.5%;
}
</style>
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="images/pngfind.com-instagram-png-22629.png" alt="Instagram logo" class="instagramlogo">
<img src="images/pngfind.com-linkedin-png-533561.png" alt="Linkedin logo" class="linkedinlogo">
<ul>
<li>Home</li>
<li>Resume</li>
<li>Lists</li>
<li>Contact</li>
</ul>
</div>
<h1>Paula's Lists</h1>
<span>Get to know me better with the following lists which showcase my perspectives on tech-related concepts!</span>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<h3>Programming Languages I'd Like to Learn</h3>
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
</div>
<hr>
<div class="column2" style="background-color:#bbb;">
<h3>Career Aspirations</h3>
<ul style="list-style-type:disc;">
<li>Software Engineer</li>
</ul>
<ul style="list-style-type:circle;">
<li>Video Game Developer</li>
</ul>
<ul style="list-style-type:square;">
<li>Cyber Security Analyst</li>
</ul>
</div>
<hr>
<div class="column3" style="background-color:#ccc;">
<h3>Favorite Language so Far</h3>
<dl>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets</dd>
</dl>
</div>
<hr>
<div class="column4" style="background-color:#ddd;">
<h3>Favorite Class + Topic</h3>
<ol>
<li>Introduction to Web Development</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ol>
</div>
<hr>
<div class="column5" style="background-color:#ddd;">
<h3>My Inspiration in Tech</h3>
<ul>
<li>Elon Musk</li>
<ul>
<li>Founder and CEO of Tesla + SpaceX</li>
</ul>
</ul>
</div>
</div>
</div>
<script src=https://my.gblearn.com/js/loadscript.js></script>
</body>
</html>
As I stated, I am a noob with coding as I have just begun so I believe it may have something to do with spacing. I have tried to rearrange, but have failed miserably. Any help would be appreciated, thank you!

In your code you have
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
You have ol elements directly inside an ol element. You should have li elements as the direct children of ol. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
You could have
<ol>
<li>
<ol type="1">
<li>Python</li>
</ol>
</li>
</ol>
Incorrect HTML often does work and may do what you want but it is likely to be different in different browsers and lead to problems later on.

What you're trying to achieve is nesting of <ol> (ordered list).
A nested list or a sublist is a list within a list. The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.
Start by creating a list. It can be ordered or unordered:
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
Now add a nested list to the first list item:
<ul>
<li>Python
<ul>
<li>Item</li>
<li>Item2</li>
</ul>
</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
Notice that the sublist is a child and not a sibling of an <li> tag.
And you can keep adding levels:
<ul>
<li>Python
<ul>
<li>Item</li>
<li>Item2</li>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
</ul>
</ul>
</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
This is the only correct way of nesting <ol>
Results:

Is there anyway to use justify: space-between on li without nested divs?

Is there any way to remove these nested divs which contain the content and does it matter? Would there be any better tags to use than div? I am quite new to HTML so I'm not sure how important this is. I've heard a bit about the importance of semantic HTML but I've seen a lot of divs on many sites.
#media screen and(max-width: 400px) {
li {
flex-wrap: wrap;
justify-content: center;
}
}
ul {
display: flex;
width: 90%;
flex-wrap: wrap;
}
li {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex: 40%;
padding: 30px 80px 30px 80px;
width: 200px;
}
li>div {
padding: 10px;
white-space: nowrap;
font-size: 14px;
}
<section>
<ul aria-label="Pork">
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
</ul>
<ul aria-label="Beef">
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
<li>
<div>rib-eye</div>
<div>$13.56/lb</div>
</li>
</ul>
</section>

I would say there is nothing wrong with using them as you have done although maybe a <p> or a <span> would be better used semantically, as they are better suited for this type of content. <div> are primarily for separating blocks of content, whereas this is more spacing text.
However, there is no 100% right or 100% wrong.

Coding <a> under <ul> confusion

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>

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>

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