I work on list this list appear images the last image in the row look like has top margin in firefox but in Google Chrom look perfect
I am not good in English so this image explain what I mean :)
Image explain What I mean : http://filaty.com/i/alpha/74/74f4cb7180dd52b3d8d670bb31be8156
Html
<ul id="nwp_port_item" class="clearfix">
<li class="mix webdesign"><img src="images/demo/e1.jpg"></li>
<li class="mix graphics"><img src="images/demo/e2.jpg"></li>
<li class="mix wordpress"><img src="images/demo/e3.jpg"></li>
<li class="mix photography"><img src="images/demo/e4.jpg"></li>
<li class="mix wordpress"><img src="images/demo/e5.jpg"></li>
<li class="mix photography"><img src="images/demo/e6.jpg"></li>
<li class="mix webdesign"><img src="images/demo/e1.jpg"></li>
<li class="mix graphics"><img src="images/demo/e2.jpg"></li>
</ul>
CSS :
#nwp_port_item {
margin:20px 0;
padding:0;
list-style:none;
line-height:0;
}
#nwp_port_item li {
display:block;
padding:0;
margin:1px;
float:left;
width:180px;
height:200px;
overflow:hidden;
position:relative;
}
#nwp_port_item li img {
width:100%;
height:auto;
}
I use bootstrap to reset browser
Code on JSFiddle
http://jsfiddle.net/4t6Ch/
It is looks like image have some vertical-align.
Try to add some styles for image:
#nwp_port_item li img {
width:100%;
height:auto;
display: block;
margin:0;
padding:0;
}
Related
I have a very simple vertical bar chart made solely by css:
it is made of list items:
<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;">40</li>
<li style="height:20%;">10</li>
<li style="height:40%;">20</li>
<li style="height:10%;">5</li>
</ul>
with the help of css:
.graph {
width:100%;
height:250px;
position:relative;
background-color:gray;
}
.graph li{
bottom:0;
width:5%;
text-align:center;
background-color:#9FC;
list-style:none;
position:relative;
border-style:solid;
border-width:1px;
display:inline-block;}
the problem is that the bars are upside-down. How could I make them right way up?
thanks
Your li elements should be positioned absolute. However you need to set margin for each element. I used it by adding left property:
<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;left:20%">40</li>
<li style="height:20%;left:40%">10</li>
<li style="height:40%;left:60%">20</li>
<li style="height:10%;left:80%">5</li>
</ul>
And in CSS i modified this:
.graph li {
position:absolute;
}
DEMO
Well, I coded this page, but I got stuck at why does the third column is pushing down my text (or other elements). It uses the same style from the first box, but while the first box is ok, the third one is pushing the elements down by some pixels.
Like this:
HTML
<div id="contentWrapper">
<div id="sideBar">
<div class="sidebarBox"></div>
<div class="sidebarContent">
<h4>
Índice
</h4>
<ul class="tree">
<li>
Sinopse
</li>
<li>
Tropas
</li>
<li>
Geladeira
<ul>
<li>
Lógica
</li>
<li>
Gênio
</li>
<li class="last">
Horror
</li>
</ul>
</li>
<li>
Notas
</li>
<li>
Mídia
</li>
<li class="last">
Referências
</li>
</ul>
</div>
</div>
<div id="mainBody"></div>
<div id="infoBar">
<div class="sidebarBox"></div>3º Column
</div>
</div>
CSS
* {
margin:0;
padding:0;
font:normal normal 14px/20px Helvetica,Arial,sans-serif
}
h4 {
font-size:14px;
font-weight:700;
text-transform:uppercase;
padding-top:10px;
border-bottom:2px solid #2a558c;
margin-bottom:10px
}
#contentWrapper {
display:table;
border-spacing:0;
width:100%;
height:500px
}
#contentWrapper > div {
display:table-cell
}
#sideBar {
background-color:#E4E5DD;
width:200px
}
#mainBody {
background-color:#EEEEE6
}
#infoBar {
background-color:#e4e5dd;
width:200px
}
#footer {
background-color:#323540;
height:50px
}
.sidebarBox {
background-color:#323540;
height:30px;
width:100%
}
.sidebarContent {
padding:15px
}
I messed a lot with the Firebug and even tried to open it in IE and Chrome, with same results. Both columns use the same CSS, and this difference is freaking me out. I thought about "fixing" it with some negative margins, but I want to understand the problem first, insted of "workahacking" away.
Thanks a lot in advance!
Add vertical-align: top to #contentWrapper > div. Currently it is baseline.
Have a fiddle!
CSS
#contentWrapper > div {
display: table-cell;
vertical-align: top;
}
Without vertical-align: top, the div is basing its vertical alignment on .sidebarContent which has 15px of padding. This is resulting in the 15px gap.
Change the following and it should fix your problem. I've found that when using display:table-cell it always mis-aligns the last cell unless I specifically give it a vertical alignment
#contentWrapper > div {
display: table-cell;
vertical-align:top;
}
Example
Add display:inline-block to this class:
.sidebarBox {
background-color: #323540;
height: 30px;
width: 100%;
display: inline-block;/*Add this*/
}
fiddle
.sidebarBox {
float:right;
}
will work.
I have a normal li element, it contains a picture. Now when I hover it, it should be surrounded by a div for example which contains some descriptions for the image in the li. Please check out this link http://www.zalando.de/damenschuhe-sandaletten/ and hover the shoes. As you see, it adds information around the image.
I tried several things but the results are not really what I want. Any ideas how to to that in a good way?
Thanks!
Something like this?
<ul>
<li>
<div class="info">Info 1</div>
[Image 1]
</li>
<li>
<div class="info">Info 2</div>
[Image 2]
</li>
<li>
<div class="info">Info 3</div>
[Image 3]
</li>
<li>
<div class="info">Info 4</div>
[Image 4]
</li>
</ul>
ul{
list-style:none;
text-align:center;
padding: 0 35px;
}
li{
display:inline-block;
background: #ddd;
height:200px;
width:200px;
margin:10px;
padding:0;
position:relative;
}
li > .info{
display:none;
position:absolute;
top:0;
left:-40px;
width:35px;
height:100%;
background:#ffa;
}
li:hover{
background:#ccf;
border:5px solid #afa;
margin:5px;
}
li:hover > .info{
display:block;
}
DEMO: http://jsfiddle.net/NhfF3/
you should add a hidden div inside the li element. http://jsfiddle.net/SKxjM/
this is the CSS
.expandable .expansion { display: none; }
.expandable:hover .expansion { display: inline; }
And the HTML should look like this
<ul>
<li class="expandable">this is expandable
<div class="expansion">more info</div>
</ul>
You could try using the CSS :after tag with content.
<li>
<img src="whatever.jpg">
</li>
li:hover:after{
content: 'image caption here';
}
Also, you could dynamically add it, if that makes it work for your site easier:
document.styleSheets[0].addRule('li:hover:after', 'content: \'image caption here\'');
I am designing a webpage where i have a navigation bar where i am keeping the background for the nav elements as dark blue. However, it keeps on missing the last element in my nav list and does not makes its color as blue.
Here is the html code:
<div id="content_block">
<div id="nav_bar">
<ul style="margin:0px; padding:10px 0px;" >
<li >PATENTS</li>
<li ><span style="position:relative;left:9px;">TRADEMARKS</span></li>
<li ><span style="position:relative;left:18px;">IP LAW & POLICY </span></li>
<li ><span style="position:relative;left:27px;">PRODUCTS & SERVICES</span></li>
<li ><span style="position:relative;left:36px;">INVENTORS</span></li>
<li ><span style="position:relative;left:45px;">NEWS & NOTICES</span></li>
<li ><span style="position:relative;left:54px;">FAQs</span></li>
<li></li>
</ul>
</div>
</div>
Here is my CSS code
#content_block{
background-color:#FFFFFF;
margin:10px 0px
border:2px;
padding:10px 0px;
height:400px;
width:1024px;
}
#text{
max-height:400px;
max-width:900px;
margin:10px;
padding:5px}
#nav_bar{
margin:0px;
border:0px;
position:relative;
width:1024px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{display:inline;
float:left;
background-color:#2E40AC;
color:#BAD2FF;
}
It's because you've set background color to li elements but have text itself inside span element that is relatively positioned and being pushed by it's left property out of li element background color scope.
Rather then playing with position:relative and left:value you should achieve same thing using margin or padding property.
Once you have removed span add padding:0px 10px; property to li element.
This is my site in question: LINK
As you can see, my Logo is pushed over to the right side in Firefox but it should be centered. Works great in Chrome for example.
I've tried looking for a Firefox only stylesheet, but I couldn't really find the right CSS setting that makes this work correctly.
Here's the relevant HTML code that's wrapped in a id named container that I have so far:
<div id="nav">
<ul id="index_cards">
<li id="card-1">
<h3><strong>Home</strong></h3>
</li>
<li id="card-2">
<h3><strong>About/Contact</strong></h3>
</li>
<li id="card-4">
<h3><strong>Portfolio</strong></h3>
</li>
<li id="card-5">
<h3><strong>Services</strong></h3>
</li>
</ul>
</div>
<div id="header">
<div id="logo">
<img src="imgs/logo.png" name="ielogo" width="457" height="223" id="ielogo" />
</div>
</div>
CSS:
#container {
top:-73px;
margin-top:-70px;
min-height:100%;
position:relative;
display:block;
}
#header {
margin-top:-30px;
height:250px;
background-image:url(../imgs/header-top.png);
background-repeat:repeat-x;
padding:10px;
}
#logo {
margin:0 auto;
width:457px;
height:223px;
}
Problem lies with image put this in css
#logo img { display: block; }
http://jsbin.com/afuquq/3/
Revised answer: The solution is to incorporate the logo into the navigation section and have #header placed with position:absolute; on webpage.
HTML Fragment:
<div id="header"></div>
<div id="container">
<div id="nav">
<ul id="index_cards">
<li id="card-1">
<h3><strong>Home</strong></h3>
</li>
<li id="card-2">
<h3><strong>About/Contact</strong></h3>
</li>
<li id="card-4">
<h3><strong>Portfolio</strong></h3>
</li>
<li id="card-5">
<h3><strong>Services</strong></h3>
</li>
</ul>
<div id="logo"></div>
</div>
<!-- continued-->
</div>
CSS:
/* This section is modified */
#header {
background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/header-top.png);
background-repeat:repeat-x;
position: absolute;
width: 100%;
height: 250px;
margin-top: 40px;
}
/* This section is modified. */
#logo {
background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/logo.png);
background-repeat:no-repeat;
margin:0 auto;
width:457px;
height:250px;
}
There is also extra addition of margin-top: -20px; applied to CSS Selector #body to compensate for separate #font-face issue when those fonts are not loaded. Still, font integration will need to be addressed correctly.
Note: The jsFiddle below will not render #font-face fonts due to security settings.
Reference: jsFiddle
Access the above jsFiddle without /show/ in Address Bar to view the Edit Page.