So I am trying to make banners which scroll with the page, but always will be like 40px left from my wrapper.
This is my site: http://joostmeijer.eu/ so you can see how my html works.
I seriously don't get how I can make the banner div fixed but relative to my wrapper.
You can create a <div> inside your wrapper div, for example <div id="fixedwrapper"></div>, and then style it like this:
div#fixedwrapper {
display: block;
width: 140px;
height: 500px;
position: fixed;
left: 0px;
background: black;
}
Here's a live example: jsFiddle Demo. Although you will need to use the CSS3 #media-queries to remove the banner when the window size is reduced since your website isn't responsive and the banner will overlap your content once the window size is reduced.
You are contradicting yourself in the question. If a div has a fixed position it will position relative to the browser screen, so it will never ever move.
Solution:
If you do not want to change your html and keep the banner inside the div, you can apply a negative margin. Make sure the overflow on your wrapper is set on visible (default value) for this to work. Also make the image wider to fill up the gap you will create on the right by adding the pixels from the negative margin to your #banner div's width.
#banner{
background-color: blue;
height: 100px;
width: 540px; /*40px added to compensate for margin*/
margin-left: -40px; /*move the dic 40 px to the left from the div*/
}
Here it is in JSFiddle.
Is this what you are trying to do???
Related
So I have a div at the bottom of my page which is good, the problem is that it is overlapping my sidebar on the left, so how do I scoot it over? I trued to do float:right, but it does not seem to do anything, I'm assuming because it's in a fixed position. I also tried to change the width, but that just cuts it from the right side. So how can I get it where I need it, which is just taking up the remaining part of the page where the side bar is not?
I'm shooting for this look:
.footer {position:fixed; bottom:0; float:right; background-color:lightgray; font-size:90%}
You could use FLEXBOX for that
I made a little fiddle using flexbox since you didn't provide your layout
JSFIDDLE
The fixed property for the footer is not required.
Also, specifying the footer element as block will
ensure proper behaviour when applying style to it.
.footer { position: relative; display: block; background-color: #f2f2f2; float: right; font-size: 90%; width: auto; overflow: hidden; }
The width was set to auto because I don't the exact size of your sidebar. To set it to a number, you need to perform some calculation. For example:
If the sidebar width is 30%, and also has a border, then the total width is: 30.2%;
That is, 1px left plus 1px right borders.
Although, the size depends on the border width.
Then the footer width should be set to 68.8% or 68.75% if it has no border.
My page layout:
div for header : position: fixed
div for sidebar: float: left div for content: float:left
div for footer : position: fixed
the positions are set to be like so so that the footer and header are always visible no matter what point in the scroll bar the user is at. The sidebar however scrolls with the page.
the div for content contains a ui:insert so all the pages load in there.
now in one of the pages i want the content to be centered within the space allocated.
all the content of that page is placed in a div for this purpose.
What style do i have to use for the contents to always be centred horizontally no matter what size the window is stretched to. I can specify a fixed value for width of the div.
I cannot set the position to be absolute or fixed as it would ruin the design overall.
For a fixed width:
div.center {
width: 300px;
margin: 0 auto;
}
For dynamic width:
div.center {
width: 50%;
margin: 0 25%;
}
JSFiddle isn't working, but I'll get one up ASAP.
If I'm understanding correctly, the following should do the trick if the width of the div is specified
div {margin: 0 auto;}
So what I'm trying to accomplish is to have a div centered on the page (margin: auto auto;) with a navigation div just to the left of it.
The idea being the navigation div can be switched on or off (so may or may not be there). If its there or not should not interferer with the centering of the main div.
Below is an example
I've tried a few things
Wrapping both divs with a main div. Setting the main div to margin: auto auto and then setting both child divs to float: left. The problem is that when the nav div dissapears the entire thing shifts left.
Keeping the middle div margin: auto auto; floating the nav div left and then using margin-left but this changes when the page gets bigger or smaller.
Any pointers would be appreciated in the best way to do this. I was hoping to avoid tables.
JSFiddle link
Try this:
In your html:
<body>
<div class="encasing">
<div class="leftmenu"></div>
</div>
</body>
In your css:
html, body
{
width: 100%;
height: 100%;
}
div.encasing
{
top: 50px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 500px;
background-color: green;
position: relative;
}
div.leftmenu
{
right: 100%;
width: 10%;
height: 300px;
background-color: red;
position: absolute;
}
The important parts are:
To put your block containing the menu inside your center block
Make the center block have margin-left: auto; margin-right: auto;
Make the center block have a relative positioning
Have the menu have a absolute positioning
Make the menu have right: 100%
The idea here is to make the left menu use the position of the center block and then adjust itself. Right: 100% will put the right edge of the menu on the left edge of the menu.
In the end, a really good trick in css is that absolute positioned elements adjust themselves relative the the nearest relative or absolute positioned parent. :)
A few solutions I can think of:
Use absolute positioning for the navigation div. You probably want to give the body element a min-width to avoid the navigation div overlapping the main div when the window is too small.
Three-column layout, e.g. two divs with fixed widths floated to the left and right, and the content div between them. Inside the left-floated div, display your navigation div (or not). Alternatively, try display: inline-block on the three columns. The difference is in how small windows are handled (try it out). Again, you can counter undesired effects by setting a min-width on the body.
Completely fixed layout. Decide on an ideal screen resolution, and hard-code everything to that. This way, you can absolute-position everything where you want it, but the downside is that it won't look good on anything that deviates too much from the intended resolution. Especially mobile devices will see devastating results; you counter these with #media queries to adjust your layout to other screen resolutions.
You should also try to find a site that does what you want to do, and see how they did it (inspect HTML, CSS, and maybe Javascript).
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.
I am using the yui-grids css (irrelevant if you don't know what this is) with three columns. and I'm putting all the fancy design stuff on the left column and using z-index and relative psitioning bringing them in the center. and then putting all the important stuff like forms, inputs buttons, links and context in the center. Is this wrong. I've never seen this done so I was wondering maybe there is something I don't know! or am not considering. Should I just use one column?
I'm not totally sure what you're asking, so I'll give it a shot:
Columns
If you're going with a column layout, you should give just floating elements a go. Due to how floating works, a clearfix hack will be nessecary (link provided below). Clearfix allows child elements to be floated while maintaining the parent element's height and block nature. Clearfix can only be added to block elements.
For my example, we will be going with a 2 column layout -- one #content column and a #sidebar column -- you could do two, three or more.
For the parent div (that contains the #content and #sidebar elements), you'll need to add a class="clearfix".
For the content div, you'll want to float it to the left. For the sidebar div, you'll want to float it to the right.
Now, the CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
This should produce a 750px box with a content element on the left and a sidebar on the right with 50px in between both elements (750-(500+200) = 50).
Floating Module
If this isn't what you wanted, and were looking to produce a module element (lightbox, popup window, etc) instead, this is easy too.
First, create a div called #module. Put in your content into it. Let's say you want to give it a width of 500px and you want the height to be static at 300px. So we'd do this CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
What's going on here?
The #module element is being set to position: absolute. This means that it will be floating around the window, and is not constrained to it's parent element. We position it to be 50% from the left of the window and 50% from the top, so it gets in the middle of the window. Percent values are nessecary as they are adjusted when the window resizes. Without the margin, the element's top left corner will be 50% from the top and 50% from the left, so we need to use margin to move it back half of it's width and half it's height. This will allow us to have a box perfectly centered in the middle. The z-index is added to make sure that the element is on top of any other element, including , and other positioned elements.
I hope this helps.
Links
Clearfix: http://gist.github.com/550114
This kind of layout wouldn't be correct in my opinion.
The design of an element must be described in that particular element.