I have a div container (header)
div.header {
width: 1024px;
height: 115px;
background-color: black;
}
which contains a h1 named header_title with a text inside:
#header_title {
font: 80px 'Oxygen', sans-serif;
letter-spacing: -8px;
margin-left: 25px;
text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}
Exactly below header div i have my menu, like you see in my image.
If I set a text shadow that will go out the div, (the 4th letter, a 'g') ho can I make it displaying anyway and don't be cut off?
I tried overflow: visible, and z-index solution, but it doesn't work =(
Thanks.
Markup for header:
<div class=header>
<h1 id=header_title>Programmazione</h1>
</div> <!-- fine header -->
<div class=menu>
etc......
Try deleting the height property of the header and give it a padding-bottom of about say 15px for the shadow. That should do the trick.
I don't your HTML markup to test and be sure, but I believe that what is happening is that the the shadow is going outside the header div. I see no reason in the CSS you've provided that it wouldn't be.
What is happening is that the menu image that follows is blocking it. For most browsers, if you are positioning items by default (ie not absolutely, not relatively, not fixed) then, in situations where they overlap, the following neighbor is above. Also, if you are positioning elements this way, the z-index does not affect them. z-index only works on relative, absolute, and fixed elements.
One solution is to give both elements position:relative; and then the position your header div higher than the menu using z-index.
Related
I have a glyphicon as such:
<div class="col-xs-4 col-sm-2">
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>
.glyphicon-large {
min-height: 260px;
font-size: 35px;
width: 1em;
display: block;
top: 50%;
margin: -0.5em auto 0px;
}
The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the top 50% rule, it suddenly works. How come?
Browser Bug Explanation
According to MDN on top:
For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.
Note: Percentage is applied as a percentage of the height of the element's containing block
According to W3 on top:
For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
Note: Percentages refer to height of containing block
Here's my guess:
I think what's happening is that when the browser is first rendering the visual tree, and sees top:50%;, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively starts off as zero until otherwise indicated. It then pushes down the glyph by 50% of zero.
When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children.
Minimal, Complete, and Verifiable Example
Note: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add top: 1px that would have been applied by the .glyphicon class. Even though it is overwritten by 50%, it still plays an important role.
Here's a simple set of parent/child elements:
<div id="container">
<div id="child">Child</div>
</div>
In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:
window.setTimeout(function() {
document.getElementById("child").style.top = '50%';
},2000);
Example 1 (jsFiddle)
As a starting point, let's recreate your issue.
#container {
position: relative;
/* For Visual Effects */
border: 1px solid grey;
}
#child {
position: relative;
height: 50px;
top: 1px;
/* For Visual Effects */
border: 1px solid orange;
width: 50px;
margin: 0px auto;
}
Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.
Example 2 (jsFiddle)
If you add top: 50% to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.
Example 3 (jsFiddle)
If you add top: 49% to the child element, then the DOM does have something to update so we'll get the weird glitch again.
Example 4 (jsFiddle)
If you add height: 50px; to the container instead of the child, then the top property has something to position against right from the get go and you don't need to use toggle in JavaScript.
How to Vertically Align
If you just wanted to know how to vertically center something consistently, then you can do the following:
The trick to vertically centering text is to set the line-height equal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.
.glyphicon-large {
min-height: 260px;
line-height: 260px;
}
Solution in jsFiddle
Tried centering a glyph icon that was inside an H1 tag, that was taking a while - so I discovered that you can actually change the font size and colour inside the SPAN tag contaning the glyph.
Thus:
<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span> Mes Messages</h1>
actually worked out for me.
Have you tried ? :
<span class="glyphicon glyphicon-circle-arrow-up glyphicon-large" style="vertical-align:middle"></span>
I'm hoping for a solution, but worst case scenario, an explanation of why my div isn't resizing, and it may be because I'm using a nav tag.
I have the following html. When the content within my 'section' tag grows, so does the div with the class of page-content. However, when my nav menu items increases, the div doesn't resize.
<div class="page-content">
<nav>
<ul>{menu items here}</ul>
</nav>
<section id="main">
{bunch of text here}
</section>
</div>
Here is my css.
.page-content
{
display: block;
position:relative;
width: 100%;
margin-left: auto;
margin-right: auto;
background-image: url(images/bg-home-main.jpg);
background-repeat: no-repeat;
background-position: center;
}
nav {
display: block;
float: left;
padding: 15px;
position: relative;
margin: 0px 0px 0px -45px;
}
#main {
padding: 5px 25px 5px 25px;
margin-left: 175px;
}
The problem I have then is that the div has a background image that should cover the background of the both the nav and section areas. However, this only happens if my section area is larger (top to bottom) than my nav, as the div will stretch to accommodate the section size. However, if my nav area is bigger, it actually expands outside of the div and there for the image.
When you float an element, you take it out of the flow, and it won't
expand it's containing element. One workaround to this is to add
overflow: hidden; to the containing element.
Using overflow: hidden; is a form of clearfix - a fix to cause the containing element to expand to show any floated, contained elements. Actually any value of overflow works, but overflow: auto causes scrollbars in Explorer on Mac (not sure if anyone still actually uses that) and overflow: scroll causes scrollbars which is the same issue. For some versions of IE, you also need to include a width value to cause this to work. There are other clear fixes, usually involving inserting some kind of element after the floated element that clears that floated element, also causing the containing element to expand to contain it - a div with no height but clear applied to it, or using the :after pseudo element, but I usually use overflow as it doesn't add any presentational markup.
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.
I've been trying to do something extremely simple, yet I can't make it work!
Here's what I'm trying:
---margin top: 15 px
---VARIABLE HEIGHT DIV (imagine a box-like element)
---margin bottom: 15px
I basically want the box to resize based on the browser window height.
Here's what I've been trying:
CSS
body {
background-color: #D0CDC5;
height:100%
}
#info_box {
background-color: rgba(40,40,40,0.5);
border: rgba(34,34,34,0.9) 1px solid;
width: 350px;
height: 100%;
margin: 15px 0px 15px 20px;
}
#info_box p {
color: red;
}
HTML
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>
By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?
Thanks a lot guys,
**EDIT
See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challenge
Thanks to #Hristo!
UPDATE
Check out the fiddle...
Edit, Full Screen
Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/
I hope this helps.
Hristo
if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:
#info_box {
position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;
}
alternatively, you could make #info_box stretch the full height, and put a position: absolute div into it with the same data as above.
I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.
Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.
But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.
Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.
If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.
I have done this dynamically using jQuery.
i'm using a empty div to display a line by setting height 3px. it works fine in all browsers but in ie6 the height div displayed with 20px height. It remains same even for height:0px . But changes in other properties reflects but not height and there is no duplicate css entry and inherited value from other div. Can any one help please
<div id="line"></div>
CSS:
#line {
border: none;
background-color: #134c7c;
height: 3px;
margin-bottom: 20px;
}
Internet Explorer has the odd idea that the content of every element should be at least one character high. You can get around this by using the overflow attribute, that way the content can remain a character high, but it doesn't affect the height of the element itself:
.line { height: 3px; overflow: hidden; }
Try:
line-height:0
Just a wild guess.
Inspect whether there is any space inside the element. If yes then set the
font-size: 1px;
property of the element.
try with space in the div or
Just guess