I have a table of contents in my page (see here) with these CSS styles:
div.toc {
height:38em;
position:fixed;
right:0;
top:5em;
width:21em;
z-index:1;
}
How do I have to change these settings to make sure the DIV isn't partially hidden behind the body/window scroll bar?
(Tested with Firefox 3.6 and Opera 10.10).
Actually, your div.toc is properly positioned. The problem is with your <iframe>.
Remember your box model... width and height is calculated independently from the margin and padding...
So, by having width: 100%; on your iframe.toc plus a margin-left: 0.5em, you are basically telling the browser the following:
Use the full width of the parent element and offset it 0.5em to the left.
Total effective width: 100% + 0.5em
What you really want to say is the following:
Substract 0.5em from the full width of the parent element to use as padding on the left and use this as width.
Total effective width: 100% - 0.5em (desired)
The solution is therefore simple... Remove the margin-left from iframe.toc and put a padding-left: 0.5em on div.toc.
div.toc {
background-color: #f0f0f0;
position: fixed;
top: 5em;
right: 0;
width: 21em;
height: 38em;
padding-left: .5em;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: 1;
}
iframe.toc {
background-color: #f0f0f0;
border: 0;
width: 100%;
height: 30em;
border-bottom: 1px solid #ccc;
}
You can make you table of contents position 1 em from the right like this: right: 1em;
I just tried it for you and right: 1em; looks good.
Related
I need to make the shape below, which will contain some text. Sometimes the text will be longer, sometimes shorter so I can use any fixed widths.
**********
* *
******
This the is code I have - I'm wondering if there's a way I can tag an image on to the beginning and the end of the span. The height won't change so that would probably be the best in terms of cross browser solutions...
<div class="trapizium_holder">
<span id="trapizium"></span>
</div>
One Wrapper Only Needed (IE8+)
This fiddle demonstrates that only a single wrapper is needed. It uses a single pseudo-element to get the angles. The wrapper must either be floated or an inline-block. Here's the code:
HTML
<div class="trapizium">
Test text
</div>
CSS
.trapizium {
position: relative;
float: left; /* wrap the text */
clear: left; /* for demo */
margin: 10px 20px; /* left/right margin will be diagonal width */
/* needs some set height */
font-size: 1em;
line-height: 1em;
padding: .2em 0;
background-color: cyan;
}
.trapizium:before {
content: '';
height: 0;
width: 100%;
position: absolute;
top: 0;
left: -20px; /* stick out into margined area */
z-index: -1; /* make it the background */
border: 20px solid transparent; /* left/right diagonals */
border-top: 1.4em solid cyan;
border-bottom: 0px solid transparent;
}
Fiddle
#trapizium {
border-top: 100px solid blue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
You may have to absolute position your text into your shapes. This uses borders to make the shape, and has no height.
Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/
I'm currently working on a splash page for my website and need help with the border which I want to run underneath the main text which will be centred on the page. At the moment when I set the border to run 800px it stays left-aligned with the text above so it isn't even. I'm new to CSS and any help is appreciated. Here is my code:
#logo
{
width: 800px;
position: relative;
top: 150px;
left: 250px;
border-bottom: 1px solid white;
}
Try this:
#logo {
display:block; /* Unless it already is */
width: 800px;
margin: 100px auto;
border-bottom: 1px solid white;
}
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}
I'm trying to float a div over another one but in the center (width).
EDIT: I want the container div to be over the top div and centered.
Current CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
This is what i get:
set left:50%
and margin-left:-460px (half the width of the div)
Try this. It's untested but you basically need to set the container div to relative and then the div inside that to absolute.
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
top: 50%;
left: 50%;
position: absolute;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: relative;
right:auto;
}
I would suggest setting #top's position attribute to absolute and using a little javascript to set the left attribute to #container's left + half of #container's width - half of #top's width.
i.e, after including jQuery (untested):
$(document).ready(function(){
var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
$("#top").css("left", topLeft);
});
In the case that left is zero, like the example you gave, that $("#container").css("left") term is unnecessary.
EDIT: You'll also have to be sure to set the z-index attributes of the two divs appropriately.