I have created my first website using instructions from the old introduction to HTML and CSS on http://codecademy.com
The code works well in the special constructor page, but now when I try to take out into the wild my HTML and CSS do not seem to link up. I try to view in a browser but no joy, I think I tried to upload the files to a file server but still no joy and tried several tutorials.
Can someone please tell me where I am going wrong? is it something to do with the CSS style sheet references at the top of the HTML?
Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About us</li>
</ul>
<ul class="pull-right">
<li>Services</li>
<li>Prices</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Computer repairs and upgrades.</h1>
<p>Fast and friendly services for all your computer needs. Call 07952270940 for a free consultation.</p>
<p>- PC and Laptop repair to your door</p>
<p>- Virus/Malware Removal</p>
<p>- Tune up / Speed up</p>
<p>- Computer Upgrades</p>
<p>- Internet Security</p>
<p>- No-fix / No-fee Policy</p>
<p>- 7 days a week service</p>
<p>- Guaranteed work & parts
</p>
Learn More
</div>
</div>
<div class="neighborhood-guides">
<div class="container">
<h2>Neighborhood Guides</h2>
<p>We pride ourselves on openness and fairness with accurate quotes and no hidden costs.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
Laptops
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_39726_20150729_zpsyypbc60q.jpg">
</div>
<div class="thumbnail">
Website development
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40106_20150820_zpsxs617yvx.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
PC's
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40371_20150828_zpsmabjmlys.jpg">
</div>
<div class="thumbnail">
Upgrades
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_41306_20150916_zpsw0mykfns.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Price promise
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/photo_40001_20150814_zpsk1nnnytm.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
Security and virus removal
<img src="http://i650.photobucket.com/albums/uu227/cre8t0r/PC%20and%20Laptop%20repair%20website/c775776e-19e5-40f4-a651-7d73434ce9d0_zpsr59jga2j.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Laptop screen repair</h3>
<p>We are specialists in laptop screen repair. We provide screens for all laptops.</p>
<p>I dunno yet</p>
</div>
<div class="col-md-4">
<h3>No-fix / No-fee Policy</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
</body>
</html>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
height: 470px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:0px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 15px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhood-guides {
background-color: #efefef;
Border-bottom: 1px solid #dbdbdb;
}
.neighborhood-guides h2 {
color: #393c3d;
font-size: 24px;
}
.neighborhood-guides p {
font-size: 15px;
margin-bottom: 13px;
}
Since the third stylesheet's path is relative, you have to make sure the path is correct and you have a main.css file in the same folder as your html file.
Oh man, a few suggestions to help keep you on track!
First off copy your CSS code and store it locally. Create a web project folder and then a themes folder to keep your CSS in.
C:\web
C:\web\index.html
C:\web\themes\classic\style.css
Also avoid BootStrap like the plague! It's CSS done by server guys and it uses jQuery (CSS is client side, not server and client/server are two different mentalities). You don't need to over-complicate your understanding. Stick to HTML and CSS and "vanilla" (plain) JavaScript as adding dependencies makes your code weak and locks you in to things that you're not ready to understand whether it will benefit you or not (hint: those won't). Most people who use that stuff couldn't code vanilla if their lives depended on it so learn real code first and then consider third party stuff per project and only if it fits a given project.
Also understand that there are two parsers in browsers, HTML and XML parsers. You can serve code loose or strict; the HTML parser is loose while the XML parser is strict. Firefox is great for working with the XML parser (save your files as .xhtml) and you can still use HTML5 (it's just HTML5 served XML compatible) but when you make an error (with few exceptions) the whole page will break and you'll get an error message telling you what is wrong which is great because now that you're aware you can quickly fix it and move on.
One of the best resources is Mozilla Developer Network. Generally opt for that when looking things up. Beyond that focus on what you want to achieve and sites like http://caniuse.com/ will give you some (though not all) the insight in to what technologies exist that can be used. Good luck!
This
<link rel="stylesheet" href="main.css">
If your HTML document is not being styled correctly, then you need to make sure that href is pointing to the correct destination for your stylesheet.
If your stylesheet happens to the be in the same directory as your HTML file, you can use this to view it locally on your computer to make sure it is working as expected:
<link rel="stylesheet" type="text/css" href="./main.css">
Also, did you actually copy your CSS into a separate file called main.css? Make sure you do that.
Related
I basically want to use ExpressJS / NodeJS to use JSON as a file to build the websites. This would be using JSON, HTML and CSS. I want to find out how to automate JSON files to HTML via ExpressJS
My HTML Code
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
footer {
/* place on the bottom */
/* position: sticky; */
bottom: 0;
left: 0;
width: 100%;
background: #ec8549;
display: grid;
place-items: center;
padding: 50px;
}
footer .footerItems {
font-size: 20px;
bottom: 0;
}
.section {
padding: 0.5%;
border: 2.5px solid #00ff6a;
display: flex;
margin-bottom: 5%;
margin: 3%;
}
.bulletPointMore {
list-style-position: inside;
}
.connectingText {
vertical-align: top;
display: inline-block;
padding-right: 2.5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section">
<h2 class="titles">Investments Decisions</h2>
<ul>
<li>Investment: Putting money into something in order to make a profit. Can be undertaken by government, business and individuals.</li>
<li>Superannuation: An employer putting money into a superannuation fund so an employee has money in retirement.</li>
</ul>
</div>
<div class="section">
<h2 class="titles">What to consider when making investment decisions</h2>
<ul>
<li>Risk is the degree of uncertainty about expected returns (and the possibility of loss).</li>
<li>Risk is the chance an investment won’t give you the outcomes you want.</li>
<li>Some individuals can tolerate more risk than others (usually based on their income and wealth).</li>
<li>Rate of return is the overall earning (after taxes) that you might expect from investments. (income, interest, dividends, capital gains/losses)</li>
<li>Liquidity - how easily an investment can be turned into cash.</li>
<div class="bulletPointMore">
<li> More liquid (more easily converted into cash) eg.</li>
<li> Less liquid (less easily converted into cash) eg.</li>
</div>
<li>Diversification - reducing risk by spreading money among various types of investments. Having a portfolio of investments eg, shares and property.</li>
</ul>
</div>
<div class="section">
<div class="connectingText">
<h2 class="titles">Who can invest?</h2>
<ul>
<li>Individuals</li>
<li>Businesses/Institutions</li>
<li>Governetment</li>
</ul>
</div>
<div class="connectingText">
<h2 class="titles">Why do they invest?</h2>
<ul>
<li>In order to achieve a financial goal…</li>
<li>To increase efficiency and profitability</li>
<li>Invest to ensure that a country increases its equality of life, economic prosperity or is competitive.</li>
</ul>
</div>
</div>
<div class="section">
<h2 class="titles">Assessment Task</h2>
<ul>
<li>First decision to make before answering questions is to determine how you will divide the $500,000 into the three investment options of:</li>
<li>Bank term deposit</li>
<div class="bulletPointMore">
<li>Shares</li>
<li>Property</li>
</div>
<li>Begin researching properties first as it will be the most expensive option. Eg. if buying a $600,000 property. You will need to spend $300,000 out of the $500,000. Then get a bank loan for the other $300,000.</li>
</ul>
</div>
<footer>
<div class="footerItems">
<p>52 ©</p>
</div>
</footer>
</body>
</html>
What I mean in JSON File. This would automate the process for me if I want to add more notes.
[
{
"id": 0,
"Title": "Title",
"BulletPoint1": "Text",
"BulletPoint2": "Text"
},
{
"id": 1,
"Title": "Title",
"BulletPoint1": "Text",
"BulletPoint2": {
"BulletPoint1": "Text",
"BulletPoint2": "Text"
}
}
]
I suggest using js templates like ejs engine or jadi.
Be careful about the issues existed in any one of these engines.
If you could learn and use any js libraries or frameworks for building the UI interface, it would be more comfortable for you. Making API using Expressjs and Front-End app using a library such as react.js or framework like Angular something like that.
I'm brand new to web development and I have build a little website with 3 pages. My goal is to use #media tags to make it responsive for the following: max-widths: 980px, 768px and 640px. I did the first page and it's been acting weird. How can I make the entire website responsive? Please to assist. My code for all 3 pages and the media is attached. Thanks.
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example#yahoo.com">
<br><br>
Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
<input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
#media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
#media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
Start out by removing fixed width properties. I am having a hard time seeing how you need width: 50% on everything. Then start by just addressing the styles of your .container element.
A good techniques is setting the max-width to the width you have in mind for the site to be viewed on a normal desktop screen, in the demo I used 600px but you can use any value that feels right.
Then in you media query assign a new max-width value that is appropriate for the screen size in the query, here i used 80% becuase typically on small screens you want the content to mostly fill the width of the screen with a little space on the sides, but again you can configure this to your needs in a variety of ways.
The main thing here is that your container element is now responsive and the content inside can fill up the space however you like from there. Run the snippet and click the Full page link to play around with the screen width and see the behavior working.
.container {
max-width: 600px;
margin: 0 auto;
}
#media screen and (max-width: 640px;) {
.container {
max-width: 80%;
}
}
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
I wish you had a sketch of what the final product will look like it would have been very helpful. There is more to making a page responsive than writing just valid HTML tag and corresponding styles and mind typos because from your code the extra % sign will make
.middle-about-me{
width: 50%%;
}
misbehave.
There a couple of things you need to know to be able to make a page responsiveness effective and very close to what you want.
Firstly you should consider resetting the default styles that the browser naturally applies to valid HTML tags by using normalize.css or utilize the power of universal selector which is almost as good in modern browsers, something like:
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
so with the that basic reset you can always rely on using ems or rems for fonts an percentages for images and other block element when it feels appropriate.
This little write up is not enough to teach you all you need to know about responsiveness in the web but I hope it shed light on your path. Meanwhile those were not my original ideas i took a course by 'Jonas Schmedtman', He actually thought me those.
If you have a sketch of what the final pages should look like or you are still not very clear with what i have tried to explain so far please don't hesitate to add a comment so that we tidy it up together.
I'm having an issue with my web page of my resume not adhering to my min-width and max-width rules in css. I'm not really sure why. My page looks great with great margins on either side below a width of 1200px, but when the width goes higher than this the whole page content starts to list over to the right side and move off of the screen. I'm trying to make the entire body have a max width of something like 992px because a resume works better when viewed at about the width of a piece of paper on the screen. However, the layout looks awful when at full size.
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Resume - Tyler Cheek</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container header">
<h1>Tyler Cheek</h1>
</div>
<div class="container">
<div class="row">
<div class="contact-left col-md-6 col-sm-12 col-xs-12">
<p>(919)-397-8116</p>
<p>Github: github.com/Hoid</p>
<p>tylerlcheek#gmail.com</p>
</div>
<div class="contact-right col-md-6 col-sm-12 col-xs-12">
<p>2604 Hillsborough Street Apt. 202</p>
<p>Raleigh, NC 27607</p>
</div>
</div>
</div>
<div class="container">
<h5><b>Summary</b></h5>
<p> Team player software engineer with open-source, frontend, backend, and management experience. I make others around me better through excellent communication and a purely constructive attitude. You should hire me because I have a passion for making cool stuff that makes people’s lives better and the broad technical aptitude to do it.</p>
</div>
<div class="container">
<h5><b>Objective</b></h5>
<p> Seeking a full-time position in Software Development for an innovative company that will help me specialize my skills. I have a vast foundation that allows me to learn new things quickly and want experiences that will help me deepen my skillset.</p>
</div>
<div class="container" style="overflow: auto;">
<h5><b>Education</b></h5>
<div class="row">
<div class="education-left col-sm-6 col-xs-12">
<p> NC State University, Raleigh NC</p>
<p> B.S., Computer Engineering May 2017</p>
</div>
</div>
</div>
<div class="container professional-experience">
<h5><b>Professional Experience</b></h5>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>QA Lead</u></p>
</div>
<div class="company-dates">
<p>Imaginovation</p>
<p>December 2017 – April 2018</p>
</div>
</div>
<ul class="position-information">
<li>Led a team of 3 offshore and 1 local Test Engineers in Quality Control, the Software Test Life Cycle, Automation best practices, Team Communication, and Time Management</li>
<li>Introduced and Documented a new effort in website test automation using Snaptest</li>
<li>Initiated a system of code reviews and a deployment plan throughout the company</li>
<li>Developed 10 automated test scripts for API endpoints in Go and numerous others in Postman using Javascript</li>
<li>Created over 75 automated tests for websites across various projects in Snaptest</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Developer/Project Manager</u></p>
</div>
<div class="company-dates">
<p>Imaginovation</p>
<p>April 2017 – December 2017</p>
</div>
</div>
<ul class="position-information">
<li>Developed a base API framework and production-ready endpoints in Go</li>
<li>Designed the Bluetooth LE communication scheme for a mobile application to a custom proprietary IOT healthcare product in C</li>
<li>Led 3 teams of developers across 3 projects in multiple platforms, 2 of which were from start to completion</li>
<li>Created a Unity demo project with lightsabers for the Meta 2 Augmented Reality headset</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Software Development Student</u></p>
</div>
<div class="company-dates">
<p>Blackberry</p>
<p>Aug. – Dec. 2015</p>
</div>
</div>
<ul class="position-information">
<li>Delivered solutions for 14 software defects and 2 user stories using Java on Android</li>
<li>Contributed to team-wide software integrity using a peer code review process in Gerrit</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Software Test Student</u></p>
</div>
<div class="company-dates">
<p>Blackberry</p>
<p>Aug. – Dec. 2014, May – Aug. 2016</p>
</div>
</div>
<ul class="position-information">
<li>Documented 51 unique software issues in a Scrum development cycle</li>
<li>Scripted automated test suites for several user stories in RIDE, spanning hundreds of test cases</li>
<li>Developed an Excel macro that parses thousands of user reviews for keywords and trends</li>
<li>Seamlessly Transitioned between 3 mobile operating systems and 2 separate applications</li>
</ul>
</div>
</div>
<div class="container various-technical-experience">
<h5><b>Various Other Technical Experience</b></h5>
<ul class="position-information">
<li><b>Golang/Open Source:</b> Contributed to the alexa-skills-git-golang and go-jira Github open-source repos</li>
<li><b>XHTML/CSS:</b> Built a version of this resume using XHTML/CSS</li>
<li><b>PHP:</b> Personal websitethat interfaces with the OMDB movie search API</li>
<li><b>Python:</b> Personal desktop app client using PyQT4, UI creation, API utilization, Multithreading</li>
<li><b>C:</b> Compiler design, Text autocomplete function, GPS application</li>
<li><b>C++:</b> Team project working with a LIDAR sensor to detect and analyze objects for an autonomous vehicle – used OpenCV and Visual Studio</li>
</ul>
</div>
</body>
</html>
And CSS:
/*
body {
max-width: 992px;
}
*/
h1 {
text-align: center;
}
.position {
float: left;
line-height: 0.8em;
}
.company-dates {
float: right;
line-height: 0.8em;
text-align: right;
}
/* Custom, iPhone Retina */
#media (min-width : 320px) {
body {
margin-top: 10px;
margin-bottom: 10px;
min-width: 320px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
}
.contact-right {
text-align: left;
}
}
/* Extra Small Devices, Phones */
#media (min-width : 480px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
font-size: 12px;
}
}
/* Small Devices, Tablets */
#media (min-width : 768px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
.contact-right {
text-align: right;
}
}
/* Medium Devices, Desktops */
#media (min-width : 992px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
max-width: 992px;
line-height: 1.2em;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
}
/* Large Devices, Wide Screens */
#media (min-width : 1200px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 1.2em;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
}
In the grid.less CSS file (imported by the bootstrap CSS file) on line 30 you have this:
.container {
width: 1170px;
}
Set its width: auto in a (the?) style block in the head, thereby overruling the grid.less file, and the problem should be solved.
Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.
Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?
Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP
And releveant code:
HTML
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="firstpic.png">
</div>
CSS:
.second-content .first-pic {
width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*
}
EDIT: updated codepen link just showing relevant code
As per your codepen you wanted image after text then need to add
float:left in this class second-header-p text-left.
.second-header-p.text-left{
float:left;
}
I add some section for your code. float:left and float:right help to do your task well.
<body>
<div class="second-content">
<div class="sec">
<h2 class="second-header"> Bond Back Guarantee</h2>
</div>
<div class="sec">
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back ha
s never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning.
If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</div>
</body>
css
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
margin-top: 100px;
margin-left: 150px;
}
.second-content .second-header-p {
width: 50%;
font-size: 120%;
margin-left: 150px;
line-height: 40px;
margin-top: 25px;
float:left;
}
.second-content .first-pic {
width: 30%;
border: solid black;
float:right;
}
.sec{
width:100%
}
Give pull-left class to your second-header-p.
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
padding: 20px;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
}
.second-content .second-header-p {
width: 65%;
font-size: 120%;
line-height: 40px;
}
.second-content .first-pic {
width: 30%;
border: solid black;
}
<head>
<title> End of Lease Cleaning in Sydney</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p pull-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</body>
If you using bootstrap then use this code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<section class="second-content">
<div class="col-md-8">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
</div>
<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>
</section>
</body>
</html>
I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.
However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> About </div>
<div id="blog"> Blog </div>
<div id="research"> Research/ Academic Papers </div>
<div id="hypercourse"> Hypercourses </div>
<div id="links"> Links </div>
<div id="contact"> Contact </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
css:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P
Thanks!
Your div.title is position: fixed so it is actually floating over your links, so they don't receive the hover or click events from your mouse. Remove it to try it out.
With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/