<div class="pictures">
<ul>
<li>
<img src="img1.jpg" />
</li>
<li>
<img src="img2.jpg" />
</li>
<li>
<img src="img3.jpg" />
</li>
</ul>
</div>
I'm building a jQuery IMG slider and the basic code breakdown is what you see above. I'm having a bunch of different issues, but one, in particular, is kind of baffling. There seems to be a partial pixel space (1.5px, I believe) between each photo... not sure if it's a margin, padding, a border or something else. I have to animate the photos 331.5px up or down in order for them sit properly inside the container div. My general reset.css doesn't work. I have border, margin, margin-width and padding all set to 0 by default.
This is weird. Any ideas why it's happening? Or how I can eliminate it?
Link to actual page: http://www.ficreates.com/_SiteDemos/PBL/projects.html
Couple of things going on here.
First thing is that body {line-height: 1;} is inherited by your ul. Get rid of that or override it such as ul {lineheight: 0;} and the black spacing is gone.
Doing this does not align your animation though so you are going to have to fix your script.
One thing I noticed is that you are animating the position of the img tag instead of the container element such as the ul. Curious why you are doing it this way. Usually one would just do the += or -= on the container element. You can set the ul to display: block; if needed.
Hope this helps. Let me know if you have further questions. Perhaps later I can get a full working example.
Related
I am creating a website based on Wordpress i am facing a very strange issue with each of the section, that when i apply any style specially the background color it does not apply directly, but when i add CSS property as follows:
.abc {
background-color:red;
overflow:hidden:
}
It starts work fine, and also when overflow property is not applied it not even highlighting the whole area of that section in Debug Mode.
Now the issue with the overflow property is i have some content cutting due to this as you can see in the following image:
And without overflow property the behavior of the section can be seen in the following image:
So now i want the background color to the section as well as to not cut the content as you can see in the first image. how i can fix this any quick solution will be appreciated.
consider the following structure
<header class="header-abc">
::before
<div class="inner-abc-left">
<img src="img.jpg">
</div>
<div class="inner-abc-right">
<ul class="navigation">
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
</ul>
</div>
</header>
Style is like:
.header-abc {
background: rgba(0,0,0,0.5);
position:relative;
width:100%;
display: block;
clear: both;
}
.header-abc:before {
display:inline;
}
So with this style it is not working fine but added an additional overflow property make it work. keep in mind i am using wordpress with some pagebuilder and purchased theme.
Thanks
It is not possible to solve this issue without having a link or a codepen so that we can at least see where this .abc div is located and what is it's relation to the rest of your code.
I have solved it by my own this issue, it was due to a ::before tag to the header tag like below:
<header class="header-abc">
::before
</header>
so the ::before tag was given display:inline style that why it was blocking the style to be applied, now removed the inline property and everything worked fine.
Hi I'm having some trouble removing a small gap between an image and my navigation bar. I've honestly tried just about everything i can think of. Setting inline-blocks on my ul and li level, and using text-align: left don't seem to be moving the hyperlinks to the left-most side of the div, and from there I'm not to sure what should be done. There is a padding, but it shouldn't be causing that much of a gap.
Here is the html code:
<div id = "header">
<img src ="img.png"/>
<div id ="nav_bar">
<ul class="nav">
<li class= "nav">Home</li>
<li class= "nav">Our Products</li>
<li class= "nav">Categories</li>
<li class= "nav">About Us</li>
<li class= "nav">Contact Us</li>
</ul>
</div>
</div>
Here's a jfiddle describing what I'm talking about.
http://jsfiddle.net/37VZb/1/
To clarify the gap I'm talking about is between the right of the image and the left most nav bar element.
That's because of a space character between inline(-block) elements. This could be fixed by commenting that space out this way:
<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...
JSFiddle Demo.
Similar topic on SO:
How to remove the space between inline-block elements?
And a good reference:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Update
The remaining space belongs to the user agent applied style on the <ul> element.
Web browsers usually apply some padding on the list elements. To remove that set padding: 0; as follows:
ul.nav { padding : 0; }
Here is the Updated Fiddle.
is this what you mean? You can target the nav class on your ul and adjust the default margins that are being assigned
ul.nav{
margin: 10px 0;
}
JSFIDDLE
Your gap is a white space like you find in between words since both element are set as inline boxes. In your CSS you set as well somme padding to ul and a , they both are there.
http://jsfiddle.net/37VZb/8/
.nav_bar, .nav{
padding:0;
display:inline-block;
}
To get rid of it:
1) do not indent your code and get closing and opening brackets of element touch each other
2) add a CSScomment in between to swallow that white-space
3) set font-size to 0 (0.01px for IE) to parent of these inline-boxes and reset it ot back to 1rem (and or px/pt) for img (alt) and nav_bar
negative margin or negative letter-spacing are not to be used, it is not reliable and not meant to care about this
I ran into this very strange "bug" with IE7, I have many div.column floated left, no width specified. The strange thing is that in IE7 the hr element width seems to take up 100% width of the container of these columns. And also the css rules for hr do not seem to be applied nicely, the background img looks very weird, border doesnt seem to be removed:
hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}
<div class="column last">
<div class="title">Useful info</div>
<hr class="style3" />
<ul class="links line_height3">
<li>
sample link
</li>
</ul>
</div>
tw16 suggested http://borgar.net/s/2007/01/style-hr-elements/ which is a very cool technique, however for some reason I could not make it work for my particular case, perhaps I missed something.
Anyhow, I opted to use a div instead, but to make it behave similar to hr I wrap this div around a display:none hr:
css:
.hr hr {
display:none
}
html:
<div class="hr"><hr /></div>
However, if your div.hr is inside a floated container (which, in my case, is also in another floated container), then you may have to assign a fixed width for it (only for IE7). I use modernizr plugin so I did something like this:
.ie7 .hr {width:100px}
With this method, you can:
Style the "hr" with background image etc easily, which should work cross browsers
Still keep the hr element where you want it so text readers and such can see it
I have a div i would like to make clickable. I know i need to make the div (and?) the link have a fixed width and height + display: block. I have an image inside of the div. It seems like the 'clickable' div is actually a large transparent link and this click does not play well with images as it doesnt share space. I need to right click the image and hit save as.
So how do i make the div clickable. I tried setting the img width and height but it made the img stretch.
You can set the <a> tag to fill the entire parent. Example:
<div>
<a href="..." style="display: block; height: 100%">
<img src="..." alt=".." />
</a>
</div>
and the entire <div> will be clickable.
To actually make a div into a link you have to use Javascript but from reading more into your question I'm not quite sure this is what you are asking. But if you ever do need to make a div into a link here it is.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
It would be great if you could provide your markup so that we can see what you are seeing.
Thanks,
This answer is wrong! It doesn't pass HTML. I'm only keeping it up here so that other people can see it and know that it is not the answer to the question. (in case someone else had the same idea to this answer)
Why not just do something like
<a href="...">
<div>
<img src="..." alt="..">
</div>
</a>
I'm creating a site where I've encountered a huge IE lag when hovering over the menus.
I'm using Cufon in combination and it seems like it's causing a huge lag when I apply height, width, margins or paddings to the li:hover element.
So, I need to figure out a smart way of doing this otherwise.
The site is here, http://w3box.com/mat
You can clearly see the menu I guess.
So, what I want is to push the entire menu downwards so it's like 3 or 4 pixels above the bottom of the height line. So it matches about the same vertical position as the logo font to the left.
Then, I want the hover effect to be larger in height. Hard to explain, but when hovering over a menu item, imagine a box where the text is positioned at the very bottom of the box. Like this;
http://img710.imageshack.us/img710/2791/menuheader.jpg
Now, you may notice the arrow looking thingy sticking at the bottom. I don't really need that, but if you have any idea on how to do it, I'd appreciate the help! ;)
I have not tried, but I think this may be an option.
You have everything with in one div, why dont you try to put div with in divs?
this is your current code for header.
<div id="header">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li>
<li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
You can try something like this, so you have more control over the different objects.
<div id="header" style="float:left;vertical-align:bottom">
<div id="imgChef">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
</div
<div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li> <li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
</div>
I am not sure that may be the right combination, but I think with the three divs inside the div you will gain more control over the elements inside the header div.
Omit the h4 in the menu since i think it is not needed. Than set display:block on <a> and use line-height and padding-left , padding-right to make the anchor expand the right size. Also notice that li:hover is not supported in IE6/7 without some tweaks. To position the menu on same level as logo just set a margin-top on ul element.
There're too many rules for me, too many useless rules.
Don't have the time to correct all and test it on FF/IE, but this works ofr example :
.menuwrapper li {
float:right;
list-style: none;
padding: 30px 23px 3px 23px;
position: relative;
top: 7px;
}
What about vertical-align?