Im trying to add an image/logo next to my header text, and make sure the image keeps it aspect ratio, and respects the size of the container, which is as high as its containing text.
But the image keep overflowing, or using its real dimensions. How can I get the image next to the text, both text and image horizontally centered.
The parent div can not have a height set, as it should respect the size of the text.
I tried using table instead, I tried using a before: pseudo element, but nothing works. This is what i got at the moment and its so wrong
.batman {
font-size: 20px;
font-weight: bold;
display: inline-block;
width: 100%;
}
.batman img {
min-width: 100%;
min-height: 100%;
}
<div class="batman">
<img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>
jsfiddle: https://jsfiddle.net/sxd91gqc/
Since it's one line of text, define a height equal to the line-height:
.batman {
font-size: 20px;
font-weight: bold;
display: inline-block;
line-height: 1.2em;
border: 1px solid red;
}
.batman img {
height: 1.2em;
vertical-align: middle;
}
<div class="batman">
<img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>
Related
Question regarding CSS.
I will receive sentences like: This is a sentence and I will automatically break it to new lines regarding the parent's container width. So, for example, I will have
This is
a sentence
What I am trying to do can actually can be seen in this code example. The lines are highlighted but there is some space (with white color) between lines. When setting some color background-color: black I can't create such spaces changing line-height. I also tried setting linear-gradient as background but it doesn't work the way I wanted.
This can be done by wrapping lines in span tags, but I want to avoid additional backend work.
Is there any obvious solution I missed or is a little bit tricky?
div {
width: 200px;
}
h1 {
background-color: red;
line-height: 50px;
}
<div>
<h1>Some text and its wrapping</h1>
</div>
Without backend work it is simply not possible - you need a wrapping element for the fixed width.
But you don't need extra elements for each line. Check this:
div {
width: 200px;
display: block;
}
h1 {
background-color: red;
font-size: 36px;
font-weight: bold;
line-height: 50px;
display: inline;
}
<div>
<h1>This is a sentence.</h1>
</div>
Or you use pseudo elements:
div {
width: 200px;
display: block;
}
div:after {
background-color: red;
font-size: 36px;
font-weight: bold;
line-height: 50px;
display: inline;
content: attr(data-content);
}
<div data-content="This is a sentence."></div>
I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/
It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }
try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com
I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}
So, what I am trying to do is divide the page (of width 700 pixels) in 60:40 ratio. In the 40 I want a pic, and the rest 60 text. I have used div to wrap both image and the text. But, the problem is that whenever I hover the cursor on the block, it acts as link to the index.html. I mean I want text selection over the text not hand cursor as default.
Here's the CSS, I am using:
#image {
width: 40%;
text-align: center;
margin-top: 50px;
float: left;
}
#contentwrap {
width: 60%;
float: left;
text-align: justify;
font-size: 18px;
height: 225px;
}
#contentwrap p {font-family: arial, helvetica;}
#contentwrap pre {
margin-top: 45px;
text-align: center;
}
The structure of html is as follows:
<div id = "image"><img src = "asd.jpg"></div>
<div id = "contentwrap"><pre> *text* </pre>
<p> *text*</p> </div>
Image is 175x175 px
That shouldn't be happening unless there is, indeed, a link OR you explicitly set cursor: pointer in your css. Try setting cursor: auto !important.
I am using Bootstrap to create all button elements on our website.
The button height is created using line-height, which also helps with centering the text.
I want to include two different font sizes in one button. The standard size, and a smaller note. I have created a very stripped down version of this here with jsfiddle
This is the html.
<div class="button">
test
<small>(note)</small>
</div>
This is the CSS.
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
small {
font-size: 15px;
}
The issue is that the height of the button gets increased by 4 pixels. Removing the smaller text, will again bring the button to it's correct height. How can solve this problem as I cannot have a higher button?
Having a fixed height attribute of 60px does not work either, because then the text is not centered vertically anymore.
Thank you for the help.
It gets OK (on chrome) if you add a vertical-align to your small tag
http://jsfiddle.net/eAZCN/3/
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
.button small {
font-size: 15px;
vertical-align: middle;
line-height:10px;
}
I'm building a portion of a portfolio site that displays a 4-column grid with images and their titles using relative units of measurement so that it scales with the browser window's size. Right now it works fine with each .item assigned a property of float:left and max-widths defined as a percentage of the overall #container's width (in this case 1100px or 68.75em). It works fine with the exception of the titles, which go below each image in a span. When one of the titles is longer than the 220px (or 20% of the container) the height increases and the items in the next row will get "stuck" on it.
I can fix this easily using PHP to insert a clear:both div after every 4th div (to effectively make a new "row" in the html) but I plan on using media queries or some other device to reduce the amount of columns to 3, 2 and 1 as the browser window shrinks. It would be easier if I could simply have the rows defined by floating the items. Possible solutions?
Styles:
body {
font-size: 100%;
line-height: 100%; /* Neat */
font-family: Helvetica, Arial, sans-serif;
}
#container {
max-width: 68.75em; /* 1100px */
margin: 40px auto;
border: 1px solid #000;
}
.item {
float: left;
width: 20%;
max-width: 20%;
height: auto;
padding: 2.5%;
background-color: #eee;
}
.item img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.item span {
width: 100%;
max-width: 100%;
margin-top: 1em;
display: block;
text-transform: uppercase;
line-height: 1.5em;
}
HTML:
<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix -->
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title that is Slightly Longer than the Others</span>
</div>
<div class="item">
<img src="images/placeholder.png" height="220" width="220" alt="" title="" />
<span>A Title</span>
</div>
... (repeat those divs)
</div>
Possible options:
Set the height sufficient to cover two line cases
.grid-item { display: inline-block; vertical-align: top; }
Change the title span to a div, set height and overflow: hidden
I would suggest giving it a short title. If that's not possible, you could try
.item > span{
height: 0;
position: relative;
}
The images will display appropriately, but the too-long titles will display over the image beneath said title. I don't know if this is acceptable for your needs or not, but you may find it useful.