my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).
Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}
Related
I am making the website and attaching the current situation as in screenshot
as you can see that the background images is not spreading throughout the body. Anyone can figure it out
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1>Schooling india</h1>
<nav>
<ul>
<li class="current">Home Page</li>
<li>
<div class="dropdown">About Us
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Admissions
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Rules
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Info Corner
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Achievements
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Gallery
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Contact
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
</ul>
</nav>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem">
<!-- <input type="text" placeholder="Search">
Search</div> -->
<script type="text/javascript">
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<!-- <script > var date=new Date();
document.write(date);</script> -->
</fieldset>
</form>
</div>
</header>
<div class="container">
<aside>
<h3>Categories</h3>
<ul class="categories">
<li><span>Programs</span></li>
<li><span>Student Info</span></li>
<li><span>Teachers</span></li>
<li><span>Admissions</span></li>
<li><span>Administration</span></li>
<li><span>Basic Information</span></li>
<li><span>Vacancies</span></li>
<li class="last"><span>Academic Calendar</span></li>
</ul>
<form action="#" id="newsletter-form">
<fieldset>
<div class="rowElem">
<h2>School lettter</h2>
<input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
<div class="clear">UnsubscribeSubmit</div>
</div>
</fieldset>
</form>
<h2>Academic <span>Calender</span></h2>
<ul class="news">
<li><strong>June 30, 2017</strong>
<h4>1<sup>st</sup> parents-teacher meeting</h4>
parents are requested to be present by 11:00 am sharp </li>
<li><strong>June 14, 2017</strong>
<h4>Start of new term</h4>
Students should be present on the 1st day timings are from 8:00 am to 2:00 pm </li>
<li><strong>May 29, 2017</strong>
<h4>Result declaration</h4>
Report card distribution will start at 9:00pm</li>
<li>
<h4>See more...</h4></li>
</ul>
</aside>
<section id="content">
<div id="banner">
<h2>Educating <span>India <span>Since 1992</span></span></h2>
</div>
<div class="inside">
<h2>Recent <span>News</span></h2>
<ul class="list">
<li><span><img src="images/icon1.png"></span>
<h4>About Us</h4>
<p>This is the region wherein you can give a brief description of your school and its pros. Maybe you can give a read more option too.</p>
</li>
<li><span><img src="images/icon2.png"></span>
<h4>Our Branches</h4>
<p>We have branches in following areas<br><ul style="color: #008cc4">
<li><strong>Branch 1</strong></li>
<li><strong>Branch 2</strong></li>
<li><strong>Branch 3</strong></li>
<li><strong>Branch 4</strong></li></ul></p>
</li>
<li class="last"><span><img src="images/icon3.png"></span>
<h4>Student’s Life</h4>
<p>In this region you can include the alumini students and their profile, recent performance of students in competitions or olympiads</p>
</li>
</ul>
<h2>Move Forward <span>With Your Education</span></h2>
<p><span class="txt1">XYZ school</span>,our school follows the moto of jai Jagat: praise the world. We strive to provide education for everyone</p>
<div class="img-box"><img src="images/1page-img.jpg">Harbouring students from all over the city, with its distingused faculty and staff, we strive to provide excellent education with appropriate details and diversity in knowledge to prrepare better citizens fro a better tomorrow. Having eastablished in 1992, our schoolhas crossed many milestones and from time to time proved its worth by winning competitions and olympiad all over the world</div>
<p class="p0"></p>
</div>
</section>
</div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2017 SiteName - All Rights Reserved</p>
<p class="rf">Design by Rohit Jaiswal</p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Following is the style sheet
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#454545;
background-image:url(../images/tail-middle.jpg) repeat-y ;
/*background-image: no-repeat;*/
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
}
.dropdown:hover .dropbtn {
background-color: #white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
html {
min-width:940px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:940px;
overflow:visible;
font-size:.875em;
padding-bottom:176px;
}
header {
background:url(../images/header-bg.jpg) no-repeat center top;
min-width:940px;
}
header .container {
height:194px;
position:relative;
padding:0;
}
section#content {
float:left;
width:691px;
}
aside {
width:219px;
float:left;
margin-right:30px;
padding:5px 0 0 0;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
min-width:940px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.categories {
padding-bottom:37px;
}
.categories li {
font-weight:bold;
font-size:.857em;
padding-bottom:8px;
margin-bottom:6px;
background:url(../images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
background:none;
padding:0;
margin:0;
}
.categories li span {
display:block;
padding-left:15px;
height:1%;
background:url(../images/marker.gif) no-repeat left 5px;
}
.categories li a {
text-decoration:none;
color:#008cc4;
}
.categories li a:hover {
color:#ff7b01;
}
.news {
margin-top:-25px;
}
.news li {
padding-top:25px;
line-height:1.429em;
}
.news li strong {
font-size:.857em;
color:#454545;
display:block;
padding-bottom:3px;
}
.news li a {
color:#008cc4;
text-decoration:none;
font-weight:bold;
}
.articles {
margin-top:-18px;
}
.articles li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.429em;
padding-top:18px;
}
.articles li img {
float:left;
margin-right:22px;
}
.sitemap {
padding-bottom:15px;
}
.sitemap li {
padding:0 0 5px 16px;
background:url(../images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
padding-top:5px;
margin-bottom:-5px;
}
.list {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.list li {
float:left;
width:175px;
margin-right:53px;
}
.list li.last {
margin:0;
}
.list li span {
display:block;
text-align:center;
}
.list li h4 {
padding-top:20px;
}
.list li p {
margin:0;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.429em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.429em;
}
.p0 {
margin:0;
}
.address {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.address address {
font-style:normal;
line-height:1.429em;
float:left;
width:248px;
}
.address address strong {
color:#008cc4;
width:94px !important;
width:91px;
float:left;
}
.address .extra-wrap {
float:left;
width:385px;
}
.address p {
margin:0;
}
#banner {
width:691px;
height:299px;
background:url(../images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
color:#fff;
font-size:42px;
text-transform:none;
line-height:1.2em;
padding:75px 0 0 55px;
margin:0;
}
#banner h2 span {
display:block;
margin-top:-12px;
color:#fff;
}
#banner h2 span span {
font-size:30px;
margin-top:-8px;
}
a {
color:#ff7b01;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:473px;
height:63px;
position:absolute;
left:0;
top:4px;
background:url(../images/logo.jpg) no-repeat left top;
}
h2 {
font-size:24px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
h2 span {
color:#8d8d8d;
}
h3 {
font-size:20px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:15px;
}
h4 {
font-size:1em;
color:#008cc4;
margin-bottom:5px;
}
h4 a {
color:#008cc4;
text-decoration:none;
}
h4 a:hover {
color:#ff7b01;
}
.txt1 {
color:#008cc4;
font-weight:bold;
}
.link {
position:absolute;
right:0;
top:159px;
}
header .nav-bg {
background:no-repeat center top;
}
header nav {
position:absolute;
left:0;
top:100px;
}
header nav ul li {
float:left;
font-size:16px;
line-height:1.2em;
text-transform:uppercase;
padding-right:1px;
background:url(../images/divider.gif) repeat-y right top;
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a {
color:#454545;
text-decoration:none;
display:block;
float:left;
text-align:center;
padding:18px 0 20px 0;
background-repeat:no-repeat;
background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
color:#008cc4;
}
header nav ul li a.m1 {
width:95px;
}
header nav ul li.current a.m1 {
background-image:url(../images/m1-act.jpg);
}
header nav ul li a.m2 {
width:80px;
}
header nav ul li.current a.m2 {
background-image:url(../images/m2-act.jpg);
}
header nav ul li a.m3 {
width:85px;
}
header nav ul li.current a.m3 {
background-image:url(../images/m3-act.jpg);
}
header nav ul li a.m4 {
width:60px;
}
header nav ul li.current a.m4 {
background-image:url(../images/m4-act.jpg);
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a.m5 {
width:100px;
}
header nav ul li.current a.m5 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m6 {
width:100px;
}
header nav ul li.current a.m6 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m7 {
width:75px;
}
header nav ul li.current a.m7 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m8 {
width:85px;
}
header nav ul li.current a.m8 {
background-image:url(../images/m5-act.jpg);
}
#content .inside {
padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
border:0;
float:right;
background:#000;
color:#ff7b01;
width:100%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
padding:0;
}
#search-form .rowElem {
height:28px;
position:absolute;
right:0;
top:30px;
}
#search-form input {
width:205px;
background:#fff;
padding:4px 5px 4px 5px;
border:1px solid #d0d0d0;
border-right:0;
color:#454545;
line-height:1.2em;
float:left;
height:18px;
}
#search-form a {
text-transform:uppercase;
color:#fff;
text-decoration:none;
float:left;
background-color:#0087c1;
padding:6px 11px 0 11px;
height:22px;
}
#search-form a:hover {
background-color:#47b6e5;
}
#newsletter-form {
padding-bottom:45px;
}
#newsletter-form fieldset {
background:url(../images/newsletter-bg.gif) no-repeat left top;
width:219px;
height:131px;
overflow:hidden;
}
#newsletter-form .rowElem {
padding:13px 19px 0 17px;
}
#newsletter-form input {
border:1px solid #0086b5;
background:#fff;
color:#8e8e8e;
font-size:.857em;
padding:2px 5px 2px 5px;
width:171px;
margin-bottom:13px;
}
#newsletter-form h2 {
color:#fff;
margin-bottom:13px;
}
#newsletter-form a.fleft {
color:#fff;
position:relative;
top:3px;
}
#newsletter-form a.fright {
display:block;
color:#fff;
border:1px solid #26b6e8;
text-decoration:none;
background-color:#006caa;
padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {
background-color:#47b6e5;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
height:30px;
}
#contacts-form .field.extra {
height:268px;
}
#contacts-form label {
float:left;
width:123px;
font-weight:bold;
color:#008cc4;
}
#contacts-form input {
width:277px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
}
#contacts-form textarea {
width:503px;
height:252px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
overflow:auto;
}
footer {
background:url(../images/footer-bg.png) no-repeat center top;
margin-top:-120px;
min-width:940px;
}
footer .footerlink {
margin:0 auto;
width:940px;
height:60px;
padding-top:60px;
color:#454545;
font-size:.785em;
line-height:1.429em;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#454545;
}
.footerlink a {
color:#454545;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#454545;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
Use
background-size:cover;
to stretch the image across the body. If the body background is not covering the footer,that is because you have defined another backgound for footer in
footer {
background:url(../images/footer-bg.png) no-repeat center top;
/*You need to remove the above line*/
margin-top:-120px;
min-width:940px;
}
Edit2
After seeing your [ comment ], it seems that you're still overriding the body background unnecessarily. Why would you?
Change
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
//The above directive will override the body bg, so just remove it
min-width:940px;
}
to
.wrap {
min-width:940px; // Only this seems a sensible declaration.
}
I'm doing a project on recreating the Google homepage with html and css. I am for the most part finished with the project, but I've noticed a few quirks that are irritating me. I've spent a great deal of time on each of these quirks, but can't get things to way I want them to look. These are the following quirks:
The icon in the top right-hand corner isn't inline with the rest of the text.
For some reason I can't center the buttons properly.
Not sure how to handle the white space surrounding the grey footer.
JSFiddle of The Code
If you have any input on any of the above issues, I would forever be thankful!
<body>
<div id="wrapper">
<div id="header">
<ul class="navbar">
<li class="navli"> +You
</li>
<li class="navli">Gmail
</li>
<li class="navli">Images
</li>
<li class="navli" id="icon">
<img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
</li>
<li class="navli">theonlybrianlie#gmail.com
</li>
</ul>
</div>
<div id="body">
<div class="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="searchbar">
<input type="text" id="search1" />
</div>
<div id="buttons">
<input class="button" id="googlesearch" value="Google Search" type="submit">
<input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
</div>
</div>
<div id="footer">
<div id="leftfoot">
<ul>
<li class="lf"> Advertising
</li>
<li class="lf"> Business
</li>
<li class="lf"> About
</li>
</ul>
</div>
<div id="rightfoot">
<ul>
<li class="rf"> Privacy
</li>
<li class="rf"> Terms
</li>
<li class="rf"> Settings
</li>
</ul>
</div>
</div>
</div>
.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}
For your top right icon not inline with the rest of the menu, i would alter the CSS like this
.navli {
display: inline-block;
font-family: Arial;
float: left;
height: 30px;
line-height: 30px;
}
#icon {
/* margin-top: 10px; */
padding-left: 15px;
/* bottom: 0; */
/* position: relative; */
}
For your buttons not centering:
Add text-align:center; to #buttons
And for the white space on footer:
There's a margin on your body, so change your body,html to this:
body, html {
height: 100%;
margin: 0;
}
UPDATE
Here's the JSFiddle - Full Screen Preview - JSFiddle View
I'll try to answer these as concisely as possible:
1- the heading is inline, and your icon is taller than the rest of the inline elements. play with the margin and padding for your text elements there.
2- place your buttons in a div or section element of their own, and use text-align: center to center them on the page
3- add a class="container-fluid" to your footer element.
I'm trying to create a fixed header that sticks to the top on scroll. I have one wrapper (#topbarwrapper) that should fit 100% across the entire browser. I also have another div wrapper (.topbarcontentWRAPPER ) inside the(#topbarwrapper) which includes logo and navigation (#mainNav). One floats to the left and the other floats to the right. They both float as they should but it seems as if when the browser is resized, the divs move. I want the two divs floating inside to be centered with the entire page. The layout is responsive so the body width is 90%. I spent several days trying to figure this out including research. Any help would be appreciated.
Ideal goal is to have the header with 100% width fixed and centered.
Layout View:
http://s30.postimg.org/so036qarl/Screen_shot_2014_03_10_at_1_53_42_AM.jpg
HTML:
<body>
<div id="topbarWRAPPER">
<div class="topbarcontentWRAPPER">
<nav id="mainNav" role="navigation">
<h2 class="hidden">Main Site Navigation</h2>
<?php if ($this->countModules('nav')): ?>
<jdoc:include type="modules" name="nav" />
<?php endif; ?>
</nav>
</div>
</div>
<div id="mobilelogo"></div>
<div id="imageshow">
</div>
<div class="wrap">
<div class="miscellaneousRow">
</div>
<div class="search">
</div>
</div>
<section><h2 class="hidden">Recent News</h2>
<article id="recentNews">
<jdoc:include type="component" />
</article>
</section>
<aside>
<div class="sideBOX"> <section>
<h1 class="sideHeader">MAILING LIST</h1>
<div class="signup">
</section> </div>
<div class="sideBOX"> <section>
</section></div>
<div class="tabviewTABS"> <section>
</section>
</div> </aside>
<footer id="mainbottomFooter">
<div class="footerFLOATLEFT">
<h1 class="hidden">Footer</h1>
<div class="floatone">
</div>
</div>
</footer>
<div class="secondbottomFooter"> <div class="secondbottomfooterRight">
<nav id="sidenav">
<ul>
<li>
l
</li>
<li>
f
</li>
<li>
g
</li>
<li>
x
</li>
<li>
!
</li>
</ul>
</nav>
</div>
<div class="secondbottomfooterLeft"> content</a></div>
</div>
</html>
body {
width:90%;
margin:0 auto;
min-width:1024px;
max-width:1580px;
}
.latest-post clearfix{
display:hidden;}
.imageshow {
position:relative;
width: 100%;
}
.blog-readmore{
font-size: 24px;
display: inline;
width: 180px;
text-transform:uppercase;
margin-top:20px;
}
.blog-readmore a:link{
font-family: arial;
color: #690000;
}
.blog-readmore a:visited{
color: #690000;
}
.blog-readmore a:hover{
color: #eee;
}
#topbarWRAPPER{
position:fixed;
left: 0px;
right: 0px;
background-color:#000;
z-index:1000;
text-align:center;
}
.topbarcontentWRAPPER {
display:block;
height:50px;
background-color: #1E1E1E;
width: 90%;
margin: 0 auto;
}
#topbarLOGO
{
background-image:url("http://strip2.png");
background-repeat:no-repeat;
display:block;
float:left;
height:50px;
width:250px;
text-indent:-9999px;
}
aside{
background-color: #d6d6d6;
width: 29.1%;
padding-left:1%;
height: 100%;
float: right;
overflow: none;
color: #fff;
font-size:10px;
padding-bottom:1000em;
margin-bottom:-1000em
}
/* Blog content */
#recentNews {
width: 65.1%;
float: left;
padding-right:2%;
padding-left:2%;
padding-bottom:2%;
background-color:#fff;
padding-bottom:1000em;
margin-bottom:-1000em;
}
.wrap{ overflow:hidden;
background-color:#fff;
}
/* ~~ Bottom footer ~~ */
#mainbottomFooter{
background-color:#000;
position:relative;
height: 300px;
clear: both;
padding:15px 0;
min-width:100%;
}
.footerFLOATLEFT li{
list-style-type: none;
padding-bottom: 1em;
padding-top: 1em;
}
.footerFLOATLEFT a:link{
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:visited {
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:hover {
font-size:12px;
color: #690000;
text-transform:uppercase;}
/* ~~ P~~ */
p{
font-size: 17px;
color: #000;
line-height:140%;
font-family: 'HelveticaNeue';
padding-left: 1%;
padding-right:1%;
font-weight:bold;
}
h3 {
margin-bottom: 0px;
font-size: 2em;
color: #690000;
font-family: 'Lato', sans-serif;
font-weight:300;
text-transform:uppercase;
padding-bottom:1em;
padding-top:1em;
}
.floatone {
float:left;
padding-right: 4em;
padding-top: 4em;
height: 100%;}
.floattwo {
float:left;
height: 100%;
padding: 4em;}
.floatthree {
float:left;
height: 100%;
padding: 4em;}
.floatfour {
float:left;
height: 100%;
padding: 4em;}
.signup {
width:100%;}
.footerFLOATLEFT {
width:100%;
float:left;
}
.secondbottomFooter {
width: 100%;
height:40px;
background-color:#690000;
border-top:1px solid #222;
border-bottom:1px solid #222;
color: #fff;
font-size: 12px;
padding-top:2em;
padding-bottom:2em;
text-align:right;
}
h2 {font-face:arial;
font-size:12px;
color: #fff;
padding-top: 1em;
padding-bottom: 1em;}
#sidenav {
}
#sidenav li {
display:inline;
}
#sidenav a:link{
font-family: 'socialicoregular', Arial, sans-serif;
font-size:5em;
color: #eee;
text-decoration:none;
}
#sidenav a:visited{
color: #fff;
text-decoration:none;
}
#sidenav a:hover{
color: #690000;
text-decoration:none;
}
.miscellaneousRow {
background-color: #000;
width: 100%;
height:100px;
position:relative;
}
.twitterFeed {float:left;
padding-top: 10px;
padding-bottom: 10px;
width: 65.1%;
}
.search {
float: right;
padding:2%;
width: 26%;}
#mainNav {
float:right;
}
.sideDivider {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.tabviewTABS {
background-color:#222;
height:auto;
margin-bottom:20%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.sideBOX {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
text-align:center;
}
.soundcloud {
background-color:#222;
position:relative;
height:auto;
clear: both;
padding:15px 0;
min-width:100%;
}
.soundcloudtitle {
font-family: 'Droid Serif', serif;
color: #fff;
font-size: 2em;
text-align:right;
text-transform: uppercase;
margin-bottom: 1em;
border-bottom: 5px solid #690000;
}
.secondbottomfooterRight p{
padding-right:3em;
padding-bottom:1em;
}
.hidden
{
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
You're setting the left and right positions of your topbarWRAPPER to 0px instead of 5%.
See this fiddle.
EDIT:
I see what you mean. I've updated the fiddle. It should be what you need.
EDIT #2:
Alrighty. Forgive me, I didn't notice this earlier. You've assigned the body a width in percent but a min and max width in pixels. If you remove the min and max widths you'll see the behavior you're looking for, but what I think you should do is assign the 70% width to .wrap and give it a margin:0 auto;
I have problem with p element inside li. It shoud be seen in same line and ul element should overflow with horizontal scroll bar. However it does not work.
HTML as follows:
<div id="tests" class="container">
<form>
<input type="text" id='search-textbox' placeholder='Action name'/>
<input type="button" id='search-button'value="Search"/>
</form>
<div class="clip">
<ul id="ul-tests">
<li>
<p>Action-001</p>
<ul>
<li>
<p>Action-001-001</p>
<ul>
<li>
<p>Action-001-001-001</p>
<ul>
<li><p>Hello-Action-001-001-001-001</p></li>
<li><p>Hello-Action-001-001-001-002</p></li>
<li><p>Hello-Action-001-001-001-003</p></li>
<li><p>Hello-Action-001-001-001-004</p></li>
<li><p>Hello-Action-001-001-001-005</p></li>
<li><p>Hello-Action-001-001-001-006</p></li>
<li><p>Hello-Action-001-001-001-007</p></li>
<li><p>Hello-Action-001-001-001-008</p></li>
<li><p>Hello-Action-001-001-001-009</p></li>
<li><p>Hello-Action-001-001-001-010</p></li>
</ul>
</li>
<li><p>bell-Action-001-001-002</p></li>
<li><p>bell-Action-001-001-003</p></li>
<li><p>bell-Action-001-001-004</p></li>
<li><p>bell-Action-001-001-005</p></li>
<li><p>bell-Action-001-001-006</p></li>
<li><p>bell-Action-001-001-007</p></li>
<li><p>bell-Action-001-001-008</p></li>
<li><p>bell-Action-001-001-009</p></li>
<li><p>bell-Action-001-001-010</p></li>
</ul>
</li>
<li><p>Action-001-002</p></li>
<li><p>Action-001-003</p></li>
<li><p>Action-001-004</p></li>
<li><p>Action-001-005</p></li>
<li><p>Action-001-006</p></li>
<li><p>Action-001-007</p></li>
<li><p>Action-001-008</p></li>
<li><p>Action-001-009</p></li>
<li><p>Action-001-010</p></li>
</ul>
</li>
<li><p>Action-002</p></li>
<li><p>Action-003</p></li>
<li><p>Action-004</p></li>
</ul>
</div>
</div>
CSS as follows:
*
{
margin:0;
padding:0;
}
body, html
{
min-width: 1000px;
min-height:700px;
}
div#tests
{
top:40px;
left:40px;
bottom:20px;
width:240px;
display:block;
position:absolute;
}
div#tests.container
{
background-color:#ccc;
border-radius:4px;
}
div#tests.container>form
{
top:4px;
left:4px;
right:4px;
height:32px;
min-height:32px;
overflow: hidden;
display:block;
position: absolute;
}
div#tests.container>form>input#search-textbox
{
top:0;
left:0;
height:28px;
min-height:28px;
width:150px;
min-width:150px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
border: 1px solid #9c9c9c;
font: normal 18px 'trebuchet MS', arial, helvetica;
display: inline-block;
position: absolute;
}
div#tests.container>form>input#search-textbox::-webkit-input-placeholder
{
padding-left:10px;
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-textbox:-moz-placeholder
{
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-textbox:-ms-placeholder
{
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-button
{
top:0;
right:0;
height:30px;
min-height:30px;
width:78px;
min-width:78px;
display:inline-block;
position:absolute;
}
div.clip
{
top:38px;
left:4px;
right:4px;
bottom:4px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
background-color: #FFF;
overflow:scroll;
display:block;
position: absolute;
}
ul#ul-tests
{
list-style-type: none;
margin-left:20px;
}
ul#ul-test.hidden-n p
{
display:none;
}
ul#ul-tests ul
{
list-style-type:none;
margin-left:20px;
}
Link to the fiddle.
Please does not suggest to use fixed width size. Because, text can be different size. Thank you for your answers.
Add this setting to prevent line wrapping:
li p {
white-space: nowrap;
}
jsFiddle Demo
I am having problems trying to put these buttons at the bottom rather rather than at the middle. I have searched through the internet, tried many things and still doesn't work.
Here's a snippit of my HTML Code:
<table class="table">
<tr>
<td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
<td>
<ul>
<li><a class = "bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</td>
</tr>
</table>
And here's my CSS Code for the buttons:
ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
Any suggestions?
Change your first two CSS rules to:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
padding-top:20px;
}
jsFiddle example
You had been putting a margin on your ul with no units so that was basically being ignored, but you didn't want to do it that way anyway. Instead put top padding on the li elements.
If absolutely nothing is working for you, give the body a height of 1000 or something:
body {
height:1000px;
}
make a div the height of the difference between your nav bar and the body height:
div {
height:850px
margin:auto;
}
and make sure your div is on auto margin. This should push your nav bar down to the bottom.
I hope this helps.
<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
li {
float: left;
padding-top:20px;
}
a:link, a:visited {
display: block;
height: 18px;
width: 122px;
color: #FFFFFF;
background-color: #ca3838;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
.table, .td, .th {
border-collapse: collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border: 0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
</style>
float: bottom doesn't exist in CSS.
The key to putting things on the bottom in HTML layout is to first ensure that the container reaches the bottom, then either position at the bottom with absolute positioning, or make sure that the flowing content above pushes your content down.
Here's the easiest way I know to do it, assuming you want the menu to always appear at the bottom, even before scrolling, and assuming your menu is 20px tall.
HTML:
<div class="page-container">
<div class="scrolling-content">
<!-- Your other stuff here -->
</div>
<ul class="bottom-menu">
<!-- The content of your menu -->
</ul>
</div>
CSS:
html, body {
height: 100%;
}
.page-container { /* This takes up the whole window */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrolling-content {
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
overflow: auto;
}
.bottom-menu {
position: absolute;
height: 20px;;
bottom: 0;
left: 0;
right: 0;
}
Try this: http://jsfiddle.net/kuroisuna/TKY4p/1/
In your CSS:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom; /* This doesn't exist */
margin: 20px 0 4px 0;
}
li {
float:left;
margin: 0;
}
But, this will be much natural without a table: http://jsfiddle.net/kuroisuna/5heFE/2/
HTML
<ul>
<li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign Up</li>
<li>Extra</li>
</ul>
CSS
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
}
a:link, a:visited {
display:block;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:20px 4px 4px 4px;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
li.logo {
background-color:#ca3838;
padding:24px 4px 4px 4px;
}
Change on li:
remove float property
add display as inline-block
add position as relative
add bottom to -20px or so
Change on ul:
remove overflow property
You're done!
See it live in this jsFiddle.
DON'T ever use table for website layouts.use DIVES (divisions )
HTML
<div id="box">
<ul>
<li><a class="bt" href="#home">Home</a>
</li>
<li>About
</li>
<li>Menu
</li>
</ul>
</div>
CSS
#box{
background:#000;
height:200px;
position:relative;
}
ul {
position:absolute;
bottom:0;
}
li {
float:left;
margin-right:20px;
list-style-type:none;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
DEMO
Something like this will be much easier to achieve: http://jsfiddle.net/C2NEY/1/
CSS:
#header {
background-color:#ca3838;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
display:inline-block;
margin:0;
padding:0;
height: 25px;
width:122px;
padding:4px;
text-align:center;
}
#nav li:hover {
background-color: #FF8080;
}
#nav a {
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
HTML:
<div id="header">
<img class="logo" src="images/CoffeeLogo.jpg" />
<ul id="nav">
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</div>
Instead of "margin-left:auto" write "margin-left:" and the margin value like 12Px or whatever you want, and the same for margin-top:
this will position it to its right place.