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;
}
Related
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;
}
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.
I am facing problem while aligning two text, one in center and other text in right.
I used a Div to align it:
<div style="text-align:center">
<h1> Sample Heading</h1>
<div style="float:right; text-align:center">
sample link
</div>
</div>
When I used this my heading comes left, its not a centrally align properly please tell is this the correct way or is there any other way to handle this scenario.
Thanks
If you want the item to not mess with the layout, try absolute:
<div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute's are based on this elements origin -->
<div id="sampleLink" style="position:absolute; top:0px; right:0px; >Link</div>
<h1 style="text-align:center;">Heading</h1>
</div>
You do not need to use div's to do this, you can style the elements themselves. The < a > tag by default does not understand text-align, as it is an inline element, so I have placed the link in a paragraph, which accepts text-align. I have placed the two lines in a < div > tag with a small width so it is easy to see what is going on.
<div style="width:400px;">
<h1 style="text-align:center"> Sample Heading</h1>
<p style="text-align:right">sample link </p>
</div>
It works fine to me.
But if you have some issues with positioning of h1, try make it block: h1 { display: block; }.
On other hand, if you want to display h1 and a at the same line, you just have to put right-aligned a before h1.
For anyone using pug
To quickly align a link to the right, this seems to work:
html
head
style.
rite {
font-family: monospace;
font-size: 10pt;
text-align: right;
}
and then ...
rite
p
a(href='/logout' align=right) logout
Note that this won't work:
rite a(href='/logout' align=right) logout
And this won't work:
rite
a(href='/logout' align=right) logout
As #superUntitled explained. Great tip from #superUntitled.
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 like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.