Hey I've been having some trouble figuring out this problem. I have a DIV that I want to be only as tall as the text within it, but for some reason it insists on being a little bit taller. Here's what it looks like:
http://admiraltheband.com/index3956.html
I want the red border to hug around the text instead of being taller. Here's the codes.
/*CSS:*/
p {
color:#fff;
margin:0;
padding:0;
vertical-align:middle;
}
.separator {
height:48px;
width:1px;
background-color: #000;
margin:0 auto;
padding:0;
}
.links {
overflow:auto;
margin:0 auto;
width:375px;
}
.toptext {
color:black;
font-family: "Palatino Linotype", Times, serif;
font-weight:bold;
font-size:40px;
margin:0 auto;
padding:0;
vertical-align:middle;
}
.facebook {
float:left;
text-align:center;
vertical-align:middle;
/* margin-top:-4px; */
padding:0;
border:1px solid red;
}
.youtube {
float:right;
text-align:center;
vertical-align:middle;
/* margin-top:-4px; */
padding:0;
border:1px solid red;
}
a {
padding:0;
margin:0;
}
HTML:
<div class="links">
<div class="facebook">
<a href="https://www.facebook.com/admiralmusic"
target="_blank"><p class="toptext">Facebook</p></a>
</div>
<div class="youtube">
<a href="https://www.youtube.com/channel/UCXCmjrxe-ySnvigewJvGbfQ"
target="_blank"><p class="toptext" style="margin:0;padding:0;">YouTube</p></a>
</div>
<div class="separator">
</div>
</div>
I've been putting 0 padding and 0 margin on the paragraphs and all the parent elements, but to no avail. I commented out the negative margin which I might end up using to get things aligned. I'm just curious as to why this DIV is stretching a little bit.
Any help is greatly appreciated :)
Try adding line-height: 1; to your classes .facebook and .youtube.
Make the line-height attribute same as the height of your p
.toptext{
line-height:100%;
}
Without a little something to play around with its hard to get to the root of the problem. However you seem to have everything at 0px. There are some defaults paddings, margins etc on browser that can be reset using the following.
* {
margin: 0;
padding: 0;
}
You can just add negative margins to the one class:
.toptext {
color: black;
font-family: "Palatino Linotype", Times, serif;
font-weight: bold;
font-size: 40px;
margin: 0 auto;
padding: 0;
vertical-align: middle;
line-height: 100%;
margin-top: -4px;
margin-bottom: -5px;
}
The last two css rules I have added. You can easily edit them to get the red border closer or further away.
margin-top: -4px;
margin-bottom: -5px;
PS: You need to remove the style="margin:0;padding:0;"inside the p.toptext for "YouTube" for the above change to have effect on it.
You can remove the overflow code from .links class and put height:43px;to .separatorclass.
Thank You
Related
I have a div that has text and images inside, it's 190px x 190px and I would like to have everything vertically centered.
I've tried looking on SO and Google and can't seem to find just a simple answer to do so.
What's the simplest way of doing this?
Fiddle
HTML:
<div class="block">
<h2>TITLE</h2><br/>
<img src="...." width="190px"/>
<p>Hello world</p>
</div>
CSS:
.block {
position:relative;
width:190px;
height:190px;
background-color:FFF;
margin:10px;
float:left;
left:-10px;
text-align: center;
padding:10px;
border:solid 1px #CCC;
font-size:small;
}
.block p {
text-align: left;
}
Hi you can use this two properties:
.block {
display:table-cell;
vertical-align:middle;
}
and remove the float:left. Review this demo http://jsfiddle.net/kGt54/17/ and ask any question.
Edit
If you want to keep the float:left you need to make an external container who float and have the margin :
.blockC {
float:left;
margin:10px;
}
New Demo http://jsfiddle.net/kGt54/29/
.block {
position:relative;
background-color:FFF;
margin:10px;
float:left;
left:-10px;
text-align: center;
padding:10px;
border:solid 1px #CCC;
font-size:small;
}
.block p {
text-align: center;
}
just remove the width:190px; and height:190px; in the .block{} and in .blick p{} just change the text-align : left; to text-align : center; i hope thats what you want to achieve.. happy coding.
Can someone tell me why the contents of page-view-count & num-of-days div spills into top-header in my implementation?
Markup:
<div id="top-stats">
<div id="page-view-count">count</div>
<div id="num-of-days">num of days</div>
</div>
<div id="top-header"This is a test</div>
CSS
#top-stats{
width: 100%;
}
#page-view-count, #num-of-days{
color: #666;
text-shadow:1px 1px #FFFFFF;
font-size:13px;
font-weight: bold;
padding-bottom: 5px;
}
#page-view-count{
float:left;
}
#num-of-days{
float:right;
}
#top-header{
width:100%;
display:block;
background-color:#DBDB70;
border-radius:3px;
}
If I were to remove the float property it stacks up nicely inside top-stats.
See fiddle
I'm probably missing some simple rule but I'm probably looking too closely and need another pair of eyes..
#top-header{
clear: both;
width: 100%;
display:block;
background-color:#DBDB70;
border-radius:3px;
}
Fiddle
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.
I am trying to something pretty simple.
I have two buttons inside a div. One needs to be float right, one needs to be float left
<div class="btnwrapper">
<div class="btnright"><span>Continue</span></div>
<div class="btnleft"><span>Back</span></div>
<div style="clear:both;"></div>
</div>
And the corresponding CSS
.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }
Here is the results I'm getting in IE7. All other modern browsers handle this correctly.
Remove float: right from a.button.
With it: http://jsfiddle.net/K8XQr/
Without it: http://jsfiddle.net/K8XQr/1/
They look identical, except that losing float: right fixes it in IE7.
I found this article and I decided that I liked the way they styled links and buttons.
So I took the CSS from the article...
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
Then I have several buttons in a row I want to use like this...
<div class="buttons">
<img src="pict1.png" class="positive" alt=""/>Button 1
<img src="pict2.png" alt=""/>Button 2
<img src="pict3.png" class="negative" alt=""/>Button 3
</div>
See this example: http://reljac.com/csstest.php
But that row of buttons may need to be aligned center, not all to the right or left. If I change the CSS to...
.buttons a, .buttons button{
/*display:block;
float:left;*/
margin:0 7px 0 0;
The buttons no longer appear correctly when there is an image, specifically in IE 6,7 & 8.
See this example: http://reljac.com/csstest_wo.php
I can change the float to right to get the buttons to align right but I can't figure out what to do to get them centered (like in a <td></td>).
So the short of it is I want to use the style as it is but I also need to be able to center justify the buttons if necessary.
Try adding this to the CSS:
.buttons
{
text-align:center;
margin: 0px auto 0px auto;
}
The auto makes the margins equal on each side. The text-align is a bodge for older browsers.
EDIT:
Add an extra div around the buttons called buttonwrapper. then apply this CSS
.buttonwrapper
{
position:relative;
float:left;
left:50%;
}
.buttons
{
position:relative;
float:left;
left:-50%;
}
Method taken (but not tested) from http://www.pmob.co.uk/temp/centred-float4.htm
I found that when you have a parent div float left and a child div you're trying to center, a lot of times people forget inheritance.
HTML:
<div class="parent">
<div class="child">
Text
</div>
</div>
CSS:
.parent {
float: left;
width: 300px;
}
.child {
float: none; /* <-- IMPORTANT! */
width: 200px;
margin-left: auto;
margin-right: auto;
}
IMPORTANT :
Inheritance states that the child div is also floated left. So, make sure that the child div has no float, then margin: auto like usual.