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>
Related
I am trying to finish a project but I am stuck on the final step.
All I want to do is put some text on the side of an interactive google map. However so far no matter what I have tried the text stays underneath. Here is the HTML code:
<!--Reach out section begins-->
<section id="reach-out" class="contact">
<h2 class="section-title secondary-border">
<p>Reach Out</h2></p>
<div class="contact/info">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
>
</iframe>
</div>
<div>
<h3>Pump Buddy</h3>
<p>
Any questions or concerns before signing up? <br />
Let us know, and we will be happy to talk to you.
</p>
<address><!-- <address>: Defines the contact information
for the author or owner of the document or parent element.-->
55 Main Street<br />
Some Town, CA<br />
12345<br />
P: 555.PUMP.BUDZ (555.786.2839)<br />
E: info#pumpbuddy.io
<!-- Using the mailto: prefix in the anchor tag's href attribute
instructs the browser to open the default mail client application
upon clicking the link and then populates the address field with
the email address listed in the href value. -->
</address>
</div>
</section>
</body>
and this is the corresponding CSS:
/* REACH OUT STYLES START */
.contact {
text-align: center;
background: #024e76;
}
.contact h2 {
color: #fce138;
}
.contact-info iframe {
width: 400px;
height: 400px;
}
/* This is a potentially
dangerous choice due to possible side effects
(unless a global rule is needed). By using the
class (contact-info) as the CSS selector, also called a class
selector, we can safely target the <iframe> that
is a descendant or child of the element with this class.*/
.contact-info div {
width: 410px;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 30px 0 0 60px;
color: white;
}
.contact-info h3 {
color: #fce138;
font-size: 32px;
}
.contact-info p, .contact-info address {
margin: 20px 0;
line-height: 1.5;
font-size: 20px;
font-style: normal;
}
.contact-info a {
color: #fce138;
}
/* REACH OUT STYLES END */
Any kind of help would be greatly appreciated!
Try this:
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-5">Reach Out</h2>
<div class="row">
<div class="col">
<div class="text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
></iframe>
</div>
</div>
<div class="col">
<div class="">
<h3>Pump Buddy</h3>
<p>Any questions or concerns before signing up? <br> Let us know, and we will be happy to talk to you.</p>
<address>
55 Main Street<br>
Some Town, CA<br>
12345<br>
P: 555.PUMP.BUDZ (555.786.2839)<br>
E: info#pumpbuddy.io
</address>
</div>
</div>
</div>
</div>
</body>
</html>
Use z-index and set position property to absolute or fixed for the text you want to display over the map.
I'm trying to build a simple web page. It has a logo in the upper left corner, and on the same line to the right is a navbar. That all works fine. The problem is that I want to then have text below the logo & navbar (full width). No matter what I try, the text starts in the same line as the logo and navbar. How can I force the text to start below the logo & navbar?
Here's the html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
And here's the css:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
Give margin-top to the container as much as need to accomodate Header height and give top:0px css to .logo class.
.container {
width: 1170px;
margin-top: 100px;
}
.logo{
position: fixed;
z-index: 2000;
top: 0px;
}
It's is because you are using a fixed navbar and logo so it sits on top of your container below.
Just apply a margin-top to your .container class and top:0 to your .logo class:
.container {
margin-top: 50px; //use what ever you need here for spacing.
}
.logo {
position: fixed;
top: 0;
z-index: 2000;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
.container {
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other.
The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:
First attempt (code without the Dot after <):
<.input type="text" id="username">submit
Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file.
In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.
The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.
HTML CODE:
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS CODE:
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
Would really love if someone could help me out here.
Im terrible at it but i would Hope someone can help me.
Thanks Guys.
There were some errors in your code, one of which ".logsec [id=button]" was stopping the button lining up. I removed the float and used inline-block instead. Google it, I'm sure the W3C has some tutorials. Anyway, here's the working code:
CSS
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
#subinput {
display: inline-block;
}
HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
Here it is working in a fiddle (I hope, not sure how long the code saves for)
FIDDLE
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.
I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.