Hi i'm trying to create a single page website with various sections. However, when I try to create two sections, there seems to be an auto margin between them. I tried to fix it by defining margin:0 for all sections but that doesn't do the trick.
Here's the link: http://alchuang.com/indexnav.html
Can anyone help?
Thanks!
Relevant code:
<section style="background-color:white">
<div class="container">
<h1>helllllllo</h1>
</div>
</section>
<section style="background-color:red">
<div class="container">
<h1>helllllllo</h1>
</div>
</section>
Heading elements have a default margin. Add margin:0 to your h1 rule.
Related
I have this part on my index.html page
<!-- Top of the Page -->
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>
I am trying to target the word 'EXAMPLE' in my main.css, but I am having troubles with it. Whatever I try, it seems to target the parent divs or not target it at all.
I have tried targeting:
.headertext .h1
.headertext h1
p h1
I basically tried every combination, but I can't achieve the effect I desire.
My goal is to have an image, then a black overlay with opacity on top of the image and then some text in the center of the page.
Thanks everyone!
edit: removed p tags around h1
edit2: I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!
You can't use <h1> inside of <p> as this is an invalid HTML. Although you can use an anchor or a span with a bigger font size.
Please try something like below.
.headertext h1 {
color: green;
}
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>
I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
I'm using Bootstrap to make a blog theme in WordPress and I'm encountering an issue with following the structure/classes.
My current markup goes:
<div class="container blog-post">
<div class="row">
<section>
<div class="col-lg-8 col-xs-12">
<article>
[Blog post content]
</article>
</div>
</section>
<div class="col-lg-4 col-xs-12">
<aside>
[Sidebar content]
</aside>
</div>
</div>
</div>
</div>
As illustrated, the <section> height is only affected by the margin and padding, not the content.
Since Bootstrap's col-xx-xx classes are floated left, my section is only accumulating height based on its margin and padding, not the child elements. If I clear the float after the section, then the sidebar doesn't display on the right, like I want it to.
I tried setting the section overflow to hidden and other values, but then the sidebar either cleared to the row below, or the section height didn't change.
Any advice would be appreciated!
you have your layout wrong.
you are seeing what you are seeing because you are not applying a clearfix to that section. and if you do (as you noticed already) the sidebar stacks down the post because <section> is a block element and takes 100% of width space, therefore pushing the sidebar down the dom.
you should either include the sidebar in the section (and apply a clearfix), or float that section as well like so:
section {
overflow:auto;
float:left;
}
i suggest including the sidebar in the section, or removing that section tag all togheter
You should refactor your layout a bit. Bootstrap works fine with row and cols, you just have to make it look something like this
<div class="row">
<div class="main col-lg-8">
/* your content */
</div>
<div class="sidebar col-lg-4">
/* your sidebar */
</div>
</div>
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}
I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.
The only problem is every section with a different background needs its own outer and inner div.
Dabblet
http://dabblet.com/gist/2920465
Foo
<section class="hero">
<div class="hero-container">
Hero content
</div>
</section>
<section class="popular">
<div class="popular-container">
Header content
</div>
</section>
<div class="main">
<div class="main-container">
Main content
</div>
</div>
<footer>
<div class="footer-container">
Footer content
</div>
</footer>
So far the code looks ok. It's too simple to go wrong. Only thing for now i would change is the 5 classes
.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container
merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.