I am making a simple little web based control panel of sorts, and my lack of CSS knowledge is killing me. I basically need to make a div class that uses both an image icon and places a text caption underneath it (both are links to the target page).
I found some examples for doing this on various sites, but none of them work for placing the icon/captions side by side. To give a better idea of what I am trying to do, CPanel is a perfect example of what I am trying to accomplish.
How can I go about doing this?
Something like this maybe?
<div class="image-caption">
Some Text
</div>
.image-caption {
background: url(icon_path) no-repeat top center;
width: icon_width;
padding-top: icon_height;
}
Found a website with a very simplistic approach that works perfectly here...
http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm
Related
The topic says it all. I've been trying various code propositions from various websites with no success.
This is the site: http://jakubplech.pl/kontakt-copywriting-slask/
The form is in the bottom, i'll be glad for any help. Please mind that i don't want to play with padding or margin - it should align to center on any device used to visit the site.
Thank you kindly.
Turns out it was way easier than i thouth - the solution is a simple
div.wpcf7 {
text-align: center;
}
Aligning the text in wordpress page editor did not work - it had to be done in the additional CSS space.
div.wpcf7 refers to the whole designer contact sheet. Loks like working during late hours is not always a good idea :)
new to the forum here-
I developed the Wordpress theme that I want to use for my blog- and it looks good on the test site: http://flashandshine.com/eyesofstyletheme/
But when I upload it to my blog: http://eyesofstyle.com/
the nav menu doesn't have the background color, isn't static, and isn't at the top. When you click a post and view a post page, the sidebar is right where I want it. I'm confused as to why it's pushed to the botom on the home blog page.
I was hoping to change this theme around and sell it as a template, but I can't have it moving the sidebars to the bottom! Can anyone help me out with this? I really appreciate it!
If you are looking to sell this, it will need some major overhauling.
Looking at the CSS, you have some very extreme oddities. The main one being that you are using margins to determine the spacing from the sides instead of making a main container which sets the width.
To get it looking sort of alright, change the #blogcontent to show this:
#blogcontent {
margin-right: 0px;
margin-left: 17%;
max-width: 40%;
float: left;
}
Overall though, you will want to change things around a great deal.
This is how you should really want your layout to be using a proper grid layout. Click here.
Its all stuff you pickup along the way though. Hopefully this helps push you in the right direction though.
I am fairly newbie so bear with me if this seems simple to you, because it isn't simple to me!
I've bought a nice template which is providing the framework for a new food festival site I'm building. I'm new here, so they won't even let me post a screenshot, so I can't show you how I've modified the template! Dumb!
Below the main logo are several hover buttons which slide an image from right to left. I'd like to turn them into hover images which don't 'slide' but simply change on mouseover - as suggested in this article.
Can anybody point me in the right direction?
Simply add in your CSS:
ul#menu:hover li{
background-image: url('yourImageUrl');
background-repeat: no-repeat;
background-position: top center;
}
eventually using opacity to make the hover image semi-transparent, and adjusting the margin / padding according to your layout
DEMO: http://jsfiddle.net/ZSGDH/
I think that I finally know your problem, and it lies in the fact that the "mouse hover effect" that we are seeing is actually triggered by a javascript and not the CSS3 which was presumed.
And in order to get what you want, you should first disable the javascript which is overriding the css rules. and its location is "http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js"
Once the js/ is disabled then you can easily implement your idea using the css3 trick that you linked to. You can further inquire about how to implement that, but for the time being I suppose that you'd like to do it yourself.
I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded
The layout in question is here: http://www.davedaranjo.com/media.html
This is probably an issue in standard positioning with css, but I've tried every positioning combination I can think of to achieve this:
http://i.imgur.com/y1qRU.jpg
Every time I try to move the player anywhere on the page, it positions itself at the bottom, even below the footer. I've even tried putting the content in a table with the links and video in the left td and the player in the right, but the player won't even sit in the table. I've also tried a number of positioning tags in the css file and at best, it will move if I give it a fixed position, but because the rest of the layout isn't fixed (and isn't on the rest of the site), that's not a viable solution.
I realize this is probably something fundamental that I'm missing here, but any suggestions would be extremely helpful.
Thank you!
Had a quick look at the source of that page and saw quite a few things i would change, so i will not go into detail but maybe this will get you started.
You could try floating your main div (look for <div align="center"> in your code) with css float: left; and also make your player inline-block like so;
.ttw-music-player { display: inline-block; }