Aligning text to match beginning of another element CSS - css

I'm trying to align text together in a certain way and hoping to make it work responsively as well.
I have this class which centers the div
(I was forced to specify a width and height of 50% otherwise it would not center it horizontally or vertically.
I'm trying to get the <p><span><sup>*</sup>Lorem's sipsum ipsul lo ip lipson loroem</span></p> aligned left to the <strong>Loremipsumlo</strong> (see codepen) http://codepen.io/mhussa19/pen/QjEwXa
The paragraph text should begin with the L of loremipsup
I can't seem to figure out how to do this with out constantly adjusting the top position (when screen size changes) which i don't want to do.
The h1 is position relative and the spans are both position absolute right: 0;. This works well so I wouldn't want to change this. See class setup below
h1 {
position: relative;
}
h1 span {
position: absolute;
right: 0;
}
<div class="jumbo-header">
<h1>
<span>Experience</span><span><strong>Loremipsumlo</strong></span>
</h1>
<p><span><sup>*</sup>Lorem's sipsum ipsul lo ip lipson loroem</span></p>
</div>
.jumbo-header {
border: 1px solid yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
max-width: 38em;
height: 50%;
z-index:10; }

Related

Why is the CSS z-index being ignored in position relative using background cover image?

Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.

How to automatically center an absolute element inside a relative parent with CSS only?

I saw that there were some posts on the subject but none of them answers my question specifically
http://jsfiddle.net/27van/ shows how to center text horizontally.
I want to center it vertically in the parent div, without using the top which sets a fixed number of pixels (while I need it to be dynamic)
Any clues?
.parent_div {
position: relative;
text-align: center;
}
.child_div {
position: absolute;
width: 100%;
top: 70px;
}
<div class="parent_div">
<img src=...></img>
<div class="child_div">
<h1>Some Title</h1>
</div>
</div>
Because you have given the child element a width of 100% so i am guessing you are looking to center align it vertically ... in that case you need to know the height of your .child-div if it has a fixed height then you can use something like this:
.parent_div {
position: relative;
}
.child-div {
position: absolute;
height: 100px; /* for example */
top: 50%;
margin-top: -50px /* height divided by 2 */
}
and if the height is unknown then you can use the same method but calculate height & margin via jQuery. And just in case you wanted to align it horizontally you can use the same method but with these changes ... in this case you need fixed width.
.child-div {
position: absolute;
width: 100px; /* for example */
left: 50%;
margin-left: -50px /* width divided by 2 */
}
Your updated fiddle

How does position absolute plus all four directions at 0 center an inner element?

I'm reviewing some code and while it works, I do not understand how the CSS below is centering the inner div.
Codepen demo available too.
HTML
<div class='outer'>
<div class='inner'></div>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
}
.outer {
position: absolute;
background-color: goldenrod;
width: 100%;
height: 100%;
}
.outer .inner {
width: 75%;
height: 75%;
background-color: green;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
Here is the answer for you question.
The margin: auto just tells the browser to split up the available space evenly between the left and right side of the element. By available space, any unoccupied horizontal space between the left and right edges of the parent container.
Reference
it is just because of
margin: auto;
You can get better understanding of this from Box Model.
For some reason a colleague at work doesn't want the sweet SO points so here is his answer.
If you were to put
top: 0;
bottom: 0;
left: 0;
right: 0;
on a normal div without height or width it would make the div the entire size of its container. Putting height and width on that div would constrain it and while it would try to fill its container, it would respect the set dimensions.
Setting margin: auto; as mentioned is the key. This allows the box for this div to fill its container by expanding the margins equally while respecting its set dimensions.
Is this the best way to center things? No idea but it works.

How to horizontally repeat two different bg gradients to the entire page width?

I have two different gradients that need to repeat on the x axis. One gradient appears to the left of my page layout all the way to far left browser window and the other needs to repeat from the right of my page layout to the far right browser window. The entire width of the page has an image that blends into both and appears above the repeating backgrounds.
Ideally, I could use two DIVs and set them to 50% width, then place the 960 width part over top of both in the center of the window, but I don't see any way to do this.
How can I accomplish this using CSS? I need to support IE7+.
This should work. I would only make the green the repeatable image and use the background color to make the red (represented by "red" below).
CSS
body {
position: relative;
}
#left {
background: red url(/yourleftimagefile) bottom left repeat-x;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
z-index: 0;
}
#right {
background: red url(/yourrightimagefile) top left repeat-x;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 50%;
z-index: 0;
}
#center {
position: relative;
z-index: 1;
width: 960px;
margin: 0 auto;
}
HTML
<div id="#center"></div>
<div id="#left"></div>
<div id="#right"></div>
The html assumes a flexible height #center but it could be made a fixed height.

CSS: Possible to do position:fixed offset center div?

First of all, have a look at this example of the layout I'm trying to achieve (below)
Basically, I have a standard center div (gray) with the typical margin: 0 auto. My problem is that I have a background image (on the white overflow area) that is <div id="stripes"> with the following CSS
background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;
This background is applied BELOW the HTML level of the document to the #stripes div.
What I'm having trouble with is setting up the red div below. The plan is for it to stay visible at all times via position: fixed however, I can't use % based right: xx%; top: 0 because the pattern must line up with the striped pattern, so a few pixels offset will create a visible and obvious "seam" on the page.
Here is a look at the effect with the stripes included:
The way I ended up solving this was to create two divs. On the top layer, I used a standaard width: 960px; margin: 0 auto div and then at the end of the document I created another div with the same styles meant to act as a container for the photo (red div above). Inside of the second div I nested a <div id="photo_bg"> div. This div used the following styles:
#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}
the parent div was called #stripes
#stripes {
background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
height: 9999px;
left: 0;
overflow: visible;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

Resources