I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>
Related
I have three div a, b, c, all of them have "position: static" in there style (which is the default value for CSS position). They are all under the parent div, which is scrollable (CSS: "overflow-y: scroll").
<div id="parent-div">
<div id="div-a">...</div>
<div id="div-b"><input id="my-input"></div>
<div id="div-c">...</div>
</div>
Div-a's height constantly change (for example, there are new children divs constantly appended under div-a). Normally, when div-a's height increase, div-b will be scrolled down.
I want to always keep the div-b at the center of the screen, no matter how div-a change in height
Is this possible in Javascript (or CSS, or both) ?
PS: I don't wanna use the CSS "position: fixed/sticky" because it's not possible in my project.
It's practically impossible to answer your question, because you haven't added enough detail to your question. How is div-b in the center of the screen at the minute, because what you've posted doesn't seem to illustrate how it would be positioned there. Anyway, I've somewhat guessed at your setup. If you don't want to use sticky or fixed, you are left with the only remaining potential solution, to set the parent to relative, and use position absolute to position the div.
#parent-div {
overflow-y: scroll;
position:relative;
}
#div-a {
height: 400px;
border:1px solid green;
}
#div-b {
position:absolute;
top:0;
}
#div-c {
position:static;
}
<div id="parent-div">
<div id="div-a">div a</div>
<div id="div-b"><input id="my-input"></div>
<div id="div-c">div c</div>
</div>
I'm using Bootstrap 3 and I want to center a div within a cell in the container row. when I looked I only found topics about centering the div in the container which is not what I need. I want to know how to center the div (both vertically and horizontally) in the particular cell that it is. The reason is that on the same row I have other divs of bigger height and at the end of the row I want to put a button which is relatively small compared to the other divs and hence I want to center it to make it look pretty.
What I've tried until now is to go into the bootstrap.min.css file and change the following:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:top;
border-top:1px solid #ddd}
to:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:middle;
border-top:1px solid #ddd}
Which didn't seem to change anything so I'm guessing I'm not on the right track.
For center-ing a div horizontally, you can put in CSS file:
margin-left: auto; margin-right:auto;
For vertical alignment:
margin-top: auto; margin-bottom: auto;
Posting your HTML code would be helpful btw.
For both vertical and horizontal centering, this solution worked for me: http://jsfiddle.net/hg8Sn/
The only downside of this is that as I am using bootstrap, when the window gets smaller the button would be aligned to the left of the div. I fixed this by making the button take up the whole width of the div so I set col-xs and col-md to 12:
<div id="addchart" class="col-md-6 col-lg-6 col-xs-12 col-sm-12 text-center">
<button id="add-chart-btn" class="btn btn-lg btn-default">Add Chart</button>
</div>
For me, this only centers the button and it doesn't stretch it to the width of the container. It could be because I am using a specific bootstrap theme but either way if someone would want to fix this then they can set a fixed width to the button.
Check and see you are using bootstrap.min.css and not bootstrap.css.
Maybe you might be linking the wrong css files.
This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks
To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle
One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}
So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.
This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/
Thanks a bunch for any possible help with this!
EDIT: Adding code from fiddle here
.maincontent{
position:relative;
width:760px;
}
.sidebar{
float:left;
}
.stage{
float:right;
position:relative;
}
.headbar{
position:fixed;
}
<div class="wrapper">
<div class="mainContent">
<div class="sideBar"></div>
<div class="stage">
<div class="headbar">banner text</div>
</div>
</div>
</div>
enter code here
Don't you need to use top, left, bottom or right for it to get fixed to something?
I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?
The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}