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
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
I am giving the table and div height, width has 100%. element get the 100% height but when it reach div which present in then div does not height 100%. In chrome and IE this working fine, only getting problem in Firefox. Is that I am doing anything wrong or it's problem of browser please help!
Syntax:
<div style="height:300px;width:300px;background-color:yellow;border:solid black;">
<table style="height:100%;width:100%;">
<tr>
<td>
<div style="height:100%;width:100%;background-color:red;border:solid black;">
</div>
</td>
</tr>
</table>
</div>
JsFiddle:https://jsfiddle.net/7wa7wrkk/4/
You also have to assign the 100% height to the td:
https://jsfiddle.net/yfehv1da/1/
I am also faced same problem in past, I think this is problem of Firefox browser only not fault of your code because it not applying 100% height of to ! In your case simple way handle your problem by giving "Height:100%" style to element. By this way it will work in all browser without any issue.
Syntax:
<div style="height:300px;width:300px;background-color:yellow;border:solid black;">
<table style="height:100%;width:100%;">
<tr>
<td style="height:100%;">
<div style="height:100%;width:100%;background-color:red;border:solid black;">
</div>
</td>
</tr>
</table>
</div>
JsFiddle:https://jsfiddle.net/7wa7wrkk/5/
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.
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