I am trying to make a menu bar. The container is called: #menu and has the following CSS: border: 0px;
margin: 0 auto;
position: relative;
display: inline-block;
width: 100%;
The problem is that when I set the width of the menubars to 12.5%, they leave space on the side. Sorry but I can't show the real contents so I'm giving this image: https://www.dropbox.com/s/3z86dugdw5q9ezd/test.png . The CSS for the menu_bars is: width: 12.5%;
float: left;
padding: 25px 18px 25px 18px;
background: rgba(237, 157, 28, 0.992157);
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 15px;
height: 20px;
You need to declare this for the .menu_bar_item:
.menu_bar_item {
box-sizing: border-box;
/* more styles */
}
http://jsfiddle.net/teddyrised/eWNSz/1/
The box-sizing: border-box property prevents padding from adding onto the width (that is the default behavior, anyway). With this property declared, you will need to look into adjusting your height property, too.
You should set the left padding to 20px.
Related
I am using code:
<script>
jQuery('div.io-title-description').attr('align', 'center');
</script>
<style>
div.io-title-description { text-align: center; }
div.io-title-description a:first-child { font-size: 36; font-weight: bold; text-transform: uppercase; color: #1E73BE; text-shadow: 0px 0px; text-decoration: none; }
</style>
to align header of my website: https://news.softsolutionslimited.com
The CSS code is setting all other CSS properties except align in both jQuery and CSS
I have checked your website. And I have made few changes to classes:
.io-title-description {
display: inline-block;
margin: 17px 0;
padding: 14px 0;
float: none;
width: 75%; /* After width is given inline-block will align center */
box-sizing: border-box; /* padding included inside width */
}
.socialmedia {
float: right;
padding: 7px 10px;
text-align: right;
width: 25%;
margin-top: 30px;
box-sizing: border-box; /* Padding included */
}
Changes I made, added width to .io-title-description and border-box to both of them. Because, I added width, the inline-block element will know the width of line and if there is no other element, then it will align items to center. border-box give padding to the element but padding is included inside the width, i.e width will always be same(75%, in this case).
*Note:- I think now you don't have to add jquery to align center, as you have already use somewhere in parent.
I'm having an issue trying to get the green buttons underneath the header to lay properly across devices. Full desktop is fine, but as the screen gets smaller, the buttons will break between words and go the next line. And on mobile, I'd like them to stack, but they overlap, and I'm trying to add a bottom/top margin, but nothing helps.
http://www.cooldownjuice.com/collections/menu
How can I get this to lay properly?
Here's my code. (added max/min width as suggested on another topic here)
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
max-width: 300px;
}
You'll need to use float, like so
.catbn {
display: block;
float: left;
margin-top: 10px;
}
Also I personally believe the behavior is better when you remove width: 100% but that's a matter of personal preference.
Use
display: -webkit-inline-box;
display: inline-block;
margin: 10px,
And voilà! And you can maintain your center buttons. If you wish, you can float:left/right to align
To avoid breaking of words and overlapping buttons, add following rules in your css
.catbn{
white-space:nowrap;
display:inline-block;
/*Rest of the css*/
}
The best way to do that is to set the a to block. You may use float or display:inline-block
Here is your modified code for button.
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
display: inline-block;/* a as block and inline*/
max-width: 174px; /* Set the width*/
}
Hope this help you.!
I have a photo caption. It works nicely when the browser is not
bigger than the photo size. When it is bigger, the photo is in the
center. I don't know how I can make the caption always begin in the photo's left corner.
HTML
<div>
<img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg">
<span id="cap">Photo Caption</span>
</div>
CSS
#pht{
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
#cap{position:absolute;
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
color: yellow;
display: inline-block;
font: bold 13px/30px Helvetica,sans-serif;
letter-spacing: -1px;
padding-left: 5pt;
padding-right: 5pt;
}
fiddle: http://jsfiddle.net/qpxkypn8/
Try this..
HTML
<div>
<div id="dpht"><img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg"></div>
<span id="cap">Photo Caption</span>
</div>
CSS
div{
max-width: 500px;
margin: 0 auto;
}
#dpht{
display: flex;
flex-direction: row;
}
#pht{
display: block;
}
#cap{
flex: none;
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
color: yellow;
display: inline-block;
font: bold 13px/30px Helvetica,sans-serif;
letter-spacing: -1px;
padding-left: 5pt;
padding-right: 5pt;
}
Check out this Fiddle
Add the following CSS
div {
position: relative; /* positions absolutely-positioned
children relative to this element */
display: inline-block; /* makes the div only as large as its img child */
}
#cap {
top: 100%; /* these put #cap under the */
left: 0; /* bottom left corner of the img */
}
Updated JSFiddle
Are you able to alter the HTML? If so, you could use a container div to achieve the following:
http://jsfiddle.net/hkqgkee5/
To center a div using auto margins, you generally need to specify a width explicitly. Using display: table on the containing div will allow you to bypass that restriction.
I'm making a Coppermine Theme which is made out of tables (The theme base was made like that). I'm trying to give it a little bit of CSS style.
I want the gallery content to occupy the whole container. Here you have the link to my gallery.
As you may notice, the gallery content is all over the left, but I can't make it go all over the right too (In that way the whole container will be occupied)
Here you have the CSS code I'm using
.maintable {
background-color: #FFFFFF;
margin-left: -40px;
padding-right:50px;
}
What am I doing wrong?
Thank you.
The <div class="container"> has padding: 40px added to it. Try changing that to padding: 40px 0 to have 40px of vertical padding but no horizontal padding. Remove the margin-left and padding-right from the .maintable
You can achieve it doing this: (just comment the lines I've commented below)
1. Container (style.css:34)
#container {
width: 1100px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
/* padding: 40px; */
box-shadow: 0px 0px 19px
}
2. menub (style.css:71)
.menub {
background-color: #000;
color: #fff;
/* width: 100%; */
padding: 30px;
/* margin-left: -40px; */
/* margin-top: -40px; */
/* padding-right: 50px; */
}
3. adminmenu (style.css:81)
.adminmenu {
background-color: #2E2E2E;
color: #fff;
/* width: 100%; */
padding: 30px;
/* margin-left: -40px; */
/* padding-right: 50px; */
margin-bottom: 30px;
}
4. maintable (style.css:221)
.maintable {
background-color: #FFFFFF;
/* margin-left: -40px; */
/* padding-right: 50px; */
}
Table cells cannot use margins.
A few alternatives:
Padding. You can still use padding on table cells.
Add margin to an inner div. Put a div in your table cell that holds your content and apply margins to that div.
The border-spacing property. https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/