I have all all my divs end with a space. This also affects the menu div which I do not want to have the additions padding at the end.
I tried to implement a NoEm style and use it, but of course it does nothing. As soon as I wrote it I relaised it would not affect the div. the code is here:
div {
margin-bottom: 1em; /* Adjust depending on your text's line-height */
}
div .NoEm {
}
So the question is:
How can I have ALL divs end with a margin except for one?
NO jquery or Js wanted.
EDIT: HTML
<div class="navbar navbar-inverse NoEm ">
EDIT: 2
JSFiddle
http://jsfiddle.net/jufb09m1/
COMMENT
Lol, so many down votes for not realising a CCS question required me to show a html markup of <div></div>
Set the margin-bottom for .NoEm
div {
margin-bottom: 1em; /* Adjust depending on your text's line-height */
}
.NoEm {
margin-bottom: 0;
}
IkoTikashi's answer is correct based on the information available when they posted it; before the fiddle was available.
Now that we can see your HTML code, we can see the additional problem: In addition to not explicitly setting the margin-bottom to 0 in your .NoEm class, your navbar div contains OTHER divs. All those divs also have a margin-bottom of 1em.
You need to use the fix IkoTikashi provided of explicitly setting margin-bottom in .NoEm to 0 and you need to use that class on all the divs used to create the navbar.
Related
I have just started learning Bootstrap 5. I made a very simple webpage with basic blocks using the row/column guidelines on Bootstrap. One of these columns that I made is not displaying the gutter padding. The other columns are displaying the gutter padding to the left and right, but not the content1 column that consists of the two "posts". I am attaching my HTML and CSS code here.
Here is the webpage that I made in Bootstrap 5: Click Here to View
And I am attaching my CSS code here:
.header1 {
background:#ededed;
border-bottom:1px solid #ddd;
}
.content1 {
padding:40px 0;
}
.post {
background:#ffe6fa;
margin-bottom:30px;
}
.sidebar1 {
padding:40px 0;
}
#widget1, #widget2, #widget3 {
background:rgb(233, 250, 205);
padding:30px;
margin-bottom:30px;
}
.footer1 {
background:#000;
color:#fff;
}
Can you please help me understand what did I do wrong in my code? Why is the Bootstrap gutter padding not displaying for the column with class "content1"?
Thank you so much.
There is a way for Bootstrap to do all the work and you get to shrink down your CSS file too.
blahblahblah{
etc.etc.etc
etc.etc.etc
etc.etc.etc
}
^ done for one tiny UX result eventually adds up to a large file that needs to be loaded by each visitor. You could do it all by adding 4 characters only to your HTML.
You are adding a lot of CSS when Bootstrap will take care of it for you. In the same way that you can add rows and columns to your HTML to make a cool layout where all the CSS is pre-written, you can also add margins and padding to your HTML and the CSS is all automatic too. You've already been doing this by adding gutters (if you were also following the GetBootstrap info for those rather than adding your own).
In your thing above, the two items that require a gutter on their right hand side could just have a little margin on their right hand side, or the column they are housed in could have a little right-side padding.
So, padding in Bootstrap, use any number between 0 and 5. Everything below also applies to Margins, just swap the p to an m.
<div class="p-0">
Padding - None
<p class="p-5">
Padding - Maximum (but you can add CSS)
<a class="pt-0">
Padding Top - None
<h1 class="pb-5">
Padding Bottom - Maximum
In Bootstrap we don't use left and right for some things, we use Start and End.
<nav class="ps-5">
Padding Start (the left side of whatever is being padded)
<footer class="pe-2">
Padding End (the right side of whatever is being padded)
^ That last one can be added to the parent div of your two boxes. Adding pe-2 to your HTML is better than brain-aching over custom CSS? As promised, 4 characters only ;)
Couple of variations...
<img class="px-0">
Padding left and right
<button class="py-0">
Padding top and bottom
The main point is, especially with the layout of the page. Let Bootstrap do the work, adding more and more layout CSS often results in a negative.
The thing is you are adding padding for content1 as padding: 40px 0; which makes the padding zero on both left and right of the content1.
If you want to have some padding,
.content1{
padding: 40px 10px;
}
will do the trick.
And if you want to add some padding to .post classes as well, you can use,
.post{
padding: 30px;
}
I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
I am trying to figure out the best approach to have a link with an image floated next to it inline, that will force the link to become multi-line as needed while keeping the image inline floated next to it.
I setup an example here - http://jsfiddle.net/ubernoob/tYeGR/
If you size the result window you will see that once it hits a small enough width the image will fall below the link.
How can I code this so the link will go to multi-line and leave the image floated next to it?
Try putting <img> tag before <h3> and remove float:left from <h3>
I've edited the jsfiddle: http://jsfiddle.net/tYeGR/7/
this example works: http://jsfiddle.net/jalbertbowdenii/tYeGR/18/ but i changed your floats to absolutely positioning the img's. if that's not good enough, #mediaqueries are the way to go. i tried two in jsfiddle but to no vail. probably user error.
You can absolutely position the images in their rows and then add some padding to the <h3> elements so the links don't get covered by the images:
.list img {
position : absolute;
right : 10px;
}
.list h3 {
float : left;
font-size : 12px;
padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}
Here is a jsfiddle to mess around with: http://jsfiddle.net/jasper/tYeGR/19/