I want to create an element using DIV and CSS like below:
Create By: <avatar image 16x16> Prashant
Can anyone tell me what will be the CSS and DIV code for above type of layout. I don't want to use tables for this, DIV and CSS only.
In Digg listing the same kind of display can be found. I tried but not able to make the "username" central align in respect of the avatar image.
<div>Created by: <img src="/images/avatars/prashant.png" alt="" /> Prashant</div>
and
img {
vertical-align: middle;
}
should do the job.
vertical-align unfortunately is not handled very consistently by some of the older browsers (pre-2005, but then yet again IE6 is still around), but David's answer is correct from the standards view.
Related
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
On Wordpress i'm using youtube channel list plugin.
It works well, but the align of the videos don't looks great. Actually display diagonal list below the BIG video!
Can someone suggest me how to fix this issue with css?
here's the page
http://www.snowypeach.com/home/?page_id=1106
I need the list under the video aligned horizontal, not diagonal!
You have nested a <div /> as a child of the <ul />. This is invalid markup. Move the <li/> elements to be the children of the <ul />, delete the <div /> and it will work
EDIT
Okay I see the problem. You are wrapping all this content within a <pre/> tag. This tag shouldn't be used here but if you are unable to get rid of it add the style white-space: normal;.
I tested the previous answer by moving elements within chrome dev tools which removed the whitespace and therefore the problem.
Hope this helps :)
There is class ytc-columns4 on the below <ul> which is taking control over the alignment of the small video <li> tags
<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">
according to that class the below css is generating by plugin in the css file on line 66
http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1
.ytc-columns4 li {
width: calc(100% / 4 + 10px / 3);
}
i have changed the class ytc-columns3 and ytc-columns2 and result vary every time. I am not exactly getting where is the calculation part of the plugin. Other wise i can tweek the code.
I am developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.
I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.
I have a div which contains text and images with the images floated right so the text flows around them.
In some places I need the images centred, so I have inserted a div to contain them.
The code bellow illustrates this and it works well.
The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.
If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.
Is there any way to overcome this?
Is there any real issue having multiple divs with the same id?
I'm not worried about supporting any browsers other than FF.
Any advice would be very greatly appreciated, thanks for reading.
Dim Tim :o)
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
Thank you all for your help.
Even when I changed the CSS and HTML to be a class the images still failed to centre.
The answer was in the clue from Pekka and specificity was the cause.
The specificity rules give an ID a higher priority than a class.
The "details" div had an ID but the "centreimage" was a class.
I changed the CSS for "details" to a class (& the markup of course) and it now works.
Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.
(Now you know why I am "Dim Tim") :o)
Yes, it's invalid to have multiple divs with the same id.
Using a class should work fine:
div.details {
width: 698px;
background-color: #FFC;
}
If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.
You shouldn't have more than one element with the same id. This is invalid and will give undefined results.
If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.
As long as you are targetting the elements correctly, there will be no difference to the result.
As you should know every id should be unique. In your example output seems to be a small error. Try to set the class attribute to the div and not the image. If you don't have dome good reasons you should better everytime the class attribute.
Now is the text-align set for the children of your image e.g. that would be the alt value if the image could not be loaded.
This question already has answers here:
How to disable a link using only CSS
(25 answers)
Closed 8 years ago.
I have code here that i want to make the a href unclickable through CSS:
<div id="header"
style="background: url(/uploads/header/derivativesheader.gif)"
class="header-link">
<h1 id="logo" class="notext">
Title
</h1>
</div>
I cannot remove the hard coded href tag, but want to know if I can overwrite it's action using a CSS hack.
You can prohibit the click event with the pointer-events property: http://jsfiddle.net/NnEXn/
Remove no. Hide yes.
#logo a {
display: none;
}
However, this is probably not the desired result as it will also hide the inner content of the anchor (i.e. Title). As such, a JavaScript solution may be better suited. But to answer the question, this is a way using only CSS.
<a href="/" class="hide">
.hide {
visibility: hidden;
}
This will prevent the clickable action
I don't think this is possible (pure CSS). The only way I know of to make a link not clickable is to position another element over the link (zindex, still pure CSS), and be transparent so that the higher element is clicked and not the link.
Perhaps you cannot do this (as you said you cannot remove the hard-coded tag), but if you can add elements to the DOM, I would simply add a duplicate link with no href and set the other to 'display:none'. This will preserve the flow of the page, and the visual rendering of the link.
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this