I have the following code, and my table(the table contains the two text lines next to the image) just does not want to align vertically in the middle of the div. What to do?
Please note that I used a table for my two text lines(laminin beauty and perfectly put together), since they have different styles and I want them justified, so I put align= center on their td tags... (justify text property only works when text is in the same tag...) . My website: http://lamininbeauty.co.za/index2.html
HTML:
<div id="header">
<img class="massage" src="images/massage.png" border="none" alt="face massage" />
<div class="headerDiv">
<table margin="0" padding="0">
<tr><td align="center" class="headerText1">Laminin Beauty</td></tr>
<tr><td align="center" class="headerText2">"Perfectly put together"</td></tr>
</table>
</div>
</div>
CSS:
#header{
width: 100%;
height: 100px;
background: #000000;
}
#header img{
margin-left: 50px;
vertical-align: middle;
display: inline-block;
float: left;
}
#header div.headerDiv{
display: table-cell;
margin-left: 80px;
vertical-align: middle;
}
.headerText1{
color: #fff;
font-family: impact;
font-size: 32px;
text-decoration: underline;
}
.headerText2{
color: #ee00ee;
font-family: century gothic;
font-size: 24px;
}
Thank You!
Make the div containing the table have a fixed height of 100px, since that's the height of your Wrapper div. Then, make the height of the table 100%. Here's a screenshot of what it did for me, not entirely sure if this is what you want: http://screencast.com/t/cbwcBbAoM3cZ
If the main header div will always be 100px high, remove the display property from the headerDiv element and add margin-top: 12px;.
Also it should have display: inline-block added and possibly the left margin decreased to compensate. The display property alteration will make it push off the image, not the left side of the document, as it should.
Also, if you want the two pieces of text to be aligned on the left, add text-align: left to the table tag.
Related
I'm working on a project where there is a row of controls, each of which is a button element. There is content inside of the buttons, and they are laid out in a row with flexbox. The button element centers its content vertically, and I can't figure out how to override it to vertically align it at the top of the button. The controls all need to be the same height and same width, and clicking anywhere in the borders must count as a click on the button.
This Codepen shows the problem clearly: http://codepen.io/anon/pen/RPpqdz
.wrapper {
display: flex;
flex-direction: row;
width: 80%;
}
button,
.object {
font-family: sans-serif;
font-size: 1em;
padding: 1em;
background: #fff;
flex: 1;
border: 1px solid red;
text-align: left;
}
<h1>What it looks like</h1>
<div class="wrapper">
<button>I am Content</button>
<button>I am Much Longer Content That Goes Here and Here</button>
<button>I am Content</button>
</div>
<h1>What I want it to look like</h1>
<div class="wrapper">
<div class="object">I am Content</div>
<div class="object">I am Much Longer Content That Goes Here and Here</div>
<div class="object">I am Content</div>
</div>
I realize this issue could be solved by not using button elements, but I also feel like I SHOULD be able to override this behavior of button elements. I'd like to figure this out for my own sanity!
Firstly, having h2 and p inside button is not valid HTML.
Secondly, there is no simple way to control the position of elements in a button, especially vertically.
But if you really really must use this BROKEN HTML, and only the top alignment is important, you can force the elements to take up fixed heights so that the button will align them at the top, like so:
button > h2 {
height: 48px;
}
button > p {
height: 16px;
}
I must say this is still not exactly the same as using <div>, so I don't know if this is sufficient.
In any case, do seriously try to convince those in charge of the "larger context of the project" to use proper valid HTML.
Edit:
If only inline elements are used inside the button, the problem becomes more manageable. The only caveat is: you need to know beforehand the height of the button. You can then simulate top-bottom flow using paddings.
button {
padding-top: 1em;
padding-right: 1em;
padding-bottom: 5em; /* make sure bottom + top padding == height */
padding-left: 1em;
height: 6em;
}
Still probably not ideal - feels like a heavily plastered hack solution.
*I'm not sure what do you want and what do you mean by "how to override it to vertically align it at the top of the button?"? but I hope this code is what you want.(same height, width and even with spaces also buttons matching with div (.objects).
.wrapper {
display: inline-flex;
display: -moz-inline-box;
width: 90%;
}
button, .object {
font-family: sans-serif;
font-size: 1em;
padding: 1em;
background: #fff;
border: 1px solid red;
text-align: left;
margin: 0em 0.3em 0em 0em;
}
Alright, so I'm trying to make a line of different text bits in html/css. This will be the precursor for a navbar. My HTML is:
<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div>
and the CSS:
.navBartext{
text-align: center;
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
}
Now, when I take the "display: inline;" out of the code, the text aligns vertically instead of horizontally, and then I can use text align to position it, but I want them all in one line. When I use display-inline though it seems to completely circumvent the text-align function (as anything put in here will be ignored). Is there something I'm missing? Perhaps I just don't know enough about the display function.
If you want to align the words horizontally, you have to use display:inline-block; so that the elements will be treated as text. Always use inline-block for the child elements and text-align:center; for the parent.
p{
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline-block;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
text-align:center;
}
VIEW DEMO
Try this, you can use <ul> element instead of div, div is better as a wrapper if u need wrap navBar:
[http://jsfiddle.net/WT7qv][1]
http://jsfiddle.net/WT7qv
I have such html code:
<body style="text-align: center;">
<div style="background-color: #014156; text-align: center; width: 985px; margin:6px auto;">
<div style="background-color: #a6a6a6; width: 975px; background-image:url('shadow.gif'); background-repeat:repeat-x; background-position: center top; margin: 6px; overflow:hidden;">
<div style="float:left; width: 674px; text-align: center; color:#056c02; margin-left: 5px; margin-top: 10px; font-size: 20opx;" title="Product title"><span style="color: #d2ff00">"</span><span style="background-color: #d2ff00">[[Title]]</span><span style="color: #d2ff00">"</span><p style="text-align: left; font-size: 14px; margin-bottom: 5px;" title="Description">[[Description]]</p></div>
<div style="float:left; width: 301px; text-align: center; " title="General information (Image, stock, price)">[[Picture1]]<BR><SPAN style="FONT-SIZE: 9px; background-color: #FFFFFF;">Image is for illustrative purposes only. Please refer to product description.</SPAN></div>
</div>
Which results:
In Gray backgrounded div I need that two divs would align inline, and result would be like this:
What should I change, where is the problem?
P.s. my styles is described in tags because I dont have ability to use css for this because of some host reasons. So please don't start telling me about it :)
You need to lower the width of either the left div or the right div.
Lowering the first div to 650px for example fixes the problem.
Your logic was right: 674px + 301px does equal 975px but you didn't account for margins and padding and borders in those values. Make the "real" width less than or equal to 975px
Instead of float: left, try with display: inline-block, that should work.
You have a p tag which is a block lined up next to and inline span. Add either inline or inline-block to the p tag, depending on your requirements. Another possibility is you could change the p to a span.
I've been trying to figure out how to make a row with 4 colums using div-elements.
The first and the third column should be 46px wide. The second and fourth column should be 50% of the left place (like 100% window width - 46*2) wide. I realized that already as you can see here in the first grey box.
Well, the text of the second and fourth column can be longer and I want it to break in the div .
The second grey box shows you how it looks like when the text is longer.
The third grey box shows you another try with 'display:table-cell'. The only problem is that the width of 50% of the second column just decreases while the width of the fourth column increases.
I need both columns to have the same width. Have you got an idea how I to achieve it?
Thank you in advance.
I decided to adapt your display: table-cell version.
The most important change was adding table-layout: fixed. What that does is equally distribute the remaining available width between the columns without a specified width.
See: http://jsfiddle.net/thirtydot/5p5V9/2/
CSS:
.outer {
color: #ffffff;
background-color: #373737;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
}
.inner > div {
display: table-cell;
}
.alignC {
text-align: center;
font-weight: bold;
color: #949494;
background-color: #2e2e2e;
}
.first, .alignC {
width: 46px;
font-weight: bold;
}
.alignR, .alignL {
background: #666;
}
HTML:
<div class="outer">
<div class="inner">
<div class="first">1</div>
<div class="alignR">r</div>
<div class="alignC">m</div>
<div class="alignL">This long text shall break in the div</div>
</div>
</div>
Browser support for display: table-cell.
When I change the size of a font in CSS, how do I make it so no matter what size the font is (from 12px to 200px), that the "Cap Height" (pic) of the text will always 'visually' have 10px padding on top?
Otherwise what I'm doing is every time I change the font size, I have to go back and reposition the top/margin-top etc.
Here's what I have:
CSS:
#header .statement {
position: relative;
background: white;
padding-top: 10px;
display: inline;
float: left;
margin-left: 0;
margin-right: 0;
width: 960px;
}
#header .statement h3 {
position: relative;
font-size: 160px;
letter-spacing: -10px;
font-weight: bold;
color: #141414;
font-family: Helvetica, sans-serif;
text-align: center;
}
HTML sample:
<div id='header'>
<div class='intro'>
Stuff before the statement
</div>
<div class='statement'>
<h3>
<p>A Statement</p>
</h3>
<div class='large_spacer'></div>
</div>
<div class='clearfix'></div>
</div>
This is what it looks like with line-height: 0:
alt text http://ilove4d.com/ex/css-typography.png
This is with line-height: 1:
alt text http://ilove4d.com/ex/css-typography-2.png
If I change the font-size from 160px to 20px, the white space proportionally gets smaller... How do I get around that?
Note: it's adding like 20px extra whitespace, even if margin:0;padding:0;...
If you really mean "on top" of the cap height, and not somehow inside the cap height margin, then you can apply the CSS padding to either the font element or its parent container:
<span class="something">Web Typography</span>
span.something {padding-top: 10px;}
OR...
<div class="something"><span>Web Typography</span></div>
.something {padding-top: 10px;}
One of the approaches will be suitable depending on what other styles you are applying.
Try adding padding-top:10px to #header .statement h3 {}
edit:
did you reset the values for #header .statement h3 p {}?
Otherwise what I'm doing is every time
I change the font size, I have to go
back and reposition the top/margin-top
etc.
Why don't you set bottom and margin-bottom of the elements above and below that text instead? In this way, you won't have to modify the text styling, the gap will be there always.
Also why in the world, you can touch a font-size of more than 36px? In any case, you could also use the line-height style for that like line-height:30px; or whatever value.