I'm trying to implement a sticky footer as suggested here:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
I did everything as suggested however not at the bottom of the page/content... see here http://tinyurl.com/eehelp.
Hope someone can help me to fix this so that the footer sticks to the bottom for everything.
Index.php
<body onload="setLeftRightBar()">
<div id="wrap">
<div id="header">
<?php include("header.php"); ?>
<div id="bar">
<div id="menuholder">
<div id="menu">
{ Some content }
</div>
</div>
</div>
</div>
<div id="content">
<div id="left_content">
<?php include('left_sidebar.php'); ?>
</div>
<div id="main_content">
<?php include("path.inc.php"); ?>
<div style="display:none;">
<?php echo "<!--#&88;#&90;#&101;#&114;#&111;". "#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?>
</div>
<?php echo $content;unset($content);?>
</div>
<div id="right_content">
{ Some content }
<div class="right_top" align="center">
<?php echo $lang['SEARCH']; ?>
<?php include("search.inc.php"); ?>
</div>
</div>
</div>
<div style="clear:both" ></div>
<div style="clear:both" ></div>
</div>
<div id="footer" align="center">
<div class="footer_menu">
<li>About us</li> <li>|</li>
<li><?php echo $lang['TERMS_OF_USE']; ?></li><li>|</li>
<li><?php echo $lang['PRIVACY_POLICY']; ?></li><li>|</li>
<li>Contact us</li> <li>|</li>
</div>
<div class="footer_menu2">
<strong>Copyright © 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> - <?php echo $site_name; ?></strong>
</div>
</div>
</body>
Style2.css
html { height:100%;-webkit-text-size-adjust: 70%; }
body { height:100%;padding:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
b { font-size:14px;}
#wrap { width:100%; height:100%; min-width:800px; min-height:100%; max-width:1600px; max-height:1200px; background-color:#FFFFFF; padding: 0;}
#header
{
padding:0 ;
height:250px;
}
#logo{
/* notch below*/
padding-top: 25px;
height:10px;
background-color: white;
float:left;
font-size: 14px;
font-weight: bold;
}
#logo a {
color: black;
text-decoration: none;
}
#logo a:hover {
color: #DF971E;
text-decoration: none;
}
#bar{
height:25px;
width:30%;
min-width:360px;
background-color:#cccccc;
padding-top:0;
}
#menuholder, #bar{
float:right;
}
#menu{
width:auto;
padding-right:15px;
}
#searchbar { width:100%; height:auto;padding-top:20%;}
#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
.sarch_box { width:10%; height:auto; float:left; padding-left:1%;font-size:75%;}
.box_1 { width:20%; height:auto; float:left;font-size:85%;}
.box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}
.box_2 {width:2%; height:auto; float:left;}
#content { width:90%; min-width:790px; height:auto; padding-left:10%; padding-top:0px; overflow:auto; padding-bottom: 150px; }
#left_content { width:0%; min-width:0px;height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding-left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#main_content { width:59%; min-width:600px;height:auto;float:left; }
.main_content_header {padding-left:2%;color:#BB532E;font-size:100%;font-family:Arial, Helvetica, sans-serif;font-weight:bold;padding-bottom:5%;}
.content_header {width:70%; height:auto; padding-left:3%;}
.left_1 {padding-left:2%;width:.05em; height:100px;background-image:none;background-repeat:repeat-y;float:left;padding-left:2px; }
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat-y;float:left; }
.left_content_middle {width:95%; min-width:550px;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px} <!-- background:#ECF5F4; -->
.content_title {padding:2%; text-align:center; color:#BB532E; font-weight:bold;font-size:95%;font-family:Arial, Helvetica, sans-serif; }
.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
.left_2 { padding-left:3%; width:21.5%; min-width:130px;height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}
#right_content { width:20%;min-width:150px;height:auto; float:left;padding-left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}<!-- background-color:#ECF5F4; -->
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
.right_portion { width:45%; height:auto; float:left;}
.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
.gap {width:35%;}
#footer {width:100%;padding:auto;text-align:center;background-color: #3399ff; line-height:40px; color:white; position: relative;
padding-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
.footer_menu {
color: white;
height: 1.2em;
}
.footer_menu2 {
color:gray;
font-size: 13px;
padding-top: 21px;
width: 100%;
}
.footer_menu li {
color: white;
padding-right: 1%;
display: inline;
}
.footer_menu li a { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu strong { font-weight:lighter; color:#666}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
padding-top:-32767px;/* thank you Erik J - negate effect of float*/
}
My gosh. A lot of code for a simple fix.
Try this:
I created a simple jsFiddle for you to refer to.
http://jsfiddle.net/xtYYn/
Hope this fixes the issue,
Thanks,
Aaron
Related
As mentioned in the title I am making a website for school, and part way through creating it I discovered that when I displayed the page on a screen with a different resolution that the elements on my site do not line up correctly. I am fairly new to html/css and am stuck at how to fix this. Any advice or help would be greatly appreciated.
This is the body section of my html file:
<a href='index.html'>
<img src="Images\Logo\Logopng.png" alt="Explore Germany"/>
</a> <!-- Inserting Logo at top of page -->
<div id="whitespace">
<a> <img id="twitt" src="Images\images\twitter_web.png"> </a>
<a> <img id="email" src="Images\images\email_web.png"> </a>
</div>
<nav>
<div id="top" class = "line black"></div> <!-- This is the black line just above the links at top of page -->
<ul> <!-- A list with links to external pages for my header -->
<li><a id="menu" href="why.html">Why Germany?</a></li>
<li><a id="menu" href="where.html">Where In Germany?</a></li>
<li><a id="menu" href="language.html">German Language</a></li>
<li><div class="box grey"></div></li>
</ul>
<div id="bottom" class = "line black"></div> <!-- This is the black line just below the links at top of page -->
</nav>
</header>
<img id="map" src="Images\images\Map.png">
<img class="Icon" id="Hamburg" src="Images\images\Icon.png"> <div id="Hamburg_Name">Hamburg</div>
<img class="Icon" id="Berlin" src="Images\images\Icon.png"> <div id="Berlin_Name">Berlin</div>
<img class="Icon" id="Dresden" src="Images\images\Icon.png"> <div id="Dresden_Name">Dresden</div>
<img class="Icon" id="Dusseldorf" src="Images\images\Icon.png"> <div id="Dusseldorf_Name">Dusseldorf</div>
<img class="Icon" id="Cologne" src="Images\images\Icon.png"> <div id="Cologne_Name">Cologne</div>
<img class="Icon" id="Frankfurt" src="Images\images\Icon.png"> <div id="Frankfurt_Name">Frankfurt</div>
<img class="Icon" id="Munich" src="Images\images\Icon.png"> <div id="Munich_Name">Munich</div>
<div id="info">
<div id="name">Click on an Icon on the<br> map to learn more about that city</div>
<div id="info1"></div>
<img src="" id="cityImg">
<div id="head"></div>
<div id="info2"></div>
</div>
<div id="foot" class="footer black"> <!-- This is for the black box at the bottom which is the footer -->
<nav>
<ul>
<li><a id="wfooter" href="index.html">Home</a></li> <!-- This is a list of the links and lines in the footer -->
<li><a id="wfooter" href="why.html">Why Germany</a></li>
<li><a id="wfooter" href="where.html">Where In Germany</a></li>
<li><a id="wfooter" href="language.html">German Language</a></li>
<li><a id="wfooter2"><i>#Copyright Jack Ryan 2017 Contact: jryan#student.christscollege.com<i></a></li>
</ul>
</nav>
</div>
</body>
And this is my css file:
body {
width: 800px;
height:1200px;
margin:0 auto;
vertical-align: middle;
height:100%;
}
p {
font-size: 15%
font:;
}
header img {
vertical-align: middle;
margin-left: 350px;
margin-top:15px;
max-height: 100px;
max-width:100px;
}
#gate {
max-width: 800px;
margin-left: 0px;
position:relative;
bottom:16px;
}
html {
width:100%;
height:100%;
background-color:black;
}
ul {
list-style-type:none;
margin-left:-40px;
padding: none;
overflow: hidden;
}
#menu {
margin-left:93px;
max-width: 800px;
float:left;
display: block;
padding:12px;
background-color:#dddddd;
text-align: center;
text-decoration: none;
font-family: "Proxima Nova";
color:black;
margin-top:0px;
}
#menu:hover {
background-color: #cccccc;
}
.box {
width:800px;
height: 40px;
}
.grey {
background:#dddddd;
}
.line {
width:800px;
height:2px;
}
.black {
background:#000000;
}
#top {
position:relative;
bottom:-18px;
}
#bottom {
position:relative;
bottom:16px;
}
.back {
width:800px;
height:1225px;
}
.backwhere {
width:800px;
height:935px;
}
.darkgrey {
background:#fefdfd;
}
.side {
position:absolute;
width:10px;
height:10px;
}
.footer {
width:775px;
height:150px;
margin-left:12.5px;
border-radius:12.5px;
}
#body {
width:775px;
margin-left:12.5px;
}
#footer {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
padding:5px;
top:10px;
color:white;
margin-left:5px;
}
#footer2 {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
color:white;
margin-left:15px;
margin-top:20px;
}
#footer:hover {
color:lightgray;
}
#twitt {
position:relative;
margin-left:750px;
top:-125px;
}
#email {
position:relative;
margin-left:695px;
top:-186px;
}
#whitespace {
height:0px;
}
#map {
position:absolute;
left: 270px;
margin-left:0px;
max-height:85%;
max-width:85%;
}
#hamburg {
position:absolute;
top:280px;
left:480px;
}
#hamburg_name {
position:absolute;
top:280px;
left:500px;
font-family:"Proxima Nova";
}
#Berlin {
position:absolute;
top:350px;
left:620px;
}
#Berlin_Name {
position:absolute;
top:350px;
left:640px;
font-family:"Proxima Nova";
}
#Dresden {
position:absolute;
top:425px;
left:640px;
}
#Dresden_name {
position:absolute;
top:425px;
left:660px;
font-family:"Proxima Nova";
}
#Dusseldorf {
position:absolute;
top:435px;
left:360px;
}
#Dusseldorf_name {
position:absolute;
top:435px;
left:380px;
font-family:"Proxima Nova";
}
#Cologne {
position:absolute;
top:460px;
left:380px;
}
#Cologne_name {
position:absolute;
top:460px;
left:400px;
font-family:"Proxima Nova";
}
#Frankfurt {
position:absolute;
top:510px;
left:455px;
}
#Frankfurt_name {
position:absolute;
top:510px;
left:475px;
font-family:"Proxima Nova";
}
#Munich {
position:absolute;
top:620px;
left:550px;
}
#Munich_name {
position:absolute;
top:620px;
left:570px;
font-family:"Proxima Nova";
}
.Icon{
height: 20px;
width: 20px;
}
#info{
position: absolute;
top: 200px;
left: 730px;
background-color: #e6e6e6;
height: 550px;
width: 325px;
border-radius:12.5px;
}
#Name {
font-family:"Proxima Nova";
font-size:25px;
position: absolute;
left:20px;
top:10px;
}
#info1 {
font-family:"Proxima Nova";
font-size:15px;
position:absolute;
left:15px;
top:40px;
}
#info2 {
font-family:"Proxima Nova";
font-size:15px;
position:absolute;
left:15px;
top:320px;
}
#cityImg {
position:absolute;
top:120px;
left:15px;
max-width:300px;
max-height:200px;
}
#head {
font-family:"Proxima Nova";
font-size:25px;
position:absolute;
left:15px;
top:290px;
}
#foot {
position:absolute;
top:760px;
}
#wfooter {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
padding:5px;
top:-5px;
color:white;
margin-left:5px;
}
#wfooter2 {
display: block;
text-decoration:none;
font-family:"Proxima Nova";
position:relative;
color:white;
margin-left:15px;
margin-top:20px;
top:-10px;
}
h1 {
font-family: "Proxima Nova";
color:black;
position:absolute;
font-weight:lighter;
top:175px;
left:300px;
z-index:1;
}
h2 {
font-family: "Proxima Nova";
font-style:normal;
color:black;
font-weight:lighter;
font-size:16px;
position:absolute;
top:220px;
left:300px;
max-width:700px;
z-index:1;
}
#Central_Why {
border-radius:15px;
border:3px solid black;
max-width:775px;
position:absolute;
top:300px;
left:285px;
z-index:0;
border-color:black;
}
#Why_Body {
position:absolute;
font-family:"Proxima Nova";
left:285px;
top:630px;
font-weight:lighter;
}
#Oktoberfest {
position:absolute;
font-family:"Proxima Nova";
left:285px;
top:690px;
font-weight:lighter;
}
there are a few solutions. a simple one would be #media queries. these ask the browser what size it is and then give it different instructions depending on size
for example adding
#media screen and (min-width: 480px) {
body {
width: 600px;
height:1000px;
}
}
now your screen will load a different height and width depending on screen size. you can read more here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here is a set of sizes to work to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
there will always be differences on uses screens so you have to build anticipating that, so test it on lots by resizing your browser or if oyu get more into webdesign using a site like this: http://quirktools.com/screenfly/
also, i'm sorry about all the downvotes. the community here aren't really newbie friendly. its an amazing resource, but more where experienced (/semi experienced) developers come to support each other.. i guess that culture has developed so it doesn't become like a school for teaching basics.
speaking as someone who closed more than one account because my questions we not well received, i'd suggest googling for a forum or slack group specifically for people starting out to get advice and help, there are plenty of devs out there eager to help those just starting out
I'm new to responsive web design, so I'm not sure why this isn't working, but it definitely has something to do with me. I'm not exactly sure how to make this current website "responsive", and I've been trying for a good while. Code shown below. It may help to run it via browser. NOTE: I would like to not use a 3rd party css library like Bootstrap
HTML
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" sizes="16x16" type="image/ico">
<head>
<meta charset="utf-8">
<title>OneClickLearn - Home</title>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent"><h3>Learn the Cascading Style Sheet of web development!<br><br>Start Learning CSS <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn data storing in web development!<br><br>Start Learning PHP <em>now</em></h3>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3>Create actions and animations!<br>
<br>
Start Learning Javascript <em>now</em></h3>
<button class="blue-btn txt-marginall">Learn Javascript!</button>
</div>
</div>
<div class="sidecontentleft">
<div class="sidecontent">
<h3 class="txt-marginall">Learn how to construct the blocks of a website!<br><br>Start Learning HTML5 <em>now</em></h3>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
/*divs*/
.sidecontentleft {
align-self:center;
height:300px;
width:300px;
float:left;
}
.sidecontentright {
align-self:center;
height:300px;
width:300px;
float:right;
}
.sidecontent {
text-align:center;
height: 300px;
display: table-cell;
vertical-align: middle;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
}
/*buttons*/
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
/*Fonts*/
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
Your help would be appreciated! Thanks!
As much as I can appreciate building responsiveness from the ground up, you'll get a clean, crisp, and simple solution by using Flexbox. For more control, use Bootstrap or Materialize, or another framework. It will also be much quicker. No person in their right mind would frown on going simpler.
.txt-jumbo, which styles the header font, has a default value of 100px. The media query you used specified font-size: -40px for screens wider than 600px. font-size cannot take a negative value.
To make the font smaller on small screens, try something like:
#media (max-width: 600px) {
.txt-jumbo {
font-size: 50px;
}
}
where max-width: 600px means that the styles contained apply to screens less than 600px wide.
There are several ways to make the navigation "collapse". To make the links stack, make them inline-block elements and set their widths to 100%.
#media (max-width: 600px) {
li {
display: inline-block;
width: 100%;
}
}
When using a screen less than 600px wide, the links will now take up the entire width of the screen. display: inline-block allows them to stack.
1)For Header I use 2 Media Query Like This :
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
2)For navbar I use % instead of px.Like this :
li {
margin: 10px 2% 10px 1px;
//More Code
}
li a {
padding: 5% 7%;
//More Code
}
3)For Footer Information Languages,I have changed your code a little bit.
Full Code:
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
body {
margin:0;
padding:0;
}
/*nav*/
#media (min-width:600px) {
.txt-jumbo {
font-size:-40px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float:left;
margin: 10px 2% 10px 1px;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 5% 7%;
}
li a:hover {
background-color: #111;
}
.head {
width:100%;
height:350px;
background-color:#05D7C6;
color:white;
text-align:center;
}
.centered-divcontent {
text-align:center;
height: 350px;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.green-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#04D43C;
border:none;
color:white;
}
.green-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00F040;
border:none;
color:white;
cursor:pointer;
}
.blue-btn {
height:40px;
width:auto;
border-radius:5px;
background-color:#05D7C6;
border:none;
color:white;
}
.blue-btn:hover {
height:40px;
width:auto;
border-radius:5px;
background-color:#00E9D6;
border:none;
color:white;
cursor:pointer;
}
.white-btn {
border-radius:5px;
height:40px;
width:auto;
text-align:center;
border: #BFBFBF 1px solid;
text-decoration:none;
color:black;
background-color:white;
}
.txt-jumbo {
font-size:100px;
}
.txt-centered {
text-align:center;
}
.txt-margin {
margin-left:25px;
}
.txt-marginall {
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}
.con {
margin-top: 10px;
width: 100%;
clear: both;
}
.content {
padding: 10px;
}
.box {
width: 30%;
text-align: center;
float: left;
box-sizing: border-box;
}
h1 {font-family: 'Source Code Pro', monospace;}
h2 {font-family: 'Source Code Pro', monospace;}
h3 {font-family: 'Source Code Pro', monospace;}
h4 {font-family: 'Source Code Pro', monospace;}
h5{font-family: 'Source Code Pro', monospace;}
h6 {font-family: 'Source Code Pro', monospace;}
a {font-family: 'Source Code Pro', monospace;}
p {font-family: 'Source Code Pro', monospace;}
#media screen and (max-width:803px) {
.centered-divcontent {
font-size: 50px;
}
}
#media screen and (max-width:415px) {
.centered-divcontent {
font-size: 30px;
}
}
#media screen and (max-width:920px) {
.sidecontentleft {
width: 50%;
box-sizing: border-box;
}
}
#media screen and (max-width:650px) {
.box {
width: 100%;
float:none;
padding: 20px;
}
.content {
width: 70%;
margin: auto;
}
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="head">
<center>
<h1 class="centered-divcontent txt-jumbo">OneClickLearn</h1>
</center>
</div>
<div class="con">
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML <em>now</em></h4>
<button class="green-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
<div class="box right">
<div class="content">
<h3>Learn the Cascading Style Sheet of web development!</h3>
<h4>Start Learning <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn CSS!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>LLearn data storing in web development!</h3>
<h4>Start Learning PHP <em>now</em></h4>
<button class="green-btn txt-marginall">Learn PHP!</button>
</div>
</div>
</div>
<div class="con">
<div class="box right">
<div class="content">
<h3>Create actions and animations!</h3>
<h4>Start Learning Javascript <em>now</em></h4>
<button class="green-btn txt-marginall">Learn JavaScript!</button>
</div>
</div>
<div class="box left">
<div class="content">
<h3>Learn how to construct the blocks of a website!</h3>
<h4>Start Learning HTML5 <em>now</em></h4>
<button class="blue-btn txt-marginall">Learn HTML5!</button>
</div>
</div>
</div>
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.
I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.
I have a web page that is using a CSS style sheet. When I run the page on localhost, it works fine on IE, Firefox and Google Chrome.
But when I upload the page and the CSS sheet, doesn`t work in IE but work in Firefox and Google Chrome.
This is my page code:
<div id="container">
<div id="header">
<h1><img src="../img/logo.png" alt="rattle me" class="png" /></h1>
<div>
</div>
<br class="clear" />
<?php
if(isset($_POST['err']))
echo "<script>alert('Invalid Captcha ...')</script>";
?></div>
<div id="content">
<div class="text">
<h2>Support</h2>
<form action="verify.php" id="contact" onsubmit="return validateForm();" method="post">
<div id="form">
<table>
<tr style="height:75px">
<td><div style="width:75px">Name:</div></td>
<td><div class="input"><input type="text" value="<?php echo (isset($_POST['usrName']))?$_POST['usrName']:"Your Name"; ?>" name="contact[name]" id="contactName" onfocus="clearInputValue(this,'Your Name')" onblur="setInputValue(this,'Your Name')"/></div></td>
</tr>
<tr style="height:75px">
<td><div>Email:</div></td>
<td><div class="input"><input type="text" value="<? echo (isset($_POST['usrEmail']))?$_POST['usrEmail']:"Your E-Mail"; ?>" name="contact[email]" id="contactEmail" onfocus="clearInputValue(this,'Your E-Mail')" onblur="setInputValue(this,'Your E-Mail')"/></div></td>
</tr>
<tr style="height:75px">
<td><div>Phone:</div></td>
<td><div class="input"><input type="text" value="<? echo (isset($_POST['usrPhone']))?$_POST['usrPhone']:"Your Phone Number"; ?>" name="contact[phone]" id="contactPhone" onfocus="clearInputValue(this,'Your Phone Number')" onblur="setInputValue(this,'Your Phone Number')"/></div></td>
</tr>
<tr style="height:150px">
<td><div>Message:</div></td>
<td height="50px"><textarea type="text" style="width:263px; height:25px; font:bold 14px Arial, Helvetica, sans-serif; color:#9F9F9F; outline:0 none; background:none; padding:9px 10px 75px 10px;" name="contact[message]" id="contactMessage" onfocus="clearInputValue(this,'Your Message')" onblur="setInputValue(this,'Your Message')"><? echo (isset($_POST['usrMsg']))?nl2br($_POST['usrMsg']):"Your Message"; ?></textarea></td>
</tr>
<tr style="height:75px">
<td><div>Human Verification:</div></td>
<td>
<?php
require_once('recaptchalib.php');
$publickey = "6Le4hb8SAAAAAKyDYU31NJ1KsROl4sxUW90coeea";
echo recaptcha_get_html($publickey);
?>
</td>
</tr>
<tr style="height:75px">
<td colspan="2"><div class="input" style="background:none"><button type="submit"><span class="button large">Submit</span></button></div></td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
</div>
<div id="footer">
<div class="wrap">
<ul>
<li>Home .</li>
<li>Terms of Service .</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
and this is my CSS file:
html, body {
height: 100%;
}
body {
background: url(../../img/bg.jpg) repeat-x top #f0f0f0;
color:#000;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a {
color:#5f2f80;
}
.left {
float:left
}
.right {
float:right
}
.clear {
display:block;
clear:both;
visibility:hidden;
height:0px;
border-width:0;
margin:0;
padding:0;
font-size: 0px;
}
.button, .button:visited {
background: #d46f1d url(../../img/overlay.png) repeat-x;
display: inline-block;
padding: 5px 15px 5px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
text-transform:uppercase;
}
.button:hover {
background-color:#ff6600;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 15px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited {
font-size: 20px;
padding: 6px 18px 5px;
}
.super.button, .super.button:visited {
font-size: 36px;
padding: 8px 24px 9px;
}
#container {
width:660px;
margin:0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#header {
padding:20px 0;
}
#header h1 img {
display:block;
float: left;
}
#header div {
float: right;
width: 424px;
padding-top: 84px;
}
#header p {
font-weight: bold;
font-size: 18px;
}
#header p span {
color: #5f2f80;
}
#content {
padding-bottom:20px;
}
#content .box {
padding-top:20px;
}
#content .box p {
text-align:justify;
}
#content p {
line-height:140%;
padding-bottom:12px;
}
#content h2 {
font-size:18px;
padding-bottom:18px;
}
#content #swf {
width:640px;
margin:0 auto 20px auto;
border:solid 10px #85796F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#content #swf object {
display:block;
}
#content .text {
float:left;
width:424px;
line-height:140%;
}
#content .text h6 {
font-size:14px;
padding-bottom:14px;
}
#content .text .input {
background:url(../../img/bg-input.gif) no-repeat;
width:263px;
height:27px;
display:block;
float: left;
padding:9px 10px 0 10px;
}
#content .text .input input {
border:0;
background:none;
width:100%;
text-align:center;
font:bold 14px Arial, Helvetica, sans-serif;
outline:0 none;
color: #9F9F9F;
}
#content .text button {
float: right;
background:none;
border:0;
cursor:pointer;
}
#content .app {
float:right;
}
#content .app img {
display:block;
}
#footer, .push {
height: 50px;
}
#footer {
border-top:solid 1px #85796F;
}
#footer .wrap {
width: 660px;
margin: 0 auto;
}
#footer .img {
float: right;
padding-top:15px;
}
#footer ul {
text-align:left;
padding-top:15px;
}
#footer ul li {
display:inline;
color:#57247b;
}
#footer ul li a {
letter-spacing:normal;
text-decoration:none;
color:#57247b;
}
#footer ul li a:hover {
color:#000;
}
I'm not sure about how they've set up IE9 but I know that IE8 automatically turned on compatibility mode for any site in the 'intranet' zone. Could it be that when you are viewing the site on your local machine you are in this zone and therefore compatibility mode is enabled?