i have a problem with CSS position of one image on my page. I need it to keep that image in top right corner all time, so i choose to use this style for image:
HTML:
<div class="head">
<div class="content nm">
<div class="menu_inline">Home</div>
<div class="menu_inline">Help Center</div>
<div class="corner">
<img src="{$basePath}/images/corner.png" alt="GOOGLE PLAY" id="corner">
</div>
</div>
</div>
CSS:
.#corner { display:inline; position: absolute; top:0px; right: 0px;}
Everything works OK in desktop browsers, but problem is, when i load my page on any smartphone (tested Android and iPhone), when i loadd a page, page is zoomed and the picture cover my menu and other content of page. You can see the problem on picture below.
Do you have any advice, how to correct this picture. I understand that browser probably calculate a user width and on then place
link to picture with problem
Please Try to add this in your page inside head tag.
Related
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
I want to place buttons On the Top of the image in three places
Bottom Left Corner of the image
Bottom Right corner of the image
Center of the image. (optional)....
How to place these button on the top of the image.
<img src="images/default_image.png" style="width:90%" id="mImage" />
This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/
Try this:
<div id="div-1">
<img src="../img/logo.png" style="width:90%" id="mImage">
<div id="div-1a" data-role="fieldcontain">
Delete
</div>
<div id="div-1b" data-role="fieldcontain">
Delete
</div>
</div>
with this:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
bottom:0;
left:0;
}
#div-1b {
position:absolute;
bottom:0;
right:0;
}
You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.
Update:
You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).
As today, with jQuery mobile v1.3.2 I have implemented that in the following way:
<div data-role="page">
<div data-role="content">
<div id="wrapper">
<div id="button">
Button
</div>
<img src="i.jpg">
</div>
</div>
</div>
And with the follow css:
#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }
Some styles probably are not needed for what you want, but I just took the code sample from my own code.
wrapper div is relative positioned so its contents can be absolutely positioned.
z-index in the button div is to make sure it is placed on top of image.
You can add as many buttons as desired and change its css properties for top, left, right and button to move them around the image
Working example at jsFiddle
I have seen several sites where these social share buttons looks perfectly horizontal aligned. Take in account that many of these buttons are iframes.
Here is my current painful situation:
Change the margin-top on your iframes (or a div element above it) to negative values to have them line up. Use trial-and-error once you identify the correct elemtn until you get it right, for example using the following HTML:
<div id="twitter">
<iframe/>
</div>
<div id="facebook">
<iframe/>
</div>
<div id="digg">
<iframe/>
</div>
The CSS would look something like this:
div#facebook
{
margin-top:-5px;
}
div#digg
{
margin-top:-10px;
}
I am using jQuery SimpleModal in order to display product information. For this I have two divs which are to be shown in one modal dialog: The left div holds the product logo and some description right underneath the logo. The right div holds detailled information about the product. The content in the right div can become quite long.
What I need the modal dialog to do is to keep the left div at its position while the right div scrolls if its content is too long. How can this be accomplished?
Here is my HTML structure within the modal dialog:
<div id="container">
<div id="leftColumn">
<div id="picture">
</div>
<div id="information">
</div>
</div>
<div id="rightColumn">
<p>Looooong text...</p>
</div>
</div>
Here the according CSS:
#leftColumn {
float: left;
}
#rightColumn {
overflow:auto;
}
if you use positioning in these divs it will be greatly helpful
setting up max-width:as you require; max-height:auto; can help you
hi
I have this simple CSS code to add a banner to a sharepoint 2010 site - the problem is, when I add it, the page doesn't 'recognize' the additional horizontal space added by the banner, and thus the scrollbar scrolls past the bottom of the page. This happens when windows is maximized as well as when it isn't. Happens in IE, chrome, FF.
EDIT: screenshot of browser scrollbar
banner code:
<div id="header_container">
</div>
css:
#header_container {
background-image:url('/Images/topBanner.png');
background-repeat:no-repeat;
background-color:#fff;
height:147px;
}
Try adding 1px padding and set the width. Im just learning but ive found sometimes wierd stuff happens when you add more code to a site. The 1px of padding has fixed some of my layouts
Also id recommend not using header_container as your div tag. Think about how many items you have in the header.
EG if i had a banner and site name but still needed a wrapping div i would use
<div id="header">
<div id="banner"></div>
<div id="headerlogo"></div>
</div>
or
<div id="headerbox">
<div id="banner"></div>
<div id="sitetitle"></div>
</div>