I have an issue with the white background on my mainbody div. I have had to specify a fixed px and this is 750px. I dont want to have to do this I want to just be able to use auto. This is because I need to use the same CSS file for other pages and they will be different heights. Also when using the value of height: auto on the manibody div it dosent cover all the content in that div.
Here is a link to see what its like http://jsfiddle.net/#&togetherjs=KksjUfFlxS
Please can you help me to be able to fix this.
Here is my HTML code:
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Home || Web Design Coursework</title>
<meta name="description" content="">
<meta name="author" content="Elliott Davidson">
<meta name="language" content="english">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</head>
<body>
<div id="container">
<!-- start of header -->
<div id="header">
<img src="images/header-image.png" width="980" height="170" alt="kayaking header logo" /> </div>
</div><!-- end of header -->
<!-- start of navigation bar -->
<div id="navmenu">
<ul id="list-nav">
<li id="topnavleft">Home</li>
<li>Design</li>
<li>About</li>
<li>Kayaking Disciplines</li>
<li id="topnavright">Useful links</li>
</ul><!-- ul end list-nav -->
</div><!-- div end navmenu -->
<div id="mainbody">
<div id="homepagevideo">
<iframe width="560" height="315" src="http://www.youtube.com/embed/3WabVsBugGQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div><!-- end div homepagevideo -->
<div id="homepagekayakingdisciplines">
<h1 id="homepageh1kayakingdiscipline">Kayaking Disciplines</h1>
<p>Aliquid delicatissimi et vix. Ut cum tation ridens. Mea ei impetus gubergren, sit natum doming quodsi et. Usu cu sonet debitis. Mea nullam tamquam ea. Ex vis vocibus splendide, ut eum ullum assum impedit.</p>
<p>Decore facete mei ei. Eam ea maluisset dissentias, graece labore ocurreret has eu. Cu usu quem officiis maiestatis, cu quis assueverit mea. Primis deserunt consectetuer quo et, vim numquam aliquam eruditi ut.</p>
<p>Sint erroribus imperdiet ex quo, et sit habeo dolorum molestiae, commodo dissentiet no duo. Mucius essent repudiare te pri, te tale accumsan reprimique pro. Mel cu ignota argumentum. Vis dolor efficiantur ex, ei mei reque oporteat percipitur. Sea corrumpit voluptaria referrentur ea, ei sensibus definitionem vel. No verterem elaboraret sit, velit apeirian vim ea.</p>
</div><!-- end div homepagekayakingdisciplines -->
<div id="homepagedesign">
<h2>Design</h2>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis. Eum dicant mollis denique cu, an fastidii ocurreret instructior sit. His discere mediocrem no, an sit recteque tincidunt.</p>
<p>Mea ea animal inciderint, cum nulla saepe libris an. Modo meliore argumentum vel ei, mei cu option facilisis. Et enim detraxit vix. In clita mollis feugiat quo. Nobis soluta pri te, cum brute latine cotidieque ei.</p>
</div><!-- end div homepagedesign -->
<div id="homepageaboutme">
<h3>About</h3>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>
</div><!-- end div homepageaboutme -->
<div id="homepagelinks">
<h3>Links</h3>
<p>Dicat adversarium nam at, ei saepe dictas pri. Ad aliquid meliore fastidii pro, duo appareat apeirian ea, vix ei maiorum luptatum quaerendum. Est ut vivendum oportere efficiendi, vim et brute nusquam, justo accumsan inimicus ex vis.</p>
</div><!-- end div homepagelinks -->
</div><!-- end div mainbody -->
<div id="footer">
<div id="footerimage">
<img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
<div id="footertext">
<div id="footernavmenu">
<ul id="list-footer-nav">
<li>Home</li>
<li>Design</li>
<li>About</li>
<li>kayaking Disciplines</li>
<li>Useful links</li>
</ul><!-- ul end list-footer-nav -->
</div><!-- div end footernavmenu -->
<div id="copyright">
<div class="copyrigttext">
Copyright © 2013 Elliott Davidson, All Rights Reserved.
</div><!-- end div copyrighttext -->
</div><!-- end div copyright -->
</div><!-- end div footertext -->
</div><!-- footer image -->
</div><!-- end of footer -->
</div><!-- end of container -->
</body>
</html>
Here is my CSS code:
#charset "UTF-8";
/* CSS Document */
#html, body{
background-color : #32B7FF;
font-family: Tahoma;
}
#container {
margin-left : auto;
margin-right : auto;
width:980px;
height:auto;
}
/********************************** header **********************************/
/********************************** nav bar **********************************/
#navmenu {
width : 980px;
margin-left : auto;
margin-right : auto;
height: 33px;
}
ul#list-nav {
list-style : none;
padding : 0;
background-color : #32B7FF;
font-family:Tahoma, Geneva, sans-serif;
border-radius:10px 10px 0 0;
overflow:hidden;
}
ul#list-nav li {
display : inline;
width : 980px;
height : 33px;
}
ul#list-nav li a {
text-decoration : none;
padding : 8px 0;
width : 196px;
background : #1173A8;
color : #fff;
float : left;
text-align : center;
}
ul#list-nav li a:hover {
background : #4B98C1;
}
ul#list-nav li a:active {
background : #4B98C1;
}
ul#list-nav li:first-child, ul#list-nav li:last-child {
border-radius:10px;
}
/********************************** mainbody **********************************/
#mainbody {
background-color:#FFF;
width:980px;
height:750px;
margin-left:auto;
margin-right:auto;
margin-top:-19px;
}
#homepagevideo {
padding:10px;
width:auto;
height:auto;
float:left;
}
#homepageh1kayakingdiscipline {
padding-top:5px;
}
#homepagekayakingdisciplines {
text-align:justify;
padding-left:10px;
padding-right:10px;
}
#homepagedesign {
width:470px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
float:left;
height:auto;
}
#homepageaboutme {
width:470px;
padding-left:10px;
padding-top:10px;
padding-right:10px;
float:right;
height:auto;
}
#homepagelinks {
width:470px;
padding-left:10px;
padding-bottom:10px;
padding-right:10px;
float:right;
height:auto;
}
/********************************** footer **********************************/
#footer {
margin-left:auto;
margin-right:auto;
height:175px;
width:980;
}
#footertext {
position:absolute;
width:980px;
height:auto;
bottom: 0
}
#footerimage {
margin-left:auto;
margin-right:auto;
width:980px;
height:140px;
position: relative;
}
#footernavmenu {
width : 540px;
right:0px;
margin-right:0px;
float:left;
color:#FFF;
}
ul#list-footer-nav li {
display : inline;
padding-right: 8px;
}
ul#list-footer-nav li a {
text-decoration : none;
width:auto;
float : left;
color:#FFF;
padding:6px;
}
ul#list-footer-nav li a:hover {
color:#4B98C1;
}
ul#list-footer-nav li a:active {
color:#4B98C1;
}
#copyright {
width:440px;
height:auto;
right:0;
position: absolute;
bottom: 0;
margin: 1em;
text-align: right;
color:#FFF;
}
.copyrighttext {
}
You just need to add an overflow:auto; to your #mainbody. Thats it.
#mainbody {
background-color:#FFF;
width:980px;
margin-left:auto;
margin-right:auto;
margin-top:-19px;
overflow:auto; /* Use THIS one */
}
WORKING DEMO
You can get this done by adding a clear like this before closing of mainbody div, like this
HTML
<div class="clear"></div>
CSS:
.clear {
clear:both;
}
Related
im new at HTML, CSS and Bootstrap.
What im looking for is a way to make the navbar fixed only in a portion of the web.
A cleary example is this web:
http://pascalvangemert.nl/
You can see that the navbar starts at "Profile" section and doesnt go upper than that.
Is there a css or bootstrap way to do it?
Thanks
<body>
<div class="jumbotron intro">
<div class="container-fluid intro-image">
<div class="row">
<div class="col-lg-12">
<img src="/imagenes/fondo6.jpg" class="imagen">
<h1>Ariel Curuchaga</h1>
<hr class="dotted-line" style="border-top: dotted 5px">
<p class="intro-paragraph">Interactive Resume</p>
</img>
</div>
</div>
</div>
</div>
<div>
<nav id="navbar" class="navbar navbar-inverse barra" role="navigation">
<ul class="list-group">
<li class="list-group-item list-group-item-action list-group-item-dark"><i class="fas fa-arrow-circle-up"></i>
</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Profile</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Experience</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Goals</li>
</ul>
</nav>
<div class="profile">
<h2>About Me</h2>
</div>
<div class="experience">
<h2>About Me</h2>
</div>
<div class="education">
<h2>About Me</h2>
</div>
<div class="goals">
<h2>About Me</h2>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.imagen {
height: 100vh;
width: 100vw;
margin: 0;
filter: opacity(0.4) drop-shadow(0 0 0 pink);
}
.intro {
position: relative;
margin: 0;
text-align: center;
}
.intro-image {
padding: 0;
}
h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-weight: 700;
font-size: 60px;
letter-spacing: 8px;
}
.dotted-line {
position: absolute;
width: 32%;
top: 50%;
left: 32%;
color: #6b6e6e;
margin: 0;
padding: 0;
}
.intro-paragraph {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-size: 30px;
}
.barra {
border-radius: 30%;
padding: 0;
opacity: 80%;
position: sticky;
top: 0;
z-index: -1;
}
.list-group {
text-align: center;
}
.profile {
background-color: yellowgreen;
height: 100vh;
width: 100vw;
}
You can use sticky positioning:
#navBar {
position: sticky;
top: /*distance from top of page*/
}
This makes the element in question follow normal page order until it is reached, then it becomes fixed. However, keep in mind that it is not supported by IE.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
I come here to ask a question I've begin yesterday a project so I currently do a prototype of my design
I've begin my CSS in mobile first but when I using my media query, the mobile first property get override and take the tablet query as my main css and i don't understand why :/
here is the html
<div id="container">
<section id="mysect1">
<h2> Presentation </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section id="mysect2">
<h2> Produits </h2>
<img src="./assets/images/fauteuil.png">
<img src="./assets/images/tensio.png">
<img src="./assets/images/inco.png">
<img src="./assets/images/lit.png">
</section>
and here my CSS
#mysect1 p {
font-size:1.1em;
}
#mysect2{
text-align:center;
}
#mysect2 img {
width:90%;
}
#media (min-width:768px) {
#mysect1 p {
font-size:1.8em;
}
#mysect2 {
text-align:center;
}
#mysect2 img {
width:70%;
}
}
thanks !
You need to define a separate media query for mobile
#media (min-width:480px) {
#mysect1 p {
font-size:1.1em;
}
#mysect2{
text-align:center;
}
#mysect2 img {
width:90%;
}
}
the problem here is my #media(min-width:768px) override my phone query when i'm on phone emulator ( on google dev)
here is my complet HTMl
<!DOCTYPE html>
<html>
<head>
<title> BLCM Tunisie </title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<header>
<nav id="navbar">
<div id="logo"><img src="./assets/images/bastide.jpg"></div>
<div id="op-horizontalnav">
<ul class="op-sectionlist">
<li class="op-v-item"><a class="op-v-link" href="#mysect1">PRESENTATION</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect2">PRODUITS</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect3">EQUIPE</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect4">CONTACT</a></li>
</ul>
</div>
</nav>
</header>
<div id="container">
<section id="mysect1">
<h2> Presentation </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section id="mysect2">
<h2> Produits </h2>
<img src="./assets/images/fauteuil.png">
<img src="./assets/images/tensio.png">
<img src="./assets/images/inco.png">
<img src="./assets/images/lit.png">
</section>
<section id="mysect3">
<h2> Equipe </h2>
<div id="imageTeam">
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerome Yvanez <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jean bon <br/> Web marketer</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jesui Palas <br/> CM</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Sylla Bique <br/> Graphiste </p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Mac Donald <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
<div class="imgWrapper"><img src="./assets/images/jerome.jpg"><p> Jerry Golay <br/> Developper</p> </div>
</div>
</section>
<section id="mysect4">
<h2> Nous contacter </h2>
<form action="post">
<input placeholder=" Nom et Prénom" type="text" id="firstname">
<input type="text" id="email" placeholder="email">
<input type="text"size="6" id="contactContent" placeholder ="contenue du message">
<input type="submit" id="send"/>
</form>
</section>
</div>
<footer></footer>
</body>
</html>
and here my complet CSS
html, body {
border: 0;
font-family: Helvetica LT Condensed;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width:100%;
}
body{
background: url(../images/fond.png);
background-size: 200%;
background-repeat: repeat;
background-position-x: 60%;
background-position-y: 118%;
}
section {
padding:20px;
}
h2, h3 {
text-align:center;
font-size:4em;
}
#container{
margin-top:150px;
}
/*============ CSS 'Header' mobile first ========== */
header.active #logo img {
width:100px;
height:40px;
margin:4px 0 0 20px;
padding-left:40px;
}
#logo { text-align:left; }
#logo img{
width:140px;
height:55px;
transition: .4s all linear;
-moz-transition: .4s all linear;
-webkit-transition: .4s all linear;
-o-transition: .4s all;
margin:14px 0 0 20px;
display:block;
}
header{
color:white;
position:fixed;
background-color:black;
text-align:right;
right:0;
top:0;
left:0;
z-index:501;
height:80px;
}
#navbar {
text-align:right;
position:relative;
font-size:19px;
}
ul { margin-top:-34px; }
li{
display:inline;
margin-top:;
padding-right:50px;
transition: .4s all linear;
-moz-transition: .4s all linear;
-webkit-transition: .4s all linear;
-o-transition: .4s all linear;
}
.active li{
font-size:0.8em;
padding-top:20px,
padding-right:40px;
}
.active ul { margin-top:-30px; }
a.active {
background-color:red;
color:white;
padding:5px;
font-weight:bold;
}
a{ text-decoration: none; color:white;}
#media(min-width: 480px){
/* =========== CSS 'Presentation' mobile first =========== */
#mysect1 p {
font-size:1.1em;
}
/* =========== CSS 'Produits' ============= */
#mysect2{
text-align:center;
}
#mysect2 img {
width:90%;
}
/* ========== CSS 'Equipe' mobile-first ===========*/
#imageTeam {
text-align:center;
padding-top:20px;
order:2;
}
.imgWrapper { display:inline-block; width: 42%; }
.imgWrapper p {
background-color:red;
padding:20px 117px 21px 110px;
color:white;
margin-top:-5px;
width:inherit;
font-size:39px;
display:inline-block;
}
#imageTeam img{ width:100%;
}
/*=========== CSS 'Contact' mobile first ============= */
form {
width:100%;
}
input, textarea, select {
font-size:44px;
margin-top:25px;
padding:10px;
box-sizing:border-box;
background:none;
outline:none;
resize:none;
border:0;
transition:all .3s;
border-bottom:1px solid #F7941D;
border-right:1px solid #F7941D;
width:100%;
}
input:focus { border-bottom:3px solid #F7941D; border-right:3px solid #F7941D;}
#send {
padding: 15px;
background-color: #F7941D;
margin-bottom: -6px; }
#send:hover{ background-color:#B40303; }
#contactContent { height:100px; }
#mysect4 {
padding: 0 10px 0 0px;
margin-left: -6px;
}
}
/*============== DEBUT CSS TABLETTE ============= */
#media (min-width:768px) {
/*============== CSS 'Presentation' TABLETTE =============*/
#mysect1 p {
font-size:1.8em;
}
/*============= CSS 'Produits' TABLETTE =================*/
#mysect2 {
text-align:center;
}
#mysect2 img {
width:70%;
}
.imgWrapper {
width:35%;
}
#imageTeam img {
width: 86%;
}
#imageTeam p {
padding:10px 85px 12px 84px;
font-size: 21px;
}
}
this is a pics of what I tell
I am trying to create a website, where their is a logo on the left side, and text on the right (alongside the logo image) and having all that above the navigation bar, however I just cannot manage to get them into position at all!
CSS
.headerLogo{
float:left;
margin-top: 20px;
}
.headerText{
float:right;
margin:auto;
}
HTML
<div class="headerLogo">
<img src="Logo.gif" />
</div>
<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Volunteer</li>
<li>Donate</li>
</ul>
</nav>
To set accordingly, try to give styles like below having div as position relative.
.headerLogo {
float:left;
margin:auto;
display:inline-block;
}
.headerText {
margin-top: 10px;
margin-right: 20px;
float: right;
position: relative;
display:inline-block;
}
I am a little bit confused by the wording but please take a look at this solution and see if this is what you mean, otherwise I will edit the answer
Jsfiddle: http://jsfiddle.net/gLLa20yp/
img{
display: inline-block;
float: left;
width: 10%;
}
nav{
margin-top: 5%
}
.nav li{
display: inline-block;
margin-left: 15%;
}
remove the last part if you don't want a horizontal menu.
Future work: To make it look better I would suggest setting the width on the <p> element and giving a margin between the image and the text
Just needed to set clearfix, Is this the result you seek?
.headerLogo{
float:left;
margin-top: 20px;
width: 50%
}
.headerText{
float:right;
margin:auto;
width: 50%
}
.clearFix{ clear: both};
<div class="headerLogo">
<img src="Logo.gif" />
</div>
<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>
<div class="clearFix">
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Volunteer</li>
<li>Donate</li>
</ul>
</nav>
I am targeting the 320x480 and 320x568. The issue i am facing in 320x568 Portrait view. Everything is working fine on 320x480 but in 320x568 portrait view, the size of the container is very large. I tried everything to adjust the height but it is not showing the same as 320*480 portrait view. I can't find the way to solve this issue. You can check the screenshot below:
You can check the site here through your mobile - bit.ly/1bD6EhX
I have to move the text to top position but when i do this, this will also affect the 320*480 portrait view. Here is my code below:
.container3 {
margin:0;
height:750px;
overflow:hidden;
}
.fullwidth3 {
width:100%;
}
.mobtxt {
margin:0 0 0 25px;
font-size:22px;
font-weight:600;
font-family:'Open Sans', arial, helvetica;
letter-spacing:0;
text-align:center;
width:80%;
border-bottom:2px solid #e0e0e0;
}
.mobdes {
margin:15px 0 0 10px;
font-size:16px;
font-weight:normal;
font-family:arial;
letter-spacing:0;
text-align:left;
width:95%;
}
.mobdes2 {
position:absolute;
top:320%;
width:95%;
margin:15px 0 0 10px;
font-size:arial;
font-size:15px;
color:#adadad;
padding:0;
}
.mobimg {
width:100%;
clear:both;
float:none;
margin-left:0;
margin-right:0;
right:10px;
margin-top:30px;
}
HTML File
<div class="container3">
<div class="fullwidth3">
<p class="mobtxt">We have an experience of 10 Years</p>
<p class="mobdes">Mandaremus veniam dolor ita sunt, duis praesentibus vidisse velit ingeniis qui
sed est dolore fore eram a do aute incurreret transferrem ab se qui culpa
eiusmod, quem iis pariatur, an culpa magna legam occaecat o in qui quorum legam
quem. Singulis exquisitaque ut quamquam, ita ea tractavissent, nam sint de quis
est quo a tractavissent. </p>
<img src="img/mobimg.png" alt="mob image" class="mobimg" >
<hr class="hr"/>
<p class="mobdes2">Laborum duis malis in duis, duis ingeniis nam transferrem, nam quis commodo, de
nisi varias illum nescius si probant ipsum in laborum exercitation, ut a
comprehenderit, iis aliqua praesentibus, e nisi litteris expetendis.</p>
</div>
</div>
I dont understand, why you are doing top:320%; in .mobdes2. I think you want to do it top:320px. However, it would be better if you'd have provided the HTML as well.
But, I would recomend you to use vh unit of css 3. This just mean the viewport height as unit.
Example: http://snook.ca/archives/html_and_css/vm-vh-units
Browser support: http://caniuse.com/#feat=viewport-units
Good luck!!
I am having allot of trouble with layering, My current issue is that vistors can not click on links inside div layers for some reason. They can't highlight text, click on the images in the sidebar which are linked up. I don't know what is wrong. Any help would be much appreciated.
Site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="js/video-js/video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf";
</script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;}
</style>
<script type="text/javascript">
function chgbg() {
var d = new Date();
var h = d.getHours();
if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
}
</script>
</head>
<body onload="chgbg()">
<div id="Wrapper">
<div id="navbar" style="display: inline-block;">
<ul id="nav">
<li id="top">
HOME
</li>
<li id="top">
GUIDE
<ul>
<li id="submenu">CLASSES</li>
<li id="submenu">DUNGEONS</li>
<li id="submenu">MONSTERS</li>
<li id="submenu">PETS</li>
<li id="submenu">RACES</li>
<li id="submenu">TOWN BUILDINGS</li>
<li id="submenu">UNIVERSE</li>
<li id="submenu">WIKI</li>
</ul>
</li>
<li id="top">
BLOG
<ul>
<li id="submenu">ARAKION</li>
<li id="submenu">CHRIS TAYLOR</li>
</ul>
</li>
<li id="top">
MEDIA
<ul>
<li id="submenu">CONCEPT ART</li>
<li id="submenu">SCREENSHOTS</li>
<li id="submenu">VIDEOS</li>
</ul>
</li>
<li id="top">
FORUM</li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
<div id="Sidebar_content">
<p> </p>
<p class="title">Social Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" class="title" /></p>
<p><img src="images/IndieDBIcon.png" width="35" height="35" />
<img src="images/FacebookIcon.png" width="35" height="35" /> <a href="http://twitter.com/arakiongame" target="_new">
<img src="images/TwitterICon.png" width="35" height="35" /> </a> <img src="images/YoutubeICon.png" width="35" height="35" /> </p>
<p> </p>
<p>Random Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
<p> </p>
<p> </p>
<p>Something</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
</div></div>
<div style="display: inline-block;" id="main_background">
<div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
<table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
<tr>
<td width="140"><img src="images/MainImages/Placeholder1.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder2.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder3.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder4.jpg" height="100%" width="100%"/></td>
</tr>
<tr>
<td width="140">How Housing Works and why we have it <p> </p></td>
<td width="140">An In depth look at the Satyr race <p> </p></td>
<td width="140">We take a look at the role the alchemist plays in a group <p> </p></td>
<td width="140">Our doors are offically open to new employees apply today <p> </p></td>
</tr>
</table>
<p> </p>
</div></div>
<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text" style="z-index:9;">
<video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="js/video-js/Posters/Test.png"
data-setup="{}">
<source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div id="footer_background" style=" text-align: center; ">
<img src="images/Footer_Divider.png" height="10px" width="600px"/>
<p> </p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
<div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
<div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>
CSS Code:
#font-face {
font-family: 'KingthingsExeterRegular';
src: url('font/kingthings_exeter-webfont.eot');
src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
url('font/kingthings_exeter-webfont.woff') format('woff'),
url('font/kingthings_exeter-webfont.ttf') format('truetype'),
url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'KingthingsExeterRegular';
overflow-y: auto;
}
body,td,th {
font-family: KingthingsExeterRegular;
background-size: cover;
background-repeat:no-repeat;
text-align: center;
font-size: 15px;
zoom: 110%
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
text-decoration: none;
}
/*Body Css */
#header{
z-index: -999;
width:900px ;
height:800px ;
position: relative;
top:0;
left:0;
}
#left{
z-index:-9;
width:239px;
height:600px ;
float: left;
clear: both;
position: absolute;
left:-215px;
top:150px;
}
#right{
z-index:-2;
width:239px;
height:600px ;
float:right;
clear: both;
position: absolute;
left:960px;
top:120px;
}
#Wrapper {
width:1040px;
margin:auto;
margin-top:-40px;
height:2000px;
position: relative;
z-index:0;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#navbar{
position: relative;
top:91px;
float:left;
margin-top:50px;
margin-left:5px;
width:649px;
height: 50px;
z-index:4;
margin-bottom:10px;
clear:both;
}
#nav{
list-style:none;
font-weight:bold;
width:600;
height:50;
margin-bottom:5px;
}
#top{
float:left;
position:relative;
background-image:url("images/Button_NavBar_Unselected.png");
height:55px;
width:119px;
font-size:15px;
}
#top:hover{
background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#submenu_bottem{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#nav a{
display:block;
padding-top:20px;
z-index:-1;
font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px;
text-align:center;
width:100px;
height:18px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:-30px;
top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}
/* Main Block */
#main_background{
width:680px;
height:519px;
float:left;
background-image:url(images/MainSection.png);
}
#main_content{
width:590px;
height:430px;
text-align:left;
margin-top:20px;
margin-left:45px;
}
#main_img{
margin:0 auto;
margin-top:5px;
background-image:url(images/MainSection_BigImageHighlight.png);
width:520px;
height:300px;
text-align:center;
padding-top:4px;
}
#main_section_img{
margin-top:10px;
background-image:url(mages/MainSection_SmallImageInsett.png);
width:560px;
height:95px;
text-align:center;
vertical-align:top;
margin-top:0;
}
#main_section_img td{
vertical-align:top;
margin-top:0;
}
/* Sub Block */
/* Sub Background Hierarchy */
#sub_background_1{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-1;
margin-left:30px;
top:-38px;
background-repeat:no-repeat;
}
#sub_background_2{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-2;
margin-left:30px;
top:-52px;
background-repeat:no-repeat;
}
#sub_background_3{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-3;
margin-left:30px;
top:-65px;
background-repeat:no-repeat;
}
#sub_background_4{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-4;
margin-left:30px;
top:-77px;
background-repeat:no-repeat;
}
#sub_background_5{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-5;
margin-left:30px;
top:-83px;
background-repeat:no-repeat;
}
#sub_background_6{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-6;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_7{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-7;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_8{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-8;
margin-left:30px;
top:-85px;
background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
width:580px;
height:220px;
margin:0 auto;
margin-top:10px;
clear: both;
}
#Sub_title{
height:35px;
width:400px;
margin-top:30px;
margin-left:10px;
font-size:30px;
text-align: left;
}
#Sub_subtitle{
height:20px;
width:200px;
margin-left:10px;
margin-top:65;
font-size:15px;
text-align: left;
}
#Sub_image{
height:100px;
width:100px;
margin-top:10px;
margin-left:15px;
float:left;
}
#Sub_text{
height:180px;
width:400px;
float:right;
margin-top:5px;
text-align: left;
z-index:9;
position: relative;
}
/* SideBar Block */
#sidebar_header{
position:relative;
height:80px;
width:350px;
float:right;
background-image:url(images/Kickstarter.png);
margin-right:5px;
left:-20px;
margin-top:10px;
z-index:1;
clear: both;
top:1px;
}
#sidebar_banner{
position:relative;
height:729px;
width:360px;
float:right;
background-image: url(images/Side%20Banner.png);
left:-20px;
z-index:-1;
clear: both;
}
#Sidebar_content{
margin:0 auto;
margin-top:20px;
text-align:center;
font-size: 20px;
width:300px;
height:700px;
line-height: 3px;
}
#Kickstarter_donationcount{
width: 119px;
height: 26px;
text-align:center;
top:8px;
left:230px;
background-image:url("images/Progress/GoalNumber.png");
position: absolute;
padding-top:6px;
}
#Kickstarter_progressbar{
position:relative;
top:62px;
margin:0 auto;
width: 310px;
height: 18px;
background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
color: #000;
font:"arial";
font-size: 18px;
}
#Sidebar_content .title{
line-break: 1px;
}
/* Footer */
#footer_background{
position:relative;
background-image:url(images/Footer.png);
width:605px;
height:75px;
float:left;
margin-left:35px;
top:-89px;
z-index:-9;
line-height:1px;
font-family:"Arial";
font-size:12px;
}
#footer_background a:link{
color: #000;
text-decoration: underline;
}
#footer_background img {
margin-top:100px;
}
Wrapper is covering other stuff so you want to just push it to the bottom. Add z-index: 0; to #wrapper.
Or you can remove the z-index: -1 from the divs inside #wrapper
In the future, post only relevant code inside the post. Nobody will bother going through your site to figure out the issue for you. If you can't narrow the problem down to something specific, then you need to troubleshoot better.
While sachleen's answer did provide a workaround for your imminent problem, your page is facing several critical issues that will become problems very soon.
Give me the code!
Here's the link to your page fully working and without any validation issues. Images are not optimized, but I had to adapt one of them to prevent the usage of z-index all the time:
View it online
Download the files
Compare the files with your own and see what has been done to improve and make the document valid.
Here's a list of the most significant issues:
Element ID
Elements can have an ID, but the ID must be unique on the page, this because the ID purpose is to identify a specific element. If you need to provide a style to multiple elements, the proper way is to use classes.
From MDN :: id
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
Images
While this is more related with performance, I'm sure that visitors of this webpage will not be please to have to wait a considerable amount of time while 4Mb of images that you currently use get downloaded.
You can use Google Pagespeed Tools, that provides you with a tool to analyze the webpage for errors, and also if images aren't optimized, a link is presented on the analyse report to download an optimized version.
Document Stack
This is the reason as to why you've placed your question. You are messing around with your document stack to overcome issues that should be solved with images usage or a proper markup. While you're free to move elements up and down within the document stack, your page will be facing issues when it comes to cross-browser compatibilities.
The document stack should be used to overcome small details or provide a way to interact with the user without forcing a page refresh, among others. Shouldn't be used for the majority of the elements present as a way to solve layout issues.
Document Type
The document type is used to tell the browser how we should interpreter the document, and what rules should be respected to present it the way you intended.
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.
You can read about it at W3c - Doctype Declarations
HTML Markup
Your page lacks a proper markup, that in turn will prevent the browser from presenting elements the way they are supposed to be presented.
You can read about it at W3C - HTML: The Markup Language
Additionally, you can use the W3C validation service to validate and identify issues with your HTML Markup. Keep in mind that recent features aren't properly validated, mainly with CSS. But that's just a small portion.