I'm trying to achieve the following using CSS on my <h1> element (since apparently it is not default browser behaviour):
However, I can't seem to keep my browser from rendering it as following:
Does anybody have an idea how to achieve this properly?
Current code:
.title {
width: 300px;
float: left;
line-height: 68px;
display: inline-block;
}
.title h1 {
font-size: 42px;
line-height: 58px;
color: #FFF;
background: #000;
white-space: normal;
word-wrap: break-word;
display: inline-block;
vertical-align: bottom;
}
<div class="title">
<h1>This is a title on two lines</h1>
</div>
display: inline instead of inline-block
.title {
width: 300px;
float: left;
line-height: 68px;
display: inline-block;
}
.title h1 {
font-size: 42px;
line-height: 58px;
color: #FFF;
background: #000;
white-space: normal;
word-wrap: break-word;
display: inline;
vertical-align: bottom;
}
<div class="title">
<h1>This is a title on two lines</h1>
</div>
Related
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I have a user name and photograph that appears side by side and middle aligned, as shown below.
I am now trying to change the css so that the photo is dynamically floated to the left and the user name is dynamically floated to the right.
I have tried adding float: right and float left to the css but this only makes the photograph appear under the user name.
I have read several similar threads and tried many things, but I cannot solve this. It is really frustrating. It may be a simple fix, but I cannot see it.
Using CSS, how do I display the username on the right and the photo on the left and still have the user name and photo vertical-align: middle with a width of 100%? The photo that the user uploads can be different height, so I cannot use line-height.
Here is my HTML code:
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img class="name_details_photograph_preview_dimensions" src="{{ image_url }}" />
</div>
</div>
</div>
</div>
Here is my css code:
.resumeStyleResumeTitleWrapper17 {
display: table-cell;
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
padding: 2px;
text-align: left;
vertical-align: middle;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
display: table-cell;
max-height: 149px;
max-width: 149px;
padding: 2px;
text-align: right;
vertical-align: middle;
}
.resumeStyleResumeTitlePhotographInner17 {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Here is one way of doing it using CSS3 transforms to take care of the vertical alignment of the name/title element.
I defined two classes, .flipLeft and .flipRight to control the placement of the name/title and the image elements.
I assumed that the image height will be as tall or taller than the height of the name/title, otherwise, things get more complicated.
The trick is to use the text-align property to place the image to the left or to the right of the parent block.
I then use absolute positioning to take the name/title element out of the content flow and pin it to the opposite edge of the parent block and adjust the top offset to 50% to get approximate vertical centering.
Finally, I use CSS3 transforms to adjust for the height of the name/title element.
Note: In the snippet below, scroll vertically to see both examples.
.resumeStyleResumeTitleWrapper17 {
display: block;
width: auto;
border: 1px dotted blue;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
position: relative;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.resumeStyleResumeTitlePhotograph17 {
border: 1px dotted yellow;
display: inline-block;
vertical-align: top;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
display: block;
}
.flipLeft.resumeStyleResumeTitle17 {
text-align: left;
}
.flipLeft .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.flipRight.resumeStyleResumeTitle17 {
text-align: right;
}
.flipRight .resumeStyleResumeTitleInner17 {
border: 1px dotted yellow;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<h2>Flip Image to Left</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipLeft">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
<h2>Flip Image to Right</h2>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17 flipRight">
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
</div>
</div>
</div>
</div>
Couldn't achieve it with float but I got the desired layout using display: flex;
JS Fiddle
div.container {
display: flex;
width: 100%;
align-items: center;
background-color: black;
height: 100px;
padding: 20px 0;
}
div.user_name {
display: flex;
font-size: 32px;
font-family: Helvetica;
color: white;
width: 50%;
padding-left: 20px;
}
div.user_img {
display: flex;
justify-content: flex-end;
width: 50%;
height: 100%;
padding-right: 20px;
}
div.user_img > img {
height: 100%!important;
width: auto;
}
<div class="container">
<div class="user_name">User Name</div>
<div class="user_img">
<img src="http://www.lessons4living.com/images/penclchk.gif"/>
</div>
</div>
Found a fix for this problem, update your HTML to following,
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitlePhotograph17">
<div class="resumeStyleResumeTitlePhotographInner17">
<img class="name_details_photograph_preview_dimensions" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWd99Qkjbg4ZVu-XHvaIo4LX1MittAmD0CvsiN6QcYeuv4XOQm" />
</div>
</div>
<div class="resumeStyleResumeTitleInner17">
<div class="resumeStyleResumeTitleFontChange17">User Name</div>
</div>
</div>
</div>
In CSS,
.resumeStyleResumeTitleWrapper17 {
width: 100%;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
float: left;
text-align: left;
width: 100%;
height: 150px;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
padding: 2px;
text-align: left;
display: inline-block;
vertical-align: middle;
}
.resumeStyleResumeTitleFontChange17 {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: middle;
display: inline-block;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
.resumeStyleResumeTitle17:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -2px;
}
Basically I added a .resumeStyleResumeTitle17:before element which acts like a ghost element and takes the full height and allows each adjacent elements to be aligned by display:inline-block and now vertical-align:middle property is applicable.
Ok, this is to point you in the right direction, but it is obvious that you don't really understand what is going on. You have way too many div's there and really bad naming structure on the classes. Here is how I got it working somewhat in the direction you want without removing the divs and starting over (which is what I would do otherwise): ( Here is the live jsfiddle for it).
<!DOCTYPE HTML>
<style>
.resumeStyleResumeTitleWrapper17 {
position:relative;
width: 100%;
display:block;
background-color: #000;
height:175px;
}
.resumeStyleResumeTitle17 {
background-color: #000;
color: #fff;
direction: ltr;
text-align: left;
width: 100%;
}
.resumeStyleResumeTitleInner17 {
background-color: #000;
color: #fff;
direction: ltr;
float:right;
width: 100%;
}
.resumeStyleResumeTitleFontChange17 {
font-size: 32px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
float:right;
}
.resumeStyleResumeTitlePhotograph17 {
background-color: #000;
color: #fff;
direction: ltr;
}
.resumeStyleResumeTitlePhotographInner17 {
float:left;
height:175px;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
</style>
<div class="resumeStyleResumeTitleWrapper17">
<div class="resumeStyleResumeTitle17">
<div class="resumeStyleResumeTitleInner17">
<span class="resumeStyleResumeTitleFontChange17">User Name</span>
</div>
<div class="resumeStyleResumeTitlePhotograph17">
<!-- image has max-height: 149px & max-width: 149px; assigned in the css file -->
<img class="name_details_photograph_preview_dimensions" src="http://www.lessons4living.com/images/penclchk.gif" />
</div>
</div>
</div>
</html>
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch
I have the following css:
#header-notification
{
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #E5E5E5;
}
and declared the label as:
<label id="header-notification"></label>
However doing so gives me the following:
As you can see the text here is not vertically centered. What am I doing wrong?
As you are using a single character to align it vertically, you can use line-height property here to vertically align in the middle of the element
Demo
#header-notification {
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #E5E5E5;
line-height: 20px;
}
For making vertical-align: middle; work, you need to use display: table-cell; so that it will align middle vertically.. but you won't need that here as I specified that you are trying to align a single character. display: table-cell; method is generally used when you want to align an entire paragraph or an image vertically inside an element.
Give this a spin: http://jsfiddle.net/jplahn/7zwUc/
You need to place it inside a parent div. (If you want to use vertical-align on it. Obviously there's other ways to do it).
HTML:
<div id="header-notification">
<label id="number">0</label>
<div>
CSS:
#header-notification
{
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
height: 20px;
width: 20px;
background-color: #E5E5E5;
}
#number {
vertical-align: middle;
}
Try to add display: table-cell for element:
#header-notification
{
display: table-cell;
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #E5E5E5;
}
I have a small issue with a title where I would like text to display on a single line rather than split onto two as im trying to arrange these blocks as a grid
jsFiddle
html
<div class="garage-row">
<a class="garage-row-title" href="/board/garage_vehicle.php?mode=view_vehicle&VID=4">
<div class="garage-title">1996 Land Rover Defender</div>
<div class="garage-image"><img src="http://enthst.com/board/garage/upload/garage_vehicle-4-1373916262.jpg"></div>
</a>
<div class="user-meta">
<b>
Hobbs92
</b>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
.garage-row {
border: 1px solid #FFFFFF;
float: left;
margin-right: 5px;
padding: 12px;
position: relative;
width: 204px;
}
.garage-row img{}
.garage-image {
background-position: center center;
display: block;
float: left;
max-height: 150px;
max-width: 204px;
overflow: hidden;
position: relative;
}
.user-meta {
background: none repeat scroll 0 0 #2C3539;
color: #FFFFFF;
float: left;
padding: 10px;
position: relative;
width: 184px;
}
img {
border-width: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
}
.garage-row-title {
font-size: 22px;
font-weight: bold;
}
a:link {
color: #43A6DF;
}
font-family: 'Open Sans',sans-serif;
I would greatly appreciate if someone were able to help me get the title into one line rather than two or even fix it so if the title exceeds the width then it gets ellipses.
Add white-space: nowrap;:
.garage-title {
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
jsFiddle
The best way to use is white-space: nowrap; This will align the text to one line.