if IDE by default adding ; at end. should i remove?
selector {property:value;property:value;property:value;property:value;}
I read on an article semicolon not required at end.
I am trying to have some LIs within a UL align left, right, and center within a page. For the life of me, I can't figure out how to keep something "centered" on the same line as a left and right aligned LI.
<style>
ul {
margin:1em 0;
padding:0
}
ul li{
display:inline-block;
white-space:nowrap;
margin:5px
}
ul li.left{
float: left;
text-align:left;
}
ul li.center{
float:left;
text-align: center;
}
ul li.right{
float: right;
text-align:right;
}
</style>
<ul>
<li class="left">left</li>
<li class="center">center</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
<li class="right">right</li>
</ul>
<ul>
<li class="left">left</li>
</ul>
Can anyone help? BTW, I've trying to avoid DIVs.
Thanks!
I'm wanting to be able to create a banner of floating images based on what are uploaded via users. The tool needs to have images of 50x50 and 100x100. At the moment, I just want to randomly display the images and tried to apply float:left. However, as you can see below - it leaves gaps.
Is there an easy way to do this without programatically positioning the images?
If you want the code so far, it's here:
.wall {
width: 300px;
background-color: red;
display: table;
}
.wall img {
float: left;
}
and
<div class="wall">
<img src="man1.png" alt=""/>
<!-- ETC... !-->
</div>
It seems that padding style applying to <td /> doesn't work on IE7 in my computer, but is okay on FireFox3.5.
Is this a correct behavior? Or I get wrong.
Thanks.
Hi, hows it going,
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
I'm building a Drupal theme up and want to know if there is a Drupalish way to add a css file only if the user has js turned off.
This would ideally go in the theme.info file to keep it neat!
Something like this would be ideal:
conditional-stylesheets[if no javascript][all][] = nojs.css
If this isn't possible then I'm going to keep all the css that needs JS out of the css files, and add it dynamically using JS but this seems a bit messy...
Any ideas?
I'm having to issues lining up items properly in my html code. I am not sure why they are lining up the way I want them to.
First the header My Color Library is a full line height above the horizontal ruler. I want it right above the ruler.
Second my X box in the td with the background is justified right fine but I actually want it in the top right hand corner not centered vertically.
Here's some example html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FunctionalColor&Design</title>
</head>
<html>
<body>
<table style="width=900px; margin-left: auto; margin-right: auto;">
<tr>
<td>
<P>
<div style="font-size: 1em; line-height: 1em; font-weight: bolder; padding: 0px;">My Color Library</div>
<div align="right" class="removeall">
<a href="colors">
<img src="http://2100computerlane.net/workingproject/images/x-button.png" />
<bold>Remove All</bold>
</a>
</div>
<HR/></p>
<div class="mycolor">
<table><!--width="900px" -->
<tr>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;">
<div style="padding:0; vertical-align:top;" align="right" class="remove">
<a href="f8d3cf" style="padding: 0px;">
<img src="http://2100computerlane.net/workingproject/images/x-button.png" style="padding: 0px;"/>
</a>
</div>
</td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<td style="border: none; width:10px;"></td>
<td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td>
<tr>
<td style="border: none; font:.6em Arial, Helvetica, sans-serif; width:125px; height:20px;">Desert Warmth<br/>70YR 56/190 A0542</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Hi there. I've got quite big trouble, because i need to anathematise from styling some input types. I had something like:
.registration_form_right input:not([type="radio")
{
//Nah.
}
But i don't want to style checkboxes too.
I've tried:
.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])
How to use &&? And I'll need to use || soon, and I think that usage will be same.
Thanks.
Hi,
i have this page:
login: [email protected]
password: m
I want to have the string "Editar mi perfil" aligned on the right, so i have added:
text-align: right
but it doesn't work,
I have tried also:
float:right
It works but goes a bit upper than I want.
Any idea?
Regards
Javi
I've been developing a web app for a few weeks now and ended up with about a 1000 lines. I am sure not all the selectors are being used and am trying to clean it up. At the same time, I don't want to do it manually for obvious reasons.
Is there a safe and an efficient way to remove unused selectors? For this, am I supposed to navigate the entire website to let it know which selectors are not being used? (I use javascript to add some selectors so these might not show up until a particular usecase is seen)
Hi to everybody.
I need to do a border for my website that looks like this one. The only way I know is to split the website with 9 div, such :
1 2 3
4 5 6
7 8 9
and create 8 images, respectively:
top-left (on 1)
top central (on 2)
top-right (on 3)
left (on 4)
right (on 6)
bottom-left (on 7)
bottom-center (on 8)
bottom-right (on 9)
The div 5 is attempt as main. But the whole strategy looks not so well-formed. Any tips? Thanks
in firefox I can usee firebug, in chrome I can use the css console. Both to make live changes to css for troubleshooting purposes. However I do not know of a way to do this in IE, which is where I have the most css issues.
So, whats the best way to troubleshoot css issues in IE?
Thanks!
Hello,
I want to center a div, but the general way is
#selector{position:relative;margin:0px auto;}
What exactly is wrong below
#crp{top:40%; position:absolute; margin:auto;}
The Div below is not nested but a standalone. The #crp is going to the extreme right.
<div id="crp">...something goes here....</div>
Thanks
Jean
Hi people,
I am working on a website curently. Here is the link for it.
Good News : The site is fine on FireFox, Chrome and IE 8.
Bad News: It is not fine on IE 7. Alignment problems, hyperlink colour problems, etc.
What should i do to make things normal on IE7 too.
Any amount of help would be appreciated.
Thanks
Is it possible to have a navigation system optimized using javascript, but for the sake of search engines, have the hyperlinks still be crawlable?
Or maybe a condition statement that calls HTML code only if javascript is not enabled in the browser or when crawled by a search engine?
I have no code to start with.
I want to add 2 divs overlapping on each other and then use the new CSS3 Rotate function. The effect I want to create is shown on this page
Requirements
I don't want to use images
I don't mind using CSS3
It should be easy to align the whole thing in the center (which makes it harder to use position: absolute;).
It's going to be content below the boxed content (which makes it harder to use position: absolute;).
If it's possible without too much position: absolute; it's better.
I prefer table free solutions.
Have fun!
I have a black background div of a size which contains an image.
<div id="Banner">
<img onclick="expand();" src="hola.jpg">
</div>
#Banner {
position:relative;
height:50px;
width:50px;
margin:0 auto;
background-color:#000000;
-webkit-transition: all 0.5s ease-in-out 0.5s;
-moz-transition: all 0.5s ease-in-out 0.5s;
-o-transition: all 0.5s ease-in-out 0.5s;
transition: all 0.5s ease-in-out 0.5s;
}
<script type="text/javascript">
function expand(){
document.getElementById('Banner').style['height'] = '250';
document.getElementById('Banner').style['width'] = '250';
}
</script>
So when the user clicks on the image, the div transitions to 250, 250.
My problem is that, i want it to to transition to full screen. The following javascript
function does expand to fullscreen but the transition effect doesn't come. I need to do it from a javascript code without jquery.
function expand(){
document.getElementById('Banner').style['position'] = 'absolute';
document.getElementById('Banner').style['height'] = '100%';
document.getElementById('Banner').style['width'] = '100%';
document.getElementById('Banner').style['top'] = '0';
document.getElementById('Banner').style['left'] = '0';
}
Please advice.
Update : Solution
Roger below has provided with an alternative solution. This takes care if the document
has already been scrolled and is another place. Will expand the div to full browser screen.
sz=getSize(); //function returns screen width and height in pixels
currentWidth=200;
currentHeight=200;
scalex=sz.W/currentWidth;
scaley=sz.H/currentHeight;
transx=0-((expandingDiv.offsetLeft+(currentWidth/2))-(sz.W/2))+document.body.scrollLeft;
transy=0-((expandingDiv.offsetTop+(cuttentHeight/2))-(sz.H/2))+document.body.scrollTop;
transx = transx.toString();
transy = transy.toString();
document.getElementById("Banner").style['-webkit-transform'] = 'translate('+transx+'px,'+transy+'px) scale('+scalex+','+scaley+')';
like this
in my design both side of div has border like this and content in div can be increased or decreased . and in any condition both side top and bottom should be blur like this.
How to make this possible
why does the border get like this, i want it around the videoclip, if i use float it do the border correctly, if i use position, then it gets like that, and i dont want to use float.
#clip{
position: relative; right: 1px; border: 2px solid #FF3399;
}
I'm trying to style a table row using both cycle and a helper, like shown:
<tr class= <%= cycle("list-line-odd #{row_class(item)}", "list-line-even #{row_class(item)}")%> >
However, when I do this, the resulting HTML is:
<tr class = "list-line-odd" lowest-price>
with the return from the helper method not enclosed in the quotes, and therefore not recognized.
Here's the helper I'm using:
def row_class(item)
if item.highest_price > 0 and item.lowest_price > 0 and item.highest_price != item.lowest_price
if item.current_price >= item.highest_price
"highest-price"
elsif item.current_price <= item.lowest_price
"lowest-price"
end
end
end
I must be missing something obvious, but I just can't figure out how to wrap both the result of cycle and the helper method return in the same set of quotes. Any help would be greatly appreciated!
Hello,
I wonder why does this style not work in IE and FF, but in Chrome ONLY
#show{top:10%; position:relative; margin: 0px auto; width:100%;}
[Edit]
If I want to make the same work in IE and FF, what do I have to do
Thanks
Jean
Hi
My question is, can I control the style of the paging element separately of top and bottom, I have set the paging to appear in both top and bottom of the gridview, and I want to see that the top pagination is little high up in the page, to do that I used the cssClass and set margin-top:20px and made the position: absolute, this does change the position of the top paging area and set it rightly for me, but the bottom pagination has also come up as a result and now sits inside the grid data!! Is there any way to solve this?
Thanks and regards
Arunendra
Hello,
I want to place this div at the bottom of the screen, and should stay at the bottom even though there is a scroll, it stays at the bottom, but moves when I scroll.
<div style="color:#FFF; position:absolute; bottom:0px;">
<?php
$time_taken=round(getmicrotime()-$time_start,4);
echo"Generated in ".$time_taken." seconds";
?>
</div>
Thanks
Jean
I'm building a navigation system using jquery scrollto. I have my navigation menu in a separate file (( navigation.php )). It is included in 5 locations on the first page (( 5 different sections w/ text following each )). I'm trying to figure out a way to have the current "tab" highlight'd. I could hard code the navigation in each location to ensure it shows up the correct way, but I'd rather use the phpinclude() method. The other issue is that each "tab" has it's own unique color (( cmykd )). Here is the alpha version of what I'm doing (( when you click && the page slides, the "active tab" still stays grey -- I'd like it to be the corresponding color )).
Hope this all makes sense && thanks in advance !!
I have used this effect before, everything is in order (As far as I see), but it's just not working. What have I missed?
Fiddle here
Sprite here
Thanks.