The title and navigation bar of my website have absolute positioning so they will stay put while the images scroll under.
http://www.mikegarten.com/
I am trying to center the whole site horizontally.
I tried with this method but was unsuccessful.
I have tried to put my images into a table then centering that in a div, but then the horizontal images have empty space above and below created by the grid from vertical photos in the same row.
Is it possible to “wrap” this site, or do I need to use another approach?
There are at least three non-deprecated ways to center something horizontally.
margin: auto (explained at LearnLayout.com)
ugly hacking of position with a wrapper element (the question links to that)
even uglier hacking of position, this time setting position: absolute; left: 50%; margin-left: -<half the width of this box>
I recommend using the first method. You have to make sure the element you want to center has display: block, float: none and position set to normal or relative. Also it has to have limited width (less than 100 % of its parent), which is obvious.
You can set the left css property to 50% then add a margin-left of half the width of the element * -1, so to center your name element, set the left property to 50% and the margin-left to -132px;
#name {
position: fixed;
top: 20px;
z-index: 3;
left: 50%;
margin-left: -132px;
}
#navtext {
position: fixed;
top: 105px;
background-color: none;
width: 1000px;
left: 50%;
z-index: 3;
margin-left: -500px;
}
For your 3 columns you will need to place them in a wrapper div and set the width on it to your desired width and the margin-left and margin-right to auto.
You have made all the grid elements you have on your site position:absolute. That's why it won't center, because you've told it to be in an exact position. Also, it would help if you wrapped your grids in a wrapper div so you can position them as a whole.
Use width and margins. You can then use padding to space out the rest of the grid elements.
There is <center></center> tags in html, however I think this is outdated.
the other way is to center it using CSS giving it a width and margin:auto;
Related
i want to create horizental and vertical div .
center of div popup outside like above images
and show arrow point to out side of text without bootstrap
As i have understand your questions i am trying to give you few suggestions as below:
For horizontal align you can simply give you popup div a width in px or % or any unit and add margin:0px auto;. if you are using position:absolute then give width and right:0px; left:0px; it will align horizontal your div.
For Vertical align you can either use line-height which should be same as height of your div.
or also you can use display:table; to parent div and for child div add display:table-cell & vertical-align:middle;
Hope it will work.
Generally you can just use absolute positioning, like:
.foo {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: lightblue; //not necessary of course
}
This way it will end in the middle of the screen (with some limitations ;)).
Another option is to use flex-box, but I would downvote it because of flex-box performance.
If you need to position it inside another div, yet absolutely centered, it will go quite similar, yet parent element has to have absolute positioning as well, in order for child element to get it right.
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???
I'm trying to make a header which contains two buttons and a "logo". The two buttons should float right and left, relative to the browser and the "logo" should be in the absolute horizontal center, again relative to browser.
It all worked out fine until I realized that the logo sits in the center between the two buttons which differ in size, putting it off-centre.
Here's my code: Clicky
I tried some absolute positioning, but it did nothing, probably due to ignorance on my part.
#head {
position: absolute;
left: 50%;
}
It looks like you tried to use the 'text-align: center' on the parent container to make this work. And it is working, except that it's centering all 3 of those elements as a whole. You can see that here if you remove the floats: http://jsfiddle.net/aHP6D/1/.
So, one option would be to position the buttons absolutely, thus taking them out of the normal document flow. This means the only <span> that's left (and not absolutely positioned) is the one you want centered.
You can see that working here:
http://jsfiddle.net/aHP6D/2/
To center something, just set the margin to auto:
#head{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
to center it completely:
#head{
position:relative:
margin:auto;
}
Setting #head’s position to absolute and left property to 50% will center its left side. Setting its margin-left property to negative half its width will pull it back to the center.
#head {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
See http://jsfiddle.net/exs78/ for an example.
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).
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.