I want my banner image to go down a bit so that the subject's full head can be seen. As you can see in the desktop version, the subject's head is fully visible but in the mobile version of the website, I can't see the full head and also not the full picture. How do I make the image go down a bit so as the full picture can be seen?
photo of the mobile version of my website
Mobile version of the website
photo of the website desktop version of the website
html code
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in" style="font-family: 'Satisfy', cursive;">Welcome To ************</div>
<div class="intro-heading">The path you won't turn your back on</div>
About Us
</div>
</div>
</header>
css code
header{
background-image:url(../img/bg.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
text-align:right;
color:black;
}
header .intro-text{
padding-top:100px;
padding-bottom:50px;
}
header .intro-text .intro-lead-in{
font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:40px;
line-height:22px;
margin-bottom:20px;
text-align: right;
}
header .intro-text .intro-heading{
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:800;
font-size:25px;
line-height:50px;
margin-bottom:50px;
text-align:right;
color: red;
}
#media (min-width:768px){
header .intro-text{
padding-top:350px;
padding-bottom:200px;
}
header .intro-text .intro-lead-in{
font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:40px;
line-height:40px;
margin-bottom:25px;
text-align:right;
}
header .intro-text .intro-heading{
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:800;
font-size:25px;
line-height:75px;
margin-bottom:30px;
text-align: right;
color: red;
}
}
#media only screen and (max-width: 480px) {
header .intro-text{
padding-top:140px;
padding-bottom:100px;
padding-left: 110px;
}
header .intro-text .intro-lead-in{
font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style: italic;
font-size:26px;
line-height:22px;
margin-bottom:20px
}
header .intro-text .intro-heading{
font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:400;
font-size:17px;
line-height:18px;
margin-bottom:30px;
color: red;
}
}
Maybe something like this?
#media only screen and (max-width: 480px) {
body {
padding-top: 50px; // or your navbar height
}
}
It will move your content on mobile by 50px down.
I think that one thing that can solve this problem, is you remove the attribute "background-position: center center;" from the main, and put it inner media query for each size of page (mobile, desktop) changing the second value of attr background-position, wil stay this way for sample:
header{
background-image:url('back.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
text-align:right;
color:black;
}
#media (min-width:768px){
background-position:center 40px !important;
}
#media (min-width:480px){
background-position:center 20px !important;
}
Sorry for my english, I hope that this can help you
You could change the background position in mobile device.
#media screen and (max-width: 480px) {
header {
background-position: 0px 100px;//0px from left 100px from top
}
}
EDIT: or you can use a specific image for mobile with the good dimensions
Related
I am trying to get an image to show up behind the text as a hover effect.
It is just a simple splash page for now, but I can't seem to figure out how to get this to work.
Here is the current page. The words below the logo are links.
https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e
Here is the image I want behind the text when a user hovers.
https://gyazo.com/67852dd57789458942952b1dd3b3cb55
It is like a scribble effect in different colors. They wouldn't all show up at one, but just the different one behind each word as you hover.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
<p>
Liquidation -
<a href="#">Monetization<a> -
Brokerage
</p>
</div>
</div>
</body>
<footer>
<p>© 2016 Lira.net </p>
</footer>
</html>
and here is the CSS:
h1 {
font-family: "Open Sans" , serif;
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}
body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topimage{
width: 100%;
text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Any help would be greatly appreciated!
The easiest way to get this done is to use background images
You can try something like this:
.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}
Just replace the class names for the ones that suits your links, and obviously play with sizing, something like display inline-block to the links will be enough. Here you have everything you will need for this task
You'll just have to add a background image on hover. Here's a fiddle : https://jsfiddle.net/rd7zbytc/
and here's the code:
#links p a:hover {
background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-size:100px;
}
Is this what you are talking about?
http://codepen.io/xkurohatox/pen/qbPXOb
HTML changes:
<div id="links">
<p>
<a id="a1" href="#">Liquidation</a> -
<a id="a2" href="#">Monetization<a> -
<a id="a3" href="#">Brokerage</a>
</p>
</div>
CSS changes:
#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
background-size:100%;
}
#a3:hover {
background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
background-size:100%;
}
/* images above are not my own and only being used for demo purposes */
Hope this helps!
I am in middle of developing a website and I am facing a small problem. The top navigation bar of the website works fine upto a particular screen resolution. However, if I adjust my browser window (smaller in size), the navigation bar is getting disappeared. The same problem also persist if I view the website on my Ipad. I am not able to figure out what am I doing wrong with the CSS code for navigation menu.
I have uploaded the website on a testing server
http://bcklight.hostoi.com/
HTML Code
<section id="start" class="start">
<div id="section-nav" class="section-nav">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Product&Services</li>
<li>Work</li>
<li>Company</li>
<li>Contact</li>
<li>Fi | En</li>
</ul>
</div>
</div>
CSS Code
.container{
margin:0 auto;
max-width:960px;
padding:0 5%;
width:90%
}
.section-nav{
background:#FFFFFF;
-webkit-box-shadow:0 0 5px #111;
-moz-box-shadow:0 0 5px #111;
box-shadow:0 0 5px #111;
color:#838383;
display:none;
font:800 .688em "proxima-nova",sans-serif;
letter-spacing:.3em;height:31px;line-height:31px;
position:absolute;
text-align:center;
text-transform:uppercase;
top:0;
width:100%;
z-index:9999
}
.section-nav.fixed{
position:fixed
}
.section-nav ul{
clear:both;
list-style:none;
margin:0;
padding:0
}
.section-nav li{
display:inline-block;
padding:0 3%
}
.section-nav li.active a{
color:#f7e442;
text-decoration:none
}
.section-nav a{
-webkit-transition:400ms;
-moz-transition:400ms;
-o-transition:400ms;
transition:400ms;
color:#838383;
font-weight:700;
outline:0;
text-decoration:none
}
.section-nav a.active,.section-nav a:hover{
color:#FF8C00;
text-decoration:none
}
.nav-trigger{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:yellow;
cursor:pointer;
display:none;
float:right;
height:16px;
margin-top:7px;
width:16px
}
.section-header{
font:800 1.875em "proxima-nova",sans-serif;
letter-spacing:10px;
margin:0 0 20%;
padding-left:10px;
text-align:center;
text-transform:uppercase
}
Please have a look at inspect element on the browser if I am missing anything to mention over here.
I don't understand what's the problem - you're using "display: none;" on both
media="screen, projection"
.section-nav
and then (when it get's even smaller):
media="screen, projection"
screen.css:2057#media only screen and (max-width: 768px)
.section-nav .nav { display: none; }
i think you've got messed up with all the media queries and lost track of what does what :) happens to me all the time. you just need to use Chrome Inspector to figure those out ;-)
http://someimage.com/nFKmzAA
Position fixed has very poor support on mobile browsers.
You should use a media query to change it from position fixed to position absolute on mobile browsers.
in screen.css, line 93
.section-nav{
display:none;}
display none makes this issue.
I would like to implement a tree menu like the link bellow using HTML5 and CSS3 or jquery menu or somehow using ordinary html, css and javascript .
http://www.crystal.ch/abb/power_systems_landscape/
You may notice that there is following issues involved,
Nice hover effect (I badly need this)
Rotation of menu item arrow icon
Also here you see sliding up and down smoothly that is not problem to me.
Any idea or reference would be appreciated. thanks
To start we need the HTML
<p class="menu_head">first</p>
<div class="menu_body">
1
2
3
4
</div>
<p class="menu_head1">Second</p>
<div class="menu_body">
1
</div>
Jquery for the effect
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head1").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head").mouseover(function()
{
$(this).css("text-indent","35px");
$(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);
});
$("#firstpane p.menu_head").mouseout(function()
{
$(this).css("text-indent","10px");
$(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);
});
I added the mouseover and mouseout for your glass effect. just create a background with white color or any color or just erase the .css can make it this way.
$(this).fadeTo("slow",0.33);
CSS
.menu_head {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_head1 {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_body {
display:none;
}
.menu_body a{
font-family: arial;font-weight: bold;
left:3%;
width: 220px;
height:7px;
text-indent:10px;
position:relative;
padding: 10px 15px;
display:block;
color:#006699;
padding-left:10px;
font-weight:bold;
font-size:10px;
text-decoration:none;
vertical-align: middle;
}
See Example
try to edit the css for it was made to adapt to my site.
Gudluck
I'm trying to display a div with content over a 360° panorama with javascript.
It works perfect on IE, Firefox, Safari, Iphone, Ipad and android 3 (tablet) but doesn't work as it should on android mobile (2.3.3).
From my panorama I call a javascript function to fadein a div wich has an absolute position and display:none.
Here is the javascript
function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
$('#wrapper'+divnum).fadeOut("slow");}
Here is my html
<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script type="text/javascript">
// <![CDATA[
var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
swf.addVariable("xml", "nantes.xml");
swf.addParam("wmode","opaque");
swf.embed("pano");
// ]]>
</script>
</div>
<div id="wrapper1"><div id="scroller">
<div class="closetop">Fermer</div>
<div class="closebottom">Fermer</div>
<div id="tabContainer1">
<div class="tabs">
<ul>
<li id="tabHeader_1">Texte</li>
<li id="tabHeader_2">Photos</li>
<li id="tabHeader_3">Vidéos</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
Texte...
</div>
<div class="tabpage" id="tabpage_2">
Photos...
</div>
<div class="tabpage" id="tabpage_3">
Videos...
</div>
</div>
</div>
</div>
</div>
And the CSS
* {
margin:0;
padding:0;
}
#media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; -webkit-user-select:none; -webkit-text-size-adjust:none; }
#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}
#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
position:absolute;
top:0px; bottom:-60px; left:0px;
width:100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
overflow:auto;
display:none;
}
#scroller {
position:relative !important;
margin:0 auto;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
max-width: 600px;
background:transparent;
color: #fff;
margin-bottom: 60px;
text-align: justify;
}
Here is the behaviour on default android browser: the wrapper div is opened but stays behind the panorama.
On Opera mobile the panorama can't be scrolled until you call a wrapper div, but then the wrapper is over the pano (wich is correct) but you can't scroll it, you can scroll the panorama instead...
I have really no idea of the problem...
If someone has an idea, thanx very much !!!
MY TEST PAGE iS THERE : http://www.360images.fr/nantes/nantes.html
I have this problem, too. For me adding
.hide()
before to
$('divelement').fadein
works.
I am having an issue with a layout I am trying to develop.
I basically have split the view-port into 2 equal width divs with a different background tiled image in each.
I have it stretching full screen 100%, but have a problem on scrolling.
The background image is cropped to the original height of the view-port..!
Here's the html:
<body>
<div id="container">
<div id="left" class="half">
left content here
</div>
<div id="right" class="half">
right content here
</div>
</div>
</body>
Here's the css:
html, body {
margin:0;
padding:0;
height:100%;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
}
div#container {
height: 100%;
min-width: 800px;
min-height: 500px;
}
div.half {
height: 100%;
width: 50%;
}
div.half#left {
float: left;
text-shadow: 0px 1px 1px white;
background-image: url(images/metalBG.jpg);
}
div.half#right {
float: right;
text-shadow: 0px -1px 1px black;
background-image: url(images/fabricBG.jpg);
}
I'm wondering if the is maybe a javascript, hence included in this cat also.
I would use Firebug or similar to verify that it's a background problem, not a DIV sizing problem. Maybe what's clipped is not your BG image, but rather the height of your DIVs.
If this is not the case, you can try adding
background-repeat:repeat,
to your CSS for div.half, but this is already the default value, so unless you have some CSS somewhere overriding it, should be in place anyway.
This seems to get me the result i want, not tested in explorer yet though.
html {
margin:0;
padding:0;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
background-image: url(images/metalBG.jpg);
}
body {
float:right;
margin:0;
padding:0;
width:50%;
background-image: url(images/fabricBG.jpg);
}
#left {
float:left;
margin-left:-600px;
width:550px;
}
I haven't run this code but adding it to the existing code should work (I hope :P).
You can keep the divs and their backgrounds fixed where they are using something like:
.half{
position:fixed; /* keeps the divs in the same place */
overflow:auto; /* overflowing content will scroll */
background-attachment:fixed; /* the background won't scroll with content */
}