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
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;
}
I am inserting text into a class <span class="span4 offset4"> using templates. In the css, I used text-align: centre; but the text is not centering. It's pushed to the left side of the div. I can see this because I also color the background of the div when I put the text in it. I even tried to wrap the message in <p> tags but it's not doing anything. Can you tell me what I'm doing wrong?
<p>{{= message }}</p>
html
<div class="row">
<span class="span4 offset4"></span>
</div>
css
.span4.offset4
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 15px;
font-weight: bold;
min-height: 25px;
text-align: centre;
}
It's center, not centre. Moreover, display: inline elements don't work with text-align. Make the span display: block or something.
Give text-align:center to your parent div inside row class.
try adding these lines to css
//to define size of div
.row
{
width:30%;
}
then add these lines to .span4.offset4
margin:auto auto;
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.
I have a single line of text that looks like this:
GIVE US A CALL AT ###.###.###
I want the phone number to be significantly bigger than the text and I want it all bottom aligned within the div.
I can't seem to get this to work... what I am missing?
Current HTML:
<div class="accessSlogan">
<div class="access-slogan-text">GIVE US A CALL AT </div>
<div class="access-slogan-number">###.###.###</div>
</div>
Current CSS:
.accessSlogan{
position: relative;
float: right;
display: inline;
}
.access-slogan-text {
display:inline;
font-size: 1.2em;
line-height: 2em;
padding-right: 6px;
vertical-align: text-bottom;
}
.access-slogan-number{
position: relative;
float: right;
display:inline;
font-size: 1.8em;
line-height: 2em;
vertical-align: text-bottom;
}
Use the <strong> tag and style accordingly.
<div class="accessSlogan">
GIVE US A CALL AT <strong>###.###.###</strong>
</div>
CSS:
.accessSlogan{
float: right;
}
.accessSlogan strong {
font-size: 1.8em;
position:relative;
bottom:0.4em;
}
The point is to use the existing "semantic" HTML to work with you and avoiding over-complicating things. The <strong> tag is what you mean, so use it:-)
The relative position of the strong text will need to be adjusted to align perfectly. 0.4em is a starting point (half of the extra height), but it depends upon the size of the accessSlogan text.
Both your markup and CSS seem over-complicated, although without knowing where this is to be positioned on a page it's hard to know if that's necessary or not.
At it's simplest this will achieve it:
.access-slogan {
float: right;
text-transform: uppercase;
}
.access-slogan .access-slogan-number {
font-size: 1.8em;
}
<p class="access-slogan">Give us a call at <span class="access-slogan-number>###.###.###</span></p>
Note that you can't apply float and display:inline to an element since float applies display:block along with it's own document flow rules. You'll also note I've uppercased the text in CSS rather than in the source HTML, since this is a display artefact.
I think there is a much more minimal set of CSS you can use for this. Is this demo here what you were after?
use <span> instead of <div>. It will solve your problem
<div>
call me at <span>0000-000</span>
</div>
or
<div>
<span>call me at</span><span>0000-000</span>
</div>
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.