I'm very very new to bootstrap and front-end frameworks in general. But, I am able to notice the characteristics that sites that use bootstrap have in common. The following picture contains something that I find to be very ubiquitous amongst bootstrap sites. The downward (or any direction) blue arrow that's pointing the the text below it is what I'm referring too.
I used firebug to inspect the elements and found it to be something that was relevant to the .hero-unit div.
How exactly does this work and how is it accomplished?
It doesn't come standard with bootstrap but Here is a good article on how to do with :after which I believe is what you are looking for.
Demo
.hero:after {
z-index: -1;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
content:'';
width: 0;
height: 0;
border-top: solid 10px #e15915;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
You make the triangle larger and smaller by adjusting the border-* attributes, and also the margin-left(border * -1).
Here is what you found in firebug. Hero Unit does refer to a jumbotron-style header, a large header element that can be used in bootstrap. You can find this element here:
http://getbootstrap.com/2.3.2/components.html#typography
Still the arrow you are referring to seems to be something that has been designed by the developer and does not come with the bootstrap unit.
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I was inspecting and learning shapes through css, and i got stumped by how the css even forms this figure. I tried changing the colors of the borders, but it does not even make sense, as it does not represent the outline of the original shape anyways, and before i put position: absolute the figure doesn't look anything like the final picture, but as soon as I place that line, it all just sticks together and transforms into the shape I pictured.
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
<div id='star-six'></div>
In CSS we make triangles using the border width. A six point star is nothing but two triangles places over one another in inverted position.
The first part of your code snippet makes a simple triangle. (Try commenting the :after part)
To make another triangle one could have used another div and position it over the first. But to accommodate it in a single class we have pseudo elements (:after). It is used to create inverted triangle.
Now coming to your second question why position absolute is needed. It is used to position the second triangle over the first one in inverted manner. You can see position relative is given #star-six.
Hope this helps. If needed I can share codepen link to explain it well.
Codepen Link
Refer above link for code
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
I would assume it would be something like "border-position" or "border-distance".
Thanks in advance.
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}
JS Fiddle demo.
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.
Thats what IE used to do in quirks mode. With CSS3 box-sizing you can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.html for more infos.
I have created essentially a large arrow pointing right.
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
Now I know this isn't "proper" but I am just testing right now.
I am wondering if there is a way that I can use this border technique and still somehow place a drop shadow on the leading bottom edge of the arrow. I was thinking of placing another div underneath it, but for this technique to work the other borders need to be visible.
If this can't be done using the border technique am I forced to use an image as the front of this arrow.
Thanks
You might want to consider using a Canvas to do this, which works cross platform very well with ExplorerCanvas included for MSIE compatibility (and of course is supported natively in WebKit & Gecko).
I believe it is box-shadow but that is likely to assume it works on the box model and probably won't compute the geometry created by the borders.