When I was a child, I used to read all Dragon Ball manga books.
The Super Saiyan effect (surrounding aura and lightning) is really cool!
Now I have an event page which lists all upcoming events in cards and it looks like this:
And here is the code
<div class="col-sm-3 col-xs-12 event">
<div class="row hidden-xs icon">
<div class="title">16 Apr</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">Registration Opens 14 Apr</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row visible-xs-inline-block hidden-lg hidden-md hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">16</div>
<div class="event-month">apr</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">Registration Opens 14 Apr</div>
<div class="event-title">LRC Night Run</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
One of them is a special event.
So here is what I want:
I want this special event being surrounded by the "Super Saiyan" effect!
So it will look like this one:
(sorry the Saiyan isn't drawn beautifully, but the effect is well addressed)
So there will be many lightning strikes and flames around this event card, and they are flowing!
Sorry, I cannot come up with any css code for this one as I am not even sure that whether it can be done by css or not.
Is it possible?
Update
If this is impossible, how about the static lightning and flames(KI)? And it has to be responsive.
Update 2
Also, this page is responsive, and it would be terrible if the flame and lightning were mis-placed when the page got resized.
So here is how it looks like on a smaller screen
Update 3
Here is my css code for event card:
.event {
margin:10px;
text-transform: uppercase;
}
.icon {
background: #545454 url(../Content/img/event-icon.png) no-repeat center center;
background-size:cover;
min-height: 250px;
height: 250px;
width: auto;
min-width: 250px;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title{
font-weight: 700;
color:#6c6c6c;
font-size: 67px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.sub-title{
overflow: hidden;
font-size: 18px;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
color:#87e300;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.event-time{
color:orange;
font-size:25px;
}
.sub-icon {
display: flex;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: space-around;
background: #f3f3f3;
font-size: 15px;
font-weight: bold;
font-style: normal;
line-height: 1.1;
text-transform: uppercase;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}
.sub-icon span {
display: inline-block;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
white-space: nowrap;
color:black;
}
.sub-icon div{
margin-top : 10px;
margin-bottom:10px;
}
.event-day{
font-size:24px;
line-height:0.85;
font-style:normal;
font-weight:normal;
color: #6c6c6c;
}
.event-month{
color: #cccbcb;
font-size: 42px;
}
.event-time{
color:orange;
font-size:25px;
}
.event-notice {
color: #87e300;
font-size: 14px;
font-weight:600;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: .95;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}
.event-title{
font-size:16px;
font-weight:800;
color:white;
font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}
.event-slogan{
font-size:14px;
font-weight:600;
color: #999;
}
#media (max-width: 767px) {
.event-sm {
display: flex !important;
}
}
SVG
CODEPEN
I am a bit unsure if you wanted the yellow KI glow or the lighting so i went for the lighting effect.
I reused a simple <svg> shape with the <use> element.
The lighting shape is taken from Gohan.
The top left lighting.
body {
margin: 0;
}
.main {
background-color: black;
width: 100vw;
height: 100vh;
}
.calander {} .calander h2 {
margin: 0;
color: white;
text-align: center;
}
.calander .event-grid {
margin: 0 5%;
}
.event-grid .event {
position: relative;
display: inline-block;
width: 30%;
height: 250px;
margin: 1%;
text-align: center;
background: -moz-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4c4c), color-stop(100%, #212121));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #4c4c4c 0%, #212121 100%);
}
.event .date {
color: #666;
font-size: 3em;
margin-bottom: 10px;
text-shadow: 0px 1px #222;
}
.event .time {
font-size: 1.4em;
color: #dd8834;
}
.event .note {
font-size: 1.3em;
color: LawnGreen;
}
.event .bottom-reg {
position: absolute;
bottom: 0;
height: 25%;
width: 100%;
background-color: white;
}
.event .bottom-reg p {
margin: 5px 0;
}
.event .bottom-reg input {
text-align: center;
color: white;
background-color: #55f;
border: 1px solid #99f;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: white;
font-weight: bold;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: white;
font-weight: bold;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: white;
font-weight: bold;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: white;
font-weight: bold;
}
.test {
display: none;
}
.spesial {
z-index: 5;
position: absolute;
top: -25%;
left: -25%;
width: 150%;
height: 150%;
}
<div class="main">
<section class="calander">
<h2>UPCOMING EVENTS</h2>
<div class="event-grid">
<div class="event">
<h1 class="date">16 APR</h1>
<span class="time">8:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
</div>
<div class="event">
<h1 class="date">19 APR</h1>
<span class="time">10:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
<div class="spesial">
<svg width="100%" height="100%" viewBox="0 0 200 200">
<use x="40" y="100" transform="scale(0.5) rotate(20)" xlink:href="#light" />
<use x="150" y="-790" transform="scale(0.2) rotate(90)" xlink:href="#light" />
<use x="0" y="200" transform="scale(0.35) rotate(-45)" xlink:href="#light" />
<use x="-240" y="390" transform="scale(0.5) rotate(-70)" xlink:href="#light" />
<use x="300" y="-90" transform="scale(0.4) rotate(90)" xlink:href="#light" />
</svg>
</div>
</div>
<div class="event">
<h1 class="date">23 APR</h1>
<span class="time">8:00 PM</span>
<br>
<span class="note">registation</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER" />
</div>
</div>
</div>
</section>
<svg class="test" width="100px" height="100px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path fill="#ddf" stroke="#ddf" id="light" d="m 0,0 c 6.24111,-8.9445 10.61204,-23.77912 17.97353,-53.80856 l 29.7995,-5.55584 35.35534,41.92133 c -1.95372,12.45653 45.89675,34.80534 61.61931,34.34518 -17.63651,5.49982 -9.56977,24.91725 2.52538,36.87057 C 139.10793,46.26094 131.45087,39.06432 122.46831,22.22336 118.45247,16.48431 87.40919,-0.96167 83.63345,0.73967 c -9.2424,4.06941 -3.52888,14.963 -1.51523,18.60117 -4.31715,4.656 -7.89706,8.06774 -8.43836,13.6677 0.0873,-12.34933 1.5179,-42.45863 -5.49456,-26.14667 L 65.95578,-14.91769 C 61.11992,-21.99984 48.27857,-50.5446 47.89033,-37.93673 46.10689,-46.50735 39.22534,-49.00909 35.6512,-48.25273 17.657,-46.88454 17.9011,-38.9303 16.45831,-31.58521 7.76504,-6.22367 6.56293,-8.29891 0,0 Z"
/>
</defs>
</svg>
</div>
This might not be the best way, but a quick way could be to download an animated gif of super saiyan, make it transparent, edit the character out, then use css to overlay the image on your event.
With better photo editing software this could probably look a lot better, but this only took me about 5 minutes.
Here's the code: http://codepen.io/anon/pen/gpLMGr
<div class="event">
<img id="saiyan" src="http://i.stack.imgur.com/CFoa1.gif" />
<h1 class="date">19 APR</h1>
<span class="time">10:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
</div>
<style>
#saiyan {
position: absolute;
z-index: 1;
width: 160%;
height: 100%;
left: -30%;
top: 0;
}
</style>
I just absolutely position the image over the rest of the event object, and have its width and height dependent on the event div.
Disclaimer: this code is for the lulz.
Moved by curiosity, I've created a small example you might like:
Running demo on jsFiddle
Lightning effect
I've used the HTML5 Canvas Lightning from this fiddle, that is itself a fork of akm2's Lightning Points (Lightning 2); the canvas is then placed under a div with 0.99 of opacity, 20px oversized on each side, to give the effect of surrounding the boundaries, but only of few pixels.
Fire effect
The fire effect in CSS is easily achievable with the text-shadow property; I've taken parts of this but it is the same code I've seen dozens of time in many articles / fiddles, probably the first one ever is the one in the second link.
Since this applies only to text and not, for example, to divs, I've used the content attribute of the :before pseudo-element of the .sayan div to create a huge text composed by symbols (for a romantic reason, I've used the Go (悟) kanji from Goku (悟空), but the important is that it is not a recognizable alphabetic character, or goodbye aura effect... try it by yourself with content: 'a';), and I've put it between the canvas and the div with a negative z-index.
This is just an experiment for fun, not production code nor responsive stuff as asked in the question (even though if you resize the page, the divs move and the sayan div will retain its capabilities); my attempt to answer the question:
is it possible to do it, and how ?
, that I hope you liked.
If you want to transform it to something more serious, there is a lot of work to do (first of all, alter the script to make some dots moving only along the sides, to prevent having all of them inside the square), but I still suggest you to use a transparent animated PNG, or however something easier and less CPU-killer than this, declaratively made for the sake of the lulz ;)
Related
I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>
I am currently trying to make my portfolio website for my university project, however my parallax scrolling is not scrolling smoothly on google chrome, however I don't have any problems with safari.....
Do you know why and what this might cause this problem and how I can fix it.
/* this is my css code for my navigation bar. For example, you can change the background of the navigation bar */
#nav {
background-color: transparent;
overflow: hidden;
position: fixed;
}
/* this is the css code for the links inside the navigation bar for example where to position the links they way they will look */
#nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-family: "Lato", sans-serif;
}
/* this is to change the background of the buttons(links) when they are on hover */
#nav a:hover {
background-color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 2px rgb(0, 0, 255);
}
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: rgb(102, 102, 102);
}
.image1,
.image2,
.image3 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.image1 {
background-image: url(background1.jpg);
min-height: 100%;
}
.image2 {
background-image: url(background.jpg);
min-height: 400px;
}
.image3 {
background-image: url(ist.jpg);
min-height: 400px;
}
.section {
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: rgb(40, 46, 52);
color: rgb(0, 0, 0);
}
.text1 {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: rgb(0, 0, 0);
font-size: 27px;
letter-spacing: 8px;
text-transform: uppercase;
}
.text1 .border {
background-color: #111;
color: #fff;
padding: 20px;
}
.text1 .border.trans {
background-color: transparent;
}
#media(max-width:568px) {
.image1,
.image2,
.image3 {
background-attachment: scroll;
}
}
.arrow-down {
width: 100%;
margin: 0 auto;
text-align: center;
}
.arrow-down::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
margin-top: 820px;
margin-left: 820px;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-right: 4px solid rgb(255, 0, 0);
border-bottom: 4px solid rgb(0, 0, 0);
-webkit-transform: rotate(45deg);
animation: 3s arrow infinite ease;
}
#-webkit-keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
#keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- This is my code for my Navigation bar -->
<div id="nav">
HOME
ABOUT ME
MY PROJECTS
MY CV
CONTACT
</div>
<!-- this is my heading and the main background on my main page(Index) -->
<div class="image1">
<div class="text1">
<span class="border">
Ivan Chamukov
</span>
</div>
</div>
<!-- this is my code for my scrolling arrow, the "onclick" makes my class/object clickable -->
<div class="arrow-down" onclick="slideDown()"></div>
<!-- this is my page - About me, and the information about me. -->
<section class="section section-light">
<h2> About me</h2>
<p class="about">My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take
part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with
grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended
Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom. </p>
</section>
<div class="image2">
<div class="text1">
<span class="border">
Image Two Text
</span>
</div>
</div>
<section class="section section-dark">
<h2> Section Two </h2>
<p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
along the way</p>
</section>
<div class="image3">
<div class="text1">
<span class="border">
Image three text
</span>
</div>
</div>
<section class="section section-dark">
<h2> Section Three </h2>
<p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
along the way</p>
</section>
<div class="image2">
<div class="text1">
<span class="border">
Ivan Chamukov
</span>
</div>
</div>
The background image of the snowy mountains with the sled is almost 17 MB large. Parallax effects usually cause repainting on the browser. Repainting something that huge is a performance nightmare.
Reducing the file size of background1.jpg would help tremendously.
What I Am Making
On my site, the navigation bar does not start at the top of the page, instead it is a little way down the page, under the header/banner. When the user scrolls down past the nav bar, I change it's position to fixed so that it now stays visible at the top of the page as they scroll through the rest of the content.
I want this to look really seamless, so, when the navbar becomes fixed, I add some padding to the main content to stop it from jumping up into the space where the navbar was. I'm doing all this in my javascript, using jQuery to add classes ands styles to particular elements.
The Problem
In Safari, my code is working perfectly! The problem I have is that on Chrome and Firefox it seems like I need to add more padding than I do on Safari. On Chrome and Firefox the content is still jumping up slightly after the navbar becomes fixed. Whilst trying different values, I discovered that on those browsers, I need exactly 20 extra padding to make the transition seamless, but then the content jumps up too far on Safari!
Why is this extra padding needed on some browsers but not Safari?
If anyone can help I would be truly grateful because this is really bugging me! I have no idea why this is behaving differently in different browsers.
Here is a code snippet. I've tried to minimise the amount of code needed to recreate the issue but the CSS is a bit verbose because I thought I'd better include it all in case there's something there that is causing the issue.
----- EDIT -----
OK I discovered that the element which is causing the problem is my .navbar-button which I didn't include in my original snippet. I have added it in now. This is the thing which is behaving differently in different browsers.
I had to add margin to this element because it was not positioning correctly in Chrome or Firefox without it, whereas in Safari it was positioned just fine.
This extra margin is what is causing the issue.
$(document).ready(function() {
var $navBar = $(".navbar");
$(window).scroll(handleScroll);
function handleScroll() {
fixNavbarToTopIfNecessary();
}
function fixNavbarToTopIfNecessary() {
var bannerHeight = $("#banner").outerHeight();
//When user scrolled past the initial position of the navbar
if ($(window).scrollTop() > bannerHeight) {
$navBar.addClass("navbar-fixed");
$("#content").css("padding-top", $navBar.outerHeight() + "px"); // So that the content doesn't jump underneath the fixed nav.
} else {
$navBar.removeClass("navbar-fixed");
$("#content").removeAttr("style");
}
}
});
* {
box-sizing: border-box;
}
html {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: normal;
color: #888;
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
}
body {
line-height: 1.5;
font-size: 14px;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
img {
margin: 0;
padding: 0;
font-weight: normal;
}
button {
border: none;
cursor: pointer;
}
.row::before,
.row::after {
display: table;
content: " ";
}
.row::after {
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.column {
display: block;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.s12 {
width: 100%;
}
p {
margin-top: 10px;
margin-bottom: 20px;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding: 50px 0;
}
.container {
width: 970px;
}
#banner {
background-color: #794f29;
width: 100%;
height: 600px;
padding: 150px 0;
position: relative;
text-align: center;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.banner-intro {
width: 50%;
float: right;
right: 5%;
top: 50%;
margin: 0 auto;
position: relative;
transform: translateY(-50%);
}
.banner-intro-heading {
color: white;
font-size: 60px;
text-shadow: 0 0 5px #ffecb0;
margin-bottom: 10px;
}
.banner-intro-lead {
color: white;
font-size: 24px;
}
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
display: inline-block;
border-radius: 5px;
padding: 15px 30px;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
transition: .3s;
cursor: pointer;
}
.btn:hover {
background-color: #a16fff;
color: white;
border-color: #8748ff;
}
.banner-intro-button {
margin-top: 30px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3);
}
.navbar {
-webkit-font-smoothing: subpixel-antialiased;
/* this stopped the font weight from changing when the navbar is fixed */
width: 100%;
height: 60px;
background: rgba(255, 236, 176, 0.97);
line-height: 60px;
display: block;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
transform: translateZ(0);
/* hack to make sure the navbar is repainted when it's set to a fixed-navbar on iOS */
}
.navbar-fixed {
position: fixed;
top: 0;
}
.navbar-brand {
font-family: "Merienda", cursive;
display: inline-block;
padding: 0 15px;
font-size: 18px;
float: left;
}
.navbar-items {
float: right;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: block;
float: left;
}
nav a {
position: relative;
display: block;
font-size: 16px;
font-weight: 500;
color: #794f29;
transition: .3s;
padding: 0 25px;
}
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 10px 15px;
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
.featured {
text-align: center;
}
.featured-title {
font-size: 40px;
margin-bottom: 1.5rem;
color: #ccaa8c;
}
.featured-subtitle {
font-size: 22px;
margin-bottom: 1.5rem;
color: #666;
}
.featured .lead {
line-height: 2;
font-size: 16px;
margin-bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<section id="banner">
<div class="banner-intro">
<h1 class="banner-intro-heading">Grand Title!</h1>
<p class="banner-intro-lead">Lorem ipsum lorum ipsum sausage rat cake mammoth hair.</p>
<a class="btn banner-intro-button" href="#">Call to Action</a>
</div>
</section>
<nav class="navbar"> <!-- This is what I add the navbar-fixed class to -->
<div class="container">
Brand
<div class="navbar-items">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<li><a class="btn navbar-button" href="#">Button</a></li>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main id="content"> <!-- This is what I add the padding to -->
<div class="container">
<div class="row">
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
</div>
</div>
</main>
I found two solution for your problem (use each of them is enough).
Method 1) Change margin-top and margin-bottom of .navbar-button to 0 (to prevent vertical margin collapsing...) , and use vertical-align: middle; for center it vertically:
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 0 15px; /* *** margin top & bottom are changed to zero! */
vertical-align: middle; /* *** this is new! */
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
Method 2) remove display: inline-block from .btn class:
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
/* display: inline-block; */ /* *** this is removed! */
...
}
it is obvious that if you don't want to change default styles of .btn, you can add display: block to your navbar button manually as an inline style (style="display: block;") or using a new css class (eg: .block) for it.
<li>
<a class="btn navbar-button" href="#" style="display: block;">Button</a>
</li>
I've tried so many different ways trying to get 2 div's staying side by side, but no matter what I do I can't seem to figure it out.
I managed to sort it for a while with "position: absolute" but that was until I realized the menu hight wasn't changing. I'm not an expert when it comes to CSS but the rest I'm good at. I've searched and search and so far this is the best results I've came up with:
Results like this: http://puu.sh/oWRbK/4827eeba57.jpg but should looks like this: http://puu.sh/oWS52/a2dc6282e4.jpg anyone that has any suggestions how to fix this issue, please feel free helping me as I'm getting gray haired by this right now, been trying to figure out a way for the past 4 hours but no matter what I do, if I margin-top the pixels space I get it correct but in a different resolution comparing to my monitor messes it completely up.
.wrapper {
padding-left: 68px;
padding-right: 68px;
width: auto;
height: auto;
margin: 0;
}
.header {
padding-top: 16px;
padding-bottom: 14px;
}
.hline {
width:auto;
height:2px;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 325px;
}
/* USER MENU */
.menuWrap {
padding-right: 65px;
width: 260px;
}
.user_menu {
border-style: solid;
border-color: rgba(255, 255, 255, 0.5);
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 260px;
color: #a6bed5;
background: rgba(110, 110, 110, 0.5); /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* Standard syntax */
}
.user_after {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 17px;
height: 39px;
width: 260px;
background: #6e6e6e; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #6e6e6e, #ebebeb); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #6e6e6e, #ebebeb); /* Standard syntax */
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
.user_menu .content {
width: 260px;
}
.user_menu .header {
padding: 6px;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
min-height: 62px;
}
.user_menu .header img {
width: 62px;
height: 62px;
float: left;
}
.user_menu .header p {
padding-left: 70px;
font-family: Open Sans;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
.user_menu .header a {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:link a:visited a:active {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:hover {
text-decoration: none;
color: #b5cee6;
}
.user_menu .addMenu {
font-family: Open Sans;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
.user_menu .addMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.user_menu .addMenu li a {
display: block;
color: #94a9b9;
padding: 12px 0 12px 20px;
text-decoration: none;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
}
/* Change the link color on hover */
.user_menu .addMenu li a:hover {
color: #b5cee6;
}
/* MAIN CONTAINER */
.bs-container {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 100%;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
<div class="wrapper">
<div class="header">
<img src="/images/logo.png" />
</div>
<div class="hline"></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="bs-container">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><!--ISSUE IS RIGHT HERE.-->
<div class="user_menu">
<div class="content">
<div class="header">
<img src="http://mta.everest-community.net/mta-image.php?id=1" />
<p>
<b><font color="#f7b618">123B3n</font> <font color="#334c66">(1)</font></b><br>
LOGOUT
</p>
</div>
<div class="addMenu">
<ul>
<li>HOME</li>
<li>CHARACTERS <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="characters" class="collapse">
<li>OVERVIEW</li>
<li>STAT TRANSFER</li>
<li>CUSTOM INTERIORS</li>
<li>MANAGEMENT</li>
</div>
<li>ACCOUNT <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="account" class="collapse">
<li>PROFILE</li>
<li>HISTORY</li>
<li>SETTINGS</li>
<li>OVERVIEW</li>
</div>
<li>PREMIUM <i class="fa fa-angle-down" aria-hidden="false"></i></li>
<div id="premium" class="collapse">
<li>PREMIUM FEATURES</li>
<li>DONATION HISTORY</li>
<li>DONATE NOW!</li>
</div>
</ul>
</div>
</div>
</div>
<div class="user_after"></div><!--JUST FOR SHOW-->
</div>
</div>
</div>
My JSFiddle: https://jsfiddle.net/123B3n/ohku4a0q/
P.S Didn't know about JSFiddle until now, thanks for letting me know!
You are providing your CSS, but you are also using Bootstrap in your code (or what looks like it) and I am wondering if you have thought about the impact.
--> row
---->col-md-2
That is using the two column grid of a 12 column system with the md breakpoint, where is the other col-md-10 for the right side.
To me, it looks like you are in a losing battle with bootstrap. And without the full code, the only solution here is to rewrite all of your code and that actualyl does you no service.
I will give you this:
<div class="row">
<div class="col-md-2">Left</div>
<div class="col-md-10">Right</div>
</div>
12 Column system, but then you need to look into what happens when you go mobile and get smaller than the md breakpoint.
That MAY be as simple as
<div class="row">
<div class="col-md-2 col-xs-12">Left</div>
<div class="col-md-10 col-xs-12">Right</div>
</div>
How's this? https://jsfiddle.net/wx3emp71/2/
I reorganized your row div to contain both of the columns you want beside each other. Then I gave them a class of "content" (feel free to change that) and made them inline-blocks of 50% width each. I also removed some margin you had on one of your containers. To make them display beside each other at 50% width, I had to restructure your divs a little bit so that there's no white space between the end of the close tag and the beginning of the new open tag. Lastly, I gave them box-sizing: border-box just so that any margins/padding don't come into play when calculating the width, therefore allowing the 50% width to work.
If you like my solution, I actually recommend you add the following style, *{ box-sizing: border-box;} to all your CSS files. That way, everything has the border-box property and you never have to worry about fitting the paddings into your calculations.
I put my work under the /***** my edit *****/ comment so you can change it however you feel fit. I don't think I added any other styling elsewhere, but I did remove some as I mentioned before.
when i re-size my browser all element change their place can any one help me ??? but some of element like logo & navigation when i re-size the browser Not affected
i tried to make the position fixed absolute or static but nothing change
<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css? family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;
background-image: url('dr5.jpg');
background-repeat:no-repeat;
margin:-70 0 0 0;
}
#face:hover {
background: #333;
border-left: 5px solid #000;
}
#face{ MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{
margin: 0 auto;
width: 100%;
background: #fff;
}
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
padding: 20px;
background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
}
#header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
}
.navigation li:hover h2 {
font-weight: bold;
color: yellow;
}
.navigation li:hover p {
color: orange;
padding-left: 5px;
}
#content-container
{ float: left;
width: 55%;
margin-top: -25px;
margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
.ti{
border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer{margin: 30px 20px -2px 0px;
overflow: hidden;
border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;"> <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
<h2>الصفحة الرئسية</h2>
<p>main page</p>
</li></a>
<a href="f.html"><li>
<h2>فلسفتنا</h2>
<p>our</p>
</li></a>
<a href="how.html"><li>
<h2>من نحن</h2>
<p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
<h2>الاستديو</h2>
<p>gallary</p>
</li></a>
<image id="face" src="face.jpg" width="80px" height="80px"/>
</ul>
<div id="content-container">
<div id="content">
<h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;"> كلمة ترحيبية </h2>
<p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا أن رأيكم مهم لدينا وسيساعدنا على لتطور .
نأمل أن تجدوا المعلومات التي تبحثون عن
ها على موقعنا الالكتروني
، ولمزيد من المعلومات أو الاستفسارات الرجاء طلب ذلك،
وسوف يسعد نا توفيرها لكم نتطلع إلى الترحيب بكم في
روضتنا ونأمل أن يعودو أطفالكم بذكريات جميلة و تجربة
فريدة.
</p>
</div>
<div id="aside">
<h3>
<div class="ti" >
<p id="time"style="margin-left:20%;margin-top:70px;"></p>
<script>
var x=setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString();
}</script>
<p id="date"style="margin-left:15%"></p>
<p style="margin-left:30%">اتسلى معنى</p>
<script>
var d = new Date();
document.getElementById("date").innerHTML = d.toDateString();
</script><br><br>
</script>
</div>
</div>
<div id="footer"><h2 style="margin-top:7px;float:right;margin-right:30px;color:green;font-size:30px;">:اتصل بنا</h2></div>
<h4 style="font-size:18px;float:right;margin-top:-60px;margin-right:50px;">065925575 - 0796877760<br> 065925575 فاكس </h4>
<h2 style="margin-top:-94px;float:left;margin-left:30px;color:green;font-size:30px;">:البريد الالكتروني</h2>
<h4><a style="margin-left:30px;margin-top:-40px;clear:left;color:black;float:left;font-size:18px;" href="mailto:info#adam-kids.com">info#adam-kids.com</a></h4 >
<h2 style="float:right;margin-top:-100px;margin-right:150px;color:green;font-size:30px;">:العنوان</h2>
<h4 style="margin-bottom: auto;margin-top:-67px;margin-right:80px;font-size:18px;width:190px;float:right;">
بناية رقم 9 - شارع علي سيدو الكردي
- خلف كنيسة اللاتين - عبدون الشمالي
- عمان - الأردن
</h4>
</div>
</body>
</html>
You need to make your CSS responsive. By responsive, I mean that your CSS should be able to react to the different browser widths and heights.
This is a massive topic but a good place to start might be here:
http://www.w3schools.com/css/css_responsive_intro.asp
You should also look into CSS frameworks such as Bootstrap or Foundation:
http://getbootstrap.com/
http://foundation.zurb.com/
Both of which have plenty of online tutorials you can learn from. The w3schools link I have provided gives you a basic introduction to Bootstrap.
That's happening because you're mixing fixed units and relative units in your CSS.
Fixed units like pixels keeps the especified sizes even when you resize your browser, while relative units like percentages reacts and adapts to resizing.
Consider that fixed units will create a lot of horizontal scroll depending on the device your site it's being viewed from, but relative units will reorganize your page for a better presentation, that's what we call "Responsive".
Use the browser development tool to see the properties of elements and inspect why they are behaving that way. For your example, the ul with the 'navigation' class has margin-left set to 20%, which makes it change position when the total width of the page changes.
I have to agree with the others, though, and ask you to read more about the subject so you can understand the samples you are working with.