Let say i would like to cover the below 2 scenario (the title is dynamic) :
Could that be achieved with CSS only (no JS) for IE8+ ?
Scenario A : short header title to be aligned center relatively to the page width
| back button | short Title |
<-----------------------------------|----------------------------------->
Scenario B : very long header title to fill the header content area without being overlayed on the back button
| | Very very very very very very very very very very very |
| back button | Very very very very very very very very long Title |
<-----------------------------------|----------------------------------->
Two ways I can think of:
Float the back button left, and the title will wrap naturally.
HTML
<div>
Back
<h1>Title</h1>
</div>
CSS
div {
text-align: center;
}
a.back {
float: left;
margin-right: 20px;
}
Or this way, same HTML - Just realised this wont center things properly, unless you have the same 100px padding on the right hand side as well.
div {
position: relative;
min-height: 30px;
padding-left: 100px;
text-align: center;
}
a.back {
position: absolute;
top: 50%; left: 0;
width: 90px;
height: 30px;
margin-top: -15px;
}
That second one will avoid any wrapping issues and also vertically align the button in the middle.
Hope that helps :)
Related
I made a little Pen on CodePen to show the issue and I think it's the easiest if you have a look at it.
You can find it here.
Basically I'm searching for a way to have pseudo elements before and after a heading, to display a 1px heigh line which comes from the sides and is interrupted by the text.
-------------------------------------- Text --------------------------------------
If the text is long (or the display small), the text will wrap in two lines. Then the left line will still be next to the beginning and the right part will stay next to the end.
------------------------------ More text that will cover
multiple lines ------------------------------
My ideal would be something like this
______________________________ More text that will cover _________________________
multiple lines
Unfortunately, I'm unable to get this...
Use a pseudo element to draw the line, and position it 50% from the top or bottom as a way to keep it in the center of the text, even if the text goes to 2 lines.
h5 {
text-align: center;
position: relative;
}
h5:before {
content: '';
position: absolute;
top: 50%;
background: #000;
height: 1px;
left: 0; right: 0;
}
span {
background: #FFF;
padding: 0 10px;
position: relative;
text-align: center;
display: inline-block;
}
<h5><span>This is<br>some text</span></h5>
I have a page with 2 divs, inside a single container div.
I would like to use the left hand side div as a menu, containing various links or text, and to scroll up and down (vertically) by itself.
The second div, shows some content. Usually a table of data, but it could be text too. This div must be able to scroll both horizontally and vertically according to content.
I have some javascript that populates the content for both, but for simplicities sake, I will only show my css and html:
-------------------
| | |
| 1 | 2 |
| | |
| | |
-------------------
The issue I have is in IE (I am running IE9), the second div drops off the view, and goes into a second row, instead of being aligned within the the container div. This layout and css works fine in chrome and firefox.
Any ideas on how to make this consistent within IE9?
IE9 does not support flexbox, so IE9 is doing what it should, according to its own limited knowledge: it's treating #browser-view as a block-level element without a width set, so it's dropping it to the second row.
You'll need to specify a fixed width on #browser-view like you did with #browser-list and also need to affect its display from its normal block default (you could float these divs, make them display: table-cell, etc. etc.).
Well, after a bit more research and some testing, I have decided to move away from flexbox in my CSS just so that I can support IE9.
Here is an updated cross-browser testbed, that appears to do what I want and works on all browsers so far.
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
position: relative;
z-index: 1;
}
.Container:after
{
content: '';
clear: both;
display: block;
}
.Container
{
position: absolute;
width: 100%;
height: 100%;
}
.Container > div
{
height: 100%;
}
.browser-view
{
background-color: purple;
overflow: auto;
}
.browser-list
{
background-color: orange;
float: left;
overflow: auto;
width: 250px;
}
I am quite new to html/css, and I spent some time writing my own website from scratch. I have understood the very basics of the thing, but many subtleties are still unclear in my mind. Currently, I am unable to achieve a specific feature on my website, and I was hoping that maybe some of you would come up with a simple solution.
Here is what my website looks like: the colors are here to make things clearer. The four blocks "converge" toward the focal point. The top left part "Research interests" is dedicated to contain short descriptions, while the top right part "PhD thesis" is dedicated to contain either large texts or pictures. From now on, I will only focus on the top right part, where my problem occurs.
Green part :
#maindisplay
{
display: inline-block;
position: relative;
text-align: left;
width: 66.6%;
height: 80.0%;
float: right;
background-color: green;
}
Red part :
#maindisplay article
{
background-color: red;
font-family: Conv_verdana, sans-serif;
display: inline-block;
position: relative;
margin-left: 1.5%;
top: 10%;
width: 70.0%;
height: 75.0%;
overflow: auto;
}
Dark gray part :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: absolute;
bottom: -30px;
}
I get my bottom alignment for the #maindisplay paragraphs by absolute positioning them inside the relative positioned article (and therefore, the "overflow: auto;" is here totally useless). When the text is short enough, this works like a charm and the result is exactly what I want it to be. However, when the text is longer, or when the screen is smaller (typically, my laptop), I would like things to look like this : the top of the text appears first, and a scroll bar is available. When the text is scrolled to the bottom, the bottom of the scrolled text is aligned with the bottom of the top left part, as it is in the first picture. This is achieved by setting :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: relative;
margin: 0;
padding: 0;
bottom: 0;
}
So here is my problem : I would like the first behavior when the text is short enough, and the second behavior when it is longer than the #maindisplay article div. I was hoping that this could be done in a css-only way but I have looked for quite some time and now I am unsure about this (please note that I know precisely nothing about the javascript/jquery stuff). I am not allergic to tables, but I just don't see how to use them here.
Please let me know if there is anything unclear about this, and thanks in advance for your answers !
here's a fiddle making what you need http://jsfiddle.net/7N6Gp/ or http://jsfiddle.net/7N6Gp/1/
you need 2 div's for this one
the holder div that has position: relative;
.holder {
width: 500px;
height: 500px;
position: relative;
}
and a content div that has overflow: auto and max-height
.content {
width: 500px;
max-height: 500px;
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
}
with your code . you need to wrap content in a div not p . p should only contain text or inline elements . and from your pictures it looks like it contains titles and other paragraphs (block elements)
#maindisplay p change into #maindisplay div.content
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
Here's a fiddle using that technique.
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:
Here's a fiddle using that method, this one stretches the image because of the max-height.
Please Try the below css for .overlay as in your fiddle
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
I use this combination:
.CONTAINER {
position: relative;
text-align: center;
}
.TEXT {
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.IMG {
//for responsive image
width: 100%;
height: auto;
}
I just added to the html
<div align="center"></div>
to surround your existing code to get the image to center
hope that helps
I've got a div that I want to position partially off-screen like so:
div {
position: absolute;
height: 100px;
width: 100px;
right: -50px;
top: 50px;
}
But this increases the size of the page, allowing it to be scrolled to the right. Is there any way to keep half of this div hidden and prevent scrolling to view it?
Yes, just create an enclosing div with overflow: hidden, like this:
.outer {
overflow: hidden;
position: relative;
}
.inner {
position: absolute;
height: 100px;
width: 100px;
right: -50px;
top: 50px;
}
<div class="outer">
<div class="inner">
CONTENT
</div>
</div>
Example: http://jsfiddle.net/Uj3eQ/
Just add overflow:hidden to the css. That should do the trick.
Just insert this div inside another div with overflow:hidden
You could add a media query to avoid scrolling at a certain point. So basically take the width of your main container and create a min-width media-query using that.
#media (min-width: 960px) {
body {
overflow-x: hidden;
}
}
Should work for modern browsers.
Another solution is to use margin-left: 100%;
And if you wanted to play with the positioning a bit, you can do something like margin-left: calc(100% + 10px);
And another alternate way is to do float: right; and then play around with margin-right -50px; where 50px is the width of the hidden div. You could even have a neat transition if you animate the margin-right if you were making a menu.
I had a similar situation where I needed an absolutely placed element to be positioned partially to the right of the main content header. If the browser was wide enough to show it, I did NOT want to clip it (overflow: hidden;) but I also did not want to make the scrollbar appear if the browser was not wide enough.
Here is the code I used:
#media screen and (max-width: 1275px) {
#header {
overflow-x: hidden;
}
}
Old question, but answering for new visitors. This should do it:
.offscreen {
position: fixed;
height: 100px;
width: 100px;
right: 0px;
top: 50px;
transform: translateX(50px);
}
position: fixed is placing the element relative to the viewport (browser window). Think of fixed as being the same as absolute, except it's the relative to the viewport, ignoring all other divs.
Then we place the element on the top right corner with top: 0 and right: 0
We have this:
______________
| [Element]|
| |
| |
| (Viewport) |
| |
| |
|______________|
Then we move the element to the left by 50px with transform: translateX(50px):
______________
| [Ele|ment]
| |
| |
| (Viewport) |
| |
| |
|______________|
But seeing that the element has a width of 100px and you're moving by 50px, which is half of the width, then it's better to do it like this instead: transform: translateX(50%)
The advantage of using percentages is that even if you later change the width to 120px for example, you won't have to manually the change from translateX(50px) to translateX(60px). By using percentage the math is done for you.
Note: This is not affected by zooming in/out and also does not cause overflow (scrolling).
scroll is may be you have placed relative position property to the containing div and it result the required div to go off the right by -50 but as relative to the main containing div not the browser viewable area.. if its parent div just inside the body tag or the parent div does not include any position property your code should work.. and again you can apply overflow:hidden property to wrapper div to hideout the unnecessary part