hover and float element - html

last week I coding a menu bar for my blog at http://iHMahmoodi.blog.ir
but for social buttons it's going to wrong and I think it's about float element!
I try to fix it with adding some width or more property but it's not work!
you can do it yourself with inspect element on my blog.
look to below image of my blog to know about my problem
http://i.stack.imgur.com/ntjIH.png
another question is near the rss image it's broad a lot of space on the right hand and if move you mouse between phone number and social button, all about rss!!
thanks a lot!

This will make them equal size and it list-image fits right to text
Edit with paddings you get your icons like picture below.
li.fb,
li.fb li {
box-sizing: border-box;
width: 150px;
padding-left: 0px !important;
padding-right: 0px !important;
}

Related

Overflowing content

I am trying to create a mobile page that resizes for different devices.
So far so good but I cannot figure out why extra space is being added to the right of the page. I even tried hiding overflow and other hacks.
The issue appears when looking at the page on a mobile device.
Any help?
Here's the page:
http://pages.purolator.com/mobile
Also, there is padding being added as the tab section expands. Can't figure that out either.
Thanks!
Remove the padding from .pageHeader and it fixed it.
Try this:
padding-top: 15px;
padding-bottom: 15px;
Edit:
This will mess with the padding for your logo. So you will want to add this to your css:
.pageHeader img {
padding-left: 15px;
}

Image next to Block text

Have a look at the menu link "Produkter" on http://marckmann.se/
I would like to add an arrow image in the right side of the drop down menu on some of the items. But since the text is styled into Blocks, it wont allow me.
Is there some way i could fix this?
Thanks :)!
In your CSS, for the #dropdown div a rule, add the flowing:
background: url('http://www.phillipsdepury.com/imgs/nav/arrow_small_left.gif') no-repeat right center;}
padding-right: 20px;
Replace your own arrow image. Also replace the 20px with the (width of your image + 5)px ...

How do I properly align this title in Bootstrap/CSS?

I'm beginning to mock-up a WordPress theme based on Twitter's Bootstrap framework.
Could someone validate the code I have so far is kosher?
More specifically, the header...
I have my name and sub-head beside an avatar image.
I want the text to appear vertically in the middle of the image. This works successfully when the page is wide enough (screengrab: imgur.com/YCpSm). But, when I reduce the browser width and responsive design kicks in, the text moves up (screengrab: imgur.com/K4Vyj).
How do I ensure the text stays in the vertical center of the image?
Thanks.
--
Code: http://jsfiddle.net/robertandrews/jP4nT/ (contains standard bootstrap.css, standard bootstrap-responsive.css and custom CSS in one)
Page: http://jsfiddle.net/robertandrews/jP4nT/embedded/result/
You could go with floating elements instead of absolute positioning:
http://jsfiddle.net/jP4nT/1/
I also wouldn't place the <h1> tag within the <p>, but that's probably fine though.
This might be simpler: http://jsfiddle.net/6FMDR/
No extra html tags needed
Less css
CSS:
.myheader {
padding:15px 0 20px;
display:block;
}
.myheader img {
float: left;
padding:0 15px 10px 0;
}
.myheader h1 {
margin-top: 10px;
}

How to move div lowered from edge of page

Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}

CSS styling problems

I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p