At my wordpress theme at http://www.iam-us.nl/over-i-am-us I can't align my image to the left.
I have added those WordPress Generated Classes to the css
/******************************************
* Align box
******************************************/
img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
But somehow the css is not read well. When I open firebug there is no class added to the picture at all.
I checked your whole style.css and found that you have a bad comment here:
/** Coin Slider HACK by aSeptik * 14/06/2011 16.37.38 * fix navigation button z-index */
#slider {
margin: 0 0 10px 0;
padding: 0;
width: 950px;
height: 350px;
/*background-image: url('http://www.iam-us.nl/wp-content/themes/iamus/images/De-mens-op-de-juiste-plek.png');
}*/
you commented out the last curly brace!! }
so change it to this:
height: 350px;
/*background-image: url('http://www.iam-us.nl/wp-content/themes/iamus/images/De-mens-op-de-juiste-plek.png');*/
}
and that's it
Related
I'm working on this page, and as you can see on the second "entry", there is a gap between the H2 and the image, but not the others.
Webpage: http://sim.rgmgleague.com/cap/trades.php
I can't seem to figure out why.
Add float:right to the class .teambanner and remove the bottom margin
.teambanner {
/* margin-bottom: 70px; */
float: right;
}
add css
.teambanner{
display: flex;
margin: 0;
justify-content: flex-end;
}
OR
.teambanner{
float: right;
margin: 0;
}
Add this css
.team_1_h2 {
margin-right: 10px;
float: left;
line-height: 0px;
}
.team_2_h2 {
margin-right: 10px;
float: left;
line-height: 0px;
}
.team_2_logo {
/* float: right; comment this float out!*/
height: 40px;
}
Having trouble getting my image to center, while remaining on the same horizontal level as my icon.
HTML
<div class="smalltop w3-top">
<span class="w3-opennav w3-xlarge" onclick="w3_open()"><i id="menui" class="material-icons w3-xxlarge">menu</i></span>
<img id="smalllogo" src="img/navlogo-invert.jpg">
</div>
CSS
#smalllogo {
max-height: 50px;
width: auto;
display: block;
margin: 0 auto;
border: 5px solid;
margin-top: 5px;
}
#menui {
left: 0;
}
.smalltop {
background-color: #FFF;
list-style-type: none;
margin: 0 auto;
}
https://jsfiddle.net/pzLbruhx/
Add relative positioning to the container and absolute positioning to the icon
#menui {
left: 0;
position:absolute;
}
.smalltop {
background-color: #FFF;
list-style-type: none;
margin: 0 auto;
position:relative;
}
jsFiddle example
Just give property float:left to #menui, and see the result
Use display:table\table-row\table-cell and vertical-align on icon
#smalllogo {
max-height: 50px;
width: auto;
display: table-cell;
margin: 0 auto;
border: 5px solid black;
margin-top: 5px;
}
.w3-opennav {
display: table-cell;
vertical-align: middle;
}
.smalltop {
background-color: #FFF;
list-style-type: none;
margin: 0 auto;
display: table-row;
}
Fiddle
i'm using blogger and I want to know how can I remove the white spaces between a img and a text, because is a lot separated. Blogger contains a class called separator but I don't know what to do for fix that.
Here's a image:
How can I remove it?
This is my css
.separator{
margin: 0;
display: block;
padding: 0;
}
.post img {
display: block;
text-align: center;
padding: 0px;
margin: 0px;
}
CSS
/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em;display:none;}
.wrapfullpost{display: block;}
.post{
display: block;
margin: 0;
}
.post img {display: block;
margin: auto;
text-align: center;
padding: 0;
}
.post-title{color:#333333;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:24px;line-height:24px;font-weight:bold;}
.post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;text-decoration:none;}
.post-title strong,.post-title a:hover{text-decoration:none;}
.post-body{
font-size: 17px;
display: block;
margin: 0;
}
.entry-content{ padding: 0; margin: 0; display: block;
}
.separator{
margin: 0;
display: block;
padding: 0;
}
.post-footer{margin:5px 0; font-weight: 300;}
.comment-link{margin-$startSide:.6em}
.postmeta-primary{color:#999;font-size:12px;line-height:18px;padding:0 0 5px 0}
.postmeta-secondary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px 0}
.postmeta-primary span,.postmeta-secondary span{padding:3px 0 3px 20px;background-position:left center;background-repeat:no-repeat}
.meta_date{background-image:url(http://2.bp.blogspot.com/-paWPYJvQDqA/UC7eiuIKgUI/AAAAAAAAAvw/af410sUcO2w/s000/date.png)}
.meta_author{background-image:url(http://3.bp.blogspot.com/-reTaoyVmDXA/UC7ejgVBQbI/AAAAAAAAAv4/u6d-iPeLZi0/s000/author.png); border-right: 1px solid #ccc;
padding-right: 10px!important;
m
argin-right: 5px;}
.meta_comments{background-image:url(http://2.bp.blogspot.com/-zZgvwATiF3E/UC7ej-cvmbI/AAAAAAAAAwA/THMs0579MII/s000/comments.png) }
.meta_edit{background-image:url(images/edit.png)}
.meta_categories{background-image:url(http://1.bp.blogspot.com/-g-ptS39XbNM/UC7ekTJsEXI/AAAAAAAAAwI/t8fMhUuUvQI/s000/category.png)}
.meta_tags{background-image:url(http://3.bp.blogspot.com/-fZuK3yymXmo/UC7ek6kEDLI/AAAAAAAAAwQ/-J16r4bHvFo/s000/tags.png)}
.readmore{margin-bottom:5px;float:right}
.readmore a{color:#F85B48;background:#EAEAEA url(http://4.bp.blogspot.com/-m6AJDK0k2xA/UC7emOYbEbI/AAAAAAAAAwY/Q4o73QiZdc4/s000/readmore-bg.png) left top repeat-x;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase}
.readmore a:hover{color:#fff;background:#E74F3D url(http://4.bp.blogspot.com/-m6AJDK0k2xA/UC7emOYbEbI/AAAAAAAAAwY/Q4o73QiZdc4/s000/readmore-bg.png) left -126px repeat-x;text-decoration:none}
And this is what blogger add in HTML
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://3.bp.blogspot.com/-DGgnyTkp3xc/VAtkSdWZLxI/AAAAAAAAAb4/oXctHDcrSRk/s1600/Sinopsis%2Bwissar.png" height="160" width="640" /></div>
Since you didn't share any of your code, It's hard to explain where is the problem (You may get negative rep).
but i can suggest you to look at your style classes. try following, it's just a removal of Padding, and Margin
.imageClass{
padding: 0px;
margin: 0px;
display: block;
}
.textClass{
padding: 0px;
margin: 0px;
display: block;
}
Within the seperator class there is a blockquote which contains the text, and an a tag which is a link containing the image. Both of these have margins that you do not want. Try this.
.seperator blockquote {
margin: 0px;
}
.seperator a {
margin-right: 0px;
}
Note: Remove what was in my previous answer.
If you can't get it to work, go to the section on your webpage that you want to change, right click -> inspect element. This will bring up the HTML inspector. You can then click on different elements and see the css on the right hand side that relates to that element. Try unticking different css statements or changing them/adding new ones. Just continue to play around with it until you can get it. I really can't be of any more help.
Solved, just added the next
.separator {
display: block;
line-height:0;
margin: 0;
padding: 0;
}
.separator blockquote {
margin: 0;
}
.separator a {
margin-right: 0;
}
Thanks to Yep_It's_Me who helped me a lot.
I have created a css sprite image for multiple images. The css for sprite is:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
Now I want to assign the first image from this sprite to an li element. Currently the first images is assigned using background:url property of this li as:
li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)
How can bring the first image from sprite and assign to the li element. I have seen an example which suggests to use:
<div class="sprites" id="image_5306605314403955_gif"></div>
But I want to see if adding HTML can be avoided and use CSS only for that purpose. The li element on my page looks like:
<li>ABC</li>
I am not sure if that is what you are looking for or not, but the below code should do it:
HTML:
<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>
CSS:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
If what you are looking for is not to use class or id, then I think it is impossible, as your CSS needs an identifier to differentiate between your items (which are inherited from the same class <li>)
body {
overflow-y: scroll
}
.mini_iframe,
.serverfbml_iframe {
overflow-y: visible
}
.auto_resize_iframe {
height: auto;
overflow: hidden
}
.pipe {
color: gray;
padding: 0 3px
}
#content {
margin: 0;
outline: none;
padding: 0;
width: auto
}
.profile #content,
.home #content,
.search #content {
min-height: 600px
}
.UIStandardFrame_Container {
margin: 0 auto;
padding-top: 20px;
width: 960px
}
.UIStandardFrame_Content {
float: left;
margin: 0;
padding: 0;
width: 760px
}
.UIStandardFrame_SidebarAds {
float: right;
margin: 0;
padding: 0;
width: 200px;
word-wrap: break-word
}
.UIFullPage_Container {
margin: 0 auto;
padding: 20px 12px 0;
width: 940px
}
.empty_message {
background: #f5f6f7;
font-size: 13px;
line-height: 17px;
padding: 20px 20px 50px;
text-align: center
}
.see_all {
text-align: right
}
.standard_status_element {
visibility: hidden
}
.standard_status_element.async_saving {
visibility: visible
}
img.tracking_pixel {
height: 1px;
position: absolute;
visibility: hidden;
width: 1px
}
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.