I want to have a logo inside of my website with a hyperlink linked to youtube inside of it I did this for more website's I build earlier but somehow this doesn't work in this website maybe it has something to do with layers?
Note: I'll just send my whole website, it isn't too big and I don't mind copying because I'm a student and do this to educate :)
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery-easing.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
<script type="text/javascript">
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction: 'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction: 'right'},1000);
$(".slider #"+count).delay(5500).hide("slide", {direction: 'left'},500);
if(count == sc){
count = 1;
}else{
count=count + 1;
}
},7000);
};
$( document ).ready(function() {
$('#menubar, #leftmenu, #rightmenu').on('click', 'a', function(e) {
e.preventDefault(); // prevents default scrolling
var y = $(this.hash).offset().top; // grabs the #id element offset location
$('html,body').animate({scrollTop: y-150},750); // animate the scroll
});
});
</script>
</head>
<body onload="Slider();">
<header>
<div id="title">
<h1 class="headertext">Test Website</h1>
</div>
<div id="menubar">
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
</ul>
</div>
</header>
<div class="hide"></div>
<div id="container">
<div id="rightmenu">
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle">
</a>
</div>
</ul>
<div id="righttriangle1"></div>
<div id="righttriangle2"></div>
<div id="righttriangle3"></div>
<div id="righttriangle4"></div>
<div id="righttriangle5"></div>
</div>
<div id="leftmenu">
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
</ul>
<div id="lefttriangle"></div>
</div>
<div id="content">
<h1>Contentpage</h1><br>
Picture slideshow
<br>
<br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadow"></div>
<div id="naturepictures">
<h1>Pictures</h1>
<br>
<img style="width: 800px; height: 600px; margin-left: -310px;" src="images/nature1.gif"/>
</div><!--hello end-->
</div><!--content div-->
</div>
</body>
</html>
CSS code:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #fdf7e3;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,0.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 20px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -20px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1400px;
}
#rightmenu{
position: fixed;
margin-top: 23px;
margin-left: 1280px;
padding-top: 20px;
float: left;
width: 160px;
height: 530px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#rightmenu ul li{
display: block;
padding-bottom: 50px;
}
#rightmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
margin-left: -15px;
}
#rightmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#righttriangle1 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-top: -410px;
margin-right: 160px;
}
#righttriangle2 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle3 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle4 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle5 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#youtubelogo{
}
#leftmenu{
position: fixed;
margin-top: 23px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 450px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
margin-left: -15px;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#lefttriangle{
margin-top: 112px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
margin-top: 100px;
margin-left: 100px;
width: 1000px;
padding-top: 50px;
padding-left: 160px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
margin-left: 80px;
}
#naturepictures{
color: black;
top: 1200px;
width: 80px;
height: 300px;
text-align: center;
margin-left: 440px;
}
.naturepicture{
height: 400px;
width: 600px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadow{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
Thanks in advance and I hope you can get a solution fast! (It will probably be something stupidly easy :p)
You can't make a <div> element the direct child of a <ul> element. You'll need to wrap the <div> inside of a <li> element first.
Try this instead
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
<li>
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle" />
</a>
</div>
</li>
</ul>
Can you uopload a screenshot?
Safari, Firefox, Chrome and IE approves your code.
Here's a Screenshot.
It is working fine after updating.If you logo related problem then copy and paste the below code instead the previous code!
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle">
</a>
</div>
check your image format from the images folder like .gif,.png etc
Related
I want to move to the text area to align with other fields and then move all these fields to the down of the text "Feel free...." I was trying to use marigin-left, marigin-top, but nothing works. All the time these fields stay in one place. Do not know why.
It has to work on ip 6/7/8 plus resolution.
Could you tell me how can I achieve it?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#tekst {
position: absolute;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-left: 1000px;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-device-width: 500px) {
#profilesign {
width: 1000px;
margin-top: 750px;
margin-left: 400px;
font: Bold 60px/40px Georgia;
letter-spacing: 0;
color: black;
}
img.left {
padding: 0px 40px 20px 40px;
width: 550px;
height: 550px;
margin-left: 550px;
margin-top: 450px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 50px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
#sign a {
background-color: #DCDFDE;
padding: 20px 15px 17px 1px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#logo img {
margin-left: 550px;
text-align: center;
width: 650px;
}
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size: 100% 3000px;
width: auto;
}
.row {
width: 2500px;
display: grid;
grid-template-columns: 0% 80%;
}
.main-nav {
margin-left: 100px;
margin-top: 250px;
float: left;
display: inline-flex;
list-style: none;
}
.main-nav li a {
border-right: 3px solid black;
color: #000000;
text-decoration: none;
font: Bold 58px/45px Arial;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
article input {
width: 400px;
height: 70px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 45px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 700px;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div id="lala">
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
</div>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}
I dont want to be able to scroll my page from left to right. I want my page to look like what it looks like when scrolled completely to the left. I have tried making the body width 100% but i am not not sure that is what i am supposed to do.
<!doctype html>
<html>
<head>
<title>Noam's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
margin: 0;
background-color: white;
font-family: Arial,Helvetica,freesans,sans-serif;
overflow: scroll;
width: 1400px;
}
#topbar {
background-color:#FFFFFF;
width: 100%;
height: 40px;
color: black;
border-bottom: 1px solid #CCCCCC;
}
.fixedwidth {
width: 100%;
margin:0 auto;
}
#logodiv img {
width: 5.1875em;
height: 1.4375em;
}
#logodiv {
padding-top: 8.5px;
padding-left: 80px;
float: left;
border-right: 1px solid #CCCCCC;
padding-right: 10px;
height: 31px;
}
#signindiv img {
width: 1.46470588em;
height: 1.2075em;
position: relative;
top: 2px;
}
#signindiv {
font-weight: bold;
font-size: 0.9em;
padding: 10px 0 10px 20px;
float: left;
width: 150px;
border-right: 1px solid #CCCCCC;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin-top: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
padding: 14px 20px 10px 20px;
height: 100%;
border-right: 1px solid #CCCCCC;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 24px;
position: relative;
border: none;
width: 100%;
background-color: #e4e4e4;
font-family: Arial,Helvetica,freesans,sans-serif;
font-weight: bold;
font-size: 0.9em;
padding-left:10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px 24px;
}
.break {
clear: both;
}
#newsbar {
background-color:#BB1919;
width: 100%;
height: 95px;
color: black;
}
#newsbar p{
padding-left: 80px !important;
margin: 0;
padding: 5px 0 0 6px;
color: white;
}
#newsheader{
font-size: 2.7em;
}
#topicmenu {
}
#topicmenu ul {
background-color: #A91717;
padding: 5px 0 0 70px;
margin-top: 7px;
height: 29px;
}
#topicmenu li {
list-style: none;
float: left;
background-color: none;
border-right: 1px solid #BB4545;
padding: 0 10px 0 10px;
margin-top: 4px;
color: white;
}
#white{
border-bottom: 4px solid white;
border-right: none !important;
margin-top: 7px !important;
}
#nextToWhite{
border-left: 1px solid #BB4545;
}
#moveUp{
margin-top: -1px;
margin-bottom: 1px;
}
#locationbar ul{
background-color: none;
height: 35px;
width: 911px;
padding: 7px 81px 0 75px;
margin: 5px 136px 0 0px;
}
#locationbar li{
list-style: none;
float: left;
padding: 0 12px 0 12px;
font-family: inherit;
border-right: 1px solid #DCDCDC;
font-size: 0.9em;
}
#selectedlocation{
font-weight: bold;
font-size: 1.1em !important;
border-right: none !important;
margin-top: -2px;
border-bottom: 4px solid #BB1919;
padding-left: 8px !important;
}
#nextToUkLocation{
border-left: 1px solid #DCDCDC;
}
#primarycolumn{
background-color: cornflowerblue;
width: 100%;
padding-left: 80px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" />
</div>
<div id="signindiv">
<img src="images/signin.png" /> Sign In
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="search"/>
</div>
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
<p id="newsheader">NEWS</p>
<div class="break"></div>
<div id="topicmenu">
<ul>
<li>Home</li>
<li>Video</li>
<li>World</li>
<li>US & Canada</li>
<li id="white">
<div id="moveUp">UK</div></li>
<li id="nextToWhite">Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li style="border-right:none">More</li>
</ul>
</div>
</div>
</div>
<div class="break"></div>
<div id="locationbar">
<div class="fixedwidth">
<ul>
<li id="selectedlocation">UK</li>
<li id="nextToUkLocation">England</li>
<li>N. Ireland</li>
<li>Scotland</li>
<li>Wales</li>
<li style="border-right: none">Politics</li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="primarycolumn">
<div class="fixedwidth">
<h2>UK to accept 'thousands' more refugees</h2>
<img src="images/headlineimage.jpg" />
</div>
</div>
</div>
</div>
</body>
</html>
Although your styling has many fundamental flaws, if all you're trying to achieve is to prevent horizontal scrolling, then this should suffice:-
Replace
overflow: scroll;
in -> body {} to
overflow-y: scroll;
overflow-x: hidden;
So, your body styling changes to
body{
margin: 0;
background-color: white;
font-family: Arial,Helvetica,freesans,sans-serif;
overflow-y: scroll;
overflow-x: hidden;
width: 1400px;
}
try to make the container width:100% . then give the width and position value of the elements inside the container relative to the container in percent . hope it will work
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>
In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the same styles.
HTML code:
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
CSS code:
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
The anwser is simple. add margin:0px; to your #topBar ul. Here you have a working fiddle
This is a simple way you just put margin padding on top see the code.
*{
padding: 0px;
margin: 0px;
}
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
What you see is the padding of the <ul> in the topbar. This happens because many HTML elements have their own default style. Also, these defaults are browser specific, which doesn't really help you if you want to create a layout that is pixel-precise against multiple browsers.
What I mostly to is simply reset all paddings and margins of all elements:
* {
margin: 0;
padding: 0;
}
Some will say that the above technique leads to heavier load of the rendering engine but I never had any issue by doing this. Anyway, you can find a lot of 'CSS reset' scripts that are more selective and are faster. Search other questions on SO tagged css-reset and also check this Q/A
Some popular CSS-reset sources:
http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/