Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
Related
On the left, I have buttons and the rest of the screen is a table, and I need a vertical line to act as a separator between the two but without any use of CSS/styles/classes.
Here is the base code:
<section align="left">
<div id="buttons">
<button type="button">Fire</button>
<br>
<button type="button">Water</button>
</div>
</section>
<!-- NEED A VERTICAL LINE HERE -->
<section align="center">
<table id="pokemons">
<tr>
<td>
<h5>Charizard</h5>
</td>
<td>
<h5>Blastoise</h5>
</td>
</tr>
<br>
<tr>
<td>
<h5>Pikachu</h5>
</td>
<td>
<h5>Squirttle</h5>
</td>
</tr>
</table>
</section>
I currently have this (for some reason in online editors the table isn't aligned to the middle, but on my local code it's fine):
I need this:
If you want to avoid using CSS, then your page will look atrocious.
There is not really a way to do that. I would make an <hr> tag and use transform: rotate(90); in your CSS.
I'm sorry but you will have to use CSS. No way around it, unless you use CSS or JavaScript.
I'm trying to do something that should be fairly simple. I have a column of text in a table that has values from 1 to 18. I want the cell that has the text to align center. However, sometimes, the same cell needs to display an asterisk (*). When the asterisk is displayed, it should be aligned left in the same cell, while keeping the numbers themselves perfectly aligned.
I can't quite get it to align the right way
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="float:left;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
Just give position: absolute to the div with asterisk, and your numbers will be always centered properly:
<table border=1>
<tr>
<td style="text-align:center" width=50>
<div>
<div style="position: absolute;">*</div>
<div>14</div>
</div>
</td>
</tr>
<tr>
<td align=center>
<div></div>
<div>16</div>
</td>
</tr>
</table>
In this case position: absolute tells: "Don't consider absolutely positioned div's dimensions". If you will inspect the div with number, you will see, that it takes the full width and height of parent element, like the div with asterisk is not in DOM.
May be my explanation is a little poor and not 100% correctly, but it should give you the basic understanding. For more info look through "position: absolute" area in this site or somewhere else: https://www.w3schools.com/css/css_positioning.asp
Have a look at this fiddle Here for the CSS and HTML view.
The code is:
<body>
<div class="header-bar" id="header-bar">
<div class="title-bar" id="title-bar">
<table id="header-table" class="header-table" width="100%">
<tr>
<td>
<div class="site-title" id="site-title">Site Title</div>
</td>
</tr>
<tr>
<td>
<div class="site-tagline" id="site-tagline">Site Tagline</div>
</td>
</tr>
</table>
</div>
<div class="header-login-bar" id="header-login-bar">
<div class="header-login-form" id="header-login-form">
<table>
<tr>
<th>Name</th>
<td><input type="text" name="user-email"/></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="user-pass"/></td>
</tr>
</table>
</div>
<div class="header-logged-in" id="header-logged-in">
Welcome {$user}.
Dashboard
Logout
</div>
</div>
</div>
<div id="content-bar" class="content-bar">
This is the content part
</div>
</body>
The div with id header-bar must contain all of the elements drawn in this segment, but I cannot understand why, this segment refuses to behave. I am new to design, using more of graphical tools like Dreamweaver with code and design views to make these things, even there the content gets placed all wrong.
And in the browser, the div with id header-bar does not show any text at all. The div with id header-bar reports a height of 0px in Chrome's Inspect Element.
Add overflow:auto to your header-bar div. When the child elements of any element are floated, they're removed from the normal flow of the document which is why your header-bar div reports a height of zero. Adding overflow:auto to the parent div (header-bar) restores the expected behavior.
jsFiddle example
I have this table, which is how it will look when a user posts. When a large amount of content is entered in the second td, the first td does what it should naturally do and center itself with the second one. Here is what it looks like:
http://puu.sh/YdaE
Is it possible to make it so the first td stays at the top and doesn't center itself with the second one? Because it looks kind of silly when it does...
Here is the basic jist the code:
<div id="feed">
<div class="post">
<table>
<tr>
<td><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Any help is appreciated, thanks.
Yes, with CSS.
vertical-align: top;
So you could just give a class to your first TD and apply the above-mentioned CSS.
I'm not sure I understood your question, but if you want to prevent the image on the first td to be vertically aligned just specify vertical alignment via HTML attribute as shown here:
<div id="feed">
<div class="post">
<table>
<tr>
<td valign="top"><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Add valign="top" attribute to the td tag
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.