I'd like to insert a blank line in my HTML code but I'd like to change the size of this blank line to see if it fits with the rest of the page.
Does someone know how to do this ?
The nicest way would be to put a bottom margin on the element you want some spacing after. The other solutions posted are not semantic and your markup will end up to be a giant mess of spacer elements without content.
CSS is the right way for presentation.
For example if you have two paragraphs, and want some spacing after the first one:
<p style="margin-bottom: 20px;">Blabla</p>
<p>Blabla 2</p>
This is just an illustration, your best bet would be using id / class and a separate stylesheet.
The only other semantic solution I can think of is a <HR> element, but it is a quite problematic one if you want to style it cross-browser (see details on the link).
You could use something like:
<p style="height: 200px"></p>
How about using the line-height css property?
Like this:
<span style="line-height: 50px;"> </span>
You could insert a div and change the height with css?
<div class="spacer"> </div>
CSS:
.spacer {
height: 100px;
}
But a better solution would be to put a bottom margin on the element preceding the space you want.
<div class="some_content">
The stuff before the space
</div>
<!-- space here -->
CSS
.some_content {
margin-bottom: 100px
}
Would give you a 100px space below the content.
Related
I'm trying to learn HTML and CSS and I've came across the following question.
I need to insert a vertical gap between the elements of the site::
To be like that:
But I have no idea to get it done without using a lot of <br>.
Can someone help me to get this done?
Thanks so much!
Just add a margin to your html element that contains your 'Header' text, and some margins to the button.
This is a good resource for that: https://www.w3schools.com/css/css_margin.asp
you can also insert in a line break with the br tag
<br>
gap style property is for display: flex, but you can use margin-bottom for this, here is an example.
HTML
<div>
<div class="header">
<h2>Header</h2>
</div>
<h1>Header</h1>
<div>
CSS
.header {
margin-bottom: 50px;
}
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
This jsfiddle example shows what I'm talking about, I gave the div in question a red border to show how it's displayed.
I'd expect the #searchwrapper_3 div to go inside the #col_st_cautare one, but for some reason that's not how it works. I've been staring at it for a while now and I got no idea why it's showing like that
I also have an example of it looking ok simply because i've added another element after the #searchwrapper div here.
Issue's fixed, TIL a div will collapse if it contains only floating elements.
You need to do a clear:both; - see the end of http://jsfiddle.net/wzYry/3/
<div style="border: 1px solid red;" id="col_st_cautare">
<div style="float: left;" id="searchwrapper_3">
.... code ....
</div>
<div style="clear:both;"></div>
</div>
On a side note, it may be easier to make clr class in your styles.
.clr{clear:both;}
This way you can use this anytime you need to clear
<div class='clr'></div>
If a div contains only floating elements, it height will collapse.
You can add a <div style="clear:both;"> or use some techniques from this article, for example overflow:hidden:
<div style="border: 1px solid red;overflow:hidden" id="col_st_cautare">
This is happening because the child elements inside are floated and parent lost track of the how to wrap them.
Probably the easiest fix for this
#col_st_cautare { overflow: hidden; }
Demo
Other than this, the stable solution would be to add <div style="clear:both;"></div> before the closing the element.
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.
I have a problem with aligning some divs in this case:
<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
<div id="content" style="position: relative; margin-top: 50px;">
Content
</div>
</div>
(Of course this is only an example that reproduces the behaviour I want to avoid.)
I would have expected the content-div to align from the container-div. Therefore there should be 150px alltogether between "Preamble" and "Content".
However, (at least in Firefox) this is not the case. The container-div is simply ignored and therefore the content-div's margin-top is ignored too, as long as it is not bigger than the margin-top of the preamble-div's margin-bottom.
What can I do? Is there an additional css-rule I would have to apply? I would like to keep position: relative aswell as the html-structure.
Thank you!
[edit2]
Hope you are still with me ;-)
Sorry for the delay... here's a live-demo. It's so live, I even did a small jquery-script to illustrate the problem - just try out the buttons.
Live Demo
Thank you!
[edit]
The way it is:
(source: 666kb.com)
The way I want it (without the borders)
(source: 666kb.com)
I hope the difference is obvious although the images are jerky ;-)
That's because overlapping vertical margins are collapsed.
The CSS2 specification says:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In your case, because #preamble's margin-bottom and #container's margin-top overlaps, they get collapsed, so the effective margin is the bigger one (in this case, 100px).
If background color is not an issue, you can use padding instead of margin.
<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
<div id="content" style="position: relative; margin-top: 50px;">
Content
</div>
</div>
First of all, i recon making a stylesheet. It will save you time when you have alot of elements and also will keep your code cleaner.
What i see when i test your code is that the content div is showing inside of the Container with a margin on the top of 50px. What's wrong?
I think what you want to achiev is this:
<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
<div id="container" style="position: relative; border: solid black 1px;">
<div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;">
Content
</div>
</div>
</div>
Good luck! You didn't nest the Div inside the other one and therefore it wouldn't be a total of 150px together ;). Remember Margin is Outside the cell and padding inside the cell!
When i read now that you want to keep your html structure the same, that's not possible.
As soon as you give your first div a margin of 100px this means the next element will be placed 100px under that element. And because you a nested div next with a margin on the top of 50px this means you create more then 150px of total space...
Why did you wanna maintain your html structure?
I found a way out of this miracle: the good old overflow: hidden; trick...
When you add the property overflow: hidden; to #container, the behaviour is just like expected.
You can proove the difference here
Still I'm not completely convinced. Why does this trick solve my problem and are there other ways to do it?
Thanks for your help anyway!