This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
Related
Demo of slide menu in the top left of the page:
https://cuppalabs.github.io/cuppa-ng2-slidemenu/
Using the Google Tools I have been able to change the margin-top of the menu, but I've had no luck doing the same with my own copy.
My best attempt:
cuppa-slide-menu span div .menu-container .cuppa-menu .show-menu,
cuppa-slide-menu span div .menu-container .cuppa-menu .hide-menu {
margin-top: 134px !important;
}
I have also been unable to locate the css file located at src="/path/to/angularjs/angular.min.js"
Regarding the icon sizes, I was unable to do it even on Google Chrome.
Any advice would be much appreciated.
There is not a css file as such, the styles are included in the js files, I have been able to change the margin of the menu by writing the following in my stylesheet:
.cuppa-menu-overlay, .menu-container[_ngcontent-c3]{
margin-top: 150px !important;
}
And the result is
I hope I have helped, greetings
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I am using a div tag and I am applying css to it.
Please find below the div tag
<div class="testcss">
</div>
My css class is as follows
.testcss
{
background-image: url('images/imag2.gif');
background-repeat: repeat-y;
background-position: bottom-left;
padding-left: 10px;
padding-right: 10px;
}
The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9.
Even it is working fine in IE10.
There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9.
Is there some way that we can fix this in IE8 and IE9.
Any help would be greatly appreciated.
Thanks in Advance.
Regards,
Rahul Rathi
I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:
.testcss {
background: url('images/imag2.gif') bottom left repeat-y;
padding-left: 10px;
padding-right: 10px;
}
http://jsfiddle.net/feitla/85XFu/
PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.
I agree with #feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.
I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.
Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.
I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.
You would end up with:
HTML
<div class="testcss"></div>
CSS
.testcss {
background: url('images/imag2.gif') repeat-y left;
padding: 0 10px;
}
Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.
I don't know how it has occurred and for the life of me, I cannot fix it.
I have a div which is hidden using display: none;
When a user clicks, I set display: block which shows a new layer.
The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?
I have set no transparency or opacity in my css.
The layer I am showing only has the following settings:
.display {
background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
display:none;
width: 250px;
height:100px;
border: 1px solid rgb(20, 20, 20);
margin-left: -5px;
margin-top: -100px;
float: left;
z-index: 999;
}
As you can see:
I've tried using a 1px background image - still transparent
I've set the background color to white - still transparent
I've tried setting the z-index so it is on top of everything - still transparent
I don't know why it is and how i stop it???
NOTE: I have deactivated the live site and this code can be viewed in testing at: http://dev.cutmyhair.com.au/search_results.php?keyword=waverley
NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)
I was able to reproduce this using FF3 and IE8.
You need to set position to either absolute or relative.
.display {
position: absolute;
...
}
or
.display {
position: relative;
...
}
Are you sure it's a transparency issue? I see another problem:
height:100px
margin-top: -100px
This two together would make your div stay totally out of the page, if the float property is influenced by other elements around. Maybe post here the html portion and other related css rules, so I can understand the situation better. Anyway, first of all, be sure that your div is in the place you think it is, by using a good html/css debugging tool like Firebug or Chrome dev console.
Try using display:inline-block (instead of block). It seems to work better (more intuitively) with floated elements.
Hi I seem to be having an issue trying to align an H1 tag to the left. I know it is something in my template.css file but I can't work out what.
Have a look >
Should be easy for any CSS guru I hope ;)...
Use a developer tool like Firefox’ Firebug, Safari’s WebInspector or IE’s Developer Tools to inspect the document. Those will probably show your, that it’s the .previous_page’s bottom margin that causes a conflict with the top margin of the h1.
It's hitting that floated "Previous Page" link and wrapping around it. It's left-justified, but it just looks like it's centered because of where it hits that float.
Try:
h1 { clear: left }
Try changing your h1 style to this:
#flypage h1 {
float: left;
margin-bottom: 20px;
margin-top: 20px;
text-align: left !important;
width: 100%;
}