Is there a way to remove the whitespace above and below the headings of h1-h6? Margin and padding were not working.
Check this codepen.
Thank you!
<div class="background">
<h1>This is H1!</h1>
</div>
<div class="background">
<h2>This is H2!</h2>
</div>
<div class="background">
<h3>This is H3!</h3>
</div>
<div class="background">
<h4>This is H4!</h4>
</div>
<div class="background">
<h5>This is H5!</h5>
</div>
<div class="background">
<h6>This is H6!</h6>
</div>
the css is
.background {
background: orange;
margin-bottom: 10px;
}
h1 {
margin: 0;
padding: 0;
}
This will hide the white
<body style="background-color:orange;">
EDIT kevin beat me to it and his is better. lol
you're dividing the headers into sections! don't use the 'div' tag when all of the elements are going to have the same styles anyway!
<div style = "background-color:yellow">
<h1>This is H1!</h1>
<h2>This is H2!</h2>
<h3>This is H3!</h3>
<h4>This is H4!</h4>
<h5>This is H5!</h5>
<h6>This is H6!</h6>
</div>
note : the usage of "background-color" in the tag is the same as using css in your code. should fix your problem!
edit :
due to some confusion, the answer above is not what the Asker meant (see comments), so here's my new answer.
what you're aiming to do, can't be perfectly done (in my experience) but if you want; you can use boxes (images) in place of your actual headings.
or, use
<div class="background">
<h1 style = "transform : scale(1,1.65)">This is H1!</h1>
</div>
which is a little bit cheesy, and can't be maintained well (if the font changes, it no longer fits perfectly)
see : related
Related
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV.
You can see my problem in jsfiddle.
Can you please help me solve this?
I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it.
Basically I want to text to look normal inside the DIV.
<div class="container-right">
<div class="topul" style="background-color:#2ecc71; width:352px;"></div>
<div class="parent" style="min-width:350px; width:350px; height:445px;">
<p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>
</p>
<div class="topul2" style="float:left; background-color:#2ecc71;"></div>
<div class="d-table">
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Name:
<p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71"><b>Some name</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71;">Address:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Other info:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
</p>
</div>
</div>
</div>
</div>
</div>
You can see the CSS in the jsfiddle link above.
I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this.
Please help.
Thanks
The problem is with your .myp4 styles
To avoid the overlap remove height: 2px;
To avoid bleeding from the div set max-width: 200px;
As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height
NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements
Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.
Try setting min-height instead of height on the rows and/or cells.
The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table {
width: 350px;
}
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)