Html noob here. I'm trying to make a division that contains some ordinary text and a download button. I've got a paragraph for the normal text and an anchor with an image for the button. For some reason, the button wants to take the same alignment as the paragraph. I have this code:
p {
color: #fff;
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
}
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
<div id="downloadText">
<p>In the meantime, would you like to download a fun bubbles game for Linux?</p>
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
</div>
Both the paragraph and the anchor end up aligned left. Why would this be? (note: if I change paragraph to align right, both will align right.) thanks in advance!
It's a bit unclear..
Run this snippet, hope it helps you:
#downloadText {
width: 360px;
position: fixed;
bottom: 0px;
right: 10px;
font-weight: bold;
}
p {
font-family: Helvetica;
font-size: 16px;
text-align: left;
line-height: 24px;
margin-bottom: 0;
-webkit-font-smoothing: antialiased;
}
a {
text-align: right;
display: block /* Set display block, the element will move */
}
<div id="downloadText">
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
<p>
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</div>
The anchor is an inline element, which means its box is as large as its content. The box is positioned to the left because of the paragraph's style. The anchor's content might still be positioned to the right, but it doesn't matter because its width is as large as its content.
You've got a few options:
set a { position: absolute; right : 0 } in the style. Not great, imo
set the width of the anchor to 100% a { width : 100%; text-align : right } I also do not favor this option.
the most correct one css-wise is to wrap the anchor in another block-level element, e.g. another paragraph:
.installer-container {
text-align : right;
}
<p>
In the meantime, would you like to download a fun bubbles game for Linux?
</p>
<p class="installer-container">
<a href="/resources/bubbles_installer.sh" download>
<img src="/resources/Download-Button.png" alt="Download Button" height="80" width="200">
</a>
</p>
Related
I have created a div containing three text links and I am placing them above three equal sized adjacent images. I need each piece of text to be centered above it's corresponding image.
Here is my div:
#catalogs ul {
text-align: justify;
}
#catalogs ul:after {
content: '';
display: inline-block;
width: 100%;
}
#catalogs ul:before {
content: '';
display: block;
margin-top: -0.75em;
}
#catalogs li {
display: inline-block;
margin-right: 1.75em;
position: relative;
top: 1.25em;
font-size: 100%;
}
<div id="catalogs">
<ul>
<li><span style="text-decoration: underline; color: #0b5394;"><a
href="http://www.kerussosales.com/kerusso-spring-2017" target="_blank"
rel="noopener noreferrer">Spring 2017</a></span></li>
<li><span style="text-decoration: underline; color: #0b5394;"><a
href="http://www.kerussosales.com/kerusso-summer-2017-catalog"
target="_blank" rel="noopener noreferrer">Summer 2017</a></span></li>
<li><strong>Fall 2017 - available August 1st</strong></li>
</ul>
</div>
Here is what the page currently looks like using the above code:
page image
Can anyone help me modify the above css so that each text link is perfectly centered above its respective image?
I would wrap each image and text in a separate DIV box - and then just use text-align: center to center the text. That should work!
I dunno if I would use list items for those though. Maybe a heading tag like h3 or a paragraph tag. Check out my pen below to see what I mean =D (I added inline style to my example here to add clarification I hope. I prefer my codepen example though, it's cleaner)
https://codepen.io/celtninja/pen/RgBzOZ
<div id="one" style="float: left; margin: 5px;">
<p style="text-align: center;">Image Heading</p>
<img style="text-align: center;"
src="https://placeholdit.co//i/350x350?">
</div>
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
I wanted to have the entire div link to microsoft.com. How do I add a link to the entire div wrapper-promo? I wanted it to where ever the user clicks, they would go to the link.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/eL7rwLx3/45/
Here's my HTML:
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
</div>
Here's my CSS:
.wrapper-promo {
background-color: #e2e3e4;
margin: 10px 0;
width: 100%;
}
.title-top {
background-color: #2251a4;
height: 40px;
line-height: 40px;
}
.title-top-cell {
display: table-cell;
vertical-align: middle;
}
.promo-content {
margin: 20px;
padding: 0 0 10px 0;
}
h2 {
font-family:Arial,sans-serif;
font-size:19px;
font-weight: bold;
color:#fff;
margin: 10px 0 -10px 0;
text-transform:none;
}
h2.block-title {
font-size:22px;
margin: 0;
text-align: center;
text-transform:none;
}
.promo-content p {
font-family: Arial,sans-serif;
font-size: 14px;
color: #232323;
line-height: 20px;
text-align: center;
}
I would suggest adding an empty anchor element as a direct child of the .wrapper-promo element. Then you can absolutely position it relative to the parent element so that it will take whatever dimensions the parent element is.
In doing so, the entire element is clickable, and you don't have to worry about wrapping the a element around any div or block-level elements:
Updated Example
.wrapper-promo {
position: relative;
}
.wrapper-promo > a {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="wrapper-promo">
<div class="title-top"><!-- ... --></div>
<div class="promo-content"><!-- ... --></div>
</div>
With HTML5 it is allowed to wrap block elements within a tags even though the a tag is an inline element. Here is a fiddle where your original link is used as a container for all the other elements.
http://jsfiddle.net/Nillervision/761tubkc/
<a class="blockLink" href="http://www.microsoft.com">
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less
</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p>
<img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
</p>
</div>
</div>
</a>
Instead of a div, just use an a with display:block;.
It will behave as a block element in your flow, and you can set an href etc.
You may need to override its color, text-decoration, and :visited CSS.
The alternative here is to use a click event with Javascript - blech.
Code request edit:
All you need to do is change the style of .wrapper-promo:
.wrapper-promo {
background-color: #e2e3e4;
display:block;
margin: 10px 0;
text-decoration: none;
width: 100%;
}
then change it to an a:
<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>
I have a small menu panel that needs to be included on my page that looks like the image below:
I have the code in a jsFiddle that I have created so far and I know some of the images are incorrect but the issue is I cannot get the header to align neatly to the right of the image as shown in the image.
Any clues?
Changed 2 properties:
ul.block-with-icons span {
display: block;
font-size: 11px;
line-height: 1.2em;
position: relative;
top: 12px;
}
h5 {
font-size: 16px;
position: absolute;
left: 98px;
top: 30px;
}
http://jsfiddle.net/wRkdL/25/
If you are developing in HTML5, I think the best option is to move <h5> inside <a> tag like this:
<li class="b1">
<a href="#">
<h5>Our background</h5>
<span>A little background info on who we are...</span>
</a>
</li>
In HTML4 it's not allowed to insert a block element inside anchors.
I have recently tried to code a box, contains an image on the left side and next to it an header & paragraph under right like this:
http://gyazo.com/c5165fa45c32f69499768ba95d815328
This is what i have done:
<div class="span4">
<div class="box">
<img src="img/share.png" class="image_margin"/>
<span class="box_title">SHARE</span>
<span id="texting">Upload files straight from you hard disc. Up to 600MB per file upload! the more you earn the more file storage you get.</span>
</div>
</div>
CSS:
.box {
background-image: url("../img/box.png");
width: 305px;
height: 117px;
}
#texting {
font-size: 14px;
}
.image_margin{
margin-top: 25px;
margin-left: 25px;
}
.box_title{
font-size: 24px;
color: #8d8d8d;
margin-left: 15px;
margin-top: 20px;
position: absolute;
}
This is the result:
http://gyazo.com/f600c42f86b51e52de436631fc96656d
Why the text gets out of the box yet its inside the class of the box ?
What have I done wrong? how do I align the title + paragraph like in the first image in CSS so it fits on all screens?
Thank you a lot!
Use align="left" in img tag.
<img src="img/share.png" class="image_margin" align="left"/>
Hope this will help