I recently registered for a forum that let's you modify your post layout with a little bit of CSS but the problem is that at the bottom of each post it always adds a few line breaks and a couple of dashes to separate your post's content and your signature. I do not plan on ever using a signature and the only things I put in that section are the two closing tags for the post layout. What I am trying to do it crop the bottom of the inner element so that the line breaks and dashes below each post are hidden. Here's a link to my profile on the forum which contains an example post.
http://jul.rustedlogic.net/profile.php?id=3182
Keep in mind I need for the inner element (.dialogue) to always be centered vertically and horizontally. Both it's height and width are dynamic.
EDIT: Having trouble with the height of the background element.
#import "http://fonts.googleapis.com/css?family=Amatic+SC";
.background{
position:relative;
background:#30619c url(http://example.com/jul/cave-bottom.gif) repeat-x bottom left;
height:100%;
padding:60px;
text-align:center;
}
.background:before{
content:'';
position:absolute;
top:0;
left:0;
background:url(http://example.com/jul/cave-top.gif) repeat-x top left;
width:100%;
height:131px
}
.background:after{
content:'';
display:inline-block;
height:100%;
vertical-align:middle
}
.dialogue{
text-align:left;
position:relative;
display:inline-block;
vertical-align:middle;
font-smooth:never;
-webkit-font-smoothing:none;
border:16px solid transparent;
border-image:url(http://example.com/jul/yi-border.png);
border-image-slice:16;
border-image-repeat:repeat;
background-color:#286048;
padding:10px;
font-family:'Amatic SC',monospace;
font-size:24px;
color:#fff;z-index:1
}
.dialogue a{
color:#fff
}
.dialogue blockquote{
margin:10px 0;
padding:10px;
background:rgba(0,0,0,0.4);
border:none
}
.dialogue blockquote hr{
visibility:hidden;
margin:0
}
.dialogue blockquote font:first-child{
font-family:'Amatic SC',monospace;
font-size:21px
}
<td valign="top" height="220" id="post3182" class="tbl font tdbg1">
<div class="background">
<div class="dialogue" style="overflow: hidden;">
Sample text.
<blockquote>
<font class="fonts">
<i>Originally posted by fhqwhgads</i>
</font>
<hr>
A sample quote, with a
link
, for testing your layout.
<hr>
</blockquote>
This is how your post will appear.
<br><br>
--------------------
<br>
</div>
</div>
</td>
The following works at least on FF, Chrome and IE8:
.dialogue {
line-height: 1.25;
overflow: hidden;
}
.dialogue:after {
content: '';
display: block;
margin-bottom: -2.5em;
}
#import "http://fonts.googleapis.com/css?family=Amatic+SC";
.background{
position:relative;
background:#30619c url(http://lukelogiudice.com/jul/cave-bottom.gif) repeat-x bottom left;
height:100%;
padding:60px;
text-align:center;
}
.background:before{
content:'';
position:absolute;
top:0;
left:0;
background:url(http://lukelogiudice.com/jul/cave-top.gif) repeat-x top left;
width:100%;
height:131px
}
.background:after{
content:'';
display:inline-block;
height:100%;
vertical-align:middle
}
.dialogue{
text-align:left;
position:relative;
display:inline-block;
vertical-align:middle;
font-smooth:never;
-webkit-font-smoothing:none;
border:16px solid transparent;
border-image:url(http://lukelogiudice.com/jul/yi-border.png);
border-image-slice:16;
border-image-repeat:repeat;
background-color:#286048;
padding:10px;
font-family:'Amatic SC',monospace;
font-size:24px;
color:#fff;z-index:1
}
.dialogue a{
color:#fff
}
.dialogue blockquote{
margin:10px 0;
padding:10px;
background:rgba(0,0,0,0.4);
border:none
}
.dialogue blockquote hr{
visibility:hidden;
margin:0
}
.dialogue blockquote font:first-child{
font-family:'Amatic SC',monospace;
font-size:21px
}
.dialogue {
line-height: 1.25;
overflow: hidden;
}
.dialogue:after{
content: '';
display:block;
margin-bottom: -2.5em;
}
<td valign="top" height="220" id="post3182" class="tbl font tdbg1">
<div class="background">
<div class="dialogue" style="overflow: hidden;">
Sample text.
<blockquote>
<font class="fonts">
<i>Originally posted by fhqwhgads</i>
</font>
<hr>
A sample quote, with a
link
, for testing your layout.
<hr>
</blockquote>
This is how your post will appear.
<br><br>
--------------------
<br>
</div>
</div>
</td>
Try this:
.dialogue {
overflow: hidden;
line-height: 1.25;
}
.dialogue > br:last-child {
display: block;
margin-bottom: -2.5em;
}
#import "http://fonts.googleapis.com/css?family=Amatic+SC";
.background{
position:relative;
background:#30619c url(http://lukelogiudice.com/jul/cave-bottom.gif) repeat-x bottom left;
height:100%;
padding:60px;
text-align:center;
}
.background:before{
content:'';
position:absolute;
top:0;
left:0;
background:url(http://lukelogiudice.com/jul/cave-top.gif) repeat-x top left;
width:100%;
height:131px
}
.background:after{
content:'';
display:inline-block;
height:100%;
vertical-align:middle
}
.dialogue{
text-align:left;
position:relative;
display:inline-block;
vertical-align:middle;
font-smooth:never;
-webkit-font-smoothing:none;
border:16px solid transparent;
border-image:url(http://lukelogiudice.com/jul/yi-border.png);
border-image-slice:16;
border-image-repeat:repeat;
background-color:#286048;
padding:10px;
font-family:'Amatic SC',monospace;
font-size:24px;
color:#fff;z-index:1
}
.dialogue a{
color:#fff
}
.dialogue blockquote{
margin:10px 0;
padding:10px;
background:rgba(0,0,0,0.4);
border:none
}
.dialogue blockquote hr{
visibility:hidden;
margin:0
}
.dialogue blockquote font:first-child{
font-family:'Amatic SC',monospace;
font-size:21px
}
.dialogue {
overflow: hidden;
line-height: 1.25;
}
.dialogue > br:last-child {
display: block;
margin-bottom: -2.5em;
}
<td valign="top" height="220" id="post3182" class="tbl font tdbg1">
<div class="background">
<div class="dialogue" style="overflow: hidden;">
Sample text.
<blockquote>
<font class="fonts">
<i>Originally posted by fhqwhgads</i>
</font>
<hr>
A sample quote, with a
link
, for testing your layout.
<hr>
</blockquote>
This is how your post will appear.
<br><br>
--------------------
<br>
</div>
</div>
</td>
Related
Why btnow has some top margin?
Its css is top:0.
.btnowwrap{
position:relative;
height:20px;
background:gold;
}
.btnow{
position:absolute;
right:9px;
top:0;
cursor:pointer;
font-size:19px;
color:#777;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>♻</div>
</div>
Apply line-height:100%;
.btnowwrap{
position:relative;
height:20px;
background:gold;
}
.btnow{
position:absolute;
right:9px;
top:0;
cursor:pointer;
font-size:19px;
color:#777;
line-height: 100%;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>♻</div>
</div>
The icon is in top:0 this space is because the height of icon(see image):
Use line-height: 1em;
.btnowwrap{
position:relative;
height:20px;
background:gold;
}
.btnow{
position:absolute;
right:9px;
top:0;
cursor:pointer;
font-size:19px;
color:#777;
line-height: 1em;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>♻</div>
</div>
If you dont want to reduce font size then use
.btnow { line-height: 100% }
it will fit. You can reduce font size too but line-height is the best solution.
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.
I want to position an input element inside a div , but for some reason the input element is overflowing the div. What is the issue?
http://jsfiddle.net/aklintsevich/p1o584wg/
html:
<section class="full" id="third">
<div id="contact">
<form action="#" method="post" id="form">
<div class="email_info top white_border icomoon">
<div id="name_font" class="icon center_text">
</div>
<div>
<input type="text" name="firstname">
</div>
</div>
<div class="email_info bottom white_border icomoon">
<div id="email_font" class="icon center_text">
</div>
<div >
<input type="text" name="firstname">
</div>
</div>
</form>
</div>
</section>
css:
#third{
background-color:#22AFA0;
}
#contact{
background-color:blue;
margin:0px auto 30px auto;
position:relative;
top:30%;
width:65%;
height:30%;
background-color:red;
}
.email_info{
height:40%;
width:45%;
position:absolute;
background-color:green;
}
.message{
position:absolute;
right:0px;
height:100%;
width:45%;
background-color:green;
}
#message_icon{
height:40%;
width:20%;
background-color:blue;
border-right:1px solid white;
border-bottom:1px solid white;
}
#message_icon:before{
color:white;
display:block;
width:100%;
height:100%;
text-align:center;
line-height:80px;
font-size:2.5em;
content:"\e610";
}
.text_position{
float:right;
position:absolute;
}
.top{
top:0px;
}
.bottom{
bottom:0px;
}
#form_button{
position:relative;
width:65%;
height:20%;
/*background-color:orange;*/
}
.icon{
width:20%;
height:100%;
background-color:blue;
border-right:1px solid white;
}
.icomoon{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.white_border{
border:2px solid white;
}
.center_text{
text-align:center;
}
#name_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e611";
}
#email_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e60f";
}
set the attribute 'overflow' to 'auto' in relevant div s. as an example,
.email_info{
overflow : auto;
}
Divs have a default display of block,therefore, to have two divs to be able to line up on the same line you have to declare them as inline-block.
.email_info{
display:inline-block;
}
I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.
I have this code :
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
</div>
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
}
.ultime_box_photo
{
width:120px;
margin-right:15px;
float:left;
}
.ultime_text
{
float:left;
width:299px;
}
.ultime_box_title
{
color:#000000;
font-weight:bold;
font-size:12px;
text-transform:uppercase;
line-height:12px;
padding-bottom:13px;
}
.ultime_box_description
{
color:#FFFFFF;
font-size:11px;
line-height:13px;
padding-bottom:13px;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
}
a.ultime_box_vai:hover
{
text-decoration:underline;
}
And I'd like to put the link in the bottom of the container div (ultime_box), without using height in the previous divs.
How can I do this?
Here's the solution: http://jsfiddle.net/N7GWV/1/
Give .ultime_box position: relative and your link position: absolute; bottom: 0.
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
position: relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position: absolute;
bottom: 0;
}
.ultime_text
{
float:left;
width:299px;
position:relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position:absolute;
bottom:0px;
}
this should do what you need. Basically, it's all depending on the position attribute of the divs.
This quick guide should clean you out about it.
You could make your bottom link have this css:
a.bottomLink{
float:left;
width:100%;
}
As your container div height is dynamic (based on content), your bottom link will be on the bottom. If I understood, you want to place link on the bottom of ultime_box, so your html should look like:
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
bottom
</div>