i am trying to absolute position a ASP.NET Datalist which inside a table with TR & TD elements - i have the TR displaying horizontally - applying the absolute positioning just shows the last TD element. Using relative/static shows the entire TD elements which is how it should be - i need to have it absolutely positioned in one position - finding it hard to get it right - any suggestions?
.AspNet-DataList table
{
width: 200px;
}
.AspNet-DataList tr, .AspNet-DataList td
{
float: left;
left: 250px;
padding-right: 2px;
position: absolute;
top: 304px;
}
.AspNet-DataList td a
{
text-indent: -9999em;
display:block;
height: 25px;
width: 25px;
}
It is a step by step form which has a cirlce orange background with number 1 to 6 which is being displayed horizontally - thought id mention it just in case your thinking what im trying to achieve. I hate to use position:absolute but sometimes it just something you require at the time and cant do without it.
Here is the form and the divs;
<div class="radarform">
<div class="look-for">Look For</div>
<div class="agree">Agree</div>
<div class="strongly-agree">Strongly Agree</div>
<div class="disagree">Disagree</div>
<div class="strongly-disagree">Strongly Disagree</div>
<energy:FormBuilder ID="HealthAndSafetyRadarForm" runat="server" XmlPath="~/asset/forms/securusradarform.xml" CssClass="hsRadarform" ButtonText="Send Form" ShowTitle="true" ShowSideBar="true" />
<div class="clear-me"></div>
</div>
In Firefox FireBug it shows this and has its own class that i am using;
<div id="ctl07_HealthAndSafetyRadarForm_Wizard_SideBarContainer_SideBarList" class="AspNet-DataList">
UPDATE: I managed to sort the problem out - i was positioning the td so they were ending up beind each other - i did this on the table and then positioned the hsRadarForm relatively - that has sorted it out - gosh i hate position:absolute.
.AspNet-DataList table
{
left: 45px;
position: absolute;
top: -46px;
width: 175px;
}
.AspNet-DataList tr, .AspNet-DataList td
{
float: left;
padding-right: 2px;
}
Can you wrap the data list in a DIV and absolutely position that? It's sometimes easier to put things in a container and absolutely position those.
I'm struggling to understand what you're trying to achieve - something about a circular orange background? - but if you really do need to reposition td elements, you will almost certainly need to set the td, tr, tbody, and table to display: block;
Related
My current project wants to have a decoration in front of some of the anchors (A), so far this is done by using ::before. However, it shows up that some of the links will line-break and then the second and eventual additional lines will align left with the decoration where it's nicer if it aligns with the text on first line.
There's a fiddle which I hope explains what we are trying to achieve. The .fake class is just for demonstration how it should look, it's of course not an attempt to solve it: https://jsfiddle.net/p0jLoyqz/
.decorated::before {
content: ">",
font-weight: 800
}
One solution could be to wrap the anchor in another element and add the decoration to the wrapper, but it would be good to keep down the markup as much as possible.
You can make the pseudo element position:absolute; and position it left:0; and give the container a padding of 10px or15px
.small-box {
width: 120px;
border: 1px solid gray;
padding-left: 10px;
position: relative;
}
.small-box a::before {
content: '>';
display: inline-block;
position: absolute;
left: 0px;
}
<div class="small-box">
<a class="fake" href="#">my link that line breaks</a>
</div>
I'm trying to rewrite a site in proper HTML. The site I'm trying to replace was a complete mess. I've run into a problem where I can't get a <table> to fill the height of the <td> it's contained in. I've tried setting height: 100% on the <table>, which based on google and stackoverflow research should work, but I must be missing something stupid. I had tried to do the same thing with <divs> before switching to tables, but I'm not opposed to going back to <divs> if someone can suggest how to do it.
The content I'm developing is currently here: http://96.0.22.228/
Due to project time constraints, I've had to use bad hacks to get the pages looking correctly. I'm not declaring a <doctype> and I'm forcing IE to use IE7-quirks mode. I'd love to have recommendations on how to do this layout in a proper manner using HTML5 and CSS. It does not have to support older browsers, but it does have to look the same in the latest versions of Chrome, Firefox and IE. I'd also like to to do away with the images for the menus and style everything in CSS for the border frames and the menu text.
Even though I've had to complete the site as is, I'm open to going back and fixing it later if there's a good answer to this problem.
100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent ... You can see how that might be a problem.
You could try adding an explicit height to the TD and using table-layout:fixed on the table. At least that way the browser knows the height of the parent without needing the height of the child but that still may not work.
You might need to rethink how you go about this.
The best solution for this is to have the parent element of the button have a height of 100% as well, assuming you want your button to have a height of 100%.
td {
height: 100%;
}
.btn {
width: 100%;
height: 100%;
}
<tr>
<td><button class="btn" id="1">1</button></td>
<td><button class="btn" id="2">2</button></td>
<td><button class="btn" id="3">3</button></td>
<td><button class="btn" id="plus">+</button></td>
<td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>
i got a one solution if you need your desired results you can adjust the padding of your (td.navigation a class link) through this you will get your results.
apply this css:-
td.navigation a {
color: #837768;
display: block;
font-size: 1.2em;
padding: 14px 5px;
text-align: center;
text-decoration: none;
}
So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.
When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.
There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.
body,
html {
background: black;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#left {
position: absolute;
top: 10%;
left: 0;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#right {
position: absolute;
top: 10%;
left: 76%;
background: #eeeeee;
width: 20%;
padding: 2%;
margin: 0;
}
#center {
position: absolute;
top: 10%;
left: 24%;
background: #dddddd;
width: 48%;
padding: 2%;
margin: 0;
}
#flash {
background: red;
width: 500px;
height: 500px;
padding: 0;
margin: 0;
}
ul {
height: 500px;
padding: 0;
margin: 0;
padding-left: 25px;
background: #4359ac;
color: #ffffff;
}
li {
height: 10%;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TheDavidFactor's Layout</title>
</head>
<body>
<div id="left">
<ul>
<li>Spa</li>
<li>Hotel</li>
<li>Activities</li>
<li>Hobbies</li>
<li>Night Life</li>
<li>Food</li>
<li>Feedback</li>
<li>Contact</li>
<li>About Us</li>
<li>Copyright</li>
</ul>
</div>
<div id="center">
<div id="flash">Here's your flash Object</div>
</div>
<div id="right">
here's the right div
<br>
<p>Let's throw some random text in here to take up space for now.</p>
</div>
</body>
</html>
The other option you have is to wrap the three columns in a container div, and define a height for that div, then stretch each of the columns to 100% height within that container div.
Im trying to achive an animation of a horizontal list.
Like
Item 1 * Item 2 * Item 3 * Item 4
But only two items is visible at one time.
Each item contains a div with a picture, a text and a link. The picture should always be aligned to top and the link to the bottom.
<ul>
<li><div>
<img src="somepic"/>
<p>SomeText</p>
Link
</div></li>
<li><div>
<img src="somepic2"/>
<p>SomeText2</p>
Link2
</div></li>
</ul>
Here is the problem, the list-item must be positioned with "postition:relative" and if i use absolute positioning inside the div the animation gets messed up. I animate by appending and prepending to the list.
Does anyone have a nice and easy solution to this?
EDIT:
Here is a sample: http://jsfiddle.net/39bhW/
I think i need the positioning to be absolute within the list items...
When you apply positioning to an element, it will use the positioning available on it's parents. If none is provided, it will position to the body element. So when you position: absolute to get the text/link at the bottom of the element, you have to position: relative (or position: absolute) one of it's parents, otherwise it won't know which you want it to position in relation to. Conversely, whichever it finds first, it will use that element to position against.
I think it's possible you've got too much markup to accomplish what you're doing here (what is the .placeholder for? why not just use the li?), and the spans that wrap one of the blocks looks out of place (and should be a div if you really need a wrapper there). And I'm not sure, but you might want to change #items to a class, if you need to reuse it. It looks out of place as an id. And your id and class names are not descriptive, and your selectors are not specific enough (generally, stay away from ul and li for styling specific parts of a page, as these have a global effect).
Nonetheless, I think this is what you're looking for. Note how I use padding on #items li, and then compensate bottom: 5px. You also don't need to position the img tag if it's just going to be at the top of the block, centered.
HTML (Fragment)
<li>
<div class="itemplaceholder">
<img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
<p>
Test title<br/>
Description A
Link
</p>
</div>
</li>
CSS
#items {
display: inline;
position:relative;
margin: 0;
padding: 0;
}
#items li {
float: left;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
#items .itemplaceholder {
height:200px;
width:160px;
text-align: center;
position: relative;
}
.placeholder {
width:640px;
height:200px;
overflow: hidden;
}
.content {
width:800px;
height:240px;
}
#items .itemplaceholder p {
position: absolute;
bottom: 5px;
width: 100%;
height: 50%;
}
#items .itemplaceholder p a {
position: absolute;
display: block;
bottom: 0;
text-align: center;
width: 100%;
}
http://jsfiddle.net/39bhW/3/
so basically you want to have 2 items visible at one time, am i right?
well, change the width of .placeholder to 320px
This is my code snippet :
Html
<div class="app-cont">
<div class="app-head">
Additional Comments :
</div>
<div class="app-main">
balallalalalallalalalala
<br/>
jaslnflkasnlsnlksanlknslnwkin
<br />
lknlkanfklnlk
</div>
</div>
CSS:
div {
color:white;
}
.app-cont {
background: black;
width: 90%;
padding-top: 2.5px;
padding-bottom: 2.5px;
margin-bottom: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.app-head {
background: #484848;
width: 25%;
margin-bottom: auto;
display: inline-block;
border-top-right-radius:2px;
-moz-border-top-right-radius:2px;
border-bottom-right-radius:2px;
-moz-border-bottom-right-radius:2px;
}
.app-main {
display: inline-block;
text-align: justify;
}
demo
It works till i dont add enough content on the div with class app-main. But when i add enough content in the div the div with class app-head gets to the bottom.
While i want it in the middle.
How can i do this ?
Just add vertical align style.
.app-head,.app-main{
vertical-align:middle;
}
You can use it on inline-block elements to position near other inline-block elements or near inline elements.
Well I wasn't sure entirely what the goal was, but if I understood you correctly, you wanted to keep the block holding the additional comments text in the middle of the text to the right?
I've updated your fiddle to see if I've got the solution you need: Updated Fiddle
I've positioned .app-head absolutely, and used a top:50% and a negative margin to keep it centred vertically. You also have to give .app-cont a relative position for this to work, and the comments section needs a left-margin slightly greater than the width of .app-head.
Anyway, hope that helps!
I did some other changes as well..
http://jsfiddle.net/Ues8Q/4/
..but the main idea is this:
Outer container has: position: relative;
The thing you want to center has: position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of this element; height: whatever it is;
and requirement is that the element you want to center has fixed height...
how could i vertically center a <div> within a <div> ?
my code so far:
<div style="height:322px;overflow:auto;">
<div style="border: Solid 1px #999999;padding:5px;">
</div>
</div>
i have tried "top:50%;" and "vertical-align:middle;" without success
EDIT: okay so it's been discussed a lot. and i've maybe started another mini flame war. but for argument sake, how would i do it with a table then? i've used css for everything else so far so it's not like i'm not trying to employ "good practices".
EDIT: the inner div does not have a fixed height
In short, you're stuffed. More on this in a recent question I asked Can you do this HTML layout without using tables? Basically the CSS fanatics need to get a grip and realize there's simply some things you can't do (or can't do well) without tables.
This anti-table hysteria is nothing short of ridiculous.
Table cells handle vertical centering really well and are backwards compatible as far as you could possibly care about. They also handle side-by-side content way better than floats, relative/absolute positioning or any of the other CSS type methods.
Joel coined (or at least popularized) the term "architect astronauts" in Don't Let Architecture Astronauts Scare You. Well, in that same vein I think the term "CSS Astronaut" (or "CSS Space Cadet") is equally appropriate.
CSS is an incredibly useful tool but it also has some pretty serious limitations. My favourite ishow numbered lists may only appear as "3." but not "3)" or "(3)" (at least prior to CSS3 generated content--or is it CSS2.1? Either way it's not widely supported). What an oversight.
But bigger than that is vertical centering and side-by-side layout. These two areas are still a huge problem for pure CSS. Another poster decided the relative positioning combined with negative margin heights was the way to go. How is that any better than:
<html>
<head>
<title>Layout</title>
<style type="text/css">
#outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
#inner { width: 150px; border: 1px solid red; background: yellow; margin: auto; line-height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td id="outer">
<div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>
which will work everywhere, everytime.
Here is an article on vertical centering in CSS. To achieve a similar thing they use three nested divs with relative+absolute+relative positioning just to get vertical centering. I'm sorry but whoever wrote that--and anyone who thinks that's a good diea--has simply lost the plot.
A counterargument is given in Tables vs CSS: CSS Trolls begone. The proof really is in the pudding. The vast majority of the top 20 (Alexa) sites still use tables for layout. With good reason.
So decide for yourself: do you want your site to work and spend less time getting it to work? Or do you want to be a CSS Astronaut?
It's non-trivial, there can be caveats, and it's not something CSS handles well at this point.
It is however quite widely discussed and googleable. This is a good example.
Whatever you do, please don't fallback to tables.
Edit: this is ridiculous, the following works perfectly well in a strict doc without resorting to table markup:
<style type="text/css">
.outer {height: 322px; overflow: hidden; position: relative;}
*|html .outer {display: table; position: static;}
.middle {position: absolute; top: 50%;}
*|html .middle {display: table-cell; vertical-align: middle; position: static;}
.inner {position: relative; top: -50%; overflow: auto;}
*|html .inner {position: static; max-height: 322px;}
</style>
<!--[if IE]>
<style>
.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */
</style>
<![endif]-->
<div class="outer">
<div class="middle">
<div class="inner">
Any text any height
</div>
</div>
</div>
I like this solution best. It is for IE8+, and is easy to understand.
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
top: 50%; should work. you need to put margin-top to negative half of the height or it will start in the middle. Therefore, you need the height of the inner div. You also probably need position:relative;
Something like this for you inner div.
position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/
Not very neat working with negative sizes (what does it even mean?) but maybe the easiest way.
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
vertically centered
</div>
</div>
</div>
more information
Two techniques of many
Browser compatibility of the following has been tested in IE only. Modern browsers should handle these no problem.
#1 - Absolute and auto margin
Compatibility: IE 8 +
The combination of top, right, bottom, left and margin: auto centers the div vertically and horizontally.
The width and height are needed, but can be percentages
Can also be applied to an inner div with the parent set position: relative
Note: A max-width and max-height instead of a percentage height is possible IE 9 +. IE 8 requires a height.
html,
body {
height: 100%;
}
.outer {
background: #ff8f00;
height: 50%;
width: 50%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="outer"></div>
#2 - Flexbox
Compatibility: IE 11. See here for other browser support.
Using Flexbox and flexible vw and vh lengths
body {
margin: 0;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.inner {
width: 50vw;
height: 50vh;
background: #ff8f00;
}
<div class="outer">
<div class="inner">
</div>
</div>
Do you absolutely need to do this with css? The above link looks pretty good, but you could get a result using javasctipt/jquery - determine the height of the innter div and adjust the margin.padding accordingly. Something similar to: (jquery)
var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2;
$('the-inner-div').css( "margin-top" , gap );
A table isn't necessary if you're willing to use the flexbox display model.
E.g.
<div style="height: 322px; width: 200px; display: flex; background: gray;">
<div style="border: Solid 1px #999999; padding:5px; margin: auto;">
This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width.
</div>
</div>
If you just want vertical centering use the rule "margin: auto 0;" in the child div.
p.s. You'll have to prefix your use of flexbox if you want cross-browser compatibility (e.g. "display: -webkit-flexbox;")
The display: flex property works especially well for centering, both vertically and horizontally. For vertical centering, add the properties display: flex and justify-content: center to the container.
Try line-height