I've hit a snag in html and css.
I created a div and wanted to put a logo image on its left and a button link on its right but stubborn css insists on making it move on to separate lines ,I used float:left and float:right.
Would it be something like this? http://jsfiddle.net/QFEKN/
<div>
<img src="https://www.gravatar.com/avatar/c5b9fb1230ea2fe0dc96151cba3098d5?s=32&d=identicon&r=PG&f=1" style='float: left' />
<button>Link</button>
</div>
You mean something like this?
Put a div on your img and button and set width to 100%. Then float your image and your button. I updated the fiddle of thewheat: fiddle
Your CSS
#box
{
width:100%;
}
#logo
{
float:left;
width:50%;
/*padding and Margin according to your need*/
}
#buttons
{
float:right;
width:50%;
}
Your HTML
<div id ="box">
<div id ="logo">
/*your img file here */
</div>
<div id="buttons">
/* Your links/buutons */
</div>`enter code here`
One of the thing you can do here is that you create a table put your logo in first cell of the row and next cell you can add your link, after that you can set float/margin to the positioning you want..hope that helps
You have to use "float property". without it things will not work well in all browsers and then you will get browsers issues too.
Do this , This will work fine.
Check this fiddle
img
{
float:left;
width:100px;
}
button
{
float:right;
width:100px;
}
Related
I actually use css function :hover to make my div appear and no jquery. The problem is that the div disappear when the cursor goes out of the div.
I'm also avoiding using display:block; function because i cannot take advantage of the opacity transition features of css. I saw other posts solving the question using all built jquery code. I wondered if it could be done without rewriting the entire code in jquery.
Here is the fiddle http://jsfiddle.net/dandecasa/k22UG/1/
As you see, when hovering the black div on the left, the #zobbigmenu div appears. Could it be possible to let it be visible when the cursor is in the #zobbigmenu div?
Thank you for you help
Javascript/jQuery is not necessary.
Add the styling on :hover of #zobbigmenu too.
jsFiddle example
#zobmenu:hover ~ #zobbigmenu, #zobbigmenu:hover {
margin-left: 20px;
cursor:alias;
opacity:0.8;
margin-right: auto;
z-index:10;
}
Alternatively, I would suggest nesting #zobbigmenu in #zobmenu.
You could wrap everything inside a <div>:
<div id="wrap">
<div id="zobmenu"></div>
<div id="zobbigmenu">
<a href="http://instagram.com/dandecasa" target="_blank">
<img src="http://theyellowhopeproject.com/iconmonstr-instagram-4-icon.png" height="50px"></img>
</a>
</div>
</div>
And change the CSS:
#wrap:hover #zobmenu ~#zobbigmenu {
margin-left: 20px ;
cursor:alias;
opacity:0.8;
margin-right: auto ;
z-index:10;
}
jsFiddle
With CSS, I'd like to set a background transparent after a colour already being set by its parent div.
HTML
<div id="content">
<div id="nobackground">This background is transparent</div>
<div>This is not transparent</div>
</div>
CSS
html,body{
background-image:url("http://www.thomaslovgren.com/wp-content/uploads/spaceship1.png");
}
#content{
background-color:#F00;
}
#nobackground{
background-color:transparent;
}
http://jsfiddle.net/7HfJa/1/
A possible solution:
#content{
}
#content div:not(#nobackground){
background-color:#F00;
http://jsfiddle.net/7HfJa/4/
But, is there any better good-looking solution like a single statement to the div like background-color:transparent?
I suppose you could do: http://jsfiddle.net/8c54H/
div#nobackground ~ div {
background-color: #ff0000;
}
although that assumes the red divs follow the transparent div
Make your selector more specific:
#content #nobackground {
background-color:transparent;
}
You can't really do what you want properly with the HTML that you have. You can't have something within a content box show the background from something behind that box without redeclaring the same background.
Better would be to just move the HTML around so that the "transparent" element is simply in a container with no background.
If you want to fake it with the HTML you have, you could try something like this:
http://jsfiddle.net/PxKy8/2/
It just puts a border around the content and a background on the elements that actually need it.
#content{
border:5px solid #F00;
}
#nobackground {
}
.redbg {
background-color:#F00;
}
and the HTML
<div id="content">
<div id="nobackground">This background is transparent</div>
<div class="redbg">This is not transparent</div>
</div>
EDIT: What are you trying to accomplish? If you want it to look like your last example, why not this:
http://jsfiddle.net/f4qZP/
What I am trying to do is the following.
I have a list of hidden images.
I have a button activated with Jquery onclick that replaces the html of a div to include the images
The button functions as a cycle button and gets a big list of images.
My problem is that the images do not scale to the size of the parent div. Even if I give them a .horizontal and .vertical class
Any ideas?
I want to keep the format of the hidden list of images inside a div because i do some other things with the lists. I originally thought that by having two classes for the images it will work and now that I am finishing I realised that the whole idea has a problem !
http://jsfiddle.net/alexnode/ttQHt/
HTML
<div id="artdiv2">
<div id="artslide1nextbutton">></div>
<div id="artslide1"></div>
</div>
<div class="hidden">
<div id="1slide1">
<img class="horizontal" src="http://farm8.staticflickr.com/7366/9160515864_7dc851a598.jpg" alt="Rezando a los antiguos Dioses - Praying to the old Gods">
</div>
<div id="1slide2">
<img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg" alt="Drain">
</div>
</div>
Jquery
//i get everything called 1slide like that.
var artslides = $('[id^=1slide]');
idxs1 = 1;
//this is my button that cycles through the image
$("#artslide1nextbutton").on(
"click", function () {
$("#artslide1").html(artslides.eq(idxs1).html());
idxs1 = idxs1 == 1? 0 : idxs1 + 1;
});
CSS
.hidden{display:none;}
#artdiv2{ position:absolute; top:8%; left: 20%; height:70%; width:100%; background:DimGray;}
#artslide1nextbutton{position:fixed; top:0px; left: 0px; height:auto; width:10%; background:DarkRed;pointer:cursor;}
.horizontal {position:relative; width:100%; height:auto;}
.vertical {position:relative; height:100%; width:auto;}
EDIT : answer updated to fit closer to question.:
you could play width min and max value and center img with text-align:center.
demo
http://jsfiddle.net/ttQHt/2/
#artslide1 {
width:100%;
overflow:hidden;
height:100%;
text-align:center;
}
#artslide1 img {
min-height:100%;
max-width:100%;
}
Some other option to play with image
here is an idea of what happens if you can set line-height. http://codepen.io/gcyrillus/pen/BdtEj and adding min-width/min-height http://codepen.io/anon/pen/kfIbp
Use the JQuery variable .height() and .width()
I'm on mobile, so I can't try this myself, but what about putting a width and height attribute directly on the image elements, and using the button to just change the image source? That would make every image have the same width and height.
I have a div like this
<div id="browsers">
<h2>Title</h2>
<p>Text recomending the use of either Chrome or Firefox.</p>
<img src="img/64-chrome.png" />
<img src="img/64-firefox.png" />
</div>
and the CSS
#browsers {
margin:0 auto;
padding:22px;
width:500px;
background:white;
}
and I want to center the two images in the middle of the div. I have managed to center them with
#browsers img {
margin-left:auto;
margin-right:auto;
display:block;
}
however the output is not what I want, since one image is on the top of the other. I want them to be on the same line. What's the best or the usual way to do it?
Usually just #browsers {text-align:center;} and remove what you have in #browsers img {...}
As you have extra stuff in #browsers. You'll need to put your browser icons in a separate div or your extra stuff outside of #browsers.
Eg.
<div class="browser-icons"> ... </div>
Your problem is that you are telling the images are blocks in display:block;... try display:inline; instead.
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>