So i recently got into html and css and i've been messing around with it for a few days right now.
The problem is that i can't manage to center the header with background-image: center;
When i do that, my header becomes white instead of the image.
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("header.jpg")
background-position: center;
}
.navigation {
background-color: #c6e2ff ;
background-image: url("ocean.jpg");
text-align: center;
width: 100%;
border-style: solid;
border-width: thin;
}
.navigation ul {
list-style-type: none;
margin-bottom: 0;
}
.navigation li {
color: #ffffff;
display: inline-block;
font-family: 'Raleway', bold;
padding: 25px 100px;
font-weight: uppercase;
text-align: left;
}
.NavigationWords{
background-color: #ffffff;
width: 90%;
margin-left: 195px;
float: left;
}
h2 {
text-align: center;
font-family: 'Raleway', sans-serif;
background-color: #c6e2ff;
color: #ffffff;
padding: 20px;
margin: 0;
background-image: url("ocean.jpg");
}
p {
margin-top: 0;
font-family: 'Raleway', bold;
line-height: 1.5em;
font-size: 20px;
margin-bottom: 0;
vertical-align: middle;
padding: 10px 20px;
}
.Join {
margin-top: 0;
}
.LeftPanel {
border-style: solid;
max-width: 190px;
max-height: 510px;
text-align: center;
position: absolute;
width:195px;
min-height:510px;
}
.LeftPanel ul {
list-style-type: none;
padding: 0;
}
.LeftPanel li {
padding: 20px 10px;
}
.wrap {
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Belgian Entertainment</title>
<link href="belgian.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
</div>
<div class="navigation">
<ul>
<li> ABOUT </li>
<li> JOIN </li>
<li> PORTFOLIO </li>
<li> FUTURE </li>
</ul>
</div>
<div class="wrap">
<div class="NavigationWords">
<div class="About">
<h2>About</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Join">
<h2>Join</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Portfolio">
<h2> Portfolio </h2>
<p> text.
BE Portfolio
<br/>
<br/>
</p>
</div>
<div class="Future">
<h2> Future </h2>
<p> text</p>
</div>
</div>
</div>
<div class="LeftPanel">
<ul>
<li id="toplogin">Login</li>
<br/>
<br/>
<li id="bordersign">Sign-up</li>
<br/>
<br/>
<li id="bordersign">Portfolio</li>
<br/>
<br/>
<li id="bordersign">Contact</li>
</ul>
</div>
</body>
</html>
You lost a ";" at the end of background-image definition of css:
fiddle
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("http://en-support.files.wordpress.com/2009/10/twentythirteen-header2.jpg");
background-position: center;
}
Related
I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
I've tried position referencing to fix the position of "#block_two" but that doesn't seem to work. The div disappears when I use fix and absolute isn't better. I also tried changing the z-index of #block_two but to no avail.
html {
overflow: scroll;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Arial, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 2em;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
padding-top: 2px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(/New_Website/sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#column-left{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-right{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-center{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#end_block{
padding: 10px;
background-color: #F2F2F2;
height: 50vh;
text-align: center;
}
.area_content{
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #3A3D3F;
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: left;
}
.eb_header{
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_pics{
max-width: inherit;
height: 50%;
}
.b4{
padding-top: 60px;
max-width: inherit;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_hd{
color: #3A3D3F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
HOME
ABOUT
PEOPLE
CONTACT
LOG IN
</nav>
</div>
</header>
<div id="block_two">
</div>
<div id="block_three">
<div id="column-left">
<header class="b3_hd">
Hospitality
</header>
<div class="b3_pics">
<div id="pic1">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-center">
<header class="b3_hd">
COLUMN CENTER
</header>
<div class="b3_pics">
<div id="pic2">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-right">
<header class="b3_hd">
COLUMN RIGHT
</header>
<div class="b3_pics">
<div id="pic3">
</div>
</div>
<p class="area_content">
</p>
</div>
</div>
<div id="block_four">
<header class="b4"> PEOPLE </header>
</div>
<div id="end_block">
<header class="eb_header">
CONTACT
</header>
</div>
</div>
Use position:fixed; and a negative z-index
html {
overflow: scroll;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
padding:100vh 0 0 0;
}
div#static_nav{
font-family: Arial, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 2em;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
top:0;
z-index:999;
}
div#static_nav a{
color: white;
text-decoration: none;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
padding-top: 2px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg');
background-size: cover;
position:fixed;
top:2.5em;
z-index:-1;
width:100%;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#column-left{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-right{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#column-center{
padding-top: 60px;
float: left;
width: 33%;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #E4E2E2;
}
div#end_block{
padding: 10px;
background-color: #F2F2F2;
height: 50vh;
text-align: center;
}
.area_content{
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: #3A3D3F;
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: left;
}
.eb_header{
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_pics{
max-width: inherit;
height: 50%;
}
.b4{
padding-top: 60px;
max-width: inherit;
text-align: center;
font-size: 30px;
font-family: Helvetica, sans-serif;
color: #3A3D3F;
}
.b3_hd{
color: #3A3D3F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
HOME
ABOUT
PEOPLE
CONTACT
LOG IN
</nav>
</div>
</header>
<div id="block_two">
</div>
<div id="block_three">
<div id="column-left">
<header class="b3_hd">
Hospitality
</header>
<div class="b3_pics">
<div id="pic1">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-center">
<header class="b3_hd">
COLUMN CENTER
</header>
<div class="b3_pics">
<div id="pic2">
</div>
</div>
<p class="area_content">
</p>
</div>
<div id="column-right">
<header class="b3_hd">
COLUMN RIGHT
</header>
<div class="b3_pics">
<div id="pic3">
</div>
</div>
<p class="area_content">
</p>
</div>
</div>
<div id="block_four">
<header class="b4"> PEOPLE </header>
</div>
<div id="end_block">
<header class="eb_header">
CONTACT
</header>
</div>
</div>
Instead of using position: fixed on the div I used background-attachment: fixed to hold the image in place and this .
I've been racking my brains to to figure out where I went wrong. The bottom div stretches all the way right will everything stays center page but the left side won't stretch full. Also when I resize the window smaller all the sub-divs collapse. Ideas???
https://jsfiddle.net/g506gk51/
Thank you in advance!
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
width: 100%;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
position:absolute;
margin-top: 10%;
margin-bottom: 10%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#Header {
float:left;
padding-left: 75px;
}
.circlefooter {
width: 50px;
height: 50px;
float: left;
margin: 25px 25px 0 175px;
}
.circlefooter p {
padding-left: 75px;
width: 150px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
</style>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="Header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I try to understand what you meant, I got this from your code.
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
html{
height: 100%;
}
body {
position: relative;
min-height: 100%;
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
display: block;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#topcontainer:after {
content: "";
clear: both;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
margin-top: 10%;
margin-bottom: 10%;
display: table;
table-layout: fixed;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
display: block;
float: left;
}
.circlefooter {
display: table-cell;
padding: 15px;
vertical-align: middle;
}
.circlefooter p {
margin: 0;
padding-left: 75px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
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>