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>
Related
How do I get the About Me and Education sections to the right side of the web
Here is pencode link: https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy
Here is my HTML and CSS
`
<!DOCTYPE html>
<body>
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
</div>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
<div class="resume_item resume_hobby">
</body>
</html>
`
`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Roboto Condensed', sans-serif;
}
body {
background: #D3D3D3;
font-size: 14px;
line-height: 22px;
color: #555555;
width: 200vh;
text-align: center;
}
img{
border: solid;
border_width: 5px;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.regular{
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
}
.resume {
width: 1200px;
height: auto;
display: flex;
margin: 50px auto;
}
.resume .resume_left {
width: 290px;
height: 1050px;
background: #0bb5f4;
padding: 3px;
}
.resume .resume_left .resume_profile {
width: 100%;
height: 350px;
}
.resume .resume_left .resume_profile img {
width: 100%;
height: 100%;
}
.resume .resume_left .resume_content {
padding: 0 25px;
}
.resume .title {
margin-bottom: 20px;
}
.resume .resume_left .bold {
color: #fff;
}
.resume .resume_left .regular {
color: #b1eaff;
}
.resume .resume_item {
padding: 25px 0;
border-bottom: 2px solid #b1eaff;
}
.resume .resume_left ul li {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.resume .resume_left ul li:last-child {
margin-bottom: 0;
}
.resume .resume_left ul li .icon {
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume .icon i,
.resume ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.resume .resume_left ul li .data {
color: #b1eaff;
}
.resume .resume_left .resume_social .semi-bold {
color: #fff;
margin-bottom: 3px;
}
`
i want my about me section and education section to be on the right side of info section, any idea how to get that to work? thank you in advance
Not sure if you already figured this out, but a quick look at your code I saw that you had a html organization problem so the resume_right was inside the resume_left
this is your fixed code, hope it helps.
If after this you have any positioning problems, I suggest you read the CSS flex documentation.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
</div>
</div>
You should use position to choose the place of your elements in the flow,
in your example, if you want to have your "About me" and "education" always displayed on the right of your screen you have to use
position : fixed;
right : 0;
If you want them to be scrolled like everything else, you can considere using
position : absolute;
right : 0;
In both case you'll have to be carefull of element stacking.
Here are informations about position :
https://developer.mozilla.org/fr/docs/Web/CSS/position
You can use either text-align: right, or display: flex together with justify-content: flex-end. In general, text-align works mostly on text elements, and justify-content will justify all elements and content.
I think using flex box it will help you:
display: flex;
justify-content: flex-end
or you can use positioning for this for example:
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
I am just learning how to use css and bootstrap to create an website based on a psd template, problem is that i cant keep my search box inside the container and it stays in the bottom of it.
Here is my code
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<body>
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I rewrote your code to fix it. do not forget to user "row" class out of your columns in bootstrap
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="row">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Update my answer missing of row before col
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div id="header-area1">
<div class="container">
<div class="top-header row bg-succes">
<div class=" col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class=" col-4">
<div class="search-area">
<form action="">
<input type="text" placeholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Use this HTML structure for right align to searchbox.
Add col-6 with feed-area class. And instead os this <div class="left-header col-8"> use this <div class="left-header row">
<div id="header-area1">
<div class="container">
<div class="row">
<div class="top-header col-12 bg-succes">
<div class="left-header row">
<div class="feed-area col-6">
<ul>
<li>
Sign Up
</li>
<li>
Login
</li>
<li>
Rss Feed
</li>
<li id="last">
Archived News
</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
So I have this navbar made with materialize
My code is:
<nav class="light-blue lighten-1 " role="navigation">
<div class="nav-wrapper container "><a id="logo-container" href="#" class="brand-logo">Treasure Hunt</a>
<ul id="navbarUl" class="right hide-on-med-and-down">
<li class="active">Misiuni</li>
<li>NewsFeed</li>
<li>Clasament</li>
<li> </li>
<li id="navbarLi">
<div class="row">
<div class="col s6"><a id="navbarImg" href="#"><img src="img/asd.jpg" class="circle responsive-img small"/></a></div>
<div class="col s6">Adyzds</div>
</div>
</li>
<li >
<div class="row">
<div class="col s4">Level:
<span>Value</span>
</div>
<div class="col s4">XP:
<span>Value</span>
</div>
</div>
</li>
</ul>
</div>
</nav>
My mouse is over the profile pic. I would like the hover effect to cover the name too. Also, I would like the Level value to be near Level.
Can anyone help me?
CSS:
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
#navbarImg{
padding-top: 10px;
max-width: 70px;
max-height: 64px;
}
#navbarLi{
max-height: 64px;
}
Your columns are too narrow for Level: + value. Instead of creating a row with 2 columns inside, try using seperate <li> for each:
<li >
Level: <span>7</span>
</li>
<li>
XP:<span>105</span>
</li>
As for your name, just nest it in a <a> element and materialize will know what to do with it.
Check out this fiddle: https://jsfiddle.net/pwxa6e80/3/ ... hope it helps :)
I am using a customized li element in Bootstrap 3.
What I want is something like it-
.
What I have done is-
HTML-
<ul class="list-group">
<li class="list-group-item" id="baal">
<div style="display: inline;">
<div class="inline">
Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<div class="inline">
<img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<blockquote>
<p>angulard it's obviously tremendously helpful to a lot of people - they took the time to search for a solution,</p>
</blockquote>
<div>
More thing
</div>
</div>
</li>
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
So, the div's HTML is something like-
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
And the CSS is -
/* List Item Styling */
div.inline
{
float:left;
}
.divider-vertical
{
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
/* End - List Item Styling */
But what I am getting is-
Can anyone help me to solve this problem?
Thanks in advance for helping.
Use the .clearfix class as follows:
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
<div class="clearfix"></div>
</li>
css:
/* List Item Styling */
div.inline, .divider-vertical
{
height: 50px;
float:left;
}
.divider-vertical
{
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
I am creating a table-like by using html unordered nested list, style-up with css to make it look like table. Now it looks exactly how I want in Firefox, but looks horrible in IE8.
(Sorry that I don't have enough reputation to post the image to show you the differences, kindly refer to code below).
HTML code as below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
TODO write content
</div>
<ul>
<li>
<div class="box">
<div class="title">
My Categories
</div>
<div class="description">
My Categories
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Fun
</div>
<div class="description">
Fun
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Sport
</div>
<div class="description">
Sport
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Surfing
</div>
<div class="description">
Surfing
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Extreme knitting
</div>
<div class="description">
Extreme knitting
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Friends
</div>
<div class="description">
Friends
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Gerald
</div>
<div class="description">
Gerald
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Gwendolyn
</div>
<div class="description">
Gwendolyn
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Work
</div>
<div class="description">
Work
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Reports
</div>
<div class="description">
Reports
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Annual
</div>
<div class="description">
Annual
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Status
</div>
<div class="description">
Status
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Trips
</div>
<div class="description">
Trips
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
National
</div>
<div class="description">
National
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
International
</div>
<div class="description">
International
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
CSS:
.box {
border: 1px solid #BBBBBB;
border-radius: 4px 4px 4px 4px;
margin: 10px;
width: 200px;
position: relative;
padding: 10px;
color: #333333;
font-weight: normal;
min-width: 0;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
background: #e6e49f;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
}
.title {
width: 100%;
font-weight: bolder;
}
.description {
width: 100%;
font-size: medium;
}
li,
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul {
line-height: 38em;
position: relative;
}
ul ul {
line-height: 18em;
position: absolute;
left: 200px;
top: 0;
}
ul ul ul { line-height: 8em }
ul ul ul ul { line-height: 3em }
ul li { position: relative }
I tried to research a lot about CSS for week on this issue and thinking that "line-Height" is the issue because it looked awkward in IE8. I studied that IE8 version should be able to cater the unordered List issue.
Anyone can provide me some idea how to solve this? Or any thing I can used to replace the "line-height"?
I still want to remind unordered listed(<ul>) with css only, no <div> because I don't want to change the core file of cakephp.
Thanks to #ZippyV reminded me to declare the <!DOCTYPE> on it by simply add a line of code
before the <html> tag, so that the browser goes into standards mode and the html is valid.
Now IE8 display it exactly the same as firefox.