Check my website at 90.231.109.239 please.
I cannot get the font to work for my content area.
The text "Norra Strandv. 10" should be in Courgette but I only get the standard font.
Could somebody please help ?
here is my index.html
<
!DOCTYPE html>
<html>
<head>
<title> Lasses hem </title>
<link rel = "stylesheet" href = "/css/main.css" type = "text/css"/>
</head>
<body>
<div id="page">
<div id="header" class="frame">
<h1> Lasses hem</h1>
</div>
<div id = "menu" class = "frame">
<ul>
<li> <a id="home" href='/index.html'>Home</a> </li>
<li> <a id="away" href='/info.php'>Away</a> </li>
<li> <a id="Temp" href='/temperature.php'>Temp</a> </li>
<li> <a id="Led" href='/controller.php'>Led</a> </li>
</ul>
</ul>
</div>
<div = "content" class ="frame h1">
Norra Strandv. 10
</div>
</div>
</body>
</html>
And here is my css-file
#import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);
#import url(http://fonts.googleapis.com/css?family=Courgette);
#import url(http://fonts.googleapis.com/css?family=Pacifico);
#page{
width:700px;
margin: auto;
border:solid 1px #CCC;
border-radius:5px;
background-color:#FFF;
}
.frame {
width: 700px;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
.frame h1{
text-align: center;
font-size: 300%;
}
#header {
background-color: #1DB21A;
color: #FFF;
height: 55px;
font-family: 'Courgette', cursive;
}
#menu {
height: 22px;
font-family: Arial, Helvetica, sans-serifs;
background-color: #000;
color: #FFF;
float: left;
}
#menu ul {
list-style-type:none;
margin: 0px;
padding: 0px 50px;
}
#menu li {
display: inline;
float: left;
}
#menu a {
display: block;
width: 60px;
height: 22px;
text-decoration:none;
background-color: #000;
color: #FFF;
}
#menu a:hover{
background-color: #1DB21A;
color: #FFF;
}
#content {
padding: 40px 50px;
width: 600px;
font-family: 'Courgette', cursive;
font-size: 150%;
}
You forgot the id attribute
<div = "content" class ="frame h1">
Change into
<div id="content" class ="frame h1">
Change
<div = "content" class ="frame h1">
Norra Strandv. 10
</div>
to
<div id= "content" class ="frame h1">
Norra Strandv. 10
</div>
You just typed error.
You miss the id...
just type id before = "content" in indexhtml files ...
Related
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.
I'm working on my portfolio which has three section tags. I've declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags -- just like body background colour.
While I did try to achieve that using the below code, the background colour for both the section tags isn't taking full page width. Any help on this would be appreciated.
HTML
<html>
<head>
<title>Srujan Sagar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
Srujan Sagar
</header>
<section>
<p class="main-content">
Hello! I'm an India-based self-taught FrontEnd Developer.
<br />
<br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
</p>
<img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />
<ul class="social-links">
<li>
<a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
<span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
</ul>
<br /> <br />
<p class="line"></p>
</section>
<nav class="main-content">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
<section class="second-content">
<h3>Hi there!</h3>
</section>
<section class="third-content">
<h3>Hi there!</h3>
</section>
</body>
</html>
CSS:
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
}
header {
font-family: 'Pacifico', sans-serif;
letter-spacing: 3px;
font-size: 90px;
padding-top: 10px;
color: #A63A50;
}
.main-content {
font-size: 1.3em;
font-family: 'Raleway', sans-serif;
color: #CA7989;
width: 500px;
margin: 0 auto;
padding-top: 25px;
}
.logo {
border-radius: 50%;
border: 1px solid #CA7989;
margin: 30px 0 0 0;
}
.social-links {
margin: 25px 30px 0 0;
}
a {
text-decoration: none;
color: #CA7989;
}
li {
list-style-type: none;
display: inline;
margin: 0 10px 0 0;
}
.line {
max-width: 550px;
margin: 0 auto;
border-top: 1px solid #CA7989;
}
nav a:hover {
color: #A63A50;
background: #F5E6E6;
}
.second-content {
background:#ebebeb;
width: 100%;
height: 465px;
}
.third-content {
margin-top:-18px;
background:#CA7989;
width: 100%;
height: 465px;
}
View the above code in CodePen
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
/* set margin and padding 0*/
margin:0;
padding:0;
}
margin: 0;
on the body, it's the default margin.
Maybe remove margin and padding from the body :
body {
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
}
Just add margin: 0; to bodyto remove the default margin.
https://codepen.io/anon/pen/aWdwaG
Try adding this
background-size : cover;
in "body" of your CSS :
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
background-size: cover;
}
then try removing margin and padding of your body and that should do it!
You should also take a look at this article : https://css-tricks.com/perfect-full-page-background-image/
So when I fully reduce the browser size, I have my website looking like this, which is how I want it to look:
http://oi66.tinypic.com/10x7zw4.jpg
But when I start stretching out the browser, the position of my picture in the center will begin to change and move all the way to the left. I want the picture to stay on the center regardless of whether I stretch out the browser or reduce it. Is there a way I can fix this issue? Been trying to find out how to solve the issue but cannot find any clue. Please help, thank you.
My HTML:
<html>
<head>
<title>Jason H Kang</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div id="span">
<h1 class="text-center">Jason H Kang</h1>
<div class="intro">
<p class="text-center">23 Years Old | Junior Web Developer | NJ</p>
</div>
<div class="hello">
<p class="text-center">
Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p>
</div>
</div>
<div class="image">
<img src="kangjason.jpg" alt="face" class="img-circle">
</div>
<!-- <div class="button">
<button type="button" class="btn btn-success">Contact Me!</button>
</div> -->
<div id="footer">
<p class="copyright">Copyright: Jason Kang 2015</p>
</div>
</body>
</html>
My CSS:
body {
background-color: #F8F8FF;
color: #000000;
}
.navbar {
background: rgba(114, 180, 39, 1)
}
.navbar .brand, .navbar .nav > li > a {
color: #FFFFFF;
margin-left: 14em;
padding-right: 0em;
font-family: Gill Sans;
font-size: 1.0em;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #000000;
}
#footer {
background:#000000;
width:100%;
height:47px;
position:fixed;
bottom:0px;
left: 0px;
}
.copyright {
padding-top: 19px;
padding-left: 1.3%;
font-family: Arial;
font-size: 0.9em;
color: white;
}
.intro {
padding-left: 0.35%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.hello {
padding-top: 1.5%;
padding-left: 5%;
font-family: 'Source Sans Pro', sans-serif;
position: relative;
}
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin-left: 10em;
margin-top: 1em;
position: relative;
}
To center a block level element, you use margin:auto:
.img-circle {
width: 11.0em;
height: 11.0em;
border: 1px solid black;
margin: auto;
margin-top: 1em;
position: relative;
display:block;
}
JSFiddle Demo
Or, alternatively, you can set the parent to text-align:center;:
.image {
text-align: center;
}
JSFiddle Demo
Change your css for the img-circle class as follows
.img-circle {
width: 11.0em;
height: 11.0em;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
I have been building a website on my laptop since a month, the website looks all nice and dandy on my machine(15 inch screen. However when I run it on different machines(17 inch and 13 inch) ones, it all goes haphazard. I have used bootstrap, my website is responsive to some extent but not fully.
Since I don't fully know which all parts of the site and responsible for the "un-responsiveness", I will post the whole code here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css"></link>
<link rel="stylesheet" href="css/navbar.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Big Data for your city!</title>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Explore around">
<img style="max-width:150px; margin-top: -7px;"
src="Images/logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li>SIGN UP</li>
<li>LOG IN</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<h1><center>Find amazing places near your city.</center></h1>
<p>Places you could travel to and explore in a weekend.</p>
<a class = "explore-anc" href="#Cities"><button id "exlpore-button" class="btn sm explore">Explore</button></a>
<p>OR</p>
<div class = "seach-area">
<form id="searchBox" action="/search" style="display:inline;" method="get">
<center><input id="text-enter" name="q" size="80" type="text" placeholder="Enter a place "/>
<input id="search-button" value="Search" type="submit"/></center>
</form>
</div>
</div>
</div>
<div class="learn-more" id ="learn">
<div class="container">
<div class = "row">
<div class = "col-md-4">
<h3>Cities with service</h3>
<p>Find all the cities here!</p>
</div>
<div class = "col-md-4">
<h3>Analyze</h3>
<p>Big data analyics</p>
</div>
<div class = "col-md-4">
<h3>Vlue</h3>
<p>Add value to all your stuff here!</p>
</div>
</div>
</div>
</div>
<div id = "Cities" class = "neighborhood-guides">
<div class = "container">
<h2>Cities:</h2>
<p>Start exploring places around your city</p>
<div class = "row">
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city NY">
<image src = "Images/NY.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city mum">
<image src = "Images/Mum.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city SF">
<image src = "Images/SF.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city LA">
<image src = "Images/LA.jpg"/>
</div>
</div>
<div class = "col-md-4">
<div class = "thumbnail" ng-click = "city del">
<image src = "Images/Del.jpg"/>
</div>
<div class = "thumbnail" ng-click = "city MA">
<image src = "Images/MA.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div id = "analytics" class = "analytics">
<div class = "container">
<div>
<h2><center>Plan better with data</center></h2>
<p>Data is constantly churned, filtered and updated. Forget numbers, use graphs and make your every trip a perfect one</p>
</div>
<div class="row">
<div class="col-md-6">
<img src="Images/india-home.png" />
</div>
<div class="col-md-6">
<ul type = "">
<li>Weather patterns, rainfall graphs on every city.</li>
<li>Popularity pattern, interest rate graphs on each and every place</li>
<li>The size of the circle in this map represents the number of places covered in that city</li>
<li>Go to your city and find analytics there. Also, each place get its own graphs</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Navbar:
html, body{height: 100%;min-height:100%;}
header .navbar {
padding-left: 0px;
padding-right: 0px;
padding-top:30px;
transition: all .5s ease-out;
}
header .navbar-brand {
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-default {
background-color: transparent;
border:none !important;
}
header .navbar-default .navbar-nav li {
color: white;
font-size: 22px;
padding: 5px 8px;
font-weight: 700;
}
header .navbar-default .navbar-nav a {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
header .navbar-default .navbar-nav a:active {
color: white;
font-size: 14px;
padding: 5px 8px;
border-radius: 20px;
}
/** Navbar Brand **/
header .navbar-brand {
margin-left:0px;
padding: 0px;
}
/*Navbar toggle*/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
/*Links Navbar*/
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
header .navbar-default .navbar-nav a:focus{
color: white;
}
header .navbar-default .navbar-nav a:hover {
color: rgba(0,0,0,0.5);
background-color: white;
border: 2px solid white;
}
Main CSS:
.jumbotron {
position: relative;
background-image:url('Images/B.jpg');
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin-bottom:0px;
}
.jumbotron .container-fluid {
position: relative;
top:105px;
}
.jumbotron h1 {
color: #fff;
font-size: 60px;
font-family: Arial;
font-weight: 700;
opacity:1;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align:center;
font-weight: 700;
opacity:1;
padding-top:10px;
}
.jumbotron a {
text-decoration: none;
width:15%;
}
.search-area{
display:block;
padding-top: 100px;
margin-top: 100px;
}
#search-button {
background:transparent;
color:white;
font: 'trebuchet ms', trebuchet;
padding:13px 25px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
-o-border-radius:0 10px 10px 0;
border:2px solid white;
font-weight:bold;
margin-left:-4px;
}
#search-button:hover{
background-color: #5CDEBD;
border: 2px solid #5CDEBD;
}
#text-enter {
background: white;
padding:15px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:30%;
}
/*Learn*/
.learn-more {
padding: 30px;
background-color: #8715CE;
color: white;
font-weight: 500;
font-size: 17px;
}
.learn-more h3 {
padding-top:30px;
padding-bottom:30px;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 800;
}
.learn-more a {
color: white;
padding:10px;
border: 2px solid white;
}
.learn-more a:hover {
background-color:white;
color: rgba(0,0,0, 0.5);
text-decoration:none;
}
/*neighborhood*/
.neighborhood-guides{
background-color: #efefef;
border-bottom: 1px solid #DBDBDB;
min-height: 100%;
box-shadow: none;
}
.neighborhood-guides .row .thumbnail{
box-shadow: none;
background-color:black;
}
.neighborhood-guides .row .thumbnail img:hover {
background-color: #000;
opacity: 0.6;
}
.neighborhood-guides .container{
padding-top:25px;
}
.neighborhood-guides .container .row{
padding-top:30px;
}
.neighborhood-guides h2{
padding-top:50px;
font-weight:800;
color: #393c3d;
font-size: 48px;
}
.neighborhood-guides p{
margin-bottom:13px;
font-size: 20px;
}
.analytics
{
background-color: #15CE68;
min-height: 130%;
color:white;
}
.analytics ul li{
list-style: none;
padding-top: 60px;
font-size: 20px;
font-weight: 700;
}
.analytics h2{
font-weight: 900;
padding-top:6%;
font-size: 48px;
}
.analytics .container p{
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 20px;
}
.analytics img{
max-height: 600px;
}
If somebody could help me with this, I would be really grateful, this has been burdening me for a week now.
There are a couple of things that you might find helpful
Remove the second jQuery link. You are already getting jQuery from the Google CDN
Remove the min-height for your images, or use percentages instead of a fixed pixel value
Always better to use percentages than fixed pixel length for the overall layout styles for your website
Don't mix up with both percentage and pixel values for the same element, unless it is unavoidable
I'm trying to move the white box, topBoxFlag up to the top of its parent topBox. However, due to the relative layout it's being pushed down below the red box. How would I push it upwards? I tried an absolute layout, but decided this wouldn't work as it'd occur for all of my other boxes and I feel it'd be extremely inefficient. Is there something like float that can push it right to the top of its parent?
body
{
background-color: #C6E0F5;
}
#wrapper
{
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header
{
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar
{
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li
{
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a
{
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag
{
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox
{
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1
{
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "wrapper">
<div id = "header">
<div id = "logo"></div>
</div>
<div id = "navbar">
<ul>
<li>Major Parties</li>
<li>Minor Parties</li>
<li>Why Vote</li>
<li>About Us</li>
</ul>
</div>
<div class = "topbox">
<h1>The Conservative Party</h1>
<div id = "topboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Labour Party</h1>
<div id = "partyboxFlag"></div>
</div>
<div class = "partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class = "partybox">
<h1>The UK Independence Party</h1>
</div>
<div class = "partybox">
<h1>The Green Party</h1>
</div>
<div class = "partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>
Just add one more css to you stylesheet and you are good to go.
.topbox h1{
margin:0;
float: left;
}
Since you topboxFlag class has a float, you should also add float to your heading.
body {
background-color: #C6E0F5;
}
#wrapper {
position: relative;
margin: auto;
width: 1000px;
height: 2900px;
max-width: 1000px;
background-color: #C6E0F5;
}
#header {
position: relative;
width: 100%;
height: 170px;
background-color: #00247D;
}
#navbar {
position: relative;
width: auto;
bottom: 20px;
height: 35px;
text-align: center;
background-color: #CF142B;
}
#navbar ul li {
list-style-type: none;
padding: 20px;
text-align: center;
font-family: "Trebuchet MS";
font-size: 25px;
display: inline;
}
#navbar ul li a {
text-decoration: none;
font-weight: bold;
color: #fff;
}
.topbox {
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
}
.topbox h1 {
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox #topboxFlag {
float: right;
width: 300px;
height: 400px;
background-color: #fff;
}
.partybox {
height: 400px;
width: 800;
margin: auto;
background-color: #00247D;
margin-top: 15px;
}
.partybox h1 {
font-size: 35px;
font-family: "Trebuchet MS";
text-align: center;
color: #fff;
width: 500px;
background-color: #CF142B;
}
.topbox h1 {
margin: 0;
float: left;
}
<html>
<head>
<title>Learn which parties are doing what</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="navbar">
<ul>
<li>Major Parties
</li>
<li>Minor Parties
</li>
<li>Why Vote
</li>
<li>About Us
</li>
</ul>
</div>
<div class="topbox">
<h1>The Conservative Party</h1>
<div id="topboxFlag"></div>
</div>
<div class="partybox">
<h1>The Labour Party</h1>
<div id="partyboxFlag"></div>
</div>
<div class="partybox">
<h1>The Liberal Democrats</h1>
</div>
<div class="partybox">
<h1>The UK Independence Party</h1>
</div>
<div class="partybox">
<h1>The Green Party</h1>
</div>
<div class="partybox">
<h1>The Scottish National Party</h1>
</div>
</div>
</body>
</html>
Can you make the flag div first?
<div class="topbox">
<div id="topboxFlag></div>
<h1>The Conservative Party</h1>
</div>