I'm quite new at front-end development. I was just experimenting with HTML/CSS. After making a simple poster, I was trying to make simple freestyle(not specific to any kind of website) page layout.
Here is what I did.
https://github.com/imdpm/CodoSapiens/tree/master/LayAtt
I'm trying to add a "content" type division. I've created a style for it in style.css and invoked it in index.html without any content. Just the division.
But output does not have any "content" division. I can't seem to understand where I have made a mistake.
Could anyone help?
body{
background-image: url("BackIm.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
#icon{
position: absolute;
left: 5px;
height:40px;
width:40px;
}
.topmenu{
background-color: #001a00;
position: absolute;
top: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
padding: 0;
border-bottom: 1px solid red;
}
.sidemenu{
background-color: darkgrey;
color: black;
position: left fixed relative;
margin: 190px 80px 0 40px;
padding: 8px 6px 0 8px;
border: 1px solid black;
border-radius: 8px;
max-width: 155px;
font-size: 30px;
font-family: sans-serif;
}
.banner{
background-color: #FFA500;
position: absolute;
top:44px;
left: 0;
right: 0;
height: 125px;
border-bottom: 1px solid #228B22;
}
.content{
background-color: #5651F3;
position: relative;
top: 60px;
right: 30px;
left: 25px;
}
#link{
color: black;
text-decoration: none;
padding: 2px 0 1px 0;
color:grey;
font-size:35px;
font-family:"Times New Roman";
font-weight:bold
}
a{
text-decoration: none;
color: black;
padding: 0;
}
hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
<html>
<head>
<title>LayoutAtt</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topmenu">
<img id="icon" src="https://github.com/imdpm/CodoSapiens/blob/master/LayAtt/BackIm.jpg?raw=true" alt="Icon">
<a id="link" href="index.html">BackToBeg</a>
</div>
<div class="banner">
</div>
<div class="sidemenu">
BackToBeg<hr>
BackToBeg<hr>
BackToBeg<hr>
BackToBeg<hr>
BackToBeg<hr>
</div>
<div class="content">
</div>
</body>
</html>
You need to add a width and a height to your content div.
Try this
.content{
background-color: #5651F3;
position: relative;
top: 60px;
right: 30px;
left: 25px;
width:100px;
height:100px;
}
Use the inspector in the browser to look at the html and css being rendered. You can see what styles are being applied to which elements.
Related
I wanted to design a simple page where buttons will be displayed on the top in a fixed position with some hover, box-shadow and cursor attributes whereby once one of them hovered there would be some shade around them. For that I utilized position: fixed attribute in a div tag as a button frame for convenience so that I could change the position of all buttons at once when all set by means of CSS styling.
However, this works only if I do not scroll down the page. When I scroll down, it loses those three (hover, box-shadow and cursor) attributes. I could not get around this issue. How can I fix it?
Here is the block of code I got so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="User">
<title>Home Page</title>
<style>
body {
background-color: rgb(255, 255, 255);
margin: 0px;
padding: 0px;
border-style: none;
}
.mainFrame {
position: absolute;
top: 0px;
left: 131px;
width: 700px;
height: 800px;
margin: 0px 0px 31px 0px;
padding: 0px;
border-style: solid;
border-color: rgb(0, 0, 0);
border-width: 0px 2px 2px 2px;
border-radius: 0px 0px 131px 0px;
}
.buttonFrame {
position: fixed;
top: 0px;
left: 133px;
width: 500px;
height: 39px;
margin: 0px;
padding: 0px;
border-style: none;
}
.button {
height: 29px;
margin: 0px;
padding: 4px 7px 4px 7px;
background-color: rgb(255, 99, 71);
border-style: solid;
border-color: rgb(0, 0, 0);
border-width: 0px 2px 2px 2px;
border-radius: 0px 0px 131px 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 23px;
text-align: left;
cursor: pointer;
outline: none;
}
.buttonEffect:hover {
box-shadow: 0 13px 17px 0 rgba(0,0,0,0.25), 0 13px 17px 0 rgba(0,0,0,0.25);
outline: none;
}
.Home {
position: absolute;
top: 0px;
left: 31px;
width: 64px;
}
.Notes {
position: absolute;
top:0 px;
left: 144px;
width: 64px;
}
.AboutMe {
position: absolute;
top: 0px;
left: 257px;
width: 105px;
}
.contentFrame {
position: absolute;
top: 40px;
left: 0px;
width: 500px;
height: 400px;
margin: 0px;
padding: 0px;
border-style: none;
}
</style>
</head>
<body>
<div class="mainFrame">
<div class="buttonFrame">
<a class="button Home buttonEffect" title="Home">Home</a>
<a class="button Notes buttonEffect" title="Notes">Notes</a>
<a class="button AboutMe buttonEffect" title="About Me">About Me</a>
</div>
<div class="contentFrame">
</div>
</div>
</body>
</html>
remove position absolute from the class .contentFrame
I am working on a service that will be load in front of a video. Here is some basic code that shows the main shape of the service : CodePen link
Here is the code :
HTML
<div class="container">
<div class="sidezone">
<div class="header">
</div>
<div class="tab">
<div class="tab_elt active_tab">Tab 1</div>
<div class="tab_elt">Tab 2</div>
<div class="tab_elt">Tab 3</div>
<div class="tab_elt">Tab 5</div>
</div>
<div class="content">
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 1280;
height: 720px;
margin: auto 50px;
background-color: green;
}
.sidezone {
box-sizing: border-box;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
top: 0; right: 0;
width: 500px;
height: 720px;
padding: 26px 52px 26px 16px;
}
.sidezone:before {
content: '';
position: absolute;
top: 0; left: -50px; bottom: 0;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 720px solid transparent;
border-right: 50px solid rgba(0, 0, 0, 0.5);
}
.header {
color: #fff;
background-color: #000;
overflow: hidden;
font-family: o-HelveticaNeue, Helvetica, Arial, sans-serif;
font-weight: 700;
position: relative;
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://lorempixel.com/550/200/sports");
background-position: center top;
}
.tab {
background: #000;
}
.tab_elt {
color: white;
display: inline-block;
width: 24%;
text-align: center;
padding: 4px 0;
margin-bottom: -2px;
}
.active_tab {
color: #f16e00;
border-bottom: 2px solid #f16e00;
}
.content {
height: 419px;
background-color: white;
}
My question is : How can I "fill" the "sidezone" part from the top to the bottom of my "tab" part with a color or a picture in pure CSS ?
I'd like to make something that looks more "natural" but now I feel like my header is just "stick" in my block...
I tried to make it work by cutting my ":before" element in two part : one that could be black as my tab (and my header if I remove the image) that will go from top to the bottom of the "tab", and an other that will start just after and go to the bottom. This way I could keep my current shape and have 2 differents color to do what i want, but can't achieve it...
I insist on the "pure CSS" (no SVG, no lib,...), I'm very limited in possibilities.
Is it possible ?
Edit : here a visual representation of what I try to achieve (sorry for my paint talent !)
Change the borders of your pseudo element to these:
border-top: 294px solid rgba(0, 0, 0, 0.5);
border-left: 20px solid transparent;
border-right: 30px solid rgba(0, 0, 0, 0.5);
You may have to adjust the border widths. But the idea is to draw a trapezium/trapezoid using the borders.
Then remove the background color on your sidezone and replace it with this:
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 294px, transparent 294px);
Again, you can change the dimensions as you see fit.
See here: https://codepen.io/anon/pen/OKzWrN
Do you mean a background gradient?
Like this:
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(246,41,12,1) 66%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
I hope that this refers to what you were asking, but if you set one of the border-sides to a large size and solid color such as border-top: 10px solid blue;, then that could mimic the behavior that you are wanting.
EDIT: (I'm still not totally sure of what you are asking) I would create a div for the side, fill the background, and then have any elements that are inside the div to have background: transparent;. In my opinion, you should try not to use the ::before selector, as it might be difficult to tell where it actually goes.
Thanks to Frank Fajardo I manage to achieve what I wanted : https://codepen.io/mleger06/pen/WVddVg
HTML
<div class="container">
<div class="sidezone">
<div class="header"></div>
<div class="tab">
<div class="tab_elt active_tab">Tab 1</div>
<div class="tab_elt">Tab 2</div>
<div class="tab_elt">Tab 3</div>
<div class="tab_elt">Tab 5</div>
</div>
<div class="content"></div>
</div>
</div>
CSS
.container {
position: relative;
width: 1280;
height: 720px;
margin: auto 50px;
background-color: green;
}
.sidezone {
box-sizing: border-box;
position: absolute;
background-image: linear-gradient(to bottom, #000 294px, rgba(0, 0, 0, 0.5) 294px);
top: 0; right: 0;
width: 500px;
height: 720px;
padding: 26px 52px 26px 16px;
}
.sidezone:before {
content: '';
position: absolute;
top: 0; left: -50px; bottom: 0;
width: 0;
height: 0;
border-top: 294px solid #000;
border-left: 20px solid transparent;
border-right: 30px solid #000;
}
.sidezone:after {
content: '';
position: absolute;
top: 294px; left: -30px; bottom: 0;
width: 0;
height: 0;
border-top: 426px solid rgba(0, 0, 0, 0.5);
border-left: 20px solid transparent;
border-right: 10px solid rgba(0, 0, 0, 0.5);
}
.header {
color: #fff;
background-color: #000;
overflow: hidden;
font-family: o-HelveticaNeue, Helvetica, Arial, sans-serif;
font-weight: 700;
position: relative;
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
height: 200px;
}
.tab {
background: #000;
}
.tab_elt {
color: white;
display: inline-block;
width: 24%;
text-align: center;
padding: 4px 0;
margin-bottom: -2px;
}
.active_tab {
color: #f16e00;
border-bottom: 2px solid #f16e00;
}
.content {
height: 419px;
background-color: white;
}
I change the color a little bit and add a :after element in CSS to fill the bottom part and keep the same shape of the left of my sidezone.
Thanks for helping !
Edit : here is an other result by a collegue with an other "tricks" to make it works with image : https://codepen.io/anon/pen/zgpjRQ
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I am trying to make shapes in the :before/ :after . this works fine in chrome but in Firefox. there is a small misalignment. and while printing that causes a small white space between the element and the :after selector.
This is how it looks in print preview with Firefox
HTML
<div class="container">
<div class="topbar">
<div class="text">Text</div>
</div>
</div>
My CSS
/* Styles go here */
.container .topbar {
height: 15px;
background-color: #91C34F !important;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.container .topbar .text {
position: relative;
color: #fff !important;
float: right;
top: 3px;
background-color: #91C34F !important;
font-size: 16px;
padding: 8px 80px;
}
.container .topbar .text:after {
height: 0;
content: "";
display: block;
position: absolute;
top: -0.5px;
left: -37px;
border-right: 38px solid #91C34F !important;
border-bottom: 34px solid transparent;
}
This is a plunk for above code https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview.
How to make that align properly in all browsers?
use equal value for left, border-right and border-bottom, also there is nothing like .5px.
use line-height to make text vertical align.
updated plunk
/* Styles go here */
.container .topbar {
height: 15px;
background-color: #91C34F !important;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.container .topbar .text {
position: relative;
color: #fff !important;
float: right;
top: 3px;
background-color: #91C34F !important;
font-size: 16px;
padding: 0px 80px;
height:34px;
line-height:28px;
}
.container .topbar .text:after {
height: 0;
content: "";
display: block;
position: absolute;
top: 0px;
left: -34px;
border-right: 34px solid #91C34F !important;
border-bottom: 34px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="text">Text</div>
</div>
</div>
</body>
</html>
Take http://dowebsitesneedtolookexactlythesameineverybrowser.com/ to heart. Looking good is a sensible goal, looking the same isn't.
Understand the standards (we never know if the difference is because of a bug or because you've provided instructions that only make sense for a particular window size)
Use them (don't forget to validate the HTML and CSS and to lint the JS)
Ensure you engage standards mode
Learn about bugs in browsers
Though your code is right, it works perfectly on chrome.
Do check here,
https://jsfiddle.net/djmayank/q20e6u9m/
HTML:
<div class="container">
<div class="topbar">
<div class="text">Text</div>
</div>
</div>
CSS:
.container .topbar {
height: 15px;
background-color: #91C34F !important;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.container .topbar .text {
position: relative;
color: #fff !important;
float: right;
top: 3px;
background-color: #91C34F !important;
font-size: 16px;
padding: 8px 80px;
}
.container .topbar .text:after {
height: 0;
content: "";
display: block;
position: absolute;
top: -0.5px;
left: -37px;
border-right: 38px solid #91C34F !important;
border-bottom: 34px solid transparent;
}
Hope it helped.
Here is my code. It is frustrating me so bad.
html {
height:100%;
width:100%;
}
body {
background-color: #3D56E3;
margin:0;
width:100%;
height:100%;
}
#title {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
margin: 20px 900px 30px 0;
text-align: left;
position: absolute;
left: 0;
top: 0;
padding-left: 5px;
padding-right: 5px;
}
#title:hover {
color: #271573;
transition: 0.5s;
}
.intro {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
margin: 90px 900px 30px 0;
text-align: left;
top: 8px;
left: 0;
position: fixed;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
}
marquee {
box-shadow:0 0 10px black;
position: fixed;
top: 0;
border-bottom: solid 2px black;
background-color: black;
right: 0;
color: white;
z-index: 2;
width: 100%;
}
.Projects {
border: 2px solid black;
position: fixed;
margin: 20px 900px 30px 50px;
left: 1120px;
width: 200px;
top: 0;
height: auto;
max-height: 50%;
padding-left: 5px;
background-color: #A8B5ED;
}
#Projects-Header:hover {
color: #271573;
transition: 0.5s;
}
a:link {
color:#2333DE;
}
a:visited {
color: #7855D9;
}
a:hover {
color: #4B6BEB;
text-decoration: none;
}
a:active {
color: #092AAD;
}
#footer{
color: white;
border-top: 2px solid black;
position: fixed;
left: 0;
bottom: 0;
}
<!DOCTYPE HTML>
<html>
<!--Website by Keyblademaster33-->
<head>
<link type="text/css" rel="stylesheet" href="http://keybladia.site11.com/style.css"/>
<link type="icon/ico" rel="shortcut icon" href="favicon.ico?v=2"/>
<script type="text/javascript" src="http://keybladia.site11.com/home.js">
</script>
<title>
Keybladia | Home Page
</title>
</head>
<body>
<marquee title="Site News" scrollamount="5">
The Future is now, Thanks to Science!!! </marquee>
<h1 id="title">Welcome To Key's Website</h1>
<p class="intro"> Sorry for almost quiting on this website. I got frustrated
and quit working on the website for about a month and a half. In the end,
I couldn't give up and started working again. Hopefully, It should not happen again because
I have more vigor than I ever did before. And to show how sorry I am, I redesigned the
entire home page of the website.</p>
<div class="Video">
</div>
<div class="Projects">
<h3 id="Projects-Header">Projects</h3>
Site Navigation
<ul>
<li><a title="Now you don't have to hit the back button" href="http://keybladia.site11.com/"> Home </a></li>
<li><a title="Them updates" href="http://keybladia.site11.com/pages/update_notes.html"> Site Updates </a></li>
<li><a title="The future is now!" href="http://keybladia.site11.com/pages/future_plans.html"> Future Plans </a></li>
<li><a title="Fight the Man!" href="http://keybladia.site11.com/school"> School </a></li>
</ul>
Cool Links
<ul>
<li><a title="Codecademy" href="http://www.codecademy.com/">Go here to learn code!</a></li>
<li><a title="Reese Trcalek Inc." href="https://www.youtube.com/channel/UCY9Y9OyMwToDklOQ0-buegA">My YouTube Channel</a></li>
<li><a title="Too Many Tags!" href="http://www.w3schools.com/">Coding References</a></li>
<li><a title="You can't handle the code!" href="http://stackoverflow.com/">Coding Help</a></li>
</ul>
</div>
<div id="footer">
<p> This website is created by Keyblademaster33 in 2014 - 2015 </p>
</div>
</body>
</html>
Please I ask for help. Tell anything about other problems you see in the code. I have tried for about a month or so to figure it out. Here is the link to my website as well if that will help. http://www.keybladia.site11.com/
http://jsfiddle.net/ay2Lav3c/15/
Just messed with it a little.
Customize it however you want.
body {
background-color: #3D56E3;
}
#title {
display: inline-block;
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
text-align: left;
position: absolute;
top: 0px;
left: 0px;
padding-left: 5px;
padding-right: 5px;
}
.intro {
background-color: #A8B5ED;
border: 2px solid black;
font-family: Times New Roman;
text-align: left;
top: 8px;
left: 0;
position: absolute;
top: 90px;
right: 250px;
margin-right: 50px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
}
marquee {
box-shadow:0 0 10px black;
position: fixed;
top: 0;
border-bottom: solid 2px black;
background-color: black;
right: 0;
color: white;
z-index: 2;
width: 100%;
}
.Projects {
border: 2px solid black;
position: absolute;
top:0px;
right: 10px;
width: 200px;
top: 0;
height: auto;
padding-left: 5px;
background-color: #A8B5ED;
}
.Projects - you could use a float: right; instead of fixed position with margins.
.Projects {
border: 2px solid black;
float: right;
width: 200px;
top: 0;
height: auto;
max-height: 50%;
padding-left: 5px;
background-color: #A8B5ED;
}