I am making my own website for the branch that I'm in, I have stumbled upon a problem that I can't resolve.
I have made this code with HTML/CSS and what I want is that my advertisement div can be placed inside of my container div.
CSS:
#body {
font-family: verdana;
background-color: #4C4C4C;
}
#container {
background-color: #FFFFFF;
height: 900px;
width: 1250px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative;
}
#header {
background-image: url("company_banner.jpg");
background-repeat: no-repeat;
background-position: right top;
vertical-align: middle;
width: 1250px;
height: 225px;
position: relative;
}
#streep {
background-color: #FC001E;
margin-top: 0px;
width: 1250px;
height: 1px;
position: relative;
}
#nav {
margin-top: 0px;
margin-left: 0px;
width: 180px;
height: 220px;
position: absolute;
}
#advertisement{
background-image: url("advertisement.jpg");
background-position: top;
width: 200px;
height: 180px;
margin-top: opx;
position: relative
}
#content {
margin-top: 0px;
margin-left: 225px;
width: 1025px;
height: 625px;
position: relative;
}
#footer {
background-color: #FC001E;
margin-bottom: 0px;
width: 1250px;
height: 50px;
position: relative;
}
h1 {
position: absolute;
top: 65px;
left: 25px;
}
ul#menu {
padding: 10px;
list-style-type: none;
margin-top: 0px;
border-radius: 4px 4px 4px 4px;
}
ul#menu li {
padding: 10px;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
border-radius: : 4px 4px 4px 4px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #FC001E;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Nijhuis PC</title>
</head>
<body id=body>
<div id=container>
<div id=header>
<h1>
company name
</h1>
</div>
<div id=streep></div>
<div id=nav>
<ul id=menu>
<li><a href=index.html>Home</a>
</li>
<br>
<li><a href=services.html>services</a>
</li>
<br>
<li><a href=whoweare.html>who we are</a>
</li>
<br>
<li><a href=contact.html>Contact</a>
</li>
<br>
</ul>
</div>
<div id=content>
welcom to the company's main website
<br>
<br>
</div>
<div id=advertisement></div>
<div id=footer></div>
</div>
</body>
</html>
I want my advertisement div under the navigation div.
Can you guys help me?
One alternative is to put it in the #nav after the UL.
Related
So I've been stuck on this issue for over a week now and it's driving me crazy. I want to position my footer at the bottom of my web page. For some reason, it just wants to float in the middle of the page, right underneath my last div. I've done a lot of research and tried a million different things, and none of them have given me the results that I need.
Here are a few of the solutions that I've tried:
I played around with the position property, setting it to 'absolute', 'relative' and 'fixed'. 'Relative' pushed the footer down, but also pushed the content underneath it down as well. 'Absolute' worked in positioning it at the very bottom, but for some reason it cut the width of the footer off. (I tried manually adjusting the width back, but no luck). Same thing with 'fixed'.
I set the margins and padding of the body and html content to 0.
I set the height of the body to 100%.
I checked to make sure all tags were closed.
I tried placing the footer outside of the body.
I've tried creating new divs before and around the footer.
At this point, I'm not sure what the issue is. Can someone assist me?
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
In your css Change
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
to
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
Or you can try
.footer p {
padding-bottom: 0px !important;
}
You have a p element inside your footer that has padding-bottom: 200px;.
You will need to remove it or change the style of the p that inside a footer.
Try this. This will stick your footer at the bottom of the page. I also removed the padding of the paragraph inside of your footer.
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.footer p {
padding-bottom: 0;
}
Working fiddle : https://jsfiddle.net/zrbzf22v/
Change your html like that :
<footer class="footer">
<p style=" bottom: 0px;
padding-bottom: 0px; ">Here's the footer</p>
</footer>
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
bottom: 0;
}
p {
padding-bottom: 0px;
}
Check this Your footer at bottom
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
margin:0px;
width:100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
I use this and i have tested it in your project. its working
footer{
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
text-align: center;
}
I can't get the background-image to display. I thought adding the min-width might make the image visible in case it was really small, but that didn't work. I've checked the url. It works as a normal image if put straight into the body.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
</head>
<body>
<div id = backs </div>
<div class = header>
<p>
<img src = http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko>
</p>
<div class = navigation>
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<p>
<div class = main>
<p1> Our Eggs
</p1>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width:800px;
padding-left: 150px;
position: absolute;
}
.main {
color: black;
font-size: 60px;
position: relative;
top: 150px;
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
min-width: 100%;
height: 900px;
border: 2px solid red;
padding-top: 100px;
}
The format for the path to an image in background-image is url(...) not url (...)
So your line should be
background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
I think you should use bakground-image property rather than content
background-image:url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
this is your css
.main {
color: black;
font-size: 60px;
position: relative;
top: 150px;
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
min-width: 100%;
height: 900px;
border: 2px solid red;
padding-top: 100px;
}
you have space between url and (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg); in the background-image:. Remove the space and it should work.
Hi just remove the space before background-image:url and then check it (code as below) and close the div tag in <div id=backs> </div>
background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
demo
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width:800px;
padding-left: 150px;
position: absolute;
}
.main {
background: rgba(0, 0, 0, 0) url("http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg") repeat scroll 0 0;
border: 2px solid red;
color: black;
font-size: 60px;
height: 900px;
min-width: 100%;
padding-top: 100px;
position: relative;
top: 150px;
}
<div id ="backs"></div>
<div class ="header">
<p>
<img src = "http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko" alt="">
</p>
<div class ="navigation">
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<div class ="main">
<p1> Our Eggs
</p1>
</div>
Below my Navigation Bar I have a picture that is covered by a gradient, which fades into the div below it. After this div I have a footer.
I am having a problem trying to embed a YouTube video over my picture div and my gradient div that will extend slightly over my main div.
Essentially, the div that holds my YouTube video needs to go on top of these divs and be positioned in the center of the screen (from left to right), and be responsive.
However, I can't seem to be successful in doing this and all of the tutorials on responsive YouTube videos isn't working.
Can anyone help me please? Thanks!
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<link href="images/favicon.ico" rel="icon" />
<title>Aduro Pictures</title>
</head>
<body>
<header>
<div id="logo_home">
<img id="logo" src="images/logo.jpg" alt="logo">
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="main_wrapper">
<div id="image_container"></div>
<div id="gradient"></div>
<div id="main_container"></div>
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016.</p>
</footer>
</body>
</html>
CSS Code:
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 17.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#main_wrapper {
height: 2000px;
width: 100%;
}
#image_container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 580px;
background: url('../images/background5.jpg') no-repeat;
}
#gradient {
position: absolute;
top: 90px;
left: 0px;
width: 100%;
height: 580px;
background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%;
}
#main_container {
background-color: #1d1d1d;
height: 1420px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
top: 0px;
position: relative;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
margin: 0px;
padding: 0px;
}
Also, I've probably made some mistakes, or have positioned things incorrectly, in which case I apolgize ahead of time. I am new to HTML & CSS.
Thanks!
Simply add a position: absolute to your div#video_container: https://jsfiddle.net/1aa87g9b/
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.. :)