i am trying design a thumbnail with the latest pictures uploaded in my site. In the project use bootstrap twitter.
The thumbnail works fine, except by a little detail. The thumbnail contains 3 rows with 4 columns, in the second row, exist a space in the first,second and third list place. It is a screen:
The html code is generated with Smarty, it is the code, and works fine:
<ul class="thumbnails lastFotos">
{foreach from=$last_fotos item="foto"}
<li class="span1"><a class="thumbnail"><img src="{$BASE_URL}/assets/img/galeria/{$foto.Nombre}" alt="{$foto.Nombre}"/></a></li>
{/foreach}
</ul>
Thumbnails, thumbnail and span1 are classes of Bootswrap, whereas that lastFotos is a class created for my, to change some configuration of Bootstrap:
ul.lastFotos{ margin-left: 22px; }
ul.lastFotos li{ display: inline; margin-bottom: 7px; margin-left: 5px; }
ul.lastFotos li a{ border-radius: 0; padding: 2px; }
ul.lastFotos li a:hover{ border-color: #8e84b8; }
Any ideas ?.
this is because image are of different sizes, give a height to list or image it will fix it
like
ul.lastFotos li {height:60px;}
or
ul.lastFotos li img{width:60px;height:60px;}
Related
I'm redesigning my company's website and am trying to create a horizontal navigation bar with button links (which I've managed somewhat). The problem is that the exact same menu is supposed to appear on every page (of which there are 100+) and the button options may increase of decrease in the future.
My question is this: Is there a way to place the button text and associated links in the external css to make re-coding and future edits to all those pages simpler? I've searched and tried everything I could think of. The below code is still very much a work in progress, so any advice would be appreciated.
Relevant css:
/* BEGIN Menu Buttons*/
#menu {text-align:center;}
#menu ul {
display: inline-block;
list-style-type: none;
text-align: center;}
#menu ul li {
float: left;
width: 140px;
height:50px;
list-style-type:none;}
#menu li a {
width: 130px;
height:40px;
padding:5px;
display:block;
color: #fff ;
background-color: #000 ;
font: Times New Roman;
font-size:14pt;
line-height:40px;
text-align:center;
text-decoration: none ;
border-right:1px solid #fff;
border-left:1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;;}
#menu li a:hover {
border-top: 3px solid #000;
border-bottom: 3px solid #000;
outline: 1px solid #fff;
font-size:16pt;}
/* END Menu Buttons*/
Relevant HTML:
<header>
<div id="menu">
<ul>
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Maintenance</li>
<li>Parts</li>
<li>Information</li>
<li>Contact</li>
</ul>
</div>
</header>
If I understand your question correctly, the solution I would use is PHP
First of all you would need to save your page to .php for this to work (instead of .html)
Secondly, create a new file (menu.php) and paste in the MENU code above.
In every page that you have, you replace the menu HTML code with this:
<?php
include 'menu.php';
?>
(assuming you put the menu.php in the same folder as the rest of your pages)
Now, if the content of your menu expands, just edit menu.php and your menu is updated on all pages that have your menu.php file included.
Another solution for you, If you aren't using php and you need an html solution, you can always lean on the iframe.
<iframe id="iframe" src="xxx.html" width="500" height="180"></iframe>
but the problem with this is you woudl need to update the width on every page, should your menu become larger (wider) than this iframe accounts for.
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
Kindly see this page:
http://www.technodoze.com
See the Button in the Categories on the right side of the page.
See the word Tips and Tricks.
Problem 1:
It is expanded in whole the column .
The problem is: I want my cell to be expanded just according to the text string but it is looking awkward.
Problem 2:
See the link Web Designing half of which is lying on one line half on other, i want it to be on same line. (One <a> link, one line.)
My Code:
<style type="text/css">
.cat_link a, .cat_link a:hover, .cat_link a:focus{
padding: 0.25em;
color:#3B5998;
font-family: Verdana;
text-decoration: none;
border:1px solid #DADADA;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
background: #EDEFF4;
margin-left: 0;
margin-right: 0;
line-height:2;
margin-top: 1em;
margin-bottom: 1em;
}
.cat_link {
line-height:2;
}
</style>
HTML CODE:
<p class="cat_link">
Cell Phones
Android
Tips and Tricks
Amazing
Web Designing
Windows Tips
Physics
CSS
CSS 3
Communication
Facebook Tips
Dajjal
Bermuda Triangle
</p>
Please give me solution if you can.
add this to css classes
.cat_link{
text-align: left ; /* gets rid of wierd white space */
}
.cat_link a{
white-space: nowrap; /*stops buttons from taking up two lines */
}
You have text-align: justify set on the page body; reset it with text-align: left for those category tags and it will fix that strange spacing.
To ensure that the text doesn't wrap as you describe in Problem #2, set white-space: nowrap on each of the category tags (selector .cat_link a).
Problem 1: with a text-align:left is solved-
Problem 2: you can put a display:block; in the a element to force the new line, but if the text is larger than the container with it will break into a new line.
I have been researching how to use CSS sprites as image links, but I can't figure this out. I have a PNG (here: ) that has two images in it (for simplicity). I want each image to be act as an icon that can be linked to an external website (Twitter and Facebook). I set up my CSS like this:
CSS
#authorpage-links ul {
list-style-type:none;
}
#authorpage-links ul li {
background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}
#authorpage-links ul li.twitter {
background: url("/links-authorpage1.png") no-repeat 0 0;
width: 20px;
height: 14px;
}
#authorpage-links ul li.facebook {
background: url("/links-authorpage1.png") no-repeat -21px 0;
width: 14px;
height: 14px;
}
...and my HTML like this:
HTML
<ul id="authorpage-links">
<li id="authorpage-links" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-links" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>
Now, 2 questions:
1) Is using a list to display these images the best way or should I use div's?
2) Is this an issue with my CSS IDs and classes?
Any help is greatly appreciated.
Based on a revision of your CSS (problems that I'll come to, later) to the following:
#authorpage-list {
list-style-type: none;
}
#authorpage-list li {
float: left;
}
#authorpage-list li a {
background-color: transparent; /* I broke the background down into individual parts */
background-image: url(http://i.stack.imgur.com/ta3Va.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 15px;
height: 15px;
display: block; /* in order that the a elements could be assigned a width/height */
border: 1px solid #f90; /* for diagnostic purposes while working on this, adjust to taste */
}
#authorpage-list #authorpage-facebook-link a {
/* a specific selector, in order to be more specific than the previous
selector which styled the defaults for the a elements in this position */
background-position: -21px 0;
}
And amending your HTML to the following:
<ul id="authorpage-list">
<li id="authorpage-twitter-link" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-facebook-link" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>
I came up with this: JS Fiddle demo.
CSS problems
This is the biggest no-no insofar as HTML goes (or so far as I've ever been able to see, it's even worse than the blink tag): you have multiple examples of the same id in your HTML. An id must be unique within the document. If not, you have invalid HTML. Which causes problems with CSS, with JavaScript and...it's just bad.
If you have multiple elements that need to share a property/style, or whatever, use a class, not an id.
Your selectors. #authorpage-links ul should match a ul element within an ancestor element of id="#authorpage-links". The ul is the element with that id. I'll ignore that its child elements also had that id, since I think I've covered that part. All your other CSS started off that base, which wasn't accurate, and so didn't work.
Your <li> elements may be sized to 14x14, but you've got nothing in the <a> tags, so those'll shrink down to a 0x0 area, effectively making your list elements clickable areas invisible. You should probably put a space into the anchor tag, so there's SOMETHING to push them open, e.g.
<a target="_blank" href="http://facebook.com/"> </a>
^^^^^^
Your a link need to have a size. I did so in making the a's have a clickable area. Since your lis don't need a size i gave the size to the a links.
Replace your li css with:
ul#authorpage-links li a {
display: inline-block;
background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}
ul#authorpage-links li.twitter a {
background-position: 0 0;
width: 20px;
height: 14px;
}
ul#authorpage-links li.facebook a {
background-position -21px 0;
width: 14px;
height: 14px;
}
Also remove the id attribute from your lis.
"... fantastic answer ..." - Sparky672
In order to make all my links looks like buttons, I've done that in my CSS:
a {
color: #06A;
text-decoration: underline;
margin: 10px 20px;
padding: 10px 20px;
/*background-color: #EEE;*/
border: #BBB solid 1px;
}
They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.
Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink
<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).
To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.
If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.
The easiest solution is to set the line-height correctly (without changing display).
Use "display: block" to make padding and margin have a effect.
Try styling your links with display: inline-block;.
You may want to consider using the float style:
<a style='float:left' href='#' />
...which will let you do all the fun stuff and "help" position your anchors as a bonus.
(If you want things to stop floating, put clear:both )
#snowflake's question-level comment got me thinking.
It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).
The code for this would look a bit like this:
HTML:
<ul class="genrelist">
<li>Fantasy</li>
<li>Children's Literature</li>
<li>Speculative Fiction</li>
<li>Absurdist Fiction</li>
<li>Fiction</li>
<li>Word I can't read</li>
</ul>
CSS:
.genrelist {
list-style-type: none;
overflow: hidden;
}
.genrelist li {
/*background-color: #EEE;*/
border: #BBB solid 1px;
display: inline;
float: left;
margin: 10px 20px;
padding: 10px 20px;
}
.genrelist li a {
color: #06A;
text-decoration: underline;
}
The code above would display like this (full-size image):