I'm trying to make a list showing horizontally with a 1px border on the right except for the last one. For some reason, on chrome there is a little margin at the bottom but it does not show on Firefox. But on Firefox, there is a margin on the right(last li element) which does not show on chrome. Any ideas on what it could be? I honestly can't find it and I've been trying to fix this for a while now..
body {
font-family: "HelveticaNeue-Light", "Helvetica neue Light", sans-serif;
padding: 0;
margin: 0;
}
#menuBar {
width: 100%;
height: 40px;
background-color: #e0e0e0;
border-bottom: 1px solid grey;
}
#logo {
padding: 5px 0 0 20px;
font-weight: bold;
font-size: 120%;
float: left;
}
#buttonDiv {
float: right;
padding: 5px 10px 0 0;
}
#runButton {
font-size: 120%;
}
#toggles {
width: 256px;
margin: 0 auto;
list-style: none;
padding: 0;
height: 29px;
border: 1px solid grey;
position: relative;
top: 5px;
}
#toggles li {
float: left;
border-right: 1px solid grey;
padding: 5px 7px;
}
li:hover {
background-color: blue;
}
.selected {
background-color: green;
}
<body>
<div id="wrapper">
<div id="menuBar">
<div id="logo">
Website Visualizer
</div>
<div id="buttonDiv">
<button id="runButton">Run Code</button>
</div>
<ul id="toggles">
<li class="toggle selected">HTML</li>
<li class="toggle ">CSS</li>
<li class="toggle ">JavaScript</li>
<li class="toggle selected" style="border:none">Result</li>
</ul>
</div>
</div>
edit: hey guys i fixed it. So basically i removed the border from the UL element and just added a border all around each individual li element.
On your #toggles remove:
#toggles {
/*width: 256px;*/
margin: 0 auto;
list-style: none;
padding: 0;
height: 29px;
border: 1px solid grey;
position: relative;
top: 5px;
}
You need to change your code in #toggles as follows:
#toggles {
/* width: 256px; */
margin: 0 auto;
list-style: none;
padding: 0;
height: 29px;
border: 1px solid grey;
position: relative;
top: 5px;
}
By removing the width on the container, you make sure that the width of the container is equal to the sum of all the widths of its children.
Then change your definition of #toggles lias follows:
#toggles li {
float: left;
border-right: 1px solid grey;
padding: 0 7px;
line-height: 29px;
}
By setting the line-heightto the container height, you make sure the children will occupy the full vertical space while aligning the text vertically (if you don't care about vertical alignment, you can also set height: 100%;)
Related
im pulling data from a db, im using while loop (php) to build a a small box with different data inside, and a button to access that id and display the rest of the information, the problem is that when i add margin or padding to the div the link href buttons become unclickable, i dont even get the hover effect, funny thing is that it does not happen to all the small divs created, the ones from the left side works, i get the hover effect and the links working fine, but the ones on the middle and right column simply doesnt work, if i remove the padding all buttons works fine but the whole items appear in a place that i dont want them, heres my code, hope you can help. THX.
HTML
<div class="row col-xs-4 col-md-4 col-lg-4 foot">
<div class="izq" style="margin-left:135px;">
<div class="sombra fondoCuadro blk">
<div class="pix esquinas"><img src='.$rows['thumbnail'].' /></div>
<div class="tamano12 clrA ngta der">'.$rows['precio'].'</div>
<div class="clr"></div>
<div class="linea fA"></div>
<div class="tamano12 clrG ngta" style="text-align:right;">'.$rows['titulo'].'</div>
<div class="clr"></div>
<div class="tamano11 clrG izq txt" style="margin-top:1px;">'.$rows['terreno'].' m² terreno</div>
<div class="clr"></div>
<div class="tamano11 clrG izq txt" style="margin-top:1px;">'.$rows['construccion'].' m² de construcción</div>
<div class="clr"></div>
<div>Detalles</div>
<div class="clr"></div>
</div>
</div>
</div>
CSS
.izq {
float: left;
}
.outMarco {
padding-left: 130px;
position: relative;
width: 73.2%;
}
.sombra {
-webkit-border-radius: 6px;
-webkit-box-shadow: 0px 0px 10px -3px #C5C5C5;
box-shadow: 0px 0px 10px -3px #C5C5C5;
border-radius: 6px;
}
.fondoCuadro {
background-color: #FFF;
}
.blk {
width: 222px;
min-height: 270px;
float: left;
margin-right: 16px;
padding: 5px;
position: relative;
border: 1px solid #FFF;
}
.blk:hover {
border: 1px solid #999;
}
.blk .pix {
width: 210px;
height: 142px;
overflow: hidden;
margin-bottom: 5px;
position: relative;
}
.blk .pix img {
width: 100%;
margin-top: -4%;
}
.esquinas {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.new {
background-image: url(img/new.png);
background-repeat: no-repeat;
width: 53px;
height: 22px;
}
.blk .new {
position: absolute;
right: -5px;
top: 13px;
}
.tamano12 {
font-size: 12px !important;
}
.tamano11 {
font-size: 11px !important;
}
.clrG {
color: #555555;
}
.ngta {
font-weight: bold;
}
.clrA {
color: #13469B;
}
.der {
float: right;
}
.clr {
clear: both;
height: 1px;
}
.fA {
background-color: #13469B;
}
.linea {
height: 1px;
margin-top: 3px;
margin-bottom: 3px;
}
.blk .txt {
margin-bottom: 4px;
margin-top: 4px;
}
I need your help.
I am attempting to no avail, in trying to figure out as to how to make my li join neatly with my div. I have attached an example of the problem as well as the desired result. Maybe there are some CSS tricks to this, but I am no where near that skilled to figure this out on my own, only to see that it has been done on some websites.
Problem:
Desired result:
window.onload = function() {
$("#list li").click(function(){
var $li = $(this);
var selector = $li.data("show"); // => "#item1"
$('.item').addClass('hidden');
$('ul').children().removeClass('selected');
$(selector).removeClass("hidden"); //but show matching item
$(this).addClass("selected"); //but show matching item
alert($(this).attr("class").split(' '))
});
$("#list li").eq(0).click();
}
* {
font-family: Segoe UI;
font-size: 9pt;
}
#container {
bottom: 0; left: 0; top: 0; right: 0;
margin: auto;
position: absolute;
width: 900px;
height: 600px;
}
#list {
list-style-type: none;
padding: 0;
margin: 0;
}
#list li {
margin:0 0 10px 0;
background: #FFF;
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}
.item {
width: 100%;
height: 100%;
border: 1px solid red;
}
#menu {
float: left;
width: 25%;
height: 100%;
}
#content {
float: left;
width: 75%;
background-color: rgb(238,238,238);
height: 100%;
}
.hidden{ display:none; }
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.selected {
background: rgb(238,238,238) !important;
color: rgb(51,51,51) !important;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul id="list">
<li data-show="#item1">File Information</li>
<li data-show="#item2">My Summary</li>
<li data-show="#item3">Comments</li>
</ul>
</div>
<div id="content">
<div id="item1" class="hidden item">FILE INFORMATION</div>
<div id="item2" class="hidden item">MY SUMMARY</div>
<div id="item3" class="hidden item">COMMENTS</div>
</div>
</div>
I will give you the conceptual solution that can easily be achieved with pure CSS.
1) Set the list item to have borders at top, bottom, and left.
2) Then bring the list item above the larger box with z-index.
3) Finally, you will need to either shift the list to the right or the box to the left by the amount of your border width, so that they overlap to cover the small part of the border that is supposed to stay hidden under the list item.
#list li.selected {
color: rgb(149,149,149);
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
width: 205px;
z-index: 40;
position: absolute;
}
Please try this
Hope this help you.
You are seeing the border of the file information. There are two possible solutions:
1 - don't put a left border on the .item class. (But this will still not look right)
2 - Make the li overlap the content area slightly. You'll need to raise the z-index of the content and use a negative margin to bring them together.
Not the prettiest solution, but if you are okay with removing the white background of the "inactive" tabs, you can do some overlapping:
Demo
Your #list and #list li will need to be changed like this:
#list {
list-style-type: none;
padding: 0;
margin: 0;
position: relative; /*added*/
left: 1px; /*added*/
}
#list li {
margin:0 0 10px 0;
/*removed background*/
padding: 10px;
cursor: pointer;
color: rgb(149,149,149);
font-size: 11pt;
}
How with help of css and html i could do this:
i have 3 div's, and i have separator between them, and this separator, and text-area div must be not 65px as in my example, but maximal height div (in example this is first div), for example if there i have 2 lines only, i will have smaller by height div, and separator must be same height (maximal). How could i do this... didn't have any ideas(
http://jsfiddle.net/crjsg/
<div class="introtext-text-area">
<div class="introtext-separator"></div>
<div class="introtext">
here is example text of test example with 3 <br>lines
</div>
<div class="introtext-separator">some text</div>
<div class="introtext"></div>
<div class="introtext-separator"></div>
<div class="introtext"></div>
</div>
css:
.introtext-text-area {
height: 65px;
width: 690px;
margin: 8px 0 0 0;
}
.introtext-separator {
width: 3px;
height: 65px;
float: left;
border: none;
background-color: red;
margin: 0 0 0 -1px;
}
.introtext {
width: 211px;
height: 58px;
float: left;
padding: 0 8px 0 8px;
border: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}
how could i set automatical height for text-block and separator, and this height must be same for 3 text div's and it's separators.
You can use display:table and borders :
<div class="introtext-text-area">
<div class="introtext">
here is example text of test
example
</div>
<div class="introtext">
some text
</div>
<div class="introtext">
some text
</div>
</div>
.introtext-text-area {
display:table;
border-right:solid red;
}
.introtext {
width: 211px;
padding:5px;
display:table-cell;
border-left:solid red;
}
Use these css defintions:
.introtext-text-area {
overflow: hidden;
width: 100%;
margin: 8px 0 0 0;
}
.introtext-separator {
float: left;
border: none;
margin: 0 0 0 -1px;
height: 100%;
}
.introtext {
width: 211px;
float: left;
padding: 0 8px 0 8px;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
text-shadow: 0px 0px 1px #c2c2c2;
word-wrap: break-word;
}
.bordered {
border-left: 3px;
border-left-color: red;
border-left-style: solid;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Add the handy .bordered class to each of your divs:
<div class="introtext-separator bordered"></div>
<div class="introtext bordered">
The trick is that the parent div has overflow:hidden and the bordered class has really large paddings.
Forked fiddle
Ok this is my problem:
The left float and right float are somehow not put into my container and the footer only pays attention to the middle content part. What am I doing wrong?
I could show it with a picture but I cannot add one because I don't have 10 rep.
It must be a simple fix, I have read about clear:both etc but that all does not work unfortunately.
#container
{
position: relative;
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
text-align: left;
}
#header
{
height: 160px;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
position: absolute;
top: 160px;
left: 0;
float: left;
width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
position: absolute;
top: 160px;
right: 0;
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
margin: 0 26% 0 26%;
padding: 0 10px;
background: #0F0;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
I'm not sure what you are trying to achieve without knowing your html structure, but the problem stems from the fact that you have absolute positioning on your left and right containers as well as a floted positioning.
The default positioning for a html element is static, so you either float everything or absolute position everything. Here's something to help you understand positioning better, it's very easy and you'll be on your way in 5 minutes: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Also, you should post a jsfiddle link with the html included so we'll understand better what you are trying to achieve if you need further help. My guess is that Rohit Azad's solution is correct, you just have trouble understanding positioning.
Hi i check to your code i think you want to this
HTML
<div id="container">
<div id="header">Header</div>
<div id="mainContent">
<div id="sideleft">Left</div>
<div id="sideright">Right</div>
</div>
<div id="footer">Footer</div>
</div>
Css
#container
{
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
}
#header
{
height: 160px;
background:red;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left; width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
padding: 20px 10px;
background: green;
overflow:hidden;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
Live demo
I found this image while searching the web and I tried to implement this display on my own. This is what I have so far:
My HTML code is here:
<ul>
<li>
<span style="display:block;"><a href="">
<span><img src="../creation/images/samps/unnamed4.png" width="48" align="absmiddle"/></span>
<span class="price" >Freeep</span>
<span class="appname">Name of the apps that is so long</span>
<span class="developer">by scamexdotexe</span>
</a>
</span>
</li>
</ul>
This is my CSS style:
<style type="text/css">
li{
list-style: none;
width:200px;
border:1px solid #00CCFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 0px;
}
li:hover{
border:1px solid red;
}
li a{
margin: 0px;
display: block;
width: 100%;
height: 100%;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
text-decoration:none;
padding:2px;
}
li a span img{
padding: 5px;
}
.price{
position:absolute;
margin-top:4px;
margin-bottom:4px;
color:#0099FF;
font-size:12px;
}
.appname{
}
.developer{
font-size:12px;
color:#666666;
margin:0;
position:inherit;
display:inline;
white-space:nowrap;
}
</style>
I spent hours on cloning the display on the first image but it seems that I have no luck. Can you point what I am doing wrong here? What I really want to do is align the app name and the price horizontally and also align the app name, rating, total downloads vertically.
For starters, I'd change the border radius to 5px, and add a drop shadow:
li {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #333;
-webkit-box-shadow: 0px 0px 5px #333;
box-shadow: 0px 0px 5px #333;
}
Do you want to use the same colors as well?
Here's a start for you: http://jsfiddle.net/k8ejp/4/
Notes:
the "avatar" div could of course be an image
absolute positioning can be used instead of floating if you want a more complex layout (or find it easier to work with position)
my example uses a few newer features of CSS (like text-overflow) but they should degrade without changing the layout.
HTML
<div class="box">
<div class="avatar">foo</div>
<div class="price">Free!</div>
<div class="name">A long app name A long app name A long app name A long app name</div>
<div class="info">Other info about the app goes here.</div>
</div>
CSS
.box{
font: 11px/1.5 sans-serif;
padding: 8px;
background-color: #ccddcc;
width: 400px;
border-radius: 4px;
border: 1px solid silver;
box-shadow: 2px 2px 2px #ddd;
}
.avatar {
width: 32px;
height: 32px;
background-color: #555;
float: left;
margin-right: 12px;
}
.price {
float: right;
color: green;
}
.name {
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
I have created an example here: http://jsfiddle.net/D26Hj/1/.
It just needs an app logo and star sprite image.
I have drawn up a star sprite image and quickly made a fake logo in Paint.NET.
Info about the sprite:
Each star is 9px wide.
There are 5 stars in a rating, so therefore each rating is 45px wide.
Therefore, to change the rating change the background-position as per below.
Here are the background-positions to use for different star ratings:
-0px 0 Stars
-45px 1 Star
-90px 2 Stars
-135px 3 Stars
-180px 4 Stars
-225px 5 Stars
I have added classes to make it easier, use rating-0 to rating-5 for 0 stars to 5 stars.
HTML:
<div class="app">
<div class="image"></div>
<div class="title">
App title
</div>
<div class="price">$0.00</div>
<div class="rating rating-3">3 stars</div>
<div class="info">1024 downloads</div>
</div>
CSS:
body {
padding: 20px;
}
.app {
position: relative;
width: 225px;
height: 50px;
padding: 5px;
background: #8f8;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
border: 1px solid #484;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 2px #484;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px #888;
}
.app a {
text-decoration: none
}
.app .image, .app .title, .app .price, .app .rating, .app .info {
position: absolute;
}
.app .image {
left: 5px;
top: 5px;
width: 48px;
height: 48px;
background-image: url('http://i.imgur.com/JAgto.png');
}
.app .title {
left: 60px;
top: 7px;
}
.app .price {
right: 5px;
top: 7px;
color: #262;
}
.app .rating {
left: 65px;
top: 25px;
width: 45px;
height: 10px;
text-indent: -999px;
background-image: url('http://i.imgur.com/giWyQ.png');
background-position: -135px 0;
}
.app .info {
left: 60px;
top: 40px;
font-size: 11px;
color: #666;
}
.rating-0 {
background-position: 0 0;
}
.rating-1 {
background-position: -45px 0;
}
.rating-2 {
background-position: -90px 0;
}
.rating-3 {
background-position: -135px 0;
}
.rating-4 {
background-position: -180px 0;
}
.rating-5 {
background-position: -225px 0;
}
I'm not so sure you should use span, personally I would use div instead since it's default display style is already block, which I see is what you try to achieve on the description block.
And about the Price and AppName, I would suggest that you wrap them inside a Div container on the same level with rating and downloads count and make that container display style inline-block then adjust the width for both Price and AppName.
It would be like this
<div class="main-container">
<div class="image"> Image Goes Here </div>
<div class="description">
<div class="description-top">
<div class"description-top-title"> Title Goes Here</div>
<div class"description-top-price"> Price Goes Here</div>
</div>
<div class="description-middle"> Rating Goes Here</div>
<div class="description-bottom"> Download Count Goes Here</div>
</div>
</div>
.main-container{
display: inline-block;
}
.image{
width: 30%;
}
.description{
display: block;
width: 70%;
}
.description-top{
display: inline-block;
}
.description-top-title{
width: 60%;
}
.description-top-price{
width: 40%;
}