body {
background-image: url(pattern.jpeg); background-attachment: fixed;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
h1,h2,h3
{
color : #6685a8;
}
div#outer {
width: 960px;
background-color:#FFFFFF;
margin-top: 00px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
text-align: left;
}
div#header {
padding: 5px;
margin: 0px;
text-align: left;
background-color :#8bb8e8;
}
div#nav {
width: 160px;
height: 1669px;
padding: 0px;
margin-top: 0px;
float: left;
background-color:#6685a8;
}
div#navright {
width: 160px;
height: 1669px;
padding: 0px;
margin-top: 0px;
background-color:#6685a8;
}
div#main {
float:top;
margin-top: 0px;}
div#footer {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
Once I create the html for it it just has a small header two sidebars and the main part in the middle(which is just a picture) and the footer contains all the information, it is also all centered on the page. The problem is it works fine in chrome and firefox, but when I open it in internet explorer it puts the Main.div and the Footer.div below everything, I need it to be at the top between both the nav.div and right.div
<html>
<head>
<link href="carguys.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outer">
<div id="header" >
<p>
</div>
<div id="nav">
<img src="" alt="" width="160" height="400" align="middle"/>
</div>
<div id="navright">
</div>
<div id="main" align="center">
<img src="" alt="" width="640" height="400"></img>
</div>
<div id="footer">
<h1 align="center">The Show</h1>
*lots of content in this section, including a table*
</div>
</div>
</body>
Related
I'm trying to hide a section of the page until a button is clicked, whats the best way to achieve this?
I have attached an image below encircled in red is the button I want to work as a toggle to show the content of the laptops section. Currently if you click the image it just opens a tab with an image and instead I want it to show open the laptops and mac section.
I have attached a JS fiddle with my current code.
https://jsfiddle.net/2j4b4bdn/2/
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" crossorigin="anonymous">
<style>
body {
background-color: #161A25;
margin:0;
}
#logo {
position:absolute;
left:0;
top:0;
}
h9
{
color: white;
position:absolute;
right:50rem;
top:4rem;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h10
{
color: white;
position:absolute;
right:30rem;
top:4rem;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h6
{
color: black;
position:absolute;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h7
{
color: #32CE87;
position:absolute;
right:6rem;
top:2.5rem;
font-size: 9px;
font-family: 'Raleway', sans-serif;
}
h8
{
color: white;
position:absolute;
right:6rem;
top:3.5rem;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #32CE87;
}
.footer {
position: fixed;
right:0;
bottom: 0;
width: 100%;
height:110px;
background-color: #2A3046;
color: white;
}
img.logo {
height: 80px;
left:3em;
position: relative
}
img.logo1 {
height: 40px;
left:3em;
bottom:2rem;
position:absolute;
}
.my-button {
display: inline-block;
margin: 1px;
background: #32CE87;
color: white;
font-family: 'Raleway', sans-serif;
text-align: center;
border-radius: 5px;
padding: 8px 16px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100px;
text-decoration: none;
}
.my-button:hover {
background: #666;
color: #c1e1e0;
}
.center-bottom {
position: fixed;
bottom: 12rem;
width: 100%;
text-align: center;
}
img.arrow {
max-height: 40px;
}
.row {
background-color: white;
max-width:100%;
margin-top: 0.5rem;
margin-left: 10px;
margin-right: 10px;
border-radius: 5px;
}
.box1 {
background-color: white;
max-width:100%;
height:250px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
img {
margin-top:0.5rem;
}
div.container1 {
background-color: white;
max-width:100%;
height:250px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
div.container {
margin-top:14rem;
}
p {
font-size:7px;
width:490px;
position: absolute;
right:12em;
text-align: left;
bottom: 1.5rem;
}
img.laptop {
height: 80px;
position: absolute;
left:0px;
right: 0px;
margin-top: -0.5rem;
margin-left: auto;
margin-right: auto;
}
div.bottomtext {
position: relative;
left:0px;
right: 0px;
font-family: 'Raleway', sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
width:800px;
top:7rem;
font-size: 1.2rem;
}
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height:50px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
h9:hover {
color: #32CE87;
}
h10:hover {
color: #32CE87;
}
p:hover {
color: #32CE87;
}
h7:hover {
color: white;
}
h8:hover {
color: white;
}
.pt-inner-wrap {
color: #ecf0f1;
text-align: center;
color: black;
border-right: 1px solid #d4d4d4;
bottom:-6px;
}
.pt-inner-wrap1 {
color: #ecf0f1;
height: 200px;
text-align: center;
color: black;
border-right: 1px solid #d4d4d4;
bottom:-6px;
}
img.img-responsive {
width: 230px;
height: 32px;
}
img.img-responsive1 {
width: 260px;
height: 50px;
margin-top: 12rem;
}
h4 {
font-size: 18px;
font-family: 'Raleway', sans-serif;
top: 1rem;
}
h6.pt-title {
font-size: 20px;
text-align: center;
vertical-align: middle;
position: absolute;
}
h6.pt-title1 {
margin-top:8rem;
font-size: 20px;
width: 200px;
margin-left:12rem;
position: absolute
}
figcaption {
font-family: 'Raleway', sans-serif;
}
.col-xs-2{
background: #32CE87;;
color:#FFF;
border-radius: 5px;
height: 50px;
text-align: center;
padding-top: 5px;
font-size: 3rem;
}
.col-half-offset{
margin-left:4.166666667%;
text-align: center;
vertical-align:middle;
padding-top: 5px;
}
p.text1 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:86rem;
border-right: 1px solid;
}
p.text2 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:63rem;
border-right: 1px solid;
}
p.text3 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:39rem;
border-right: 1px solid;
}
p.text4 {
position:fixed;
right: 16rem;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
}
p.text5 {
position:fixed;
left:17rem;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
border-right: 1px solid;
}
</style>
</head>
<body>
<img src="Logo-Trans.png" class="logo" >
<div class="toptext">
<h9> GET A QUOTE</h9>
<h10> RETRIEVE A QUOTE</h10>
<h7>NEED HELP OR ADVICE?CALL US <br style> </h7>
<h8> 0800 0481804</h8>
</div>
<img src="nav.png" class="column">
<div class="container1">
<div class="row">
<div class="col-sm-4">
<div class="pt-inner-wrap">
<i class="fa fa-mobile fa-4x"></i>
<h4 class="pt-title">Mobiles & Smartphones</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Total Value when new</figcaption>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Would you like instant replacement?<i class="fa fa-question-circle" aria-hidden="true" style="margin-right;1rem; color:grey" ></i></figcaption>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
</div>
</div>
<div class="col-sm-4">
<div class="pt-inner-wrap">
<img src="tablet.png" style="height:50px;">
<h4 class="pt-title">iPad's & Tablets</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Total Value when new</figcaption>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Would you like instant replacement?<i class="fa fa-question-circle" aria-hidden="true" style="right;1rem; color:grey"></i></figcaption>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
</div>
</div>
<div class="col-sm-4" >
<div class="pt-inner-wrap" style="border-right: 0px ">
<i class="fa fa-laptop fa-4x"></i>
<h4 class="pt-title">Laptops & Macbooks</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<figcaption>Select the value range for the device(s)</figcaption>
<img src="2000.png" width="100px" class="img-responsive" style="margin: 0 auto;"> <figcaption>OR</figcaption>
<h6 class="pt-title"></h6>
<img src="multiple.png" width="200px" class="img-responsive" style="margin: 0 auto;" onclick="window.open(this.src)">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box1">
<div> <img src="laptop.png" class="laptop"> </div>
<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range. Where you dont want cover with a particular price range, please leave bank.</div>
<div class="container">
<div class="row" style="">
<div class="col-xs-2" id="p1">0</div>
<p class=Text1>Up to £500 <br>How many would you like to insure?</p>
<div class="col-xs-2 col-half-offset" id="p2">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text2>Up to £500 <br>How many would you like to insure?</p></div>
<div class="col-xs-2 col-half-offset" id="p3">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text3>Up to £500 <br>How many would you like to insure?</p> </div>
<div class="col-xs-2 col-half-offset" id="p4">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text4>Up to £500 <br>How many would you like to insure?</p></div>
<div class="col-xs-2 col-half-offset" id="p5">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text5>Up to £500 <br>How many would you like to insure?</p></div>
<div></div>
</div>
</div>
</div>
<div class="footer">
<div class="center-bottom">
<a class="my-button" title="Relevant Title" href="#">BACK</a>
<a class="my-button" title="Relevant Title" href="#">NEXT</a>
</div>
<p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a trading style of Insync Insurance Solutions Ltd which is authorised and regulated by the Financial Conduct Authority. Our registered office is Midland House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in England under company number 08810662. Should you have cause to complain, and you are not satisfied with our response to your complaint, you may be able to refer it to the Financial Ombudsman Service, which can be contacted as follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | <br>Tel: 0800 023 4567 or 0300 123 9 123 | www.financial-ombudsman.org.uk | Terms of Business </p>
<img src="Logo-Trans.png" class="logo1">
</div>
</body>
</html>
First, in the future I would suggest that you copy over only the relevant code to the problem you're facing. Dumping all the HTML, CSS, and JS into a single block like that, much of it not being pertinent to the problem you're trying to solve, makes it difficult for others to slog through.
Now, since your already including jQuery (though you need to include it in your <head> tag), you might as well just use some CSS and the .toggleClass() function included with it.
Below is some code that displays it in action, as yours was a bit cluttered to display a concise concept. You basically need to execute the .toggleClass() function on the desired element (the laptop/mac section) when the button is clicked. If you want it to look smoother, you'll want to look into the .hide() and .show() functions. Documentation can be found here.
$( "#toggleBtn" ).click(function() {
$( ".laptops" ).toggleClass( "show" );
});
body {
padding: 10px 0px;
}
.laptops {
padding: 5px 10px;
margin-top: 10px;
background-color: #32CE87;
display: none;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div>
<button id="toggleBtn">Show and Hide</button>
</div>
<div class="laptops">
<p>
The content you want to show and hide. Here is the mac/laptop section.<br>
More stuff about laptops.<br>
Event more content if you wanted it.
</p>
</div>
</div>
</body>
</html>
I'm not completely sure what you're trying to achieve, but if you just want an element to appear when another element is clicked, you can easily do so using js. I normally handle the visiblity in css, and add a class to make the element appear.
HTML:
<div class="toggler">
Click me
</div>
<div class="element">
Hello
</div>
CSS:
.element{
opacity:0;
}
.element.show{
opacity:1;
}
JS:
var elementToClick = document.querySelector(".toggler");
var elementToShow = document.querySelector(".element");
if(elementToClick){
elementToClick.addEventListener("click", showElement)
}
function showElement(){
elementToShow.classList.add("show");
}
https://jsfiddle.net/L3r43pg0/
in the below code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with
some other codes.
html code :
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<img src="button.jpg" id="button"><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
css :
#good{
width: 100%;
height: 100%;
}
#bad{
width: 15%;
height: 100%;
background-color: #023b3b;
top:-80%;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
in the above code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with
some other codes.
For properties top/bottom/left/right to take effect element must be positioned non-statically - have position relative/absolute/fixed.
Apply position to your #bad
I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)
I am making a fluid layout for a website. All elements on the home page of the website look correct when I view it on Safari or Chrome but when I try to view it on FireFox, the logo and the container for the logo become very big and it takes up more space than what I have set for it.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/stylesheetHome.css" />
<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
<div id="logoBlock" class= "grid_4">
<img width=100px src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
<div id="navigation" class="grid_8 omega">
<ul id="navList">
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../index.html" id="homeNav">Home</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle" >
<a class= "round-button" href="../html/gamesPageTemporary.html" id="gamesNav">Games</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/resumePage.html" id="resumeNav">Resume</a>
</div></div>
</li>
<li>
<div class="round-button"><div class="round-button-circle">
<a class= "round-button" href="../html/contactPage.html" id="contactNav">Contact</a>
</div></div>
</li>
</ul>
</div>
<div id="section1" class="grid_10">
<div id="sizzle" class="grid_8">
<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&version=3&rel=0""></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/DwOnLs1WS5Q?hl=en_US&version=3&rel=0"" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
<!--<iframe width="620" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>-->
</div>
</div>
<div id="section2" class="grid_5">
<div id="portrait" class="grid_3">
<img width=300px src="../img/IshiharaPlate3.svg" />
</div>
</div>
<div id="section3" class="grid_5 omega">
<h2>About me</h2>
<p>Video games as a medium is the most amazing creative outlet for me and I am working hard to do it for a living. Scripting is my specialty, but I enjoy working on every part of a game(VFX are especially fun). I have a wide variety of experience from working at Oak Ridge National Lab on a game environment for GIST analysts to use to making a mobile game about catching birds while falling through the sky. I love all types of games and I am always trying to improve upon what I have learned so that I can make new and exciting games.</p>
</div>
<div id="contact" class="grid_4">
<p><span>Michael Agreda © 2014</span></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../jquery.fitvids.js"></script>
<script>
// Target your .container, .wrapper, .post, etc.
$("#sizzle").fitVids();
</script>
<body id="home">
</body>
</html>
And here is my CSS:
/*global*/
body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 1.125em;
color: #faf3bc;
background: #333;
width: 100%;
}
a {
color: #4fb69f;
text-decoration: none;
}
/*typography*/
h1 {
font-size: 1.750em;
font-weight: 100;
letter-spacing: -1.5px;
}
h2 {
font-weight: 100;
font-size: 1.500em;
font-size: 2.5vw;
color: #b4c34f;
}
h3 {
font-weight: 100;
font-size: 1.125em;
color: #ed6c85;
}
#logoBlock{
position: relative;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
top: 0;
background-color: #420600;
width: 100%;
height: 5%;
}
/*#logoBlock h1 {
color: #FFF;
text-align: center;
top: 20px;
}*/
#logoBlock img {
width: 100%;
height: 10%;
left: 70%;
}
#navigation{
position: relative;
width: 80%;
height: 15%;
left: 10%;
background-color: #008080;
}
#navigation ul{
list-style-type:none;
margin: 0 auto;
width: 100%;
height: 25%;
margin-left: 12%;
}
#navigation li {
display:inline;
float: left;
padding: 1%;
width: 15%;
}
.round-button {
width:85%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:10px solid #ff8080;
overflow:hidden;
background: #c83737;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#F5F5DC;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
/*
.home {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg2 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.games {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg3 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.resume {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
#egg4 {
width: 45%;
height:20%;
padding-bottom: 35%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #008080;
}
.contact {
padding:0.5%;
font-size: 28px;
color: yellow;
position: relative;
bottom: -2%;
text-decoration:none;
text-align:center;
}
*/
#section1 {
position: relative;
height: 40%;
width: 100%;
}
#section 1 h1 {
height: 2%;
width: 2%;
left: 5%;
color: #FFF
}
#sizzle {
position: relative;
left: 17%;
top:-10%;
}
#section2 {
position: relative;
top: 45%;
height: 20%;
width: 30%;
}
#portrait {
position: relative;
height: 30%;
width:30%;
left: 10%;
}
#section3 {
top: 40%;
}
#contact {
height: 10%;
width: 100%;
background-color: "blue";
}
body#home .round-button a#homeNav,
body#games .round-button a#gamesNav,
body#resume .round-button a#resumeNav,
body#contact .round-button a#contactNav {
background: #30588e;
}
How do I get the layout to show properly in Firefox?
Try to put double quotes around the 100px in the img tag and remove the px:
<div id="logoBlock" class= "grid_4">
<img width="100" src="../img/IshiharaPlate3.svg" alt="Logo" />
</div>
EDIT: Thanks #RichardB
The width of your block and image are both set to 100%, and so are filling the full width of the browser window.
Your inline style says you want the logo to be 100px.
If that is the case then change
#logoBlock img {
width: 100%;
to
#logoBlock img {
width: 100px;
If it is supposed to be a more responsive in its size, then you may want to look at max-width, which allows it to expand only up to a specified point.
As to why it was working in Chrome - my guess is that they are choosing the inline style over the css one (Rems code fix should also be applied).
Hi guys I have a question that is why does the whole page of my website move slightly to the left (10 - 30 px or so) when I insert an image and goes back to normal when I remove it. Any help at all is appreciated.
Html code-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Random Text">
<meta name="keywords" content="Random words">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>X</title>
<link href="menusheet.css" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo"><img src="images/bar.png" alt="knives"/></div>
</div>
<div id="wrapper">
<!-- Black Menu -->
<div id="menu_wrapper" class="black">
<div class="left"></div>
<ul id="menu">
</div>
</div>
<div id="content">
<div id="container">
<div id="adsense">
</div>
<div id="stepsbox">
</div>
</div>
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
</div>
<div id="footer">
<div id="footerleft">
<ul>
<li>Home</li>
<li>Site Map</li>
</ul>
</div>
<div id="footercenter">
© 2013 x.com
</div>
</div>
CSS -
body {
width: 960px;
margin: 0 auto;
font-family: Arial, Verdana, sans-serif;
color: black;
background-image: url(images/bg.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#content {
width: 920px;
height: 100%;
overflow: hidden;
background-color: white;
padding: 0px 20px 0px 20px;
margin: 0px 0px 0px 0px;
}
#container {
width: 300px;
height: 550px;
float: right;
background-color: black;
margin-left: 10px;
}
#adsense {
width: 300px;
height: 250px;
float: right;
background-color: yellow;
}
#stepsbox {
float:right;
width: 250px;
height: 220px;
padding: 15px 15px 15px 15px;
background-color: #E0E0E0;
margin: 10px 0px 5px 10px;
}
#header {
height: 70px;
background: white;
width: 960px;
margin: 0 auto;
}
#footer {
height: 60px;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #333333;
color: white;
}
#footerleft {
width: 300px;
height: 50px;
float: left;
}
#footercenter {
width: 620px;
height: 40px;
float: right;
text-align: right;
padding: 5px 5px;
border-style:solid;
border-width:5px;
}
Can't seen your images... :D, But in your places I insert into css this code
img{
margin: 0px;
padding: 0px;
border: 0px;
}
This remove any spaces aruound the images tag... try it and look forward...
It, Would be grate if you insert a image link... :)
EASLY to understand
Talking about which image "logo" or
<h4>Factory edges</h4><img src="images/factoryangle.png" alt="Factory angles" style="float:left; margin-right: 20px; width: 175px; height: 175px;"/>
if Factory edge is the image then add one after
<h4>Factory edges</h4><br />
<img src="images/factoryangle.png" alt="Factory angles"style="float:left; margin:0 20px 0 0; width:175px; height:175px;" />
Also add this in style
#content{margin:0 auto; }
with other properties in content
I think this will do, if not please explain in detail.. :)