I want to display my subtitles with unique style. So we use the following css code for style
.title-1 {
border-bottom: 1px solid #4db2ec;
margin-bottom: 10px;
padding-bottom: 4px;
position: relative;
font-size: 16px !important;
color: #FFF }
.title-1 > span {
background: #4db2ec;
width: auto;
padding: 4px 7px }
Now I am insert advertisement block with following html code with wrap text.
<div style="float: right; margin-left: 20px;">
<img src="http://domain.com/ad.jpg" height="600" width="160">
</div>
<h2 class="title-1"><span id="location">My Sub Title</span></h2>
now my title style is operlap in my advertisement block. how to solve this?
Here is a jsFiddle: http://jsfiddle.net/f025d5Lh/
Simplest is to add z-index:-999; to .title-1, this will push down the relative div below any div
Demo
CSS
.title-1 {
border-bottom:1px solid #4db2ec;
margin-bottom:10px;
padding-bottom:4px;
position:relative;
font-size:16px !important;
z-index:-999; /* only change */
color:#FFF
}
.title-1 > span {
background:#4db2ec;
width:auto;
padding:4px 7px
}
Related
I have spent considerable time researching this and could not find a working solution from the other answers presented here. With that said, I apologize if this seems to be a duplicate; none of the researched solutions worked and I am completely baffled as to why.
The following is the portion of code which is slightly off-center. Oddly, I have the same set-up on a different page - the only difference being one link in the table says "Resume" instead of "Main" - and that is centered perfectly.
EDIT: Sorry, here is the fiddle with the changes suggested by blearn and UndoingTech.
<body class="center style">
<div class="center style">
<object data="Resume.pdf" type="application/pdf" width="100%" height="600px">
</object>
<div style="center" align="center">
Download Resume
</div>
<div style="width:50%;margin:0 auto; justify-content:center" align="center">
<table class="center">
<tr style="color:orangered;text-align:center" class="linkoutline">
<td><a href="index.html"
class="link">Main</a></td>
<td><a href="projects.html"
class="link">Projects</a></td>
<td><a href="https://github.com/mygithub"
class="link">
GitHub</a></td>
<td><a href="https://www.linkedin.com/in/mylinkedin"
class="link">
LinkedIn</a></td>
</tr>
</table>
</div>
</div>
</body>
Here is the css formatting:
html, body
{
padding:0;
margin:0;
}
body.center
{
margin-left:15%;
margin-right:15%;
}
body.style
{
font-family:Helvetica;
font-size:12pt;
background-color:#FFAB91;
}
div.center
{
margin-left:1%;
margin-right:1%;
padding-left:1%;
padding-right:1%;
}
div.style
{
background-color:white;
overflow:hidden;
height:100vh;
}
p.center
{
/*
Should be slightly narrower than the div
*/
margin-left:5%;
margin-right:5%;
}
td
{
/*
Make cell spacing with a transparent horizontal border
*/
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
td.vertpadding
{
/*
Some space between table cells
*/
border-bottom: solid 40px transparent;
}
table.center
{
position:absolute;
bottom:20px;
}
ol, ul
{
margin-top:0;
margin-bottom:0;
padding-left:15;
padding-right:15;
}
h4.small
{
margin-top:0;
margin-bottom:5;
color:steelblue;
font-weight:normal;
font-size:12pt;
}
a
{
color:orangered;
text-decoration:none;
}
a:visited
{
color:firebrick;
}
a:hover, a:active
{
/*
Increase font upon mouseover
*/
font-size:125%;
}
Many solutions recommended doing things such as set the parent container's text-align to center; that did not work. Reducing the child div width and setting margin to 0 auto only worked on the other page, but not this one. The table is only off by about a half an inch. If I set the left margin to something like 30%, it works, but I would like to have the margin be dynamically determined by the dimensions of the parent div if at all possible.
Remove position:absolute from
table.center
{
position:absolute;
bottom:20px;
}
This will make the table fall within its containing div's positioning. Right now, it is statically placing it at an exact location on the html page.
I have made a few edits to your code in this fiddle. Here is a summary of what I did:
Like bleam said, I took out the position code. I added text-align: center to the parent div and margin:auto to the table.
#edited {
border: 5px solid red;
text-align: center;
/* Added after EDIT */
position: absolute:
bottom: 20px;
}
table.center {
/*position: absolute;
bottom: 20px;*/
border: 5px solid blue;
margin: auto;
}
I also changed this line <div style="width:50%;margin:0 auto; justify-content:center" align="center"> to this <div id="edited">. The borders are not needed. They are only there so you can see the boundaries.
EDIT: I have added the position code to the #edited part. That might work for you.
You can center the table keeping it absolutely positioned using the transform trick as shown below so that bottom:20px; works as expected
table.center {
position: absolute;
left:50%; /*add this */
bottom: 20px;
transform: translate(-50%); /* and this */
border: 5px solid red;
/*margin: auto; no longer needed*/
}
html,
body {
padding: 0;
margin: 0;
}
body.center {
margin-left: 15%;
margin-right: 15%;
}
body.style {
font-family: Helvetica;
font-size: 12pt;
background-color: #FFAB91;
}
div.center {
margin-left: 1%;
margin-right: 1%;
padding-left: 1%;
padding-right: 1%;
}
div.style {
background-color: white;
overflow: hidden;
height: 100vh;
}
p.center {
/*
Should be slightly narrower than the div
*/
margin-left: 5%;
margin-right: 5%;
}
td {
/*
Make cell spacing with a transparent horizontal border
*/
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
td.vertpadding {
/*
Some space between table cells
*/
border-bottom: solid 40px transparent;
}
#edited {
border: 5px solid red;
text-align: center;
}
table.center {
position: absolute;
left:50%;
bottom: 20px;
transform: translate(-50%);
border: 5px solid red;
/*margin: auto;*/
}
ol,
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 15;
padding-right: 15;
}
h4.small {
margin-top: 0;
margin-bottom: 5;
color: steelblue;
font-weight: normal;
font-size: 12pt;
}
a {
color: orangered;
text-decoration: none;
}
a:visited {
color: firebrick;
}
a:hover,
a:active {
/*
Increase font upon mouseover
*/
font-size: 125%;
}
<body class="center style">
<div class="center style">
<object data="Resume.pdf" type="application/pdf" width="100%" height="600px">
</object>
<div style="center" align="center">
Download Resume
</div>
<div id="edited">
<table class="center">
<tr style="color:orangered;text-align:center" class="linkoutline">
<td>Main
</td>
<td>Projects
</td>
<td><a href="https://github.com/mygithub" class="link">
GitHub</a>
</td>
<td><a href="https://www.linkedin.com/in/mylinkedin" class="link">
LinkedIn</a>
</td>
</tr>
</table>
</div>
</div>
</body>
This is the fiddle demo
I want to align group 2 to the center of the div so that the bottom border of the div be aligned to the middle of the text. However when I assign the text a width, it cannot be aligned to the center. If I remove the width, then the text takes up the whole line, so that the bottom border of the div cannot been seen. How shall I solve this problem?
HTML code:
<div class="group-name">
<p>Group1</p>
</div>
CSS:
.group-name{
border-bottom: 1px solid #979797;
}
.group-name p{
display:block;
margin-bottom: -9px;
width:100px;
font-family: "Open Sans",sans-serif;
text-align:center;
font-size: 18px;
color: #16A085;
background-color: #F8F8F8;
}
from your description, it looks like you are trying to put your text centered and in the middle of the border of the parent div:
.group-name{
border-bottom: 1px solid #979797;
width:100%;
height: 10px;
}
.group-name p{
display:block;
margin: 0 auto -7px ;
background: #fff;
width:100px;
text-align:center;
}
http://jsfiddle.net/92Uu7/4/
If you want it in the center together with a width you can do.
group-name{
border-bottom: 1px solid #979797;
}
.group-name p{
display:block;
margin: 0 auto;
margin-bottom: -11px;
width: 60px;
font-family: "Open Sans",sans-serif;
font-size: 18px;
color: #16A085;
background-color: #F8F8F8;
}
JSFiddle
You need to use margin:auto (or margin-left:auto; margin-right:auto;) to align block level elements to the middle of the line if you are setting a width on them
Example
Otherwise you could make the element an inline-block element and then give it a width:
inline-block
You can try to give the .group-name p -> margin: 0 auto;
.group-name p{
display:block;
margin-bottom: -9px;
width:100px;
/* add this line */
margin: 0 auto;
font-family: "Open Sans",sans-serif;
text-align:center;
font-size: 18px;
color: #16A085;
background-color: #F8F8F8;
}
Just use text-align property
text-align:center;
DEMO
just add text-align to your css class like this :
.group-name{
border-bottom: 1px solid #979797;
text-align:center;
}
fiddle demo
Refer to this JS Fiddle
.group-name {
border-bottom: 1px solid #979797;
}
.group-name p {
display:block;
margin-bottom: -9px;
text-align: center;
font-family:"Open Sans", sans-serif;
font-size: 18px;
color: #16A085;
background-color: #F8F8F8;
}
Use text-align
text-align: center;
You talk about group 2 but it is nowhere in your code?
try adding text-align and text-decoration properties
.group-name p{
display:block;
margin-bottom: -9px;
font-family: "Open Sans",sans-serif;
font-size: 18px;
color: #16A085;
background-color: #F8F8F8;
text-align:center;
text-decoration:underline;
}
Update following CSS -
.group-name{
border-bottom: 1px solid #979797;
text-align:center;
}
use text-align property
.group-name{
border-bottom: 1px solid #979797;
text-align:center;
}
I have a <div> and a <button>, but for some reason, the button will not stay in the div.
I have tried to clear the div, as well as float: left but it has not helped.
I have also added padding to the bottom of the div, but I don't think that is the solution.
My code:
<div class="service-text text2">
<p>
this is some text
</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
</div>
JSFiddle
Usually parent div set its height auto to its child heights, but padding you assigned to button-learn is causing the issue.
you just need to set display:inline-block; on your anchor tag
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
.button-learn {
margin: 2px;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans',helvetica;
background: #69c773;
display:inline-block;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
Here is fiddle
Floating both the elements seems to do what you want, unless you want the button to be next to the text.
add these:
.service-text {
float: left;
}
.button-learn {
float:left;
}
or check: http://jsfiddle.net/Milanzor/Qt9u3/4/
working demo
Set document height first:
body, html {
height:100%
}
then set .service-text height:
.service-text {
margin:0;
width:100%;
height:100%; /* change this from auto */
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
and it works!! :)
EDIT
div inside another div
HTML
<div id="parent">
<div class="service-text text2">
<p>this is some text</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
CSS
body, html {
height:100%;
margin:0;
padding:0;
}
#parent {
height:100%; /* remove this and everything falls out of place*/
}
.service-text {
margin:0;
width:100%;
height:100%;
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.service p {
margin:0;
padding-top:5px;
padding-bottom:10px;
padding-right:7px;
padding-left:15px;
font-family:'PT Sans', 'Arial', 'Open Sans';
font-size:14px;
line-height:22px;
color:white;
display: block;
position:relative;
}
.button-learn {
margin: auto;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans', helvetica;
background: #69c773;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
.button-learn:hover {
color: #51A65F;
}
</div>
</div>
Explaination : you just need to set the height of the div always, once you set it.....you'll get the desired view!
I'm creating a box containing some image links, and currently I've got something that looks great on Chrome and Safari, but wraps at Firefox's default zoom level. Zooming in makes the box look fine, but at the normal zoom level they're wrapped. Here's what it looks like normally, on Chrome:
...and this is how it looks on Firefox:
The strange thing about this is that the right box isn't completely wrapped: some of the top and bottom borders are visible on the first line and I can't make sense of why it is wrapped at this particular point. This is what the HTML looks like:
<div class="clearfix buyTrackContainer">
<div class="buyTrackBox">
<p>Buy this Track</p>
<div class="buyLinksBox">
<div class="buyLinksBoxLeft">
<div class="d-itunes"></div>
</div>
<div class="buyLinksBoxRight">
<div class="d-amazon"></div>
</div>
</div>
</div>
<div class="buyTrackBox">
<p>Buy on Vinyl/CD</p>
<div class="buyLinksBox">
<div class="buyLinksBoxLeft">
<div class="b-ebay"></div>
</div>
<div class="buyLinksBoxRight">
<div class="b-amazon"></div>
</div>
</div>
</div>
...and the relevant CSS is as follows:
.buyTrackContainer {
text-align: center;
}
.buyTrackBox {
display:inline-block;
border:1px solid #ddd;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 5px;
width:46%;
text-align:left;
background-color: #fff;
border-radius: 3px;
border-bottom:3px solid #ddd;
}
.buyLinksBoxLeft {
display:inline;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-radius: 3px 0px 0px 3px;
padding: 12px 4px 8px 8px;
text-align:center;
vertical-align:center;
background-color:#fff;
}
.buyLinksBoxRight {
display:inline;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-radius: 0px 3px 3px 0px;
border-left:0px;
padding: 12px 8px 8px 4px;
text-align:center;
vertical-align:center;
background-color:#fff;
}
.buyLinksBox {
display:block;
text-align:center;
padding-bottom:10px;
padding-top:8px;
}
div.d-itunes {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.d-amazon {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.b-ebay {
display:inline-block;
margin-left:0px;
width:50px;
height:17px;
background:url(/images/misc/eBay-buy-button.png) no-repeat;
}
I'm relatively new to proper CSS design so I'd appreciate any pointers about how I could improve my coding style. Does anyone know what might be happening here that could cause this?
Ill try with the first container change the add the following to
.buyTrackBox {
white-space:nowrap
}
.buyLinksBoxLeft {
float:left;
}
.buyLinksBoxRight {
float:right;
}
More over try dividing the width of buyLinksBoxLeft and buyLinksBoxRight in percentages so as to fit th parent container some thing around 40% may do. do the same with the buyLinksBox div and children
on your class, 'buyLinksBoxLeft' & 'buyLinksBoxRight' change
display: inline;
to
display: inline-block;
fiddle: http://jsfiddle.net/aqAVy/
That should sort it out.
Avoid redundancy in names... eg. change .BuyLinksBoxRight (son of .BuyLinksBox) to just .right (same with .left)
When multiple items has a lot of common properties, group them in a common selector.
Use oneliner paddings and borders when you can.
Code will be more readable and problems will vanish.
Running Demo
.buyTrackContainer {
text-align : center;
}
.buyTrackContainer > div,
.buyLinksBox > div {
display : inline-block;
border : 1px solid #ddd;
}
.buyTrackBox {
background-color : #fff;
border-bottom : 3px solid #ddd;
border-radius : 3px;
text-align : left;
padding : 1px 3px 5px 3px;
width : 134px;
}
.buyLinksBox {
padding-bottom : 10px;
padding-top : 8px;
text-align : center;
}
.buyLinksBox > div {
background-color : #fff;
vertical-align : center;
border-bottom : 3px solid #ddd;
text-align : center;
}
.buyLinksBox > .left {
border-radius : 3px 0px 0px 3px;
padding : 12px 4px 8px 8px;
}
.buyLinksBox > .right {
border-radius : 0px 3px 3px 0px;
border-left : 0px;
padding : 12px 8px 8px 4px;
}
.buyLinksBox > div > a > div {
margin-left : 0px;
height : 17px;
width : 50px;
}
div.d-amazon, div.b-amazon {
background : url(/images/misc/Amazon-buy-button.png) no-repeat;
}
div.d-itunes {
background : url(/images/misc/iTunes-buy-button.png) no-repeat;
}
div.b-ebay {
background : url(/images/misc/eBay-buy-button.png) no-repeat;
}
I m having problem to determine from where extra padding is added to a div.
The div containing the text "Video Title" has too much padding added to it. Which is very much unwanted. And i have no idea from where this extra padding is coming.
I have added the styles, the html codes and the link to a page using this sample page.
Please have a look, I'm about to go insane.
The style --
<style type="text/css">
html *
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
table.video_list
{
width: 100%;
border-collapse: collapse;
}
table.video_list td
{
padding: 5px;
width: 33%;
}
div.vid_container
{
/*float:left;*/
/*margin-bottom:15px;
margin-left:5px;
margin-right:15px;*/
position: relative;
display: inline-block;
/*width:242px;*/
margin: 10px;
/*width: 300px;*/
}
div.vid_container div.duration
{
/*background-color:#160A07;*/
/*background-color: transparent;
background-image: url(../images/backs/duration_back_58x24.png);
background-position: center center;
background-repeat: no-repeat;*/
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #1b1b1b;
bottom:27px;
color:#FFFFFF;
float:right;
font-size:14px;
padding:4px;
position:relative;
right:2px;
text-align:center;
width:50px;
filter: alpha(opacity = 85);
opacity: 0.85;
font-weight: bold;
}
div.vid_container div.info_holder
{
width: 248px;
margin: auto;
display: block;
}
div.vid_container div.thumb_holder
{
width: 244px;
height: 184px;
vertical-align: middle;
border: solid 1px #323434;
padding: 1px;
margin: auto;
}
div.vid_container div.thumb_holder img.thumb
{
width: 236px;
height: 176px;
vertical-align: middle;
border: solid 1px #323434;
}
div.vid_container a.title
{
color:#DBA0AC;
display:block;
font-size:14px;
height:35px;
overflow:hidden;
text-decoration:none;
white-space:pre-line;
width:248px;
padding-top: 1px;
padding-bottom: 1px;
}
div.vid_container a.title:hover
{
text-decoration: underline;
}
div.vid_container div.info_holder div.info_text
{
margin-top:5px;
text-align: left;
padding-top: 1px;
padding-bottom: 1px;
}
div.vid_container div.info_holder div.time
{
color: #ccc;margin-top: 5px;font-size: 90%;
text-align: left
}
/******************************************
Videos list
******************************************/
.vid_container .site_name
{
text-transform: capitalize !important;
}
.vid_container img.thumb
{
width: 242px !important;
height: 182px !important;
border:1px solid #323434 !important;
}
/******************************************
List View
******************************************/
div.vid_container_listview
{
width: 100% !important;
}
div.vid_container_listview div.thumb_holder
{
float: left !important;
}
div.vid_container_listview div.info_holder
{
float: left !important;
margin-left: 10px;
}
div.vid_container_listview div.info_holder div.title_holder
{
min-height:30px;width:600px;
}
div.vid_container_listview div.info_holder div.info_text
{
color: #ccc;margin-top: 5px;
}
div.vid_container_listview div.info_holder div.info_text div.site_name
{
font-size: 100%;margin-top:15px;
}
div.vid_container_listview div.info_holder div.info_text div.likes_and_views
{
font-size: 100%;margin-top:15px;
}
div.vid_container_listview div.info_holder div.added_at
{
color: #ccc;margin-top: 5px;font-size: 100%;
}
div.vid_container_listview a.title
{
font-size: 16px;
font-weight: bold;
}
.float_left
{
float: left;
}
.float_right
{
float: right;
}
.clear
{
clear: both;
}
</style>
And the Html:
<div class="vid_container">
<div class="thumb_holder">
<a href="#" title="Brunette Teen Paige Taylor">
<img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
</a>
<div class="duration">30:16</div>
</div>
<div class="info_holder">
<div class="info_text">
<a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
</div>
<div class="time">16 days ago</div>
<div style="color: #ccc;margin-top: 5px;">
<div class="float_left site_name" style="font-size: 90%;">Youtube</div>
<div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
<div class="clear"></div>
</div>
</div>
</div>
The link to this sample page is: Sample Page
You need to change the div.vid_container a.title rule
remove the overflow:hidden and change the height:35px to
height:auto!important;
height:35px;
min-height:35px;
UPDATE
i see ... the problem is that the .duration box is positioned relative and so it remains in the flow of the DOM .. that is what takes the space above the .title..
you need to set the .duration to have position:absolute and margin-top:-27px; (and remove the bottom property
that should take care of all problems..
download firefox if you dont have it.
install firebug (an addon)
open up firebug in firefox and load your page.
right click on the div with video title and select inspect element
look at the style and computed tabs to see what is affecting the padding.
According to my Firebug addin, the extra padding is caused by these two properties of the <a> element contained in the <div>
div.vid_container a.title {
height:35px;
width:248px;
}
Disabling these rules in the css editor removed the extra padding (top and bottom).
Edit : It seems that the overflow could also be due to this property on the <div> :
div.vid_container div.info_holder div.info_text {
padding-top:1px;
}
You can try disabling this rule if it fits your needs better. It will remove the extra padding on the top of the div.
You will however still have extra space on the bottom of the title, which is caused by the height of the <a> element, as explained above.
div.vid_container a.title has a height of 35px which is making your link bigger. I believe this is what is causign the extra space you don't expect (found courtesy of firebug in firefox).
Edit: Didn't even notice the horizontal padding at first but as Thibault Falise there is just a width in there as well.
according to Firebug (which I would recommend you to use) and checking the link you provided that div has a padding of 1px and a top margin of 5px, as specified in the css. So there is no extra padding in itself.
As suggested, maybe you want to change the size of the a.title (height, width).