I am designing a site that has a specific requirement to display a ribbon to the far right of the screen, I am using Bootstrap and the ribbon is in a bootstrap container, with a row and columns divided equally between the two elements, I want the Designer Text to stay exactly where it is because I am trying to keep it responsive and contained when going to mobile. How can I push the image div (Ribbon) all the way to the far right extending outside of the container.
I have include an image below of what I am working with. I may be doing this completely wrong, as my design skills are minimal.
I would like it to look like this
Here is the code:
.bookmarkRibbon {
/*width:100%;*/
height: 0;
width: 100%;
border-bottom: 22px solid #ff5750;
border-top: 22px solid #ff5750;
border-left: 20px solid transparent;
position: absolute;
margin-right: -3000px;
}
.bookmarkRibbon a {
display: block;
padding: 0;
position: relative;
/* allows us to position our pseudo-elements properly */
background: #ff5750;
overflow: visible;
/*height: -18px;*/
margin-left: 29px;
margin-top: -18px;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-7">
<h1 ID="lblCategoryName" runat="server"></h1>
</div>
<div class="col-xs-5">
<div class="bookmarkRibbon" id="discountBannerContainer" runat="server" style="margin-top: 15px">
20% OFF ADDRESS STAMPS<p class="mine">CODE: STAMP 20</p>
</div>
</div>
</div>
</div>
You have to move the ribbon outside the container to be child of body.
Than you can position it absolute.
<body>
<div class="ribbon"></div>
</body
.ribbon {
position: absolute;
top: 300px;
right: 0;
}
If you can not move the ribbon outside the container you have to use position fixed.
Unfortunately the ribbon will scroll with your page.
.ribbon {
position: fixed;
top: 300px;
right: 0;
}
Last option would be to use negative values and use the calc function.
This is not quite ease but doable.
Do you have a link to your site? I could take a looke at it if you like to.
Related
I'm new so please be as simple as possible. I want to put words over a picture and got code that words below. The text appears on a black box in the lower right. I want it to appear in the upper left.
When I change in text box bottom to top and right to left it takes up the whole image. If I keep it on the right-it goes down all the way to the bottom of the image. Even if I try to increase the px to make it not so long it doesn't work. How can I fix this & what am I doing wrong?
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<div class="container">
<img src="pdf/library.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
The positioning of the element is based on the left, right, top and bottom and it will be relative the element you positioned to (in your case is the div with the container class).
If you will use only left and top it will work as you expect. The values is how much space from that side it will take.
Also, if you use 3 or 4 sides, it will stretch the element so the boundaries of it will be on the side you specified.
For example (I used sample image from google for the snippet):
#TEST {
background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
border-radius: 3px;
margin: 1em 0;
color: #fff;
}
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
top: 20px;
left: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
<section id="TEST">
<div class="container">
<img src="https://www.petcareplus.ie/wp-content/uploads/2020/04/dog-puppy-on-garden-royalty-free-image-1586966191.jpg" style="width:100%;">
<div class="text-block">
<h4>WORDS</h4>
</div>
</div>
</section>
I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.
From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>
If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
I'm wondering the best approach for creating an overlapping navigation. I guess the easiest way is just to position it absolutely relative to the containing div? Any thoughts on an easy way to position this would be great!
I'm currently considering using a bootstrap button group for the "nav".
This is possible with minimal pure css, and without position absolute.
In order to keep your nav centered, I would recommend some markup along the lines of below (a wrapper around your nav to let you center it up).
Note that I understand you intend to use bootstrap, and you will absolutely be able to do that with what you are trying to accomplish. The below is just pseudo-code to get you the key elements / working example of how this could be accomplished.
jsFiddle
Basic markup:
<div class="nav">
<nav class="buttons">
Button 1
Button 2
Button 3
</nav>
</div>
<div class="content">
Borderered content area.
</div>
Demonstrative CSS:
div.nav {
text-align: center;
z-index: 2;
padding-top: 1px;
}
nav {
display:inline-block;
margin:0 auto;
background: white;
}
nav a {
display: inline-block;
padding: 5px 10px;
border: 1px solid black;
}
div.content {
margin-top: -15px;
z-index: 1;
border: 2px solid red;
min-height: 300px;
}
Note
With this markup, you will end up with about 4px of space between the <a> elements due to the whitespace. See this article: Fighting the Space Between Elements.
My typical solution is to move the elements onto the same line. Not quite as readable, but gets the job done, and doesn't require any other "funky" solutions:
<nav class="buttons">
Button 1Button 2Button 3
</nav>
.header {
background-color: blue;
width: 100%;
height: 200px;
margin-top: 25px;
}
.nav {
position: absolute;
left: 50%;
top: 0;
}
.nav div {
position: relative;
left: -50%;
background-color: yellow;
width: 400px;
height: 50px;
}
<body>
<div class="nav">
<div>
</div>
</div>
<div class="header">
</div>
</body>
or you can go with just one div in the nav bar putting left: 25%
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I have a row of icons that need to be at the bottom of the page, they also need to be fixed. Simple, right? Not. When you position them fixed, the icons fall into one another so only one icon shows. Well there goes that, but there also goes the chance of placing them at the bottom of the page since I need
#icons {
position:fixed;
bottom:0;
}
I could always manually place them, but this means they cant be fixed like I need them too, and I would have to declare it for different browsers. Help?
Link to website: Roseannebarr.tumblr.com
Here is an example of my HTML
<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">
{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
</div>
Fixed position is what it says, 'fixed', and you are using the same position for all of them.
The best way is not to use position:fixed in #outer, instead try with display:inline; and better yet, I see they are inside #holder, use fixed in #holder and modify #tooltip so it can be shown above because it is what is showing the content.
For example:
#holder {
bottom: 0px;
left: -382.5px;
margin: 0px auto 0px 50%;
margin-left: 50%;
position: fixed;
width: 765px;
}
#tooltip {
background: #6CB4E2;
border-top: 30px solid white;
display: none;
left: 50%;
margin-left: -382px;
padding: 10px;
position: absolute;
bottom: 51px;
width: 745px;
}
#outer {
background: #6CB4E2;
bottom: 0px;
display: inline;
float: left;
margin-top: -8px;
}
I would wrap your icons in a div like this:
<div id="myicons_container">
<img src="icon1.gif">
<img src="icon2.gif">
<img src="icon3.gif">
<img src="icon4.gif">
<img src="icon5.gif">
</div>
<style type="text/css" media="screen">
#myicons_container {
position: fixed;
bottom: 0;
}
</style>
Edit : Per your comment, I would suggest re-writing your code to collect the icons in a container element. But, you might get away with this (haven't tested in any browsers):
<style type="text/css" media="screen">
.block {
width: 50px;
height: 50px;
float: left;
position: fixed;
bottom: 0;
}
</style>
Note: you have to give floated items a width and height.
One other note, in your code, you will have multiple elements with the same ID attribute. This is a no-no. You'll need to change it to a class like I've done in the CSS above.