I am trying to visualize a sort of TV program guide, a line for each channel. The HTML structure is:
<DIV id="channel2_new" class="channel"> // id different for each channel
<IMG src="channel2.png"> // logo source different for each channel
<DIV class=program">
<P style="width:200"> // actual width value reflects program length
<SPAN class="time">06:00</SPAN> // actual time
<SPAN class="title">TG2</SPAN> // actual title
</P>
</DIV>
</DIV>
The CSS is:
.time{
visibility:hidden; width:0px; margin:0px; padding:0px; float:left;
}
.channel{
height:30px; white-space:nowrap; margin:0px; width:1000px; overflow:hidden;
}
.logo{
border:none; float:left; height:20px; margin-top:5px;
}
.program{
position:absolute; left:80px;
}
P{
float:left; border-style:solid; border-width:thin; height:20px; overflow:hidden; margin-top:0px;
}
The idea is to show only the programs that fit within the "channel" width (corresponding to a specified time window, i.e., from 6pm to 10pm). For the programs that start within this window (i.e., at 9pm) but end later (i.e., 11pm), only a partial box should be shown (this is what I hope the "overflow:hidden" attributes should do).
See this example web site to understand better what I'm trying to do: http://it.tv.yahoo.com/
In my case, this happens only in an apparently random way: for some channels it works, for other channels the last "program" rectangle is completely missing (no border, no text). If I change the window width, the same channel that was showing correctly might not be working any more, while others might work!
Do you havee any suggestion?
Thanks.
What you may be looking for is text-overflow: ellipsis; if you apply it to your p like I've done here: http://jsfiddle.net/P8V4e/6/ you get the ellipsis when the text from .title overflows the p element. Is this the behavior you're looking for?
I also added a min-width: 1em; property to the p, that way it won't collapse completely and not show the ellipsis, but will still retain the width of the other elements. I don't know if that will mess up your formatting.
Related
I want two add two forms one on left and one on right of the page
and then what i write should be displayed below them.But the problem is it is being shown between the two forms.
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
CSS
.login{
float:left;
}
.signup{
float:right;
}
The use of floated element is highly discouraged since there are a lot of other better alternatives that can be used instead.
Best alternatives are
display: inline-block;
CSS
.login{
display:inline-block;
}
.signup{
display:inline-block;
}
Flexbox
If you still want to use floated elements you can use a clearfix. Clearfix is a way an element automatically clears its child elements. For more information read How to use clearfix
Mention the Width property width:50%; it will work
.login{
float:left;
width:50%;
}
.signup{
float:right;
width:50%;
}
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
Adding style clear:both to your paragraph will help.
.clear
{
clear:both;
}
<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>
Edited to show current code and add html:
I'm still learning CSS and I have a bit of a problem. I have a header image on top of a page. Overlaying the image I have a header bar with a home-button.
#header {height:170px; background-color:#f5fdfb; display:block; overflow:hidden; position:relative;}
#header_bild {
padding-top:0px;
height:170px;
z-index:5;
}
#header_bar {
background-image:url(header_bar.png);
position:absolute;
top:0px;
left:0px;
width:151px;
height:31px;
z-index:10
}
But I want people in the CMS to be able to upload a header image that is too large and it will be automatically cropped. I thought I could do this by adding overflow:hidden to the header tag. And it works. But as soon as I add overflow:hidden, the header bar is suddenly behind the header image, instead of on top of it where it belongs. Can anyone tell me what I'm doing wrong?
The stuff in the CMS wasn't actually coded by me. I'm only editing the CSS files. So I can only show you the html that I can see when viewing the source file of the site:
<body>
<div id="siteborder">
<div id="container">
<div id="header">
<div id="header_bar"> </div>
<div id="header_img">
<img src="./files/header_seed.jpg" border="0" title="" alt=""></div>
</div>
<div id="logo"><img src="files/dummy.gif" width="151" height="30"></div>
<div id="linie_header"><img src="files/line_header.png" width="992" height="2"></div>
</div><!-- header end -->
You should consider using z-index in your CSS to specify explicitly what should be "on top" and what should be "behind". There is plenty of good information out there. z-index puts objects with higher value "on top" of objects with lower values. The default if left unspecified is auto, which means it takes this value from its parent, which is (usually) 0. The <html> tag defaults to a z-index of 0, so it follows that nested defaults will also be 0.
.thingone { z-index:10;}
.thingtwo { z-index:5;}
.thingthree { }
In this example, <div class="thingone"></div> will be "on top of" both of the others, and <div class="thingthree"></div> will be "underneath" the others, since it is unspecified and therefore defaults to auto (the z-index of a parent if nested, usually 0). So you should add z-index:10 (for example) to the particular object you want to be on top (if the image you want "on top" is actually defined by header_img):
#header_img {
padding-top:0px;
height:170px;
position:relative;
z-index:10;
}
#header_bar {
background-image:url(header_bar.png);
position:absolute;
top:0px;
left:0px;
width:151px;
height:31px;
z-index:20;
}
As mentioned by Hilgaran in the comment below, you need to explicitly state a position rule for the object you're trying to z-index. The default position is relative for objects not nested underneath parents with alternate positions, so specify it explicitly to make z-index function.
I am making a menu that is a div with with:100%; and height:45px;
each element inside the menu are divs. My goal is to make it adapt to any screen resolution so I start by placing the first div with a margin-left:2%;but the for the next one I am not sure of what I must use.
I could make the first element in float:left; and use margin like margin-left:10%; but then if we change the screen resolution it's not good anymore. If I don't put anything it goes under the first button. If I use the margin-left in px it won't be good because of the first margin-left:2%; How can I achieve this?
This is what I curently have(you can see that the buttons get under the first one):
Why don't you use display:inline-block; and whatever the margins that are great for you?
Meaning that, the first element can have 2% and the second one as well:
<div id="menu">
<div class="element">1</div>
<div class="element">2</div>
</div>
#menu{
width:100%;
height:45px;
background:#f00;
}
.element{
background:#0f0;
display:inline-block;
margin-left:2%;
}
I think you should provide something like a jsfiddle source when asking these type of questions :)
I'm working on a pagination sort of thing, which is simply just a bunch of floated anchor-tags inside a div. Now, in IE7, it inserts empty text nodes here and there, seemingly at random, which breaks the layout.
Result:
Example of how it looks on different pages. Note the empty text nodes. Neat, huh?
CSS:
.nwsPaging {
width:200px; /* Have also tried fluid size */
height:30px;
display:block; }
.nwsPaging a {
width:auto; /* Have also tried fixed size */
margin:0 0 0 1px;
padding:2px 8px;
border:solid 1px #ccc;
background:#eee;
float:left;
line-height:20px;
display:block;
zoom:1;
vertical-align:top; /* Should not do any difference */ }
.nwsPaging a:hover, .nwsPaging .isActive {
background:#D150A1;
color:#fff;
display:block; /* Should be redundant, but just in case */
zoom:1; }
As you can see, I've tried some different things, including setting a fixed width for the container and the floated -tags, plus giving it hasLayout. The .isActive class has nothing special in it, and it makes no difference if I never add the class.
I had the exact same problem in a different system, however I can't remember how I fixed it. I don't have access to the code, and the inspector is no help.
Bonus info:
The site is built on HTML5Boilerplate, which uses normalize reset CSS.
Edit:
The markup is very simple, and although the tags are dynamically created, there should be no line breaks which could possibly create empty text nodes.
How the markup should be presented as parsed:
<div class="nwsPaging clearfix">
Previous
1
2
3
Next
</div>
This could actually be caused by line-breaks in your code.
Strip them and see if it still does that.
I'm creating a calendar and need to replicate the behaviour I would get with
overflow-x:visible;
overflow-y:hidden;
for browsers that don't support these css attributes. Is there some kind of workaround I can do? I don't just want to compromise and add in overflow:hidden for those browsers, since the client really wants this feature. Does anyone have any good ideas?
Many thanks.
Here is someone who asks roughly the same question (overflow-x visible and -y hidden).
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457
Someone named Weirdan says I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent, and shows an example where it is not clear (says Weirdan) whether the area to the southeast should be hidden or shown.
S/he also says that the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden, and shows this example (I hope it's OK that I copy it to here?).
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>