I've been toying around a bit with positioning (relative and absolute) and i ran into a weird problem.
HTML:
<div class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sem ac lacus varius ullamcorper. Sed sed tincidunt lorem. Integer volutpat mauris eu elit condimentum vehicula. Vestibulum vitae urna id risus ornare porta. Praesent quis tortor nunc. Donec ut aliquam orci. Mauris cursus quam mauris. Aliquam iaculis, augue malesuada egestas blandit, erat lectus vestibulum magna, sed pharetra arcu orci nec ligula. Proin non sem dui. Integer viverra viverra est sit amet fermentum. Pellentesque egestas tristique eros vel interdum. Nam vel neque odio, et mollis nulla. Vestibulum fermentum augue vel justo ullamcorper molestie. Sed eget enim urna, a elementum mi. Aenean ornare viverra dictum.
</p>
<div class="inner"></div>
</div>
CSS:
.one{
position: relative;
}
.one p{
margin-top: 60px;
}
.inner{
width: 100%;
height: 50px;
background:red;
position:absolute;
top:0;
right:0;
}
As you can see here, I apply margin to the <p> tag, but it pushes the entire wrapping div and thus affecting the positioned element as well.
Is that the way it should behave or am i missing something?
Try overflow: auto; on your .one element.
Overflow:auto works for this
DEMO
Reason: Here is explanation for this http://www.brunildo.org/test/OverflowR.html
Apply padding-top to the containing div instead of margin-top to the element.
Absolute position is applied to the parent relative. If you want the absolute positioned div to be at the top of the page, don't use relative at one or one p.
Is this what you were looking for?
http://jsfiddle.net/DYBpg/
Div with class="one" have this css rule
position:relative
that pushes all its content down.
Remember that once you write position:absolute, this absolute will refer to its "container".
If you remove the relative positioning from one and one p you'll obtain wat you want
DEMO
Related
In CSS, how do I,
1) use an :after pseudo element to successfully insert,
2) a background:url image after some text,
3) that is always centred whenever viewed on a wide large screen or tall small screen?
(Example images below.)
I’ve tried different things with the code below, but it always aligns the image with the left side of the text, instead of remaining centred as the screen size changes.
Appreciate some help please.
Code
div:after {
content: '';
background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg");
width: 1200px;
height: 474px;
display: block;
}
Images
Not correct.
This is the current result with above code.
Correct.
Expected result with centre aligned image on wide large screen.
Correct.
Expected result with centre aligned image on tall small screen.
I was able to achieve your desired result by putting the text within a p > span tag, and applying the :after element to the outer p. Then, I gave the span element a max-width and centered it, so that the image appears to overflow the span container. See my solution:
p:first-of-type:after {
content: '';
background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg");
width: 1200px;
height: 474px;
display: block;
max-width: 100%;
margin: 10px 0;
}
span {
display: block;
max-width: 70%;
margin: 0 auto;
}
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ipsum eget elit egestas ultrices. Sed dui mauris, efficitur sit amet malesuada at, dictum quis elit. Pellentesque ac placerat ante. Nulla augue arcu, blandit quis nulla vitae, posuere gravida neque. Aenean leo erat, porttitor maximus nunc non, mollis ultrices dui. Maecenas consectetur eleifend ligula, quis rutrum leo suscipit id. Morbi pulvinar et est sit amet lacinia.</span></p>
<p><span>Nulla vitae magna at mi tempus cursus. Vestibulum purus purus, facilisis a lectus ac, gravida porta tellus. Integer auctor justo at tempus ultricies. Mauris ut eleifend nibh. Nullam fermentum dui in sem congue semper. Quisque eget pharetra enim. Aliquam erat volutpat. Donec nec fringilla augue, sed blandit neque. Aliquam sollicitudin, ante id accumsan fermentum, urna turpis lacinia metus, a ullamcorper enim velit vitae diam.</span></p>
I have a fixed top div with variable height. All I need is to push the bottom contents below the fixed div to re-position itself as the height of the fixed div changes in various pages.
P.S. I'm currently doing it with jquery but it takes some rendering time and shows broken contents until the page loads completely as it is added at the end of body tag. I want to load jquery and other scripts at the very end so trying to find a way to do this completely with CSS if possible for getting rid of those rendering effects.
Following is a demo code which needs to work with CSS only -
.container {
width: 100%;
height: auto;
}
.top {
position: fixed;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
.bottom {
height: auto;
width: 100%;
}
<div class="container">
<div class="top">
This is a fixed div with variable height and the bottom content are supposed to pushed and stayed below as the height increases.
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur porttitor neque at vestibulum. Nulla facilisi. Nullam tempus ligula sapien, dictum scelerisque libero tristique et. Ut sit amet magna eros. Suspendisse potenti. Donec vitae sodales nunc. Nunc eget condimentum urna. Nulla sit amet lectus ac nunc mattis porttitor eget quis purus. Ut rhoncus nulla eget velit tincidunt luctus. Donec in justo tempus, porttitor magna nec, semper eros. In bibendum magna eget lectus viverra ultricies. Integer pharetra augue lorem, eu tempus nulla volutpat dignissim.
Morbi vulputate arcu sit amet lectus porttitor hendrerit. Donec id pharetra urna, sit amet tincidunt nulla. Nam semper felis vitae odio elementum posuere. Vivamus blandit accumsan sapien, vitae blandit est lacinia et. Nam sit amet diam massa. Quisque et erat et orci dignissim congue. Maecenas pellentesque pretium sodales. Donec pellentesque rhoncus tortor et hendrerit. Phasellus nec dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce nec ligula mollis, iaculis est a, lobortis est. Phasellus faucibus varius arcu, eget volutpat quam venenatis vel. Sed felis nulla, pulvinar ut metus ac, luctus finibus tortor. Aliquam vulputate, nulla quis accumsan pretium, lacus elit sollicitudin ipsum, non faucibus erat mauris a felis.
</div>
</div>
try this
.bottom {
height: auto;
width: 100%;
margin-top: 1cm;
}
I have updated the fiddle and its working:https://jsfiddle.net/m0615z32/1/
Below is a pure javascript code that will work for you. Please check
What i have done is set the padding-top of below container to be equal to height of top container without using jquery.
document.getElementById("bottom-div").style.paddingTop = document.getElementById("top-div").clientHeight+"px";
OR
If You can change your top container to be relative than fixed, then also this works but is not keeping the div fixed on top
.top {
position: relative;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
Now the top content will always be on top. It will adjust according to content and below container will start after top ends.
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I am having trouble making one div height move with the other/be equal. I need these to be equal as the left sidebar will have more content but I would still like the right div height to move with it as its a sidebar.
<div id="maincontainer">
<div class="contentcontainer">
<div class="postcontentcon">Nam eu auctor enim, id tincidunt dolor. Sed et lacinia sem. Donec pretium quam eget nunc vestibulum, vel sagittis nibh bibendum. Fusce eleifend sagittis ultrices. Nullam lobortis ultricies justo, nec tempus metus sollicitudin at. Proin sit amet turpis a orci ullamcorper pulvinar id vitae erat. Fusce sodales iaculis nulla ac faucibus. Vivamus blandit placerat nunc, nec dictum velit tincidunt in. Pellentesque elementum odio metus, eget fringilla nisi imperdiet quis. Etiam facilisis magna pellentesque lorem luctus condimentum. Nulla blandit ac ligula nec aliquam. Cras massa felis, condimentum condimentum ligula in, pharetra fermentum felis. Proin sed lorem interdum, lobortis lectus non, porta tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="postsidebarcon">Hello</div>
</div>
CSS
body { background-color:#606061; }
.contentcontainer {
margin:0 auto;
position:relative;
width: 1017px;
height:auto;
}
.postcontentcon {
margin:0 auto;
position:relative;
width: 694px;
background-color:#525253;
float:left;
}
.postsidebarcon {
margin:0 auto;
position:relative;
width: 323px;
height:inherit;
background-color:#484848;
float:left;
}
You have a few ways to do his :
display:flex and sizing your containers, default will draw child
side by side demo
display:table on parent + width and display:table-cell; on child + width : demo
clearing floats . float first element, set margin to second, add a pseudo with clear:both (or left/right) demo
faux-column technique, oldish but solid , fine here since parent container has a fixed width The idea is to draw the column onto background of parent : demo (here i used a gradient for the demo, but usally it is an image. You can use multiple background nowdays.
there is other tricky ways with: floatting & hudge heights , negative margin ,overflow. some will even use absolute positionning but you should stay away from using these.
If i do:
<img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA
It doesn't work because text goes down to the image when the image height stops. I mean:
it would do this:
http://img8.imageshack.us/img8/9379/senzatitolo1yt.jpg
While what i want to get is:
http://img28.imageshack.us/img28/606/senzatitolo2rd.jpg
I could use old good table (<td>img</td><td>text</td>) but in 2011 that doesnt' seem the way to go :)
Any easy cross-browser trick to do that?
Edit: I can't know the image-width
Thanks!
Use two div tags, float them both to left. Give a width of 30% to one of them and 70% to the other. Put the image in the first one, text in the second one.
Given the simplistic html:
<img src="path/to/img.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui odio, luctus ut viverra vitae, dignissim a mauris. Vestibulum vel massa at sapien tincidunt venenatis id sed purus. Ut quam libero, mollis a ullamcorper sed, gravida id ligula. Sed nec augue enim. Phasellus accumsan aliquet erat interdum ullamcorper. Cras tellus libero, tincidunt non placerat interdum, venenatis id arcu. Nulla facilisi. Maecenas malesuada vestibulum venenatis. Nam vel tellus arcu. Sed non dui urna. Proin fermentum aliquet lectus non fermentum. Donec aliquet purus et tortor lobortis gravida. Duis vehicula ligula nec enim consequat ut tempor diam molestie. Aenean egestas eros sem. Phasellus ullamcorper pretium nunc molestie luctus. Mauris semper ultricies nulla, at tempus purus eleifend vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac est nunc.</p>
The following CSS works:
p {
margin-left: 100px; /* width of image plus some padding for white-space */
}
img {
float: left;
width: 90px;
height: 90px;
}
JS Fiddle demo.
Surprisingly enough the following works, albeit only tested on Chromium 8/Ubuntu 10.10:
img {
width: 100px;
height: 100px;
background-color: #f90;
float: left;
margin: 0 10px 100% 0;
}
JS Fiddle demo (ignore the colours, they were just so's I could see where things were sitting).
Second (post-edit) JS Fiddle demo, featuring an img with non-specified dimensions.
There are multiple ways to realize that.
1) two divs. assign to both a width. float the image-div to the left, the text-div to the right.
2) use margins!
give it a shot and give me feedback.