Basically I need that article publishing date (1/9/2016) lays or aligns on the bottom inside the container. Right now the date sits just right under the text, but I need it to lay on the bottom of the container. my site is watchathletics.com
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
nt increases.
You can absolute position the element.
In this example I just positioned it at the right-bottom:
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
bottom: 0;
right: 0;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
you can change your class .top_pub_date to:
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
right: 0;
bottom: 0;
}
What you are looking for is
position: absolute;
bottom: 0;
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
Related
I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.
You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>
You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>
I have a div element that will display some message indicating a point on my page.
The arrow should be displayed on the left hand side of the div instead of bottom(currently).
Here is my HTML, CSS and fiddle code.
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
fiddle:- https://jsfiddle.net/5t6s6p5y/
Change CSS to code like:
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
Example:
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
Also on jFiddle.
You should probably use the class right instead of top, so as to not ruin reusability.
Also, your .callout.right class is missing a left positioning.
ie
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
see: https://jsfiddle.net/5t6s6p5y/2/
I'm having trouble finding out why the right section of the header goes under the left section when you zoom out in Safari, Chrome and Opera.
Here is the demo of the header.
If you open the demo in safari, chrome or opera you'll see that the right section of the header goes beneath the left section of the header.
I want to make the header stay in one line when you zoom out in different browsers.
Here is the code I have.
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
You can fix this by setting fixed widths for the child elements (inputs, etc..).
But why would you zoom to 25%?
I tried to look at the code but am unable to determine how this gets placed above the divs. Also, googling "tabs on div", "nested tabs on div" didn't seem to show anything relevant so my terminology is off.
I imagine they used an absolutely positioned <div>.
Demo:
Output:
CSS:
#container {
border: 1px solid lightgrey;
border-radius: 5px;
height: 100px;
position: relative;
width: 200px;
}
.tab {
background-color: rgb( 242, 242, 242 );
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
border-radius: 0 0 5px 0;
color: grey;
display: inline-block;
font: 12px Arial;
left: 0;
padding: 5px;
position: absolute;
top: 0;
}
HTML:
<div id="container"><div class="tab">Example</div></div>
Just use this:
CSS
.bs-docs-example {
position: relative;
margin: 15px 5px;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bs-docs-example:after {
content: "Condiciones de uso";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
HTML
<div id="content">
<div class="container">
<div class="bs-docs-example" style="text-align: justify;">
<h2>Header</h2>
<p>Paragraph</p>
</div>
</div>
</div>
DEMO
So, my button, for some reason, won't go to the URL that is defined when the user clicks directly on the text lying on top of the button. (ie: for my button, "Test Text")
When you click on the button, it always depresses, but it only goes to the linked URL when you click outside of the text's area.
I have tried using a <div> instead of <a>, but no luck with that either.
You can see the button live at http://198.154.213.30/~foster2/index.php/news
Below is the code for my button:
<a class="button3D" href="http://www.google.com" target="_blank">Test Text</a>
<style>
.button3D {
position: relative;
display: block;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
background: #650404;
font-family: sans-serif;
text-align: center;
line-height: 50px;
font-size: 24px;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #4e0202;
-webkit-box-shadow: 0 5px 15px -5px #222;
-moz-box-shadow: 0 5px 15px -5px #222;
box-shadow: 0 5px 15px -5px #222;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
}
.button3D:before {
content: "";
position: absolute;
top: -9px;
left: 0px;
width: 178px;
height: 0px;
border: 11px solid transparent;
border-bottom: 8px solid #650404;
border-top: 0;
}
.button3D:after {
content: "";
color: #c56338;
line-height: 180px;
font-size: 16px;
position: absolute;
top: -8px;
left: 1px;
width: 178px;
height: 0px;
border: 10px solid transparent;
border-bottom: 7px solid #891414;
border-top: 0;
}
.button3D:active {
width: 158px;
height: 41px;
top: 50%;
left: 50%;
margin-top: -33px;
margin-left: -79px;
line-height: 36px;
font-size: 22px;
color: #eee;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #3c0101;
background: #4e0202;
border-top: 0;
-webkit-box-shadow: 0 0 0 0;
-moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
.button3D:active:before {
top: 0;
height: 42px;
width: 158px;
left: -12px;
padding: 0 1px;
border: 11px solid #b3b294;
border-bottom: 8px solid #deddad;
border-top: 0;
}
.button3D:active:after {
content: "";
top: 0;
height: 50px;
width: 182px;
left: -13px;
border: 0;
-webkit-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
-moz-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
}
</style>
Appreciate any input/insight you can provide for me as to how I can fix this problem.
I think it is because the link is moving. When you click and hold a link you can drag off the link and it will not navigate. It appears that the moving link is triggering this functionality. The only thing I can think that you could do is use JavaScript onmousedown to navigate.