I have an "article-box" that is used for a few different pages with 2 different widths. I have an image that i would like to display in the top right hand corner of each of these boxes. how could i use css to display the image correctly in the top right hand corner for each box?
i have the following css code which doesn't quite work, thanks in advance.
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
#badge {
position: relative;
max-width:260px;
}
#badge img {
position: absolute;
border-width: 0px;
}
}
and in the view
<div class="wide-article-box">
<!--text etc -->
<div id="badge">
<%= image_tag "BLH_BADGE.png" %>
</div>
</div
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
position: relative;
#badge {
position: absolute;
top: 0;
right: 0;
max-width:260px;
}
#badge img {
border-width: 0px;
}
}
You can look into the float property of CSS. It will also automatically wrap text around the image (or any block element).
#badge {
float: right;
max-width: 260px;
}
P.S. you might also have to use clear css property but that will depend on the nature of the DOM. just read up on on float and clear properties
Related
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
I tried to v-align a image with a text in my link.
Until now I have used a background image to perfectly v-center the image of my text
CSS
.label {
margin: 0 0 0 15px;
padding: 0;
color: #fff;
}
a.moreinfo {
background: url(../images/gallery/add.png) no-repeat left center;
cursor: pointer;
}
HTML
<a class='moreinfo'><span class='label'>MORE INFO</span></a>
Now I want to try not to use background images, but insert an image in the html code (img src). I tried using vertical-align: middle, but the image is not aligned precisely like the one in the background. How could I do to get the same thing with an image included in the html code? thanks
Here is how you can center an element in another:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
You can find more in this link: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ .
I've found something like this to work very well for me:
a.moreinfo {
display: table;
width: 100%;
}
a.moreinfo span, a.moreinfo img {
display: table-cell;
vertical-align: middle;
width: 50%;
float: none;
}
When you vertically align while setting display to table, floated elements won't work as expected. The parent should have a set width or the default width will set to auto and, again, not work as expected.
I need to align the p element to the bottom center of the page but something is wrong. I am making an HTML5 page.
Here is the CSS selector:
p { vertical-align:80px; }
If you need exactly "align the p element to the bottom center of the page"
p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
demo
but it's not the best solution for most websites. Suppose, you are trying to make footer with some copyright (or year, or your name). In this case you have to use more complicated html and css, that includes main div, footer div, etc.
Please try this:
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
body:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
}
p{
display: inline-block;
vertical-align: bottom;
}
Please view the demo. You will change the vertical-align for p, lay hime at top or middle.
I need two divs to look a bit like this:
| |
---| LOGO |------------------------
| |_______________| LINKS |
| CONTENT |
What's the neatest/most elegant way of making them overlap neatly? The logo will have a fixed height and width and will be touching the top edge of the page.
Just use negative margins, in the second div say:
<div style="margin-top: -25px;">
And make sure to set the z-index property to get the layering you want.
I might approach it like so (CSS and HTML):
html,
body {
margin: 0px;
}
#logo {
position: absolute; /* Reposition logo from the natural layout */
left: 75px;
top: 0px;
width: 300px;
height: 200px;
z-index: 2;
}
#content {
margin-top: 100px; /* Provide buffer for logo */
}
#links {
height: 75px;
margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}
<div id="logo">
<img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
<div id="links">dssdfsdfsdfsdf</div>
</div>
With absolute or relative positioning, you can do all sorts of overlapping. You've probably want the logo to be styled as such:
div#logo {
position: absolute;
left: 100px; // or whatever
}
Note: absolute position has its eccentricities. You'll probably have to experiment a little, but it shouldn't be too hard to do what you want.
Using CSS, you set the logo div to position absolute, and set the z-order to be above the second div.
#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this:
#logo {
float: left;
margin: 0 10px 10px 20px;
}
#content {
margin: 10px 0 0 10px;
}
or whatever margin you want.