I am writing a responsive webpage that has a background image and a button over it. The button needs to be at a specific position on the image. Now I am creating a div with the background-image (different for mobile, tablet and desktop breakpoints) and I create a css button on the image. The problem comes when I resize the window, within the same breakpoint, the background-image resizes but the css button is placed w.r.t the parent container of the background div and thus moves.
The code snippet looks like
<div class="imgContainer">
<a href="/gotohere.html">
<span class="goto_btn">Click here</span>
</a>
</div>
the css code for mobile breakpoint looks like
.imgContainer {
background-image: url("mobile.jpg");
height: 18em;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
clear: both;
position: relative;
}
.goto_btn {
bottom: 3.5em;
font-size: 15px;
right: 4em;
background-color: #1867C3;
border-radius: 10px;
color: #FFFFFF;
display: block;
float: right;
font-family: Helvetica Neue,arial,sans-serif;
font-weight: 700;
margin-top: 75%;
padding: 10px 58px;
position: absolute;
text-shadow: 2px 1px #000000;
text-transform: uppercase;
}
Now I can create such css rules for tablets and desktop similarly and it looks fine but the issue comes within the same breakpoint, lets say mobile, for different screen-size say iphone 5 and galaxy S4 screen, the position of goto_btn is not fixed although its placed position:absoulte; w.r.t the imgContainer which is position:relative;
Can I somehow position the goto_btn fixed with the imagConatainer div so that any resizing within the breakpoint keeps the relative position of button fixed with respect to the background-image ?
Any help will be hugely appreciated.
Thanks
i based the your buttons position according to your .imgContainer width and height tag
.imgContainer {
background-image: url("mobile.jpg");
height: 18em;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
clear: both;
}
.goto_btn {
font-size: 15px;
background-color: #1867C3;
border-radius: 10px;
color: #FFFFFF;
display: block;
font-family: Helvetica Neue,arial,sans-serif;
font-weight: 700;
padding: 10px 58px;
position: absolute;
top:16em;
right:2em;
text-shadow: 2px 1px #000000;
text-transform: uppercase;
}
was able to get it working, to most parts by
(a) changing background-size: 100% 100% in imgContainer and
(b) proving bottom, left and right in % values in goto_btn
This did streteced the background-image in some edge cases (like galaxy note 3) but for most parts, it worked fine. Depends on the size of the image(jpg) for each breakpoint.
Related
I want to create a CSS box to act as a 'logo' piece or what have you, centered in another div on the middle of the page - I'm using bootstrap 3, put the div in a container-fluid for a full-width page as I wanted, and went about starting on the logo portion of it.
My code is as follows
.logo{
width: 50rem;
height: 50rem;
margin: 0 auto;
text-align: center;
font-size: 15em;
font-weight: 100;
font-family: 'Raleway' , sans-serif;
color: white;
border: 14px solid black;
}
For whatever reason, this doesn't actually make a square - I'm assuming this is based on the font-size, but it seems like the larger the font goes, it just spills outside of the box - so I can't for the life of me figure out how to both vertically align this text and create a perfect square around the text while I'm at it. Any insight would be greatly appreciated - thanks!
I have a container div that is basically that can be your body. The size can be adjusted.
Then there is the logo class. This class has a relative width.
In the examples case: 50% of its parent (container class)
There is no fixed height of the box so it height is based on the text.
The box is positioned in the center trough absolute positioning and transforming it again.
.container {
position: relative;
width: 500px;
height: 500px;
background-color: gray;
}
.logo {
position: relative;
top: 50%;
left: 50%;
width: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 3em;
font-weight: 100;
font-family: 'Raleway', sans-serif;
color: white;
box-sizing: border-box;
border: 14px solid black;
}
<div class="container">
<div class="logo">
Some random text goes here?
</div>
</div>
I have an dynamic div displaying some information that I want to position in an exact position relative to the background of the page. For example, I want to put a number 9 let's say, over the eye of a cat. In "full" resolution, this works fine, but tying the margin-left to a pixel size, or even a percent, will cause this to break. The code for the "eye" is something like this:
.catEye {
position: absolute;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
margin-top: 100px;
margin-left: 68px;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
Here is a plunkr that displays the problem. The problem is most evident at smaller resolutions. When in "full" resolution, the "9" should be directly over the cat eye.
http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview
I am using Foundation for the block-grid setup, 5 items per row. As the image I have is a certain size, this should generally remain the same if possible.
Question: Is there a way to get the "9" to always position directly over the eye, no matter the browser resolution? In my actual work, it needs to be positioned directly over a corner piece, so movement is very noticeable.
Clarification: After thinking about it, what I'm basically asking is positioning relative to the image element, because no matter the size/placement of it, as long as the "9" is placed relative to it, it would work.
I guess you meant to have sort of background-size:cover for the cat, I don't think that is possible in that case.
Currently, the relative position is set on the element that can be larger than 200px (which is the image size), and you have center value set on the background, so that it moves. The cat eye is always staying in the same place but not the cat image.
To fix it, you can set the relative element to max-width: 200px;. Simplified demo follows.
JSFiddle Demo
.imgCat {
background: url("http://i.imgur.com/qpbY8VC.png");
max-width: 200px;
height: 200px;
position: relative;
}
.catEye {
position: absolute;
left: 75px;
top: 95px;
width: 30px;
height: 30px;
display: block;
border: 2px solid orange;
border-radius: 50%;
}
<div class="imgCat">
<span class="catEye"></span>
</div>
First thing you can use left: and top: property to position an absolute/relative img (instead of margin-left & margin-top).
Second depending on how the containing img is resizing I'd set the left: and top: property with a percentage value.
Third use relative positioning (relative to static parent - like in your scenario).
put this in your CSS and let me know if it's the desired rendering
.imgCat {
background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat;
height: 200px;
}
li {
padding: 10px;
border: 1px solid #000;
}
.catEye {
position: relative;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
top: 50%;
left: 35%;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
BTW: actually the cat img doesn't look very responsive...
so I placed some links (text) over an image and in desktop browsers everything is working just fine, however, once you open it in a mobile browser, the text is not showing up. Here's my css:
#header {
width: 100%;
position: relative;
}
#dm {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#logo {
position: absolute;
top: 5%;
left: 18.8%;
width: 13.5%;
height: 64.8%;
background-color: transparent;
border: none;
}
h2 {
position: absolute;
top: 59%;
left: 21.7%;
width: 78%;
}
h2>a {
color: #f6f6f6;
font-size: 1.3vw;
font-variant: small-caps;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
text-decoration: none;
text-shadow: #000000 10% 10% 20%;
margin-right: 1%;
}
And HTML code:
<div id="header">
<img src="header.png" border="0" id="dm">
<a id="logo" href="index.html"></a>
<h2>Domů O nás Web & Grafický design Digitální kresba Pro firmy Ostatní služby Portfolio Faq Kontakt</h2>
</div>
Does anyone know how to solve this issue?
The font size you have set for the links is font-size: 1.3vw;, which means they will appear at 1.3% of the viewport width.
For desktop browsers with screen width of at least 1000px, it will show up as at least 13px which is totally fine.
For a mobile browser, if your device screen is 640px wide, it will only appear as ~8px which is way too small, which is probably why you couldn't see it. Besides, most mobile devices have width of between 320px and 400+px if viewed at portrait mode, so that makes the text even smaller.
When I put it at the fiddle, I thought there was no text until I placed a grey placeholder image. You should have used em instead of vw for the font size if you want to scale it.
There is probably a relentlessly simple solution to this but I've been chasing my tail for a while so I've come to ask those wiser and smarter than me.
I've got a website for a personal project I'm making which displays images within a lightbox. See image:
The header area (red) is fixed height.
I want the images (yellow) to sit within a light box (green) which also has a caption. Crucially the images displayed need to retain their aspect ratio, 5:4, and fill the remaining height left below the header (bar a small margin top and bottom).
There's probably a really simple, elegant solution out there but I've not found it.
Any help gratefully received.
EDIT ---
Here's a fiddle of what I'm trying to do: http://jsfiddle.net/qh2V8/
Even this isn't right as I've had to put a fixed width in to even try and get it to work.
CSS:
#header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 145px;
background-color: #F00;
}
#overlayBg {
position: fixed;
top: 155px;
bottom: 20px;
padding: 8px;
padding-bottom: 30px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
background: #FF0;
width: 400px;
}
#overlayContainer img {
position: relative;
height: 100%;
width: 100%;
}
#overlayBg p {
position: relative;
padding-top: 8px;
padding-bottom: 10px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 14px;
}
HTML:
<div id="header"></div>
<div id="overlayBg">
<div id="overlayContainer">
<img src="http://i.imgur.com/u9VIg60.jpg" />
</div>
<p>Caption</p>
</div>
The image size need to be set through scripting, unless the images are a fixed constant size. The following link is of good help to your problem: Change image size with JavaScript
I'm pretty sure that you can get the original size of the image through yourImg.Style.Height and yourImg.Style.Width, and then make the calculations required to make it a 5:4 picture..
Here's where I got to.
There are fixed ratio solutions if you are basing the size of the element on width, using :before and padding-top. There's a good write up here.
There is a fixed ratio solution if you are basing the size of the element on height, however the height must be a % of the height of the screen. Written up here in another Stackoverflow question:
Resize a Div Based on Height but Retain Aspect Ratio (almost got it) Strange Reload bug
If you have a fixed pixel size header or footer and need an element to expand to fill the exact size remaining you can't do it with just HTML and CSS.
Here's a codepen.io of where I got to:
http://codepen.io/niazipan/pen/ydkGt
JS to set the image height, and CSS to style everything else around it. Code below:
HTML
<div id="overlayBg">
<div id="overlayContainer">
<img src="http://i.imgur.com/u9VIg60.jpg" id="yourImgId" />
</div>
<p>Caption</p>
</div>
CSS
html, body {
height: 100%;
text-align: center;
}
#header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: #F00;
}
#overlayBg {
position: fixed;
top: 55px;
padding: 8px;
margin-left: auto;
margin-right: auto;
background: #FF0;
position: relative;
text-align: left;
}
#overlayContainer {
height: 100% !important;
width: 100%;
}
#overlayBg p {
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 14px;
margin-top: 5px;
margin-bottom: 5px;
}
JS
var size = window.innerHeight - 120;
document.getElementById('yourImgId').style.height = size + 'px';
document.getElementById('overlayBg').style.width = size * 1.25 +'px';
So I have a menu and on it there is a button with text and I want behind the text to be an image that shows that you are on the page and this is the code:
HTML:
<div id="menu">
<div id="about">About Us</div>
</div>
CSS:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
width: 100%;
height: 38px;
}
#about {
background: url(images/button.png);
width: 168px;
height: 51px;
font-family: Anivers;
font-size: 20pt;
text-align: center;
color: white;
line-height: 50px;
vertical-align: middle;
margin-top: 1%;
}
So far, so good, except that the image will only show the height and width that coresponds to the size of the text. For instance if I make the text 24pt, the image behind it will grow larger, but if I make it smaller, the image will become smaller and I don't want that. So how do I stop it from happening. I already searched all over the place, sadly I couldn't find similar topic. I hope you can help me :).
If I understand your question correctly you need to add display: block to the <a> element and set height: auto; instead. As for the image it should not scale anymore and I centered an image for demo purposes.
DEMO
You can accomplish this by displaying your "a" element as a "block". This will allow you to specify the size of the element independent from the size of the font. You can then inherit the width and height of the "#about" css styling if that's the size of "hover.png", or specify your own size based on the actual size of "hover.png" if its different than that stated in "#about", it sounds like 38px for hover.png is what you want as opposed to the 51px height of the #about parent. Without setting "a" as a block, the font size of the text in "#about", the parent element, would rule the overall size of the a element and styling, and your background "images/hover.png" will only provide a background for that size.
Here's what your a element in css would look like with the 38px height, you could also say "inherit" for the height if desired. I tested this and it works:
a {
text-decoration:none;
color: white;
background: url(images/hover.png);
display: block;
width: inherit;
height: 38px;
}
I hope this helps.
<div id="menu">
<img src="images/4.png" />
About Us
</div>
#menu {
position: relative;
width: 168px;
height: 51px;
}
img {
width: 100%;
height: auto;
}
img:hover {
background: blue;
}
a {
position: absolute;
z-index: 100;
/* top: 0; PLACE LINK CORRESPOMNDING TO IMG
left: 0; PLACE LINK CORRESPOMNDING TO IMG */
background: red;
font-family: Anivers;
font-size: 23pt;
color: white;
line-height: 1.2;
}