i'm trying my hands on coding a skin for blogspot.com i basically got everything else done except for one issue which is a part of my design.
Beside the title of the blog, i've design it such that there will be an image floating right next to the title of the blog. That would be easy if i were to use add in a tag into the widget section, but if i were to share this among people (where they will also have different blog name which result in different length) so the image will move according to the title's length. I'm having problem with this.
I've no idea how i should attempt on this as i can't use php on blogspot =/
To better understand what i said, here's an example of what i meant
http://i558.photobucket.com/albums/ss23/crayscrays/randomfonthelp.jpg
Since it's applied as a background image, you can set the value as "right", to make it go to the right side of the element.
Say, for example, this is your markup:
<h1>This is a blog post</h1>
Your CSS would look something like this:
h1 {
background: transparent url(myimage.jpg) no-repeat right center;
padding-right: [widthOfImage]px;
}
That would align the image to the right side of the text.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
Lets start with I'm using square space CSS code injector. I am trying to have some images placed behind the text links that read (menu, what we sellin', wholesale) With my background image it is hard to see the links. I would like to add small wooden boards as the image behind them. Appreciate any help .
My website: www.slurpnsnack.com My website
edit: I do not want to add a background image to the header itself. I am wondering if there is a way to attach the picture itself to behind the link, or just how to go about placing my own links there.
Your links are held in a div with class .header-nav-item
So CSS along these lines:
.header-nav-item {
color: white;
background-image: url(wood.jpg);
}
should be enough, though you may want to play around with background positioning and sizing depending on how consistent you want the look to be on the various sized items and what your image is actually like.
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
this is my first time asking a question so please forgive me if I'm not asking the right questions. I'm having a problem with my website and I'm pretty sure it's somewhere in the divs and containers. I'm trying to keep the navigation at the top and I want to put some content underneath. The problem is the content isn't showing up. Also, I made a "spacer" id to push the text down where I wanted it. I'm not really sure how to align the text at the bottom without it. If anyone could help with that also, I would appreciate it.
I don't know which parts I should post so if it's any easier, I can just post the links to the page and the .css.
The page is:
http://www.preferredcaskets.com/Untitled.html
The CSS is:
http://preferredcaskets.com/nav.css
Again, forgive me if I'm not asking the right questions. It's late and I'm a little confused at the moment.
Thank you.
You've put your background in an <img> tag, and given it position:fixed, which automatically places it on top of your other content. Quick fix: add 'style="z-index:-1;" to the <img> tag. A Better way is to add it as a background to your body (and also more semantically correct, since the background is not part of your content).
css:
body{
background-image: url("images/bg.jpg");
}
Try display inline in spacer
#spacer {
height:110px;
width:auto;
display:inline;
}
JSFiddle - http://jsfiddle.net/a4enG/