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>
Related
I'm trying to make the below image.
The blue box is a div, the red square is a centrally-aligned image. The image overlaps the border of the div, but lies under the text in the div.
How would I go about this?
Explanation
Overlap
z-index is nice if you need div in different layer.
A div with smaller z-index will stay at back, so you can label border.
(Although I think it is not necessary in this case)
Center Align
To Align image in the center, add auto margin to image.
Image Position
If you want 30% of image to be inside the border, move top of the image by -70% of the height. So if the height of image is 100px, set top: -70px;
Text Position
Because the original image cover the space above the text, you will have to move text up to cover the blank space. To do this, move top of the text by the height of the image. So in this case, set top: -100px; After moving up the text, the space appear in the bottom of the devision. So to shrink the border, you will need to set margin-bottom: -100px; This will shrink the div to remove the blank taken by
Whole Div Position
Because you moved the image 70px above the whole div, you will need to set margin-top: 70px; to move the whole div down to prevent it being cropped out.
.border-div{
border: 3px solid blue;
margin-top: 70px;
z-index: -1;
}
.redsquare{
height: 100px;
width: 100px;
background-color: red;
z-index: 0;
margin: 0 auto;
position: relative;
top: -50px;
}
.text{
position: relative;
top: -100px;
z-index: 1;
margin-bottom: -100px;
}
<div class="border-div">
<div class="redsquare"></div>
<div class="text">Lorem ipsum has become the industry standard for design mockups and prototypes. By adding a little bit of Latin to a mockup, you’re able to show clients a more complete version of your design without actually having to invest time and effort drafting copy.
But despite all its benefits, seeing the same random Latin text in every design can get a little boring for you and your clients. So if you have a client who’s got a sense of humour or if you’re just tired of going the traditional route in your mockups, here are 15 creative and funny lorem ipsum text generators that are sure to lighten the mood at any client meeting.
</div>
My best suggestion is using position absolute in the children and use position relative in its border then set position to the children. Some thing like: https://jsfiddle.net/c39xej68/4/
.redsqr {
background-color: red;
height: 50px;
width: 50px;
position: absolute;
top: -30px;
margin: auto;
}
.bounder {
position: relative;
}
.text {
border: 1px solid blue;
}
I have got four text objects on a page, all of different length. I want one text object to be, for example, 'left: 2em;' (CSS). I want another text object to be positioned completely opposite the first text object (on other side of page).
I would like to position the text from the middle of the text not the end, so the distance between each text object and the closest edge is the same.
The problem can be seen in the following (low resolution) picture - Because the text is different length, it looks like the text is not positioned equally. Even if 'x' are the same and 'y' are the same.
The problem can also be seen here - The text looks like it is not evenly positioned. Even though the positioning code is:
right: 2em;
left: 2em;
right: 7em;
left: 7em;
It appears using 'right: ;' and 'left: ;' positions text from the end of the text. When you have different sized text, it looks like it is positioned unevenly. Maybe if you could position the text from the middle, it would look like it is evenly spaced.
Is there any other way?
Sorry if this seemed confusing.
Is it something like this?
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
.parent {
width: 100%;
position: relative;
}
.child-1 {
position: absolute;
top: 0;
left: 5em;
width: 100px;
height: 100px;
background-color: red;
}
.child-2 {
position: absolute;
top: 0;
right: 5em;
width: 100px;
height: 100px;
background-color: red;
}
There are plenty ways to make the elements be positioned oposite other one. Just add some code snippet to see where your problem is.
I have some text, a page title, then on the same line just to the right of said title is an hr-tag vertically centered. Everything is positioned using Neat's grid framework. It is responsive for the most part - the hr line resizes etc.. but also begins to overlap onto the text on it's left at a certain point.
How can I avoid this? Should I not be using an hr tag? If not, what are the alternatives?
End goal is to have something like this "Page Title -----------------------" with the line being solid, vertically centered, and responsive.
Solutions, thoughts, suggestions??
You could get the same kind of effect using the after pseudo-element:
.line {
overflow: hidden;
position: relative;
}
.line::after {
content: '';
width: 100%;
box-sizing: border-box;
border-top: 1px solid gray;
position: absolute;
bottom: 0.5em;
margin-left: 0.5em;
}
Fiddle
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
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 :)