The nav takes the full screen width and the footer is sticking to the left. Both is wrong and I would like to have the navigation a width of 90% and both be centered. I hope I described the problem comprehensibly.
html code:
#media only screen
and (device-width: 3840px)
and (device-height: 2160px)
and (orientation: landscape) {
body {
width: 90%;
font-size: 300%;
}
.mainHeader img.Margrit {
height: auto;
width: 12%;
top: 20%;
}
.mainHeader img.Logo {
height: auto;
width: 12%;
top: 60%;
}
.mainHeader img.Couture {
height: auto;
left: 0%;
top: -18%;
width: 75%;
}
.mainHeader nav {
width: 90%;
height: 100px;
}
.mainHeader nav ul {
padding-left: 0;
}
.mainHeader nav ul li {
width: 25%;
text-align: center;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 20px 367px;
height: 59px;
display: inline-block;
}
.mainFooter {
display: table;
height: 100px;
width: 90%;
text-align: center;
}
.mainFooter p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 1%;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<img class="Couture" src="resources/img/Content_variation_800_g.png" alt="Couture Anni">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
I chose this query because it reproduces the problem. At least I think.
You should keep the body element at 100% and size the other contents from there. margin: 0 auto; takes care of centering your element.
body{
width: 100%;
}
.mainHeader{
width: 90%;
margin: 0 auto;
}
.mainFooter{
position: fixed;
width: 100%;
bottom: 3%;
}
.mainFooter .footerBody{
width: 90%;
margin:0 auto;
height: 40px;
clear: both;
text-align: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
}
.mainFooter .footerBody p {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 1%;
margin-top: 0;
}
As for your footer, use the mainFooter class as the wrapper for the fixed positioning, then add a 90% sized container inside that and set display: block;
<footer class="mainFooter">
<div class="footerBody">
<p>Copyright © couture-anni.ch</p>
</div>
</footer>
Hope this helps!
Related
I am using two CSS Sprites (each in their own div) to display an Android and Apple logo on my homepage. It looks fine when on a laptop, however, it does not align correctly (in the center) when viewed on a smaller device i.e. mobile device/small browser.
Could anyone lend a hand and help me get the Sprites to align vertically when viewed on mobile?
Here's what it looks like in full screen and mobile/small browser:
**Fullscreen (working): **
**Mobile (no working): **
Here's my HTML:
<body>
<div class="main-container">
<div class="left-image">
<nav class="site-nav">
<ul class="group">
<li class="nav-android">Android</li>
</ul>
</nav>
</div>
<div class="right-image">
<nav class="site-nav">
<ul class="group">
<li class="nav-ios">iOS</li>
</ul>
</nav>
</div>
</div>
</body>
and here's my CSS:
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
position: relative;
list-style: none;
margin-top: 150px;
left: 20%;
}
.site-nav a {
display: inline-block;
text-align: center;
width: 300px;
height: 350px;
text-indent: 9999px;
overflow: hidden;
}
.nav-android a {
float: left;
left: 50%;
background-position: 0 0px;
background-image: url(../images/android.png);
background-repeat: no-repeat;
}
.nav-ios a {
float: left;
left: -50%;
background-position: 0 0px;
background-image: url(../images/apple.png);
background-repeat: no-repeat;
}
#media screen and (max-width: 700px) {
.nav-android a,
.nav-ios a,
{
width: auto;
float: none;
}
Use #media for css.
#media all and (max-width: 400px)
{
.nav-android a, .nav-ios a {
float: none;
display: block;
background-size: 128px 128px;
}
}
Edit:
Maybe you need to add this to head:
<meta name="viewport" content="width=device-width, user-scalable=0"/>
ul { margin: 0; padding: 0; }
.group { margin-top: 10%; text-align: center; }
.group li { display: inline-block; }
.group li a { display: block; width: 256px; height: 256px; font-size: 0; }
.nav-android a {
background-size: 100%;
background-image: url(android.png);
background-repeat: no-repeat;
background-color: green;
}
.nav-ios a {
background-size: 100%;
background-image: url(apple.png);
background-repeat: no-repeat;
background-color: grey;
}
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<div class="main-container">
<ul class="group">
<li class="nav-android">Android</li>
<li class="nav-ios">iOS</li>
</ul>
</div>
</body>
</html>
I have a little problem that I could work around but it annoys me that I don't understand it. Maybe you can help. I have a header with a nav bar inside which is floated to the right. Now when I add margin-top to the nav and set it equal to say 10% it is not sizing relative the the parents height. Instead it appears much further down the page. Heres my code:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
header {
background-color: yellow;
height: 10%;
width: 100%;
overflow: hidden;
}
header img {
float: left;
}
nav {
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 1%;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me
</li>
<!--
-->
<li>Porfolio
</li>
<!--
-->
<li>Contact
</li>
</ul>
</nav>
</header>
If you want header to be auto height, Use min-height instead of using height, also remove overflow:hidden otherwise this will hide overflowed content.
header {
background-color: yellow;
min-height: 10%;
width: 100%;
overflow: hidden;
}
For more info https://developer.mozilla.org/en/docs/Web/CSS/min-height
You can use min-height: 10%
heres the fiddle: https://jsfiddle.net/a4sg5b72/
I would approach it using the positioning absolute & relative.
Codepen: http://codepen.io/rezasan/pen/YGmVGo
header {
background-color: yellow;
height: 10%;
width: 100%;
position:relative;
}
header img {
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
nav {
background-color: grey;
width: 30%;
text-align: center;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
You can try this:
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 1000px;
}
header{
background-color: yellow;
height: 10%;
width: 100%;
}
header img{
float: left;
}
nav{
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 10%;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
It's because overflow: hidden of Head
I would like to float two divs on html page like that: http://5toneface.eu/temp/
(ignore php-warnings). But between ruutLeft and ruutRight div there is a small gap or white border-like stripe. How to get rid of it? so the ruutLeft and ruutRight divs sides would be side-to-side exactly?
html is:
<!DOCTYPE html>
<html lang="et">
<head>
<title>Dynamint</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<link rel="stylesheet" href="navistyle.css" type="text/css" >
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="wrp">
<div id="header"><?php include("includes/header.php"); ?></div>
<div id="container">
<div class="ruutLeft">ruutLeft</div>
<div class="ruutRight">ruutRight</div>
<div class="contentLeft"><?php include("includes/contentleft.php"); ?></div>
</div> <!-- end container -->
<footer id="footerTop"><?php include("includes/footer.php"); ?></footer>
<!-- siia tuleb veel footerbottom -->
<footer id="footerBottom">
<p id="bottomp">© 2015 by WAHT? mööbel. All rights reserved</p>
</div>
</div> <!--end wrp -->
</body>
</html>
and css for this is also pretty simple:
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri light, Georgia, Verdana, arial;
background-color: #edeff0;
font-size: 105%;
color: #303030;
line-height: 1.4;
margin: 0;
}
#wrp {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
width: 100%;
height: 96px;
position: fixed;
top: 0px;
background-color: #fff;
}
#logo {
float: left;
margin: 2% 0 0 5%;
}
#container{
width: 100%;
height: auto;
margin-top: 0;
background-color: #edeff0;
}
.ruutLeft {
width: 40%;
height: 320px;
margin-left: 10%;
margin-top: 145px;
background-color: #8AC0CA;
float: left;
}
.ruutRight {
width: 40%;
height: 320px;
margin-right: 10%;
margin-top: 145px;
background-color: #CCCBC9;
float: right;
}
.contentLeft {
width: 80%;
margin-left: auto;
margin-right: auto;
min-height: 400px;
padding: 1% 1% 4% 1%;
font-size: 95%;
height: auto;
}
Float both your elements left.
Change .ruutRight to float:left - This will fix the issue.
So my website is www.jacobweyer.com
When the window becomes a certain small size, it creates a large gray area on the right side, where the header and footer wont expand to cover. How do I get rid of the large content less area while still leaving a small buffer area? I'm also having an issue where I want to have my social media buttons as far right as possible, however I want it to still stay as far right as possible until it would possibly overlap the title.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpha Tau Omega | Theta Omega</title>
<link rel="stylesheet" type="text/css" href="ATOStyle.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="innerheader">
<div id="banner">
</div><!-- End banner-->
<div id="title">
</div> <!--End title -->
<div id="navbar">
<ul>
<li>Home</li>
<li>Rush</li>
<li>History</li>
<li>Alumni</li>
<li>Calendar</li>
<li>Media</li>
</ul>
</div> <!--End navbar -->
</div><!-- End innerheader -->
<div id="outersocial">
<div id="social">
<ul>
<li>
<img src="./pieces/socialmedia/facebook.png" />
</li>
<li>
<img src="./pieces/socialmedia/twitter.png" />
</li>
<li>
<img src="./pieces/socialmedia/youtube.png" />
</li>
</ul>
</div> <!-- End social-->
</div> <!--End outersocial -->
</div> <!-- End header -->
<div id="pagecenter">
</div> <!-- End pagecenter -->
<div id="footer">
<div id="footercontent">
<div id="footerbanner1">
</div> <!--end footerbanner1-->
<div id="footernav">
<p> Alpha Tau Omega Fraternity | Theta Omega Chapter | Northern Kentucky University | Contact Us!</p>
</div> <!-- End footernav-->
<div id="footerbanner2">
</div> <!-- End footerbanner2-->
</div> <!--end footercontent -->
</div> <!--end footer-->
</body>
</html>
CSS
body {
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
background-color: #808080
}
/* Header Container */
#header {
background:url(./pieces/headerBar.png);
position: static;
width:100%;
height:139px;
padding:0;
z-index: 10000;
}
/* Container inside the header for sorting elements */
#innerheader {
height: 139px;
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/* The following is the Nav Bar */
#navbar {
position: relative;
top: 76px;
left: 210px;
margin-left: inherit;
}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar ul li {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
display: inline-block;
width: 50px;
height: 20px;
margin: 10px;
}
#navbar ul li a {
text-decoration: none;
color: black;
}
#navbar ul li a:hover {
color: white;
}
/*The following is the Intertwine Banner */
#banner {
background:url(./pieces/banner.png);
position: absolute;
margin-left: 0px;
min-height: 193px;
min-width: 183px;
background-repeat: no-repeat;
}
/* Alpha Tau Omega - Theta Omega Title */
#title {
position: absolute;
background: url(./pieces/name.png);
margin-left: 190px;
min-height: 75px;
min-width: 285px;
}
/* The following are the social media icons */
#outersocial{
position:;
left:50%;
height: 139px;
width:50%;
}
#social {
position: absolute;
top: 2px;
right: 10px;
}
#social ul {
list-style-type: none;
}
#social li{
display: inline-block;
width: 36px;
height: auto;
margin: 5px;
}
#social img {
width: 36px;
height: auto;
}
/* Pagecenter is where the content will be on the web page*/
#pagecenter {
position: static;
margin-right: auto;
margin-left: auto;
height: 50px;
width: 750px;
min-height: 1000px;
background:url(./pieces/mainBG.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: -19px;
z-index:50
}
/* The following is the footer and its content */
#footer {
margin-top: 20px;
padding-top: 30px;
background: url(./pieces/footerbar.png);
height: 77px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;
bottom: 0px;
position: static;
}
#footerbanner1 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
left: 10px;
}
#footerbanner2 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
right: 10px;
}
#footercontent {
width: 100%;
height: 100%;
right: 5px;
left: 5px;
}
#footernav {
font-family: 'Quattrocento Sans', sans-serif;
position: absolute;
text-align: center;
right: 15%;
left: 15%;
}
#footernav p {
margin: 0px;
padding-right: 25%;
padding-left: 25%;
font-family: 'Quattrocento Sans', sans-serif;
color: white;
position: relative;
}
#footernav a {
font-family: 'Quattrocento Sans', sans-serif;
color: white;
}
#footernav a:hover {
color: orange;
}
An object is just a special kind of data, with properties and methods.
Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object. Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page.
The syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;
Example1. :
person=new Object();
person.firstname="stack";
person.lastname="overflow";
person.age=50;
person.color="black";
Example2 :
var message="Hello India!";
var x=message.length;
here .length is the property of object message.
I hope it will be helpful to you.
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example