Please see below the code i have. I am trying to align the name with the image in a way that the name is centered on the right side of the image. I haven't been able to do it correctly. I tried adding position: absolute; but that still won't do the trick.
<div id="contain">
<div id="baseline">
<div id="title2">
<img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
</div>
CSS:
#contain {
width: 770px;
min-height: 170px;
margin: 20px auto 60px auto;
color: #222222;
font-size: 15px;
position: relative;
}
#baseline {
color: #999;
}
#title2 {
color: #000;
font-size: 30px;
margin-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
width: 750px;
}
Float both left and adjust the title with margin to center it.
http://jsfiddle.net/FBj3f/
If you know the height of the image you can set the line-height of the title resulting in a vertical centerd title http://jsfiddle.net/BtPwh/1/
If you're not against using a table then you can automatically ( Don't need image height. ) do it like this: http://jsfiddle.net/tLggp/1/
The easiest way is to set use a background-image instead of an image element. Then you can right-align text in that block, resulting in top-right positioning.
Related
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
I'm trying to get the white background behind the title to remain at the width of the text, not run all the way to the right of the screen, as it's doing now:
http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/
It should look like this: http://www.jmakhotels.com/images/title-tag.jpg ... but I can't figure out how to set the width so that it's dynamic for the different title lengths. This should be simple, but it's driving me insane! That .header-title element should simply be the width of the text + 10x padding on the left and right.
Here's the CSS for the blue div (which will be an image bgd), and the title element:
.main-header {
background-color: #009cff;
width: 100%;
height: 300px;
}
.header-title {
margin: -58px 0 0 18px;
padding:10px;
background-color: rgba(255,255,255,.8);
width:auto;
}
Thanks so much to anyone who can help me figure this out.
Setting display:table on the .header-title rule will fix the issue (without messing the margins).
Your .header-title (h2) is a block element, it should be a inline-block element to grab the width of the element itself.
However, your header-title can be placed inside the main-header instead of below the element.
A quick fix would be to move the .header-title element from below the .main-header div to the inside:
<div class="main-header">
<h2 class="header-title">This will be the title</div>
</div>
You want the header title to stick to the bottom of the main header, you can do this by giving it an absolute position. First we need to give the main header a relative position:
.main-header {
position: relative;
}
Now we can position header-title to the bottom of the main-header element:
h2.header-title {
position: absolute;
bottom: 0; <- stick to the bottom of main-header
left: 1em;
}
You can remove the margin from the header-title class in your CSS, because you're already telling header-title to stick to the bottom of main-header.
Change .header-title to display:inline-block then add margin-bottom: -36px; to .main-header
So:
.main-header {
background-color: #009cff;
height: 300px;
margin-bottom: -36px;
width: 100%;
}
.header-title {
background-color: rgba(255, 255, 255, 0.8);
display: inline-block;
margin: -58px 0 0 18px;
padding: 10px;
}
Also don't need width:auto
Try adding the style display: inline-block;
I am assuming .header-title is being used on a div that surrounds the title. You also shouldn't need width: auto;
HTML
<div class="leave-comment">
<span class="comment-bubble"></span>Leave a comment for Example Video 8!
</div>
CSS
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
}
Here is the JS Fiddle: http://jsfiddle.net/CeZLy/
I am trying to center both the comment bubble and text inside the black box. The text will always be changing so I can't set a fixed width on the a element. Can someone help me out with this?
NOTE: Sorry if I wasn't clear. I want the comment bubble on the left of the text, and then I want both the comment bubble and the text centered inside the black box.
Remove the span. Set the image as the background of the a element. Use text-align:center; and add left-padding for the image:
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align:center;
}
.leave-comment a {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}
<div class="leave-comment">
Leave a comment for Example Video 8!
</div>
Check it:
http://jsfiddle.net/C9HKr/
From your comments, I would just leave out the float: left and add a text-align: center
JSFiddle
Vertically centering seems a bit difficult. If you want to center vertically and have fixed height, you can set the line-height of your link to the same height.
See JSFiddle
There's a nice tutorial about vertical centering at Vertical Centering With CSS, explaining several methods and emphasizing the pros and cons of each.
Update:
I just reread your comment. Maybe I misunderstood you. If you just want the link moved a bit up or down, you can also use a different padding at the top and bottom.
See this JSFiddle
.leave-comment {
background-color: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}
Well you need the span now.
http://jsfiddle.net/CeZLy/7/ in action
I am trying to auto center text from top to bottom and from left to right, in other words text needs to be in a center of the image. The only thing i can change is css, the code tags are hard coded, so it can't be changed.
<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width:403px;
height:56px;
line-height:1.1em;
text-align:center;
padding-top:56px;
padding-left:60px;
padding-right:40px;
}
</style>
<code>message goes here</code>
You need to set the display to block for the <code>, which is an inline element, so that width and height apply, and better do it the automatic centering way instead of hardcoding any padding sizes:
Sample in http://jsfiddle.net/bx852/7/
<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width: 310px;
height: 66px;
line-height: 66px;
text-align: center;
display: block;
}
.notice { font-size: 50px }
</style>
<code>message goes here</code>
<code class='notice'>hi joe</code>
result:
If you know the dimensions of the image make the width the width of the image, align the text to center, make the height half the image and set the top padding to half as well. Should do the trick
code {
background:url("images/bkg.png");
width: 400px;
height: 200px;
text-aling: center;
padding-top: 200px;
}
To horizontally and vertically center text, I would set text-align: center to horizontally align. Then, I would set line-height in pixels until it vertically aligns center. Usually, this is double the font size, but it would depend on your padding and height set.
try this instead,
code {
background-image:url('images/header.png');
width: 310px;
height: 66px;
text-align: center;
}
hope you get your answer..
i can try this too,
<form action="put url here" method="get"><input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;"></form>
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.