Can someone tell me why my div brdheader isn't sitting at the top (the most top inside of, that is) of punwrap?
I'm using fluxbb, and the devtools in chrome aren't saying anything. There's no margin, or padding, so I have no idea what the problem could be.
This is the forum. Since I'm using FluxBB I can't exactly post all of the code.
http://flux.strange-coast.com/index.php
Thank you for taking the time to read this.
you have margin: 30px 0px -10px 5px on your .pun h1 that's what's doing it. Adjust that to what you want
Change your .pun h1 css line in your BSTangram.css on line 127 to the one below should fix it.
.pun h1 {
margin: 0px 0px -10px 5px;
margin-left: 5%;
padding: 0px;
}
As long as your going for this output, http://cl.ly/TGxf
If that's the case then there is your fix if not sorry I misunderstood.
Related
I'm a designer not developer "so mind the question if its too basic" and i was updating my word-press version.
www.majd-design.com
After updating my word-press version i got extra margin in my inline element{},
element {
float: left;
top: auto;
right: auto;
bottom: auto;
left: auto;
margin: 0px 0px 10px 25px;
overflow: hidden;
position: relative;
width: 930px;
height: 516px;
}
Can anyone advice how can i get rid of it, as this code isnt in CSS files or in the HTML index file.
Thanks
Adding !important to the end of a css attribute declaration will tell the browser to make sense of it and not to any other declaration of the same attribute, also when the other declaration has more priority than yours (and also inline css ;)).
You can use it like this:
margin: 0px 0px 10px 25px !important;
Alter the CSS file. If it's core to a theme or WP then you can also...
Create a child theme. https://codex.wordpress.org/Child_Themes
Get a custom CSS plugin and override the CSS. https://wordpress.org/plugins/simple-custom-css/
element {
margin: 0 !important;
}
you might need to add more detail but i think its probably this section of the CSS
margin: 0px 0px 10px 25px
When its in shorthand like this it means:
top margin is 0px
right margin is 0px
bottom margin is 10px
left margin is 25px
Let me know if this solves your issue
Using javascript , you can do
document.getElementById("myDivsId").style.margin = "0";
or
document.getElementById("myDivsId").style.marginLeft = "50px";
(similarly for all 4 sides)
JsFiddle
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
Basically I want the headers to float aligned to the text but for some reason it's not working??
http://gyazo.com/670047956db62243c980124917102de7
My css
h1 {
font-size: 35px;
padding: 35px;
margin-top: 60px;
text-align: left;
}
Thanks!
First I'd try to remove the padding: 35px; and see how it looks (since it applies to all directions). To skip the left direction simply do padding: 35px 0px or padding: 35px 35px 35px 0px.
Secondly, the indent might come from a different style. To investigate further simply use the Inspect element option that comes built in on every modern browser. (You can access it by right clicking the element, or by pressing Ctrl+Shift+I).
I have just found out that my forms on these pages are not working.
http://www.abado.dk/modtag-tre-tilbud/
http://www.abado.dk/kontakt/
http://www.abado.dk/bliv-partner/
I really don't have any idea what is wrong.
Can anyone help me?
The issue is on your padding: 25px 15px; in .form-control
you in put height is 34px at the same time you are using padding-top(25px) + padding-bottom(25px) = 50px with in the 34px
Add this in to css properties
.form-control{
height: auto;
}
or adjust padding value
Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
http://dl.getdropbox.com/u/240752/list-example.gif
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
I like #bryn's answer.
One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case.
You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.)
You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}