Im trying to do something, but I dont know if its possible.
I have a html structure for desktop and tablet devices and its working fine, but now for mobile, I want to change a little bit the structure of my news.
In mobile version I want to put my <h1>Title of the news</h1> above the image, but its appearing below the image, because in my html I have the title image first, but I dont want to change my html structure, its not possible to put my title above my image with only CSS?
Im trying some tests but nothing is working!
I put my example in this fiddle:
http://jsfiddle.net/Zkpj7/
For a better understanding, I have this images to show what I Want:
Try changing CSS like this:
#news
{
height:140px;
margin-bottom:5px;
border-bottom:1px solid #f3f3f3;
padding-bottom:43px;
position:relative;
padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}
#news h2 {
position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
margin: 0px;
}
#news span
{
color:#7a7a7a;
position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}
I can't think of a good solution that would not use absolute positioning...
I really would suggest changing the markup though :p
http://jsfiddle.net/Zkpj7/9/
The CSS answers will all be less than ideal since CSS is for changing style not structure. I would recommend using jquery. Call this on the id's for the title and picture to reorder them.
$("#title").insertBefore("#pic");
If you want, add something like this to fire when the screen size gets too small (set whatever threshold you want).
$( window ).resize(function() {
if($(window).width() < 400){
$("#title").insertBefore("#pic");
}
});
Related
I'm using a HTML map, and I'd need to use pseudo-elements on its area to display badges, and to position them relatively.
Edit : I can't hard-code its coordinates because I'm going to deal with lots of area in a HTML I can't predict, as my code is injected of top of an existing HTML.
Here's a screen of my attempt, and what I'd like to do :
Here's a fiddle (area on the first kitten's face)
tl;dr : Can I achieve this (by preference, in CSS only)?
What I tried
Problem, I've seen that area element is & needs to be set at display:none to work, preventing my pseudo-element to show.
So, I made it a block, it still have its position on the map (good) and my pseudo element appears, but not relative to the actual coordinates of the area...
Using this CSS :
area{
display:block;
position:relative;
}
area::after{
display:block;
content:"10";
position:absolute;
left:0px;
top:0px;
text-align:center;
color:white;
width:20px;
height:20px;
background-color:red;
border-radius:20px;
border:1px solid red;
}
I tried fiddling with margins, different positioning, different display, I didn't find the good combinaison yet.
I thought of retrieving coords of the area to position the pseudo-elements using CSS3's attr(), but I can't split the values of it afterward.
I've read this question about styling area using external (and old) jQuery plugins, but it doesn't feed my needs, and I can't find any clue on the web.
Does someone have an hint? I feel I'm close to it, but I'm running out of ideas.
I thought 2 idea.
One: http://jsfiddle.net/F6jtg/2/
area{
display:block;
position: absolute;
top: 40px;
left: 20px;
width: 100px;
height: 60px;
}
Two: http://jsfiddle.net/F6jtg/3/
HTML
<area
Shape="rect"
coords="20,40,120,100"
style="top: 40px; left: 20px; width: 100px; height: 60px;"
alt="Kitten 1"
href="#"></area>
CSS
area{
display:block;
position: absolute;
}
I modified a WordPress responsive theme to include my client's logo within the header. When adding this in, I've knocked around a bunch of other divs, and I'm slowly piecing it back together.
The main challenge I'm having is with the
#header-menu
ID ( http://ubcf2.garyspagnoli.com ) not rendering properly on certain browsers. It stays fixed to the right side, and no longer acts responsive to the design.
Here is the CSS I implemented (and also check out the site) to see how I positioned this over the logo image -
#header-menu {
bottom: 0;
padding: 0;
position: absolute;
right: 0;
}
Any advice on how to fix this? Can I not absolute positioning in a responsive design?
remove your h1#site-title
#header-menu{
background-image:url('http://ubcf2.garyspagnoli.com/wp-content/uploads/2014/02/UBCF-v1.jpg');
list-style-type:none;
margin:0px;
padding:0px;
}
#header-menu>li{
float:right;
}
#header-menu>li a{
display:block;
padding:10px 15px;
}
#header-menu>div{
float:clear;
}
add a div after your last list item. You may need to reverse your list items. Also try and remove any unnecessary positionings.
This image is a screenshot of the address http://www.rothemcollection.com/engagement-rings/.
The 's' of 'Recommendations' cut by Google Chrome browser. I tried to change the z-index, move it down with the top or margin-top and it still cuts me to the end.
Does anyone have an idea? It could be related to poor I use a special font? If so, what should I do?
Try this css :
#mainSlider h1 span.big {
font-size: 60px;
line-height: 63px;
display: inline-block;
width: 484px;
position: relative;
}
Define your mainSlider Heading position:relative; or define z-index:1;
As like this
#mainSlider h1{
position:relative;
z-index:1;
}
Result is
There is issue, most likely it is related to opacity and css engine rendering, supposely because of some optimization. I would suggest more the header to left by 6 pixels to avoid overlapping of images to it, something like this.
#mainSlider h1 {
left: -6px;
position: relative;
...
There's a few ways to do this - I'll add my view to the mix. Try adding z-index:-1; to the .ring class. This will produce problems if you want to make the images links at some point, but should work in your current setup.
#mainSlider .ring{
position: absolute;
right: 0;
z-index:-1;
}
I reduced the text size by one pixel and problem solved.
Not a suboptimal solution but still works. Unfortunately, the solutions did not help.
Thank you all.
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});