I created 3 divs:
header
menu
display area
I created three tag and I need to align two divs in the same row — the menu div in the left and display in the right.
I am getting error in that I tried many examples and none of them are working.
The header should be fixed in top
and others should be as it is
What could be the problem, and how can I fix it?
HTML
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<script src="js/modernizr.custom.js"></script>
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#footer{height: 50px;background-color: #ddd;width: 100%;}
#header{z-index: 1;top: 0;margin-top: 0px;position: fixed;height: 90px;width: 100%;background-color: #ddd;}
.dis123{width: 500px;height: 500px;background-color: #ddd;text-align: left;
display: block;
margin-left: auto;
margin-right: auto;}
</style>
</head>
<div id="header">
Head
</div>
<body>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div id="footer">
footer
</div>
</body>
</html>
You need to use float:left property two show two DIVS in row. and then use clear:both for div to place footer.
HTML
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li>SELECT CATEGORY</li>
<li>MOBILE & TABLET</li>
<li>ELECTRONICS & COMPUTER</li>
<li>Vehicles</li>
<li>Home & Furniture</li>
<li>Pets</li>
<li>Books, CDs & Hobbies</li>
<li>Clothing & Accessories</li>
<li>Kids & Baby</li>
<li>Sports & Health</li>
<li>Services</li>
<li>Jobs</li>
<li>Real Estate</li>
</ul>
</div>
<div class="dis123">
display
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
CSS
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #ddd;}
#footer
{
height: 50px;width: 100%;background-color: #ddd;
}
.dis123
{
width:60%;
float:left; height: 500px;background-color: #ddd;text-align: left;
}
.postleftmen
{
width:40%;
float:left;
}
DEMO
Related
I created a cv using HTML and CSS. But I tried to apply a CSS border around it but it didn't work.
The cv here is displayed in the center of the web page.
The HTML and CSS codes of the CV are shown below.
When adding the Border, if you want, change the HTML and CSS codes that I have already coded.
body {
font-family: sans-serif, Arial, Helvetica, sans-serif;
margin-top: 0;
}
/*********Header Section************/
#name {
text-align: center;
color: white;
}
#tp-no {
text-align: center;
padding-top: 5px;
color: white;
}
#mail {
text-align: center;
margin-top: -3px;
color: white;
}
header {
line-height: 4px;
}
#name .color-name {
color: #14a800;
}
header {
padding-top: 10px;
margin: auto;
max-width: 700px;
background-color: #3c4041f1;
height: 6rem;
}
/*********main-details-sec************/
#main-details-sec {
margin-top: 3em;
}
.column {
float: left;
width: 50%;
}
#main-details-sec {
content: "";
display: table;
clear: both;
margin: auto;
max-width: 600px;
}
.ol-list {
line-height: 25px;
}
.education {
color: #14a800;
}
.personal {
color: #14a800;
}
.school {
color: #14a800;
}
.contact {
color: #14a800;
}
span {
font-weight: bold;
}
/*********second-details-sec************/
#second-details-sec {
margin: auto;
max-width: 600px;
}
.other-edu {
color: #14a800;
}
.Extra {
color: #14a800;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My CV</title>
</head>
<body>
<header>
<h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
<h4 id="tp-no">+94 76 XXXX XXX</h4>
<h4 id="mail">pathumXXXXXXX#gmail.com</h4>
</header>
<div id="main-details-sec">
<!--Education Details-->
<div class="column">
<h2 class="education">Education</h2>
<h4 class="exam-ol">G.C.E (O/L) Examination (XXXX)</h4>
<ul class="ol-list">
<li>Mathematics <span>X</span></li>
<li>ICT <span>X</span></li>
<li>Sinhala <span>X</span></li>
<li>Buddhist <span>X</span></li>
<li>History <span>X</span></li>
<li>Science <span>X</span></li>
<li>Life Skill & Civic Education <span>X</span></li>
<li>Art <span>X</span></li>
<li>English <span>X</span></li>
</ul>
<h4 class="exam-al">G.C.E (A/L) Examination (XXXX)</h4>
<ul class="al-list">
<li>Science for Technology <span>X</span></li>
<li>Information & Communication Technology <span>X</span></li>
<li>Engineering Technology <span>X</span></li>
</ul>
</div>
<!--Personal Details-->
<div class="column">
<div class="personal-details">
<h2 class="personal">Personal Details</h2>
<ul class="personal-list">
<li id="personal-data"> Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX</li>
<li id="personal-data"> Name with initials - X.X. Pathum XXXXXXXX</li>
<li id="personal-data"> Date of Birth - XXXX.XX.XX</li>
<li id="personal-data"> Gender - Male</li>
<li id="personal-data"> NIC No - XXXXXXXXXX</li>
<li id="personal-data"> Marital Status - Single</li>
</ul>
</div>
<!--School-->
<div class="school-details">
<h2 class="school">School</h2>
<ul class="school-list">
<li id="school-data">XP/XT XXXXXXXXXX XXXX Vidyalaya</li>
<li id="school-data">X.X.X.XXXXXXXXX Central College, XXXXXXXX</li>
</ul>
</div>
<!--Contact-->
<div class="contact-details">
<h2 class="contact">Contact</h2>
<ul class="contact-list">
<li id="school-data">Mobile No- XXXXXXXX</li>
<li id="school-data">Gmail- pathumXXXXXXXXXXX.com</li>
<li id="school-data">Address- XXXXXXXX, XXXXXXXXXX</li>
</ul>
</div>
</div>
</div>
<div id="second-details-sec">
<div class="other-edu-details">
<h2 class="other-edu">Other Education Qualification</h2>
<ul class="other-edu-list">
<li id="other-edu-data">I followed Certificate Computer Course <strong>(MS Office Packege Certificate/Adobe Photoshop Certificate)</strong></li>
<li id="other-edu-data">I have successfully completed The <strong>Preparing to Manage Human Rescources Certificate Course</strong> conducted by Coursera</li>
<li id="other-edu-data">I successfully completed <strong>The Fundamentals of Digital Marketing Certificate</strong> from Google Digital Garage</li>
<li id="other-edu-data">I successfully completed <strong>Certificate in Cyber Security & Networking Course</strong> conducted by Department of Computing NextGen Campus</li>
<li id="other-edu-data">I have studied the <strong>Computer Certificate in Hardware Course</strong> issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate</li>
</ul>
</div>
<div class="Extra-details">
<h2 class="Extra">Extra Curricular Activities</h2>
<ul class="Extra-list">
<li id="Extra-data">I have Dhamma School exam Certificates</li>
<li id="Extra-data">I have won school Art Competitions and obtained art certificates</li>
</ul>
</div>
</div>
</body>
</html>
Preview:
You can add it to the body, just make sure you set the width and height values (I just used fit-content). You can then adjust your spacing on your left column so it's not touching the border.
Also, IDs should be unique, so I change those to classes.
I'd also recommend looking into flexboxes instead of using floats for your columns. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
font-family: sans-serif, Arial, Helvetica, sans-serif;
margin: 0 auto;
width: fit-content;
height: fit-content;
border: 1px solid black;
}
/*********Header Section************/
#name {
text-align: center;
color: white;
}
#tp-no {
text-align: center;
padding-top: 5px;
color: white;
}
#mail {
text-align: center;
margin-top: -3px;
color: white;
}
header {
line-height: 4px;
}
#name .color-name {
color: #14a800;
}
header {
padding-top: 10px;
margin: auto;
max-width: 700px;
background-color: #3c4041f1;
height: 6rem;
}
/*********main-details-sec************/
#main-details-sec {
margin-top: 3em;
}
.column {
float: left;
width: 50%;
}
#main-details-sec {
content: "";
display: table;
clear: both;
margin: auto;
max-width: 600px;
}
.ol-list {
line-height: 25px;
}
.education {
color: #14a800;
}
.personal {
color: #14a800;
}
.school {
color: #14a800;
}
.contact {
color: #14a800;
}
span {
font-weight: bold;
}
/*********second-details-sec************/
#second-details-sec {
margin: auto;
max-width: 600px;
}
.other-edu {
color: #14a800;
}
.Extra {
color: #14a800;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My CV</title>
</head>
<body>
<header>
<h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
<h4 id="tp-no">+94 76 XXXX XXX</h4>
<h4 id="mail">pathumXXXXXXX#gmail.com</h4>
</header>
<div id="main-details-sec">
<!--Education Details-->
<div class="column">
<h2 class="education">Education</h2>
<h4 class="exam-ol">G.C.E (O/L) Examination (XXXX)</h4>
<ul class="ol-list">
<li>Mathematics <span>X</span></li>
<li>ICT <span>X</span></li>
<li>Sinhala <span>X</span></li>
<li>Buddhist <span>X</span></li>
<li>History <span>X</span></li>
<li>Science <span>X</span></li>
<li>Life Skill & Civic Education <span>X</span></li>
<li>Art <span>X</span></li>
<li>English <span>X</span></li>
</ul>
<h4 class="exam-al">G.C.E (A/L) Examination (XXXX)</h4>
<ul class="al-list">
<li>Science for Technology <span>X</span></li>
<li>Information & Communication Technology <span>X</span></li>
<li>Engineering Technology <span>X</span></li>
</ul>
</div>
<!--Personal Details-->
<div class="column">
<div class="personal-details">
<h2 class="personal">Personal Details</h2>
<ul class="personal-list">
<li class="personal-data"> Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX</li>
<li class="personal-data"> Name with initials - X.X. Pathum XXXXXXXX</li>
<li class="personal-data"> Date of Birth - XXXX.XX.XX</li>
<li class="personal-data"> Gender - Male</li>
<li class="personal-data"> NIC No - XXXXXXXXXX</li>
<li class="personal-data"> Marital Status - Single</li>
</ul>
</div>
<!--School-->
<div class="school-details">
<h2 class="school">School</h2>
<ul class="school-list">
<li class="school-data">XP/XT XXXXXXXXXX XXXX Vidyalaya</li>
<li class="school-data">X.X.X.XXXXXXXXX Central College, XXXXXXXX</li>
</ul>
</div>
<!--Contact-->
<div class="contact-details">
<h2 class="contact">Contact</h2>
<ul class="contact-list">
<li class="school-data">Mobile No- XXXXXXXX</li>
<li class="school-data">Gmail- pathumXXXXXXXXXXX.com</li>
<li class="school-data">Address- XXXXXXXX, XXXXXXXXXX</li>
</ul>
</div>
</div>
</div>
<div id="second-details-sec">
<div class="other-edu-details">
<h2 class="other-edu">Other Education Qualification</h2>
<ul class="other-edu-list">
<li class="other-edu-data">I followed Certificate Computer Course <strong>(MS Office Packege Certificate/Adobe Photoshop Certificate)</strong></li>
<li class="other-edu-data">I have successfully completed The <strong>Preparing to Manage Human Rescources Certificate Course</strong> conducted by Coursera</li>
<li class="other-edu-data">I successfully completed <strong>The Fundamentals of Digital Marketing Certificate</strong> from Google Digital Garage</li>
<li class="other-edu-data">I successfully completed <strong>Certificate in Cyber Security & Networking Course</strong> conducted by Department of Computing NextGen Campus</li>
<li class="other-edu-data">I have studied the <strong>Computer Certificate in Hardware Course</strong> issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate</li>
</ul>
</div>
<div class="Extra-details">
<h2 class="Extra">Extra Curricular Activities</h2>
<ul class="Extra-list">
<li class="Extra-data">I have Dhamma School exam Certificates</li>
<li class="Extra-data">I have won school Art Competitions and obtained art certificates</li>
</ul>
</div>
</div>
</body>
</html>
Do you mean something like this?
body{
font-family: sans-serif,Arial, Helvetica, sans-serif;
margin-top: 0;
}
#allcv {
border: 2px solid red;
max-width: 700px;
margin: 0 auto;
}
/*********Header Section************/
#name{
text-align: center;
color: white;
}
#tp-no{
text-align: center;
padding-top: 5px;
color: white;
}
#mail{
text-align: center;
margin-top: -3px;
color: white;
}
header{
line-height: 4px;
}
#name .color-name{
color: #14a800 ;
}
header{
padding-top: 10px;
margin: auto;
max-width: 700px;
background-color: #3c4041f1;
height: 6rem;
}
/*********main-details-sec************/
#main-details-sec{
margin-top: 3em;
}
.column{
float: left;
width: 50%;
}
#main-details-sec{
content: "";
display: table;
clear: both;
margin: auto;
max-width: 600px;
}
.ol-list{
line-height: 25px;
}
.education {
color: #14a800 ;
}
.personal{
color: #14a800 ;
}
.school{
color: #14a800 ;
}
.contact{
color: #14a800 ;
}
span{
font-weight: bold;
}
/*********second-details-sec************/
#second-details-sec{
margin: auto;
max-width: 600px;
}
.other-edu{
color: #14a800 ;
}
.Extra{
color: #14a800 ;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My CV</title>
</head>
<body>
<header>
<h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
<h4 id="tp-no">+94 76 XXXX XXX</h4>
<h4 id="mail">pathumXXXXXXX#gmail.com</h4>
</header>
<div id="allcv">
<div id="main-details-sec">
<!--Education Details-->
<div class="column">
<h2 class="education">Education</h2>
<h4 class="exam-ol">G.C.E (O/L) Examination (XXXX)</h4>
<ul class="ol-list">
<li>Mathematics <span>X</span></li>
<li>ICT <span>X</span></li>
<li>Sinhala <span>X</span></li>
<li>Buddhist <span>X</span></li>
<li>History <span>X</span></li>
<li>Science <span>X</span></li>
<li>Life Skill & Civic Education <span>X</span></li>
<li>Art <span>X</span></li>
<li>English <span>X</span></li>
</ul>
<h4 class="exam-al">G.C.E (A/L) Examination (XXXX)</h4>
<ul class="al-list">
<li>Science for Technology <span>X</span></li>
<li>Information & Communication Technology <span>X</span></li>
<li>Engineering Technology <span>X</span></li>
</ul>
</div>
<!--Personal Details-->
<div class="column">
<div class="personal-details">
<h2 class="personal">Personal Details</h2>
<ul class="personal-list">
<li id="personal-data"> Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX</li>
<li id="personal-data"> Name with initials - X.X. Pathum XXXXXXXX</li>
<li id="personal-data"> Date of Birth - XXXX.XX.XX</li>
<li id="personal-data"> Gender - Male</li>
<li id="personal-data"> NIC No - XXXXXXXXXX</li>
<li id="personal-data"> Marital Status - Single</li>
</ul>
</div>
<!--School-->
<div class="school-details">
<h2 class="school">School</h2>
<ul class="school-list">
<li id="school-data">XP/XT XXXXXXXXXX XXXX Vidyalaya</li>
<li id="school-data">X.X.X.XXXXXXXXX Central College, XXXXXXXX</li>
</ul>
</div>
<!--Contact-->
<div class="contact-details">
<h2 class="contact">Contact</h2>
<ul class="contact-list">
<li id="school-data">Mobile No- XXXXXXXX</li>
<li id="school-data">Gmail- pathumXXXXXXXXXXX.com</li>
<li id="school-data">Address- XXXXXXXX, XXXXXXXXXX</li>
</ul>
</div>
</div>
</div>
<div id="second-details-sec">
<div class="other-edu-details">
<h2 class="other-edu">Other Education Qualification</h2>
<ul class="other-edu-list">
<li id="other-edu-data">I followed Certificate Computer Course <strong>(MS Office Packege Certificate/Adobe Photoshop Certificate)</strong></li>
<li id="other-edu-data">I have successfully completed The <strong>Preparing to Manage Human Rescources Certificate Course</strong> conducted by Coursera</li>
<li id="other-edu-data">I successfully completed <strong>The Fundamentals of Digital Marketing Certificate</strong> from Google Digital Garage</li>
<li id="other-edu-data">I successfully completed <strong>Certificate in Cyber Security & Networking Course</strong> conducted by Department of Computing NextGen Campus</li>
<li id="other-edu-data">I have studied the <strong>Computer Certificate in Hardware Course</strong> issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate</li>
</ul>
</div>
<div class="Extra-details">
<h2 class="Extra">Extra Curricular Activities</h2>
<ul class="Extra-list">
<li id="Extra-data">I have Dhamma School exam Certificates</li>
<li id="Extra-data">I have won school Art Competitions and obtained art certificates</li>
</ul>
</div>
</div>
</div>
I created another div called allcv that cluster every other div (except header) and center in the middle of page. If you want, you can put the header inside that div to.
Hope I helped.
I'm working with my personal page.
I want to make columns out of the lists .
How can i do this .
I tried grid's and columns and it don't work . For some reason i'm thinking a web kit. Any suggestions ? I also tried to float margin , width, position , left and so forth . I'm officially stuck . I did use a max with of 960 pixels. Was that the wrong way to go ? I also centered aligned my page as well? Was that wrong as well ?
/*body styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
/*grid grid-template: 1fr repeat(11,10px 1fr);*/
grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
10px
[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
10px
[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
10px
[main-start] 1fr[main-end]
[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
margin: 0 auto;overflow:auto;padding:60px 50px; }*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*headers*/
h1,h2{font-family:'lobster', cursive;
font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}
header{text-align: center;}
header{padding-top: 60px;position:relative; }
h2 {
margin: 10px 0;
font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
.nav a{display:inline-block;
padding:15px 20px;
text-decoration:none;
text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
text-align:center; background-color:slategray;
display:block;}
/*columns*/
.column1{float:left;
width:900px;
marging:10px;}
.column2{float:left;
width:300px;margin:10px;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<nav role="navigation">
<div class="nav">
Home
About
Portfolio
Downloads
<!-- Right navigation-->
</div>
</nav>
<div class="content-wrap">
<h1>Larry J Designs</h1>
<h2>Beginner web designer/ artist</h2>
<div class="about" id="about-me">
<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
<p> Hello, I'm Larry J , I currently live in the DC Metro area , i also love working on art in my spare time.
As a teen in high I use to love to draw and build websites ,
Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
Life has a long road to success , but on the road there are that you have to learn to get to the next level . Here are mines bellow :</p></div></div>
</header>
<main role="main">
<section><!--my skill-->
<div class="content-wrap">
<div class="column1">
<h3>Skills in progress</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
<li>J query</li>
</ul></div>
<div class="column2">
<h3>Next Skills to learn</h3>
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Logo design</li>
<li>Graphic arts</li>
<li>T-shirt Design</li>
</ul>
</div></section>
</main>
<!--my skill-->
<!--skills list end-->
<!--container end-->
<div class="footer">
<p>©Larry J designs </p>
</div>
</body>
`.
I updated your column1 and column2 css with display: inline-block instead of float and it worked. I also made the width percentual.
/*body styles*/
body, html{background-color:#4B88A2;}
.grid-container{display:grid;
/*grid grid-template: 1fr repeat(11,10px 1fr);*/
grid-template-columns:[left-sidebar-start] 1fr 10px 1fr[right-sidebar-end]
10px
[main-area-start]1fr reapeat(11,[gutter] 10px [row]1fr[main-area-end])
10px
[right-sidebar-start] 1fr 10px 1fr [right-sidebar-end];
grid-template-rows: [header-start] 1fr[header-end]
10px
[main-start] 1fr[main-end]
[footer-start]1fr[footer-end]
}
/*.content-wrap{max-width:950px;
margin: 0 auto;overflow:auto;padding:60px 50px; }*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*headers*/
h1,h2{font-family:'lobster', cursive;
font-size:40px;font-weight: 400;}
h1{font-size:80px;}
h3{margin:0;}
header{text-align: center;}
header{padding-top: 60px;position:relative; }
h2 {
margin: 10px 0;
font-size: 40px;}
/*navigation*/
.nav{text-align:center;
position:fixed; top:0;width:100%;margin:0px; }
.nav a{display:inline-block;
padding:15px 20px;
text-decoration:none;
text-transform:uppercase;
font-weight:700;
}
.footer{position: fixed;
left:0; bottom:0;width:100%;
text-align:center; background-color:slategray;
display:block;}
/*columns*/
.column1{
display: inline-block;
width:calc(60%-10);
margin:10px;
vertical-align: top;
}
.column2{
display: inline-block;
width:calc(30%-10);
margin:10px;
vertical-align: top;
font-size:
}
.content-wrap {
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
<link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner">
<nav role="navigation">
<div class="nav">
Home
About
Portfolio
Downloads
<!-- Right navigation-->
</div>
</nav>
<div class="content-wrap">
<h1>Larry J Designs</h1>
<h2>Beginner web designer/ artist</h2>
<div class="about" id="about-me">
<p><img src="images/placeholder.jpg" alt="stock" style="width:100px;height:100px;"></p>
<p> Hello, I'm Larry J , I currently live in the DC Metro area , i also love working on art in my spare time.
As a teen in high I use to love to draw and build websites ,
Currently, I work a full time job like most , however in my spare time I love working on learning web design and drawing .
Life has a long road to success , but on the road there are that you have to learn to get to the next level . Here are mines bellow :</p></div></div>
</header>
<main role="main">
<section><!--my skill-->
<div class="content-wrap">
<div class="column1">
<h3>Skills in progress</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
<li>J query</li>
</ul></div>
<div class="column2">
<h3>Next Skills to learn</h3>
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Logo design</li>
<li>Graphic arts</li>
<li>T-shirt Design</li>
</ul>
</div></section>
</main>
<!--my skill-->
<!--skills list end-->
<!--container end-->
<div class="footer">
<p>©Larry J designs </p>
</div>
</body>
Also, there was a typo on the margin property name on the line 58 in your css code.
Hope it helps,
best
I'm writing some html and css to create a webpage. On the left of the page is a nav section. At the top is a header, below which is a 'main' section containing text in various sections, and below that is a footer.
I have managed to get the header and footer to remain fixed as desired and also get the main section to scroll between the header and footer. The links in the nav are supposed to let the user jump to a section of main as required. However, when clicking on introduction, the introduction section gets positioned at the very top of the page (hidden under the header) where as I would like it to jump to its position just below the header. I've tried various combinations of setting top and position:absolute in main but without success. Can anybody help?
The html and css are below:
index.html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>John Doe</title>
<link type="text/css" rel="stylesheet" href="homepage.css">
<style type="text/css">
</style>
</head>
<body>
<header id="top">
<h1>
<dl>
<dt>
John Doe
</dt>
<dd>
<img src="logo.jpg" alt="Logo" >
</dd>
</dl>
</h1>
</header>
<nav class="navlist">
<ul class="menuitem">
<li>Introduction</li>
<li>Previous Experience</li>
<li>Skills</li>
<li>Courses Taken</li>
<li>Courses Being Taken</li>
<li>Useful Links</li>
<li>Contact</li>
<img src="selfie.jpg" alt="Selfie" >
</ul>
</nav>
<div id="main">
<h2><a id="introduction">Introduction</a></h2>
<p>Welcome to my home page! This page tells you a little bit about myself.</p>
<p>Blah blah blah</p>
<h2><a id="prevExp">Previous Experience</a></h2>
<p>I have worked at
Prodrive,
Lotus Engineering and
Ricardo.
</p>
<p>At Prodrive I did some stuff.</p>
<p>At Lotus I did some stuff.</p>
<p>At Ricardo I did some stuff.</p>
<h2><a id="skills">Skills</a></h2>
<ol>
<li>Awesomeness</li>
<li>Mathematics</li>
<li>Problem Solving</li>
<li>CSS?</li>
</ol>
<h2><a id="courses_taken">Courses taken</a></h2>
<ul>
<li>BEng Degree</li>
<li>Games Programming</li>
<li>Java</li>
<li>Android Programming</li>
</ul>
<!-- Created nested list to show current course and its modules -->
<h2><a id="courses_being_taken">Courses being taken</a></h2>
<ul>
<li>MSc Degree
<ul>
<li><h3>Modules</h3></li>
<li>Apps</li>
<li>Research</li>
<li>Databases</li>
<li>Internet</li>
</ul>
</li>
</ul>
<h2><a id="useful_links">Useful Links</a></h2>
<ul>
<li>
<a href="http://www.w3schools.com/html/html5_intro.asp" >HTML5 Introduction from w3schools</a>
</li>
</ul>
<h2><a id="contact">Contact</a></h2>
<ul>
<li>Address: xxxx</li>
<li>Telephone: xxxx</li>
<li>Email: <a href="mailto:xxxx#uea.ac.uk" >xxxx</a></li>
</ul>
</div>
<footer>
<!-- Horizontal rule and update comment -->
<hr />
<p>Page last updated 30/09/2016 by Stephen Whiddett</p>
</footer>
</body>
</html>
homepage.css:
body {margin:0; padding:0;}
header {border: 0px solid white;}
nav {border: 2px ;}
footer {border: 2px ;}
div#main {border: 2px ;}
h1 {font-family:Helvetica,Arial,sans-serif;
font-size:x-large;
color:blue;
font-style: italic;}
h2 {font-family:Helvetica,Arial,sans-serif;
font-size:medium;
color:#0088FF;
font-style: italic;}
header{ width: 100%;
height: 12vh;
position: fixed;
top: 0;
background: #AAAAAA;
}
#main {
left:6em;
width: 80%;
margin: 13vh 0 6vh 6em;
}
footer{ position: fixed;
width:100%;
height:6vh;
bottom:0;
text-align:center;
background: white;}
p { font-family:Helvetica,Arial;
font-size:x-small;}
a {background-color:yellow}
header a {background-color:inherit}
nav img {max-width:100%;}
ul.menuitem {font-size:small;
margin:0;
padding:1em;}
nav.navlist {width:6em;
position: fixed;
top:12%;
bottom:94%;}
header dt {float:left;}
header dd {float:right;}
header dl {padding:1%;}
header dt {
position: absolute;
top: 6vh;
transform: translateY(-50%);
}
It may be necessary for you to reduce the window size of your browser in order to see the issue I've described to ensure that main cannot fit on the screen all at once.
i want to add dropdownload arrow for each top level menu and not sub.
this is the one i want to add from this site link below but its not working for me
https://amethystwebsitedesign.com/how-to-add-arrow-indicators-to-genesis-navigation-menus/
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
padding:0;
margin:0;
}
body{
background:#f0f0f0;
font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
overflow-x:hidden;
}
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#DF7B61;
text-decoration:none;
text-transform: uppercase;
text-shadow:0 1px 0 #fff;
}
span.reference a:hover{
color:#000;
}
.box{
margin-top:129px;
height:460px;
width:100%;
position:relative;
background:#fff url(click.png) no-repeat 380px 180px;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
}
.box h2{
color:#f0f0f0;
padding:40px 10px;
text-shadow:1px 1px 1px #ccc;
}
</style>
</head>
<body>
<nav><ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations </span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
<nav></div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$this.find('.ldd_submenu').slideDown(300);
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>
</body>
this is the code am trying to add
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
Check it works for me:
.genesis-nav-menu > .menu-item-has-children > a {
color: #333;
text-decoration: none;
}
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 24px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
<link href="https://rawgit.com/WordPress/dashicons/master/css/dashicons.css" rel="stylesheet"/>
<div class="genesis-nav-menu">
<div class="menu-item-has-children">Hello</div>
</div>
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.