0
How to make so that the <h2> Apple Paradise </h2> was next to img
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title>Apple Paradise</title> </head> <body> <img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201701250108" height="50px"> <h2>Apple Paradise</h2> </img> <hr/> </body> </html>
4 odpowiedzi
+ 13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Apple Paradise</title>
<style type="text/css">
TD.leftcol {
width: 110px;
vertical-align: top; }
</style>
</head>
<body>
table width="100%" cellspacing="0" cellpadding="0"> <tr> <td class="leftcol">
<img src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201701250108" height="50px"></img></td>
<td valign="top">
<h2>Apple Paradise</h2></td>
</tr>
</table>
<hr/>
</body>
</html>
+ 3
Solution with <table> structure would be acceptable if the <table> behavior was reproduct with correct semantic tags ^^ But mostly, you can do a lot simplier ;) ( and there are a lot of solution available )
<h1>
<img src="image.url" alt="apple logo">
Apple Paradise
</h1>
... even if with this simpliest solution, the text will take a new line if width of image doesn't let enough space for it, and you cannot align the image on the left and the text on the right, you can add some style for obtain that behavior ( :
h1 {
white-space:nowrap;
font-size:8vw;
line-height:2em;
text-align:right; /* edited: deletion mistake when copying for post */
}
img {
height:2em;
vertical-align:middle; /* edited: deletion mistake when copying for post */
float:left; /* edited: deletion mistake when copying for post */
}
'nowrap' to disabled auto line breaks, we need to take care that the picture would not be too large, as if, the user should horizontally scroll to read the title ^^ So, we set the height of the image relatively to the font size ( if we change font-size, image height will be updated to fit ), width will be auto calculated... And by safety, we define the font size that we want/need ( using an unit relative to the viewport width ), and we have a responsive header ;)
+ 2
The <table>-like structure with semantic tags and behavior of <table> reproduced through CSS:
<header>
<img src="img.url" alt="apple logo">
<h1>Apple Paradise</h1>
</header>
header {
display:table;
width:100%;
}
h1, img {
display:table-cell;
vertical-align:middle;
}
h1 {
text-align:right;
}
img {
text-align:left;
max-height:4em;
}
On these css rules, the height of the image is defined relativly to the font size of the <header> ( his parent ) element, and no more with the <h1>... We must take care to this, as it's different from the previous solution, where <img> was direct child of <h1>...
+ 1
First post edited: I had forgotten some css rules when copy-pasting from code playground ^^
Często masz takie pytania?
Ucz się bardziej efektywnie, za darmo:
Popularne dzisiaj
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Ejercicio Pytho
0 Votes
SQL practice
2 Votes
Ruby programming?
3 Votes