I want to do some design tweaks in my web application, but I'm stuck due to some alignment issues.
Please go to http://qlimp.com
Login username/password: dummy/dummy.
Then go to this link http://qlimp.com/information.
There you can find Keywords input text with the add button at the bottom which is not positioned properly. I can't change the position of the input text. But when you remove that add button (#add-button), we can change the position of that #add-keywords input text. Why is this so?
Could anyone guide me to position it properly?
Thanks!
UPDATE
Please check this http://jsfiddle.net/RxHuN/
What I need is, I want the add button to be place on the input text and it want's to be movable, I mean changing positions
try this:
#add-keywords{
float:left;
}
#add-button{
float:left;
position:relative;
bottom:8px
}
Related
Im starting to learn HTML and CSS and i want to ask how can i move the button under the logo. As I said im kinda new to this soo please dont be to harsh on me haha. I tried to mess with display, justify-content and align-items, but im not sure that i'm looking at the right place.
P.S The button itself isnt made by me. I just changed it a bit so my first html+css documents would not look that bad. And course I'm not doing this commercially, just for my own satisfaction and learning.
Site
Code
You can use onClick event handler on img html tags. So, you don't need buttons under images. However, if you want to do it, you can use z-index css property.
img{
z-index:1;
}
button{
z-index:0;
}
I really need help! I have a comment section on my website and have been trying for the life of me to get my date and time to come below the posted comment itself. I have figured out how to rearrange it in the html file, but unfortunately can't seem to find that file in my things (i used chrome developer to rearrange it).
I am wondering if there is a way I can place the date below the comment by using CSS? I've attached a picture below of what the comment section looks like currently.
Thanks so much for any advice in advance!
You can easly do it with CSS if you don't want to rearrange the elements with HTML. I don't know if this is the solution you are looking for but you can give position relative to the comment container and then just position element with date as absolute on the bottom.
.comment {
position:relative;
padding-bottom:20px;
}
.comment .date {
position:absolute;
left:0;
bottom:0;
}
This makes the element with date appear on the bottom of a comment, and the extra padding-bottom on a comment container makes sure that the date has enough space to be displayed without overlapping any comment text (you might want to adjust that padding-bottom value to your own taste)
I'm trying to make text show up on hover after a menu item (so if the menu says HOME I'd want WERE THE HEART IS to show up when I hover over the home part). I found this question with a way to do it (http://bit.ly/1UgPYoK) but I can't locate the menu div in my theme's files in order to add the hidden text div after it. Can I add the div for the hidden text somewhere else or does it have to be contained in the div for the hover item? Is there an easy way to find where the menu text is located in the code? I hope this all makes sense... I researched a bunch of questions and I understand how to do it if I can just find the right div. I'm very new to this!
I believe that you're looking for the HTML title attribute. Consider the following:
<div>Hover over <span title="IS WERE THE HEART IS...">HOME</span></div>
Or is this not at all what you're looking for?
http://www.w3schools.com/tags/att_global_title.asp
Update
[Disclaimer, this is a purely HTML answer - and doesn't utilize CSS.]
This is done with CSS and HTML. What you do is take advantage of CSS display tag. You can go more advanced and style with more accuracy because you could add any other tags inside the span (i.e div,ul...) into it and make a block with colors that look the same in all browsers.
.more-info {
display: none;
}
p:hover .more-info {
display: inline-block;
}
<p>Home<span class="more-info">Is where the heart is.</span></p>
If this does not help you then please clarify:
You can't locate the menu div?
Please provide what code you are working with so we may explore your question in further detail.
You could simply locate the item by Its own id through document.getElementById(item_id) and then set the title AND the alt property to make sure that is cross-compatible.
var item=document.getElementById(foo_id); item.alt='text you want to show; item.title='same here''
Hi I have a div with a link however when you hover over the div the mouseover state doesn't change i.e. the mouse pointer doesn't change to a finger instead of a mouse
Unfortunately I am unable to replicate this error in jsfiddle it only seems t occur on my Wordpress installation
the address where it occurs is here http://stylrs.com/trustees/ (when you hover over individual names.)
Is there a reason for this?
How can I fix this?
Add this to your css:
.su-lightbox{ cursor: pointer }
Those blocks arn't links at all. I see though you have a click event tied to them. Just give the block a cursor:pointer css style and it will look like a link
try changing with css :
.linkclass:hover {
cursor:pointer;
}
and please edit your question and give us your code. So, we can see the real problem.
you can change it manualy like this :
.your div {
cursor:pointer;
}
How to make the text/image emerge when you click on the another text/image? For example, a bottom "help" on the top of this website makes appear the image and the text when you click on it. I'm trying to do the same effect with my personal website. Anybody know the way to get it?
Consider using the JavaScript onClick(); event: http://www.w3schools.com/jsref/event_onclick.asp.
Set your the element that you want to show to display:none; then set to display:block; onclick or even use the jQuery fadeIn effect.
I'm not entirely too sure what you're after, but I hope that this is a start.
Set an ID to the element (like ). In your CSS stylesheet, simply add the following:
#hideMe { display:none; }