Screenshot
Please refer to the attached screenshot. How to position the text "Arunraj" to the top of div(blue box). Now it automatically goes down.
Here is my code:
<div>
<span class="profile-pic"></span>
<span>
<div>
<h3>Arunraj</h3>
<p>Lorem ipsum dolor simet</p>
</div>
</span>
</div>
Related
I had a simple setup with a paragraph of text and an image to its right. The problem was that the picture's resolution would not change if the user had a smaller screen. I replaced "width: 256px" with "width: 40%" in the style. This made the image scale appropriately, but it moved up above the text. No matter how small I made the image, it would not pop back down. It did stay to the right, however.
Here is my html:
<p style="float:right"><img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Missing Img" style="float:right; width: 40%"></p>
<p>Lorem ipsum dolor sit amet</p>
Just remove the wrapping p tag, or even place the img tag inside the text's p tag...
Something like this:
<p>
<img src="Url" alt="Missing Img" style="float:right; width: 40%"> Lorem ipsum dolor sit amet
</p>
as you can see on this jsfiddle, if you play with the window size, the lorem ipsum text sometimes goes outside the white container.
I can't figure out why, because when I look at the code, everything seems to be embedded within the main container so I would expect the text to adapt the fluidly adapt to the window size.
What is the issue?
Thanks,
<section>
<div class="container content">
<div class="row">
<div class="col-md-3 bordering">
<h2>Qui <b>sommes-nous?</b></h2>
<h3>Actifs depuis </h3></div>
<div class="col-md-9">
<div class="title-block">
<p>
Lorem ipsum dolor sit amet, connecteur adipiscin
<p>
etc.
It is because you have applied a fixed width to .container:
.container {
width: 1260px; /* remove or edit this line */
}
I'm building a Single-Page layout with a navigation for scrolling to several anchors (anchor locks on top of the page - height of the header). The scrolling content is only structured in headlines <h3> and paragraphs <p>. Works well so far, but the last section of the page is quite short, so it gets stuck on the page's bottom and has not enough "space/content" to even arrive at the top of the page.
Does anyone know a way to extend the very last <p> to the browser's height (- the header's height), so that it can reach the top?
CSS-only would be great, jQuery is fine aswell.
Thanks!
From your description you seem to have something like this, where I'm giving your "scrolling content" area an id of application-body like this:
<div id="application-body">
<h3 id="n-1">Headline 1</h3>
<p>Lorem ipsum </p>
<h3 id="n-2">Headline 2</h3>
<p>Lorem ipsum </p>
<h3 id="n-3">Headline 3</h3>
<p>Lorem ipsum </p>
<h3 id="n-4">Headline 4</h3>
<p>Lorem ipsum </p>
<h3 id="n-5">Headline 5</h3>
<p>Lorem ipsum </p>
<h3 id="n-6">Headline 6</h3>
<p>Lorem ipsum </p>
<h3 id="n-7">Headline 7</h3>
<p>Lorem ipsum </p>
<h3 id="n-8">Headline 8</h3>
<p>Lorem ipsum </p>
<h3 id="n-9">Headline 9</h3>
<p>Lorem ipsum </p>
<h3 id="n-10">Headline 10</h3>
<p>Lorem ipsum </p>
<h3 id="n-11">Headline 11</h3>
<p>Lorem ipsum </p>
</div><!--#application-body-->
And you want to make the last element in that list - the last <p> element in this case, artificially taller so it will work correctly. If I'm not mistaken I think what you want is this:
#application-body p:last-child {
color: red;
height: 1000px;
}
Which will increase the height arbitrarily as you see fit. Not sure what the constraints of your page are, but you could also experiment with other units. I don't think percentage height will do what you intend though. em might work as well. You might also consider setting the height with a media query so that if the height was not very tall you could set it lower.
Here's more about :last-child
If you simply must use jQuery or must get precise about the height you want, you'd want to use this chunk of jQuery. Note that your header must have an id of header for this code to work. Adjust to your own site.
var targetHeight = $(window).height() - $('#header').height();
$('#application-body p:last-child').height(targetHeight);
I try to load specific location in same page. so I use this code and its work fine.
Here the JSFIDDLE.
<div class="header">This is Header</div>
<div id="nav" class="clearfix">
1
2
3
4
</div>
<div class="section">
<h1><a name="headline1">Headline One</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline2">Headline Two</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline3">Headline Three</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="section">
<h1><a name="headline4">Headline Four</a></h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
But the problem is, the header is fixed on position top. When I click the link 1, the Headline one is goes back on header. So the h1 content is not show.
Please visit this Fiddle. You can understand what I am try to say. Thank you for your help.
Simple way: Use padding on the "name" element, to counter the header.
See http://jsfiddle.net/sAdK5/3/
.section h1 a {
display:block;
padding-top:100px;
}
A more complicated way: put all content inside a div container and create inline scrolling with CSS.
You could aslo use jQuery to add the extra scrolling.
See: http://jsfiddle.net/sAdK5/11/
What we do is, create the scrollbar inside the #content area, and measure the height of the window, minus the header - and call it on every window resize.
$(document).ready(function(){
resizeContent();
//attach on resize event
$(window).resize(function() {
resizeContent();
});
});
function resizeContent()
{
//#content height equals window height minus .header height
$('#content').css('height', $(window).height() - $('.header').height());
}
I have something similar to this
.col {float: left; width:190px;border: 1px solid red;}
<div class="col">
<p>some text goes here some ass sasass here </p
</div>
<div class="col">
<p>some text goes here</p>
Link
</div>
So the text on the first div is quite long where as the text in the second div is not. So the first div gets taller than the second div.
What I want to achieve is leave the text in the second column as it is but vertical align the link to the bottom to match the left's div height.
Does that make sense?
Thanks
Look at this example:
http://www.ejeliot.com/samples/equal-height-columns/example-6.html
added:
you should take out the element that you want to put on the bottom.
<div class="col">
<p>Lorem ipsum dolor 1</p>
</div>
<div class="bottom"></div>
<div class="col">
<p>Lorem ipsum dolor 2</p>
</div>
<div class="bottom">
link
</div>