I'm attempting to style Wikipedia. I'd like to place the table of contents in a sidebar; however, I've come up against a few obstacles. I'd like to:
Vertically center the table of contents if it's shorter than the
viewport height.
Remove the scrollbar on long tables of contents while retaining scrolling ability.
Specify a sidebar %width and min/max widths, and have the body content fill the rest.
Please see this for a visual.
Here's what I have so far:
#-moz-document domain(wikipedia.org) {
#mw-navigation, #toctitle, #footer {display:none;}
/* Place table of contents in a sidebar */
#toc {
height: 100%;
width: 20%;
min-width: 150px;
max-width: 250px;
position: fixed; /* don't scroll with page. */
top: 0;
bottom: 0;
left: 0;
overflow: hidden; /* hide scrollbar, but... */
}
#toc > ul {
background: lightblue;
overflow: scroll; /* ...still allow scrolling? */
/* center vertically if shorter than height of viewport */
display: table-cell;
vertical-align: middle;
}
#content {
/* How to have contents fill the remaining width? */
}
}
Does anyone have solutions to these? Are they even possible?
I created a userscript which allows me to define custom links that display both horizontally across the top of Wikipedia as well as in the navigation panel which sits along the left side of the page. I copied it over to Gist in case anyone is interested. It should help you accomplish what your looking for I think:
Wikipedia User Defined Navigation Links (Gist)
To use this code you need to find your Wikipedia theme JS file which is going to be a subpage to your userpage. Mine is here. You can find yours by clicking this link which will automatically direct you to the appropriate location. You should be logged into Wikipedia first, and then click here.
Related
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
Our website engine uses 960.gs grid system and I am trying to modify it to 3 columns Fixed(100px)-Fluid(max to width)-Fixed(100px) view. Unfortunately all 960.gs online generators makes just or full-fixed or full-fluid grids. So I am trying modify originally generated full-fluid grid to this view:
<------------100%--------------->
======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========
<-100px> <-100px>
The Code (after modification):
http://jsfiddle.net/vZm8x/
Problem 1) I am not sure how to make central content area max to left
on the screen. Because width:auto; doesn't work at all, width:100% just wrapping divs.
Problem 2) after fixed to 100px all div it continues wrapping down
anything. (display:inline; doesn't help any ideas?)
My question is: Is that possible to modify 960.gs template according to our needs? If yes please give me any advice to fix the problems? Thank you in advance!
With fixed-width side columns, it's actually very easy. You're going to want to use floats, and may need to do a faux columns trick, depending on your specific design needs.
You'll want something along the lines of:
<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>
and:
div {
/* border-box, to make sure "width" is our intended width */
-moz-box-sizing: border-box; /* Firefox still uses prefix */
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
background: #f00;
}
.right {
float: right;
width: 100px;
background: #00f;
}
.middle {
width: 100%;
padding: 0 100px;
background: #ccc;
}
See it in action here (this is without the faux column effect, but should give you a starting point). If you change the width of the section with the output, you'll see that the columns stay put, and the content stays within the bounds of the outer columns.
The content column needs to be last, because it's still in the document flow, so the right column would end up below the content.
Alternatively, you can use position: absolute; on your side columns with something like this:
.wrapper {
position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.middle {
padding: 0 100px;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
These tricks will work in IE8+, Firefox, Chrome, Safari, and Opera. IE7 might have issues due to using the W3C box model ("content-box") and not recognizing the box-sizing CSS, but there are a few tricks to make it work if you need it. IE6 should be okay, because it uses "border-box" based box model by default. (You may need to play with z-index to get IE to behave. If so, then set .middle{ position: relative; z-index: 1} and add z-index: 2 to the left and right columns.)
The position: absolute trick does have the advantage over the float one in that your sidebars can appear before or after the content div, making it the potentially more semantic option.
The reason these work is because a) your side columns are fixed, so we just set the padding to the width of those columns, and b) position: absolute and float: [left/right] take the elements out of the document flow, which means that as far as the document is concerned, they aren't there and take no space. This allows other elements to move to where those elements used to be, layering them over top of each other.
I've been asked to change the layout of this charity website:
http://antidotemarketing.com/youthlife/
I need to place the nav up the top, then the logo underneath, then under that the white box containing the slider and main content.
This must be done using CSS only.
So far I've had difficulty getting the same results in both Chrome and FF... I haven't even checked IE yet. How would I go about positioning the logo in the middle of the nav and the main content box with some adequate spacing (say 20px top and bottom)
One more issue: I can't absolute position the logo because when people log in to wordpress, the header that wordpress injects into the top messes up the spacing of everything.
Thanks everyone :)
OK, I think I finally understand what you are after. Try adding the following styles:
#logo {
position: absolute;
top: 80px;
z-index: 100;
}
#login #logo {
position: relative;
}
#page {
margin-top: 45px;
}
I'm using a responsive wordpress theme that is based on twitter bootstrap. For some reason the side bar images aren't resizing correctly. (You can see what I mean by checking out the [site][1] and trying to resize.) I was approaching this by declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. The image / contact form looks fine when you are on a desk top but as you compress the layout (for instance on an iphone) the contact form and image do not resize correctly. I'm not sure where to go from here and sort of stuck.
Here's the css I'm using now (which may not be correct.) Thanks!
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 300px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 0px;
}
.widget .signupForm form input {
display: block;
}
#media screen and (min-width: 768px) {
/* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 0px;
}
I can detect 3 problems at a width of 800px:
.widget .signupForm has a width of 300px. It should be auto or 100%. Then form elements are to be sized accordingly, if needed (btw the submit button has same text and background than the text input. It seems we have 2 informations to type when in fact it's the action button. It doesn't need to be white on blue, maybe a darker grey would be sufficient. I'm not a designer, though ;) )
Facebook widget has a fixed width. Does it exist a mobile version of this widget?
same problem with the Instagram one: images have an HTML width attribute of 300 (pixels).
The Following css applies to your page when it gets resized. Not sure which file is applying it.Find this class in your css files and add a width to it, say width:300px if you want it to be a perfect square or any other value.
.widget .signupForm {
background-color: #06D0D2;
background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 300px;
width:300px; /* code added here */
position: relative;
}
Hope it helps,if i havnt understood ur problem or this is not the solution you were looking for - do comment..