img moved to bottom after float:right;
see to footer: http://qass.im/thestandard/
this footer code:
footer{
display:block;
margin:0 auto;
margin-bottom:50px;
width:800px;
height:100%;
clear:both;
}
.footer-content{
padding:80px;
padding-top:0;
padding-bottom:0;
}
footer p{
line-height: 1.714285714;
font-size:14px;
color:#555;
}
footer p a{
color:#555;
border-bottom:1px dotted #555;
}
.social-icon{
font-size:0;
float:right;
}
Do it this way.
The Code Changes:
<div class="footer-content">
<div class="social-icon">
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/twitter-footer.png"></a>
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/facebook-footer.png"></a>
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/google-footer.png"></a>
</div>
<p>
Powered by <a target="_blank" href="http://wordpress.org">WordPress</a> ©2013 The Standard, The Standard theme by <a target="_blank" href="http://qass.im/thestandard">Qassim.Dev</a>
</p>
</div>
This will make your image not to jump to the bottom.
They are rendered under the paragraph. As a p tag is block-level - so it occupies the full width.
What you can do:
variant 1: make .footer-content p {float: left;}
variant 2: change the order in your html. Make the div with a class of social-icon go before the paragraph.
delete the .social-icon's float
and use display:inline; for .social-icon and footer p
i have visited your page it isnt on the bottom because of float:right; (use a debugger - like firebug - and disable float:right; to check), its there because of the fact that it is a block element under another block element use display:inline-block; in your .social-icon and footer p css.
in conclusion
footer p{
display:inline-block;
}
.social-icon{
display:inline-block;
font-size:0;
float:right;
}
and BOOM! i did this in firebug on your site and it worked fine.
Related
I am placing images on a page using div id tags, so far i have four lined up in a row across the top of the page, but when i come to place one under the image in the top left corner, it just goes under a picture in the middle instead. I have used float:left and clear:left but none of these seem to work. I need the id "facts" to be underneath the top left corner image which is "light" any help?? This is my code so far -
HTML
<div id="light"><img src="harrypotter/harrylightening.png"/></div>
<div id="kiss"><img src="harrypotter/ronkiss.png"/></div>
<div id="keeper"><img src="harrypotter/keeper.jpg"/></div>
<div id="photo"><img src="harrypotter/photo.jpg"/></div>
<div id="facts"><img src="harrypotter/facts.jpg"/></div>
CSS
#light > img {
float:left;
height:447;
width:326;
margin-top:10px;
margin-left:8px;
margin-right:5px;
margin-bottom:5px;
}
#kiss > img {
height:252;
width:336;
margin-top:10px;
margin-bottom:5px;
margin-right:5px;
float:left;
}
#keeper > img {
height:234;
width:333;
margin-top:10px;
margin-bottom:5px;
margin-right:5px;
float:left;
}
#photo > img {
height:301;
width:225;
margin-top:10px;
margin-bottom:5px;
float:right;
}
your CSS could be more simple like this:
jsFiddle
div{
float:left;
margin:10px 5px 5px;
}
#light{
margin-left:8px;
}
#photo{
float:right;
margin-right:0;
}
#facts{
clear:left;
}
and about your problem, you must set float to divs not to images.
with your CSS you can use this:
#facts{
clear:left;
}
If your page is dynamic, you can try this code, every fifth elemnt should be come below the left element
HTML
<div><div id="light" class="img-class"><img src="harrypotter/harrylightening.png"/></div>
<div id="kiss" class="img-class"><img src="harrypotter/ronkiss.png"/></div>
<div id="keeper" class="img-class"><img src="harrypotter/keeper.jpg"/></div>
<div id="photo" class="img-class"><img src="harrypotter/photo.jpg"/></div>
<div id="facts" class="img-class"><img src="harrypotter/facts.jpg"/></div></div>
CSS
.img-class {float:left;width:100px;height:100px;margin-bottom:15px;padding:0 10px;}.img-class:nth-child(5) {clear:left;}
Our nav bar images jump around on page refreshes, and we have no clue how to fix it. It only seems to occur when the page refreshes, suggesting that it's somehow related to the loading of our sprite (which contains all the images for the nav bar links)?
We have tried playing with different float values, rearranging our element layout, and many different alternatives. We still cannot get rid of the jumping. The other thing we have isolated is that the jumping is tied to the length of the text in the nav bar links, meaning that if we shorten the text labels under each image, the jumping is minimized.
This happens on iPads and also on Chrome on Windows 7 Home Premium and OS X 10.7.5.
Here's the HTML for the nav bar:
<div id="header">
<div class="main">
<a class="logo" href="/"><img class="" src="/images/web/logos/text_small.png" alt="Domain Name Registration and Search"></a>
<div class="nav_bar">
<a class="games icon_rise" href="/itunes-store/apps/free-apps/category/all-games?itunes-store-id=888-6014">
<div class="icon"></div>
<div class="label click_drop">Games</div>
</a>
<a class="education icon_rise" href="/itunes-store/apps/free-apps/category/education?itunes-store-id=6017">
<div class="icon"></div>
<div class="label click_drop">Education</div>
</a>
<a class="entertainment icon_rise" href="/itunes-store/apps/free-apps/category/entertainment?itunes-store-id=6016">
<div class="icon"></div>
<div class="label click_drop">Entertainment</div>
</a>
<a class="lifestyle icon_rise" href="/itunes-store/apps/free-apps/category/lifestyle?itunes-store-id=6012">
<div class="icon"></div>
<div class="label click_drop">Lifestyle</div>
</a>
<a class="music icon_rise" href="/itunes-store/apps/free-apps/category/music?itunes-store-id=6011">
<div class="icon"></div>
<div class="label click_drop">Music</div>
</a>
<a class="utilities icon_rise" href="/itunes-store/apps/free-apps/category/utilities?itunes-store-id=6002">
<div class="icon"></div>
<div class="label click_drop">Utilities</div>
</a>
<a class="all_apps icon_rise" href="/itunes-store/apps/free-apps/all">
<div class="icon"></div>
<div class="label click_drop">All Apps</div>
</a>
</div>
</div>
</div>
Here's the CSS:
#header { text-align:left; height:75px; background:url(/images/web/header_slice.png) repeat-x; }
#header .logo { position:relative; top:15px; width:106px; display:inline-block; }
#header .logo img { width:106px; height:35px; }
#header .nav_bar { width:720px; float:right; display:inline-block; position:relative; top:12px; text-align:right }
#header .nav_bar a { display:inline-block; margin-left:30px; max-width:100px; }
#header .nav_bar .icon { width:25px; height:25px; background:url(/images/web/nav_bar_icons.png) no-repeat; background-size:295px 70px; margin:auto; }
#header .nav_bar .games .icon { background-position:-45px 0 }
#header .nav_bar .education .icon { background-position:-90px 0 }
#header .nav_bar .entertainment .icon { background-position:-135px 0 }
#header .nav_bar .lifestyle .icon { background-position:-180px 0 }
#header .nav_bar .music .icon { background-position:-225px 0 }
#header .nav_bar .utilities .icon { background-position:-270px 0 }
#header .nav_bar .label { color:#00435d; font-size:15px; font-weight:bold; text-align:center; }
#header .nav_bar a:hover { text-decoration:none }
To reproduce:
1) Visit www.tekiki.com. The first time you visit, the nav bar links at the top will jump.
2) To reproduce the error, hit Shift-F5.
3) Attached is a screen shot of the nav bar links jumping.
This is due to font rendering on page load.
During page load, the 'Signika' font loads - overriding any fonts before it.
body, p, ol, ul, td {
font-family:'Signika', verdana, tahoma, arial, sans-serif;
}
Obviously, various aspects of the font/element change with a different font type/family. This font in particular, Signika, appears a lot larger than the fallback font Verdana.
Disable the 'Signika' font, so the fallback font is in action:
font-family:verdana, tahoma, arial, sans-serif;
You will see that 'jumping' nav appears (I see this in Chrome).
With the 'Signika' font in place, you can reduce the font size and/or surrounding margin and paddings to prevent this from happening.
The font-family you have loading called Signika is what causes the menu to jump.
If you want to keep the font-family and remove the jump then simply remove the width: 720px on #header .nav_bar. It is not required since it is floated, and the menu won't "jump".
Of course, because you are using a font that isn't available on a users computer the text will still change only as fast as the user downloads the font, but at least by removing the width property on the nav_bar you simply make it "slide" to the right.
Hope this helps.
i did this using fire bug see the changes hope it could help..
Can anyone explain to me why are my images of left and right arrow not taking any css modifications which are done in their class?
HTML
<div class="carousel-controls">
<div class="carousel-prev"><a href="#" >
<img src="http://localhost:4316/images/Left.png" alt="Previous"/></a></div>
<div class="carousel-next"><a href="#">
<img src="http://localhost:4316/images/Right.png" alt="Next" /></a></div>
</div>
CSS
#waterwheel-carousel-default .carousel-controls .carousel-prev {
position:absolute;
bottom:190px;
left:180px;
height:30px;
width:30px;
border:0px solid black;
}
#waterwheel-carousel-default .carousel-controls .carousel-next {
position:absolute;
bottom:190px;
right:150px;
height:30px;
width:30px;
border:0px solid black;
}
You need to apply particular styles to the img element itself.
For example, if your issue is that a border is appearing on the images, you need to do:
#waterwheel-carousel-default .carousel-controls img {
border:0;
}
Notice I've not included .carousel-prev or .carousel-next in the selector, so that this rule will apply to both
You should target the image like this
#waterwheel-carousel-default .carousel-controls .carousel-prev img
Demo
Cause you designed the div, not the img tag.
You should add
#waterwheel-carousel-default .carousel-controls .carousel-prev img {
...
}
#waterwheel-carousel-default .carousel-controls .carousel-next img {
...
}
I am trying to create a grid layout using tags and css. I need the grid system to hold four main blocks as portrayed in the image below. I have created a solution that works great in safari and chrome, but not so well in firefox as the titles overlap. Please see my code below, and maybe someone can see where I have gone wrong! I cant for the life of me find the problem.
HTML CODE:-
<div class="elements_wrapper">
<div id="element1">
<img class="align-image" src="img/image1"/>
<span class="element-title">Title</span>
<p class="element-explain">Main text goes here</p>
</div>
<div id="element2">
<img class="align-image" src="img/image2"/>
<span class="element-title">Title</span>
<p class="element-explain">Main text goes here</p>
</div>
<div id="element3">
<img class="align-image" src="img/image3"/>
<span class="element-title">Title</span>
<p class="element-explain">Main text goes here</p>
</div>
<div id="element4">
<img class="align-image" src="img/image4"/>
<span class="element-title">Title</span>
<p class="element-explain">Main text goes here</p>
</div>
</div>
CSS CODE:-
.elements_wrapper {
width:100%;
margin-left:-65px;
margin-top:110px;
padding-bottom:30px;
}
#element1{
position:absolute;
display:inline-block;
margin-left:30px;
padding-bottom:20px;
}
#element2 {
position:absolute;
display:inline-block;
margin-top:200px;
margin-left:30px;
padding-bottom:20px;
}
#element3 {
position:absolute;
display:inline-block;
margin-left:545px;
margin-top:200px;
padding-bottom:20px;
}
#element4 {
position:absolute;
display:inline-block;
margin-left:545px;
padding-bottom:20px;
}
.element-title {
font-family:helvetica, arial, serif;
color:black;
display:inline;
font-size:14pt;
font-weight:bold;
padding-top:15px;
}
.element-explain {
font-family:helvetica, arial, serif;
font-size:10pt;
float:left;
width:280px;
}
.align-image {
border: none;
float:left;
padding-right:15px;
}
My code works great in safari and chrome, but not that well in firefox, please help. Also, please let me know if the code I have already used is bad or needs changing to ensure cross browser compatibility. Thanks so much.
See the next example: http://jsfiddle.net/ZNSAX/2/
.element-explain {
font-family:helvetica, arial, serif;
font-size:10pt;
float:left;
width:280px;
}
Floating left here will cause this error. Firefox is a bit finicky with floating elements than Chrome and IE. Removing this should fix your problem.
I know there are several posts about this but none of the solutions are working for me. With that said, my containing div will not grow with my content. I know why this is happening, because it is 'float'ing but even when I use 'clear' it will not expand with the parent div. I've tried using using clear in nearly every element below with no success. Any help would be greatly appreciated.
View Image of problem:
For a live example please visit, http://thehopcompany.com/index.php?id=49
---------------CSS----------------
.product {
width:775px;
margin:0;
padding:0;
margin-top:75px;
margin-left:-8px;
}
.product ol{
margin:0px;
}
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:100px;
color:#000;
}
.product-column-left{
float:left;
width:100px;
height:100px;
}
.product-column-right{
float:left;
width:120px;
border-left:1px solid #ccc;
height:100px;
text-align:center;
}
.product-column-center{
float:left;
width:470px;
min-height:100px;
padding-right:15px;
padding-left:15px;
text-align:left;
padding-bottom:30px;
display:block;
}
.product h2{
font-size:18px;
margin-bottom:5px;
margin-top:0;
}
.product .text-underline{
text-decoration:underline;
}
.description-text{
font-size:12px;
color: #000;
}
.clear{
clear:both;
}
--------------------------HTML--------------------------
<li style="list-style:none;">
<div style="width:750px;" >
<div class="product-column-left">
<img align="left" style="border:0;" src="images/hop-pellets.png" width="100" height="100" />
</div>
<div class="product-column-center" >
<h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2>
<div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
</div>
<div class="product-column-right">
<h2>$0.00</h2>
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
</li>
</ol>
</div>
Try to add overflow hidden to the parent li
.product li {
....
overflow: hidden;
/*height: 100px;*/
}
The problem with overflow:hidden is it will hide overflowing elements if you have them in your layout. So by using clearfix which is i suppose the best practice you can acheive it like below.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Then, basically you just need to add the class in your container elements. More about Clearfix
<li class="clearfix">
<div style="float: left;">
<div class="content">Big content</div>
</div>
</li>
FIDDLE DEMO
Adding a clearfix should solve your problem:
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
Add the above div at the very end of your container div (i think after product-column-right) and just before your closing li tag. That should ensure that the div spans the content.
Your product.li style has a height of 100px, so that's going to constrain the box no matter what. Remove that setting (or change it to height:auto) and then add an empty clear div just before the closing li tag and you should be fine.
So your CSS definition would change to:
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:auto;
color:#000;
}
And then the relevant HTML:
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
<div style="clear:both"></div>
</li>
</ol>
</div>
I was using overflow: for a while with much success - but I had a few problems and decided to go back to this clear fix. If you have any problems - check it out.
http://css-tricks.com/snippets/css/clear-fix/