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.
Related
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
For some practical reasons, I need to achieve the center / middle line inside of the div with div styling.
<div style="position: relative; left: 0px; top: 0px; width: 80px; height: 90px; border-left: solid 1px black;" onclick="this.style.background='rgba(0, 0, 0, 0.5)';" oncontextmenu="return false;"></div>
div in action -> http://jsfiddle.net/ZkC68/
How to achieve this?
If there isn't a better way, I was thinking to move for ex. left border inside, but I don't know how...
If you want to style the center line directly I think that's not possible. (no such css selector exists) However, you can do something like this:
<div id="container">
<div id="center-line">Center line</div>
</div>
And the CSS for styling as requested:
#center-line
{
text-align: center;
vertical-align: middle;
padding: 20px; //not necessary, but makes it look good imo
}
See: http://jsfiddle.net/cdkyZ/1/
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.
<div class="signup">
<div>Tenxian アカウントに必要な情報</div><br/>
</div>
<br/><br/><br/><br/><br/><br/>
<div align="center">#2009 Tenxian 利用規約
</div><br/>
<div align="center">Tenxian·English 腾闲·中国</div><br/><br/>
The code of .signup is:
.signup {
border: 1px solid #99CCFF;
position: absolute;
width: 700px;
height:450px;
left: 50px;
right: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
The problem is that
#2009 Tenxian 利用規約
Tenxian·English 腾闲·中国
is displayed in the box of <div class="signup"></div>, how to display it out of the box of <div class="signup"></div>?
I want to display
#2009 Tenxian 利用規約
Tenxian·English 腾闲·中国
at the bottom of a web page and outside of the box of <div class="signup"></div> . How to do it?
<div style="position:relative"><div align="center" >#2009 Tenxian 利用規約
</div><br/>
<div align="center">Tenxian·English 腾闲·中国</div><br/><br/>
</div>
does not work.
The problem is that your signup box is set to position:absolute. When you do this, the element is removed from the flow of the page.
The easiest solution is to simply not make it position:absolute. (If this is not possible, please revise your question so that more helpful answers can be posted.)
Your original code, simplified
<div class="signup">
<div>Tenxian アカウントに必要な情報</div>
</div>
<div class="footer">#2009 Tenxian 利用規約</div>
<div class="footer">Tenxian·English 腾闲·中国</div>
.footer {
text-align: center;
}
Note that my solution below does NOT require you to use this code. It works fine with your existing HTML markup. I'm posting this code so that future readers will be able to understand the markup more easily.
A possible solution
.signup {
border: 1px solid #99CCFF;
width: 700px;
height: 450px;
margin-left: 50px;
margin-right: auto;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
}
This makes your signup box take up the proper amount of space in the flow of the page. Here are the changes:
Remove position:absolute: This causes the signup box to display as a regular statically positioned box
Change left and right to margin instead: When a block-level box is displayed statically, it does is not affected by top, left, and so on. Instead, we use margins to push the box over to where we want it to be.
{overflow:visible;} might work