We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
Related
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I'm currently having issues with some CSS/HTML code.
http://codepen.io/anon/pen/bgHGn
I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.
I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?
I'm not sure if that makes any sense or is even possible.
Thanks!
you want to set the text-alignment property to center
.largeheader{
position: fixed;
margin: 0 auto;
font-size: 100px;
z-index:2;
text-align: center;
top: 50%;
left: 50%;
}
The core issue being this isn't exactly in the center of the page,so as #RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.
See the CSS code for the solution:
http://codepen.io/anon/pen/GqeBa
.largeheader {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
margin: -50px 0 0 -112px;
font-size: 100px;
z-index: 2;
}
Fixed positioning allows the element to stay put while you scroll the page.
To get the large header horizontally centered you can use text-align: center; as #metsales suggested.
In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.
You'll end up with something like this:
.largeheader {
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 0px;
}
To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.
I am using position: fixed and bottom: 0 to affix something to the bottom of the screen. The name, however, appears to go off of the screen, on my 11" Air, and you can see the site here. I've posted my CSS code below for the div.
Broken JSFiddle: http://jsfiddle.net/MgdQv/
#credits {
color: #363636;
bottom: 0;
padding-right: 10em;
text-align: right;
position: fixed;
width: 100%;
opacity: 0;
-o-transition:1.5s;
-ms-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
#credits:hover {
opacity: 0.8;
}
Add right: 30px (30px being the value of margin-right of parent body) and it should behave as expected.
Edit: and maybe remove padding-right: 10em. Forgot that I had desactivated it in Firebug before answering...
Also do not post link to a website: after you've fixed your problem, your question will become meaningless to future visitors of this question because the link will have changed... Please post relevant HTML and CSS reproducing your problem (and a fiddle)
You only must add an height-attribute to your #credits.
Is there anyway to make a a child element 100% width of the screen while it's parent is only 50%?
For example, I need to make the black footer for this site extend the full width of the screen while maintaining the integrity of the rest of the site. msdnw.com/
I created my custom div of #blackback and have tried various ways to make it work and just can't. Any ideas? P.S. Yes I've already tried placing the div below the footer code as apposed to wrapping the footer. But perhaps the code I was using was not working how I needed.
Thanks for any help :)
Update your #blackback css to:
#blackback {
width: 100%;
height: 300px;
background-color: #000;
position: absolute;
left: 0;
}
should do it.
You want to go and use Absolute positioning:
.child {
left: 0;
right: 0;
position: absolute;
}
hope that helps
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}