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);
Related
So I have an <h2> element and a <p> right below it and I'd like to space them out a little bit. Currently I'm just using a <br> between them but I was wondering if there's a way to do it in CSS? It can be applied to all the <h2> and <p> elements on my page. Thanks!
you can control line-spacing in one HTML tag only. So if you have
<h2 style="line-spacing:40px;">Hello World</h2>
<p>Lorem ipsum</p>
It will only affect the <h2> "Hello World" and not the <p> tag with the text Lorem Ipsum. You need to give the a margin-bottom such as this:
<h2 style="margin-bottom:40px;">Hello World</h2>
<p>Lorem ipsum</p>
Using bootstrap I created three columns, each containing an image and a caption. Like so:
However, I want it to actually output the content like this:
This is my current code:
<!-- Section 6 -->
<div class="cssSection cssCenter">
<div class="container">
<h2>The Order</h2>
<br>
<p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars refrained from becoming drunk, gambling and swearing</p>
</div>
</div>
</div>
</div>
And here is the related CSS code:
.cssSection {
padding: 45px 0 30px;
}
.cssCenter {
text-align: center;
}
.cssInformation {
font-size: 18px;
}
What can I adjust within the HTML and or CSS to make the p tags align horizontally, without affecting the images?
Are you sure there is no other css you might have added? I tried your code on jsfiddle (adding bootstrap) and it shows up fine for me.
Here everything is fine in plunker. Please provide your whole html file to help us inspect your issue.
Your code works well in bootstrap3.3.4.
Check your bootstrap version.
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 */
}
Then i add some text in my absolute block inner div it dosn't expand.
I know that exapanding forbids a parent container width: <div class="main_wrap"></div>.
But I can't remove it from him.
So i want to find a solution how i can correct it without a js. How can i do this? It must to expand in width, not in height, talking about this element: <div class="abs">. IF you remove a width from .main_wrap it's correct view, but i need to reach results like this without removing width, because it's just little part of huge grid.
HTML:
<div class="block">
<div class="abs">
<table class="whf table">
<tr>
<td>
<div class="image">
<div class="shadow"></div>
<img src="http://boardingarea.com/blogs/deltapoints/files/2012/07/test.jpg" width="77" />
</div>
</td>
<td class="vamid">
<div class="text">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</td>
</tr>
</table>
</div>
Here is full example:
http://jsbin.com/uqafuq/6/edit
Thanks in future.
I don't know if I understood you correctly and your construction looks quite strange, but is this what you wanted to achieve? http://jsbin.com/uqafuq/11/edit
Just remove the height: 100% from .abs
Just delete your height: 100% from .abs your setting your height from the elements parent which dont have height at all
Add display: inline-block; to .block
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());
}