Images not properly aligned in html - html
The last images and the text is not properly aligned. Here's the code:
<html>
<head>
<title>PODAR Ahmedabad!</title>
</head>
<body bgcolor="BFFFC2">
<div id="main">
<hr size="7">
<div id="header">
<div align="left">
<img src="podar.jpg" width="25%" height="20%">
</div>
<h1 align="center"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>
<div align="right">
<img src="school.jpg" width="25%" height="20%">
</div>
</div>
<hr size="7">
</div>
</body>
dimension of the first image is 300*105 and second image is 244*244
Use css inline
<div style="display:inline">
<img src="podar.jpg" width="25%" height="20%">
</div>
<h1 style="display:inline"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>
<div style="display:inline">
<img src="school.jpg" width="25%" height="20%">
</div>
Not: Do not use font tags.. And must embeded fonts in site;
visit : https://www.google.com/fonts
example : adding in head tags for Shadows Into Light font :
https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<html>
<head>
<title>PODAR Ahmedabad!</title>
<style>
#main {
display: block;
width: auto;
}
.fontPapyrus{
font-family:"Papyrus";
}
.fontSize36{
font-size:48px;
}
.fontBold{
font-weight: bold;
}
.colorGreen{
color:#34C510;
}
.fontSketchFlowPrint{
font-familiy:"SketchFlow Print";
}
.inlineBlock{
display:inline-block;
}
.verticalAlignMiddle{
vertical-align: middle;
}
</style>
</head>
<body bgcolor="BFFFC2">
<div id="main">
<hr size="7">
<div id="header">
<div class="inlineBlock verticalAlignMiddle">
<img src="podar.jpg" width="25%" height="20%" valign="top">
</div>
<h1 align="center" class="inlineBlock verticalAlignMiddle">
<span class="fontSize36 fontPapyrus">Welcome to
<span class="fontBold colorGreen fontSketchFlowPrint">PODAR</span>
</span>
<span class="fontPapyrus">ahmedabad!</span>
</h1>
<div align="right" class="inlineBlock verticalAlignMiddle">
<img src="school.jpg" width="25%" height="20%" valign="top">
</div>
</div>
</div>
</body>
It is because there isn't enough space, so either add space to the element that contains the 3 things or make those smaller. With space I'm talking about Width.
Related
CSS 2 divs same vertical centered
I have a problem vertically centering 2 divs beside each other: DIV 1 & 2: And this is what I want to achieve. I would prefer a solution that works for any resolution, or changes with the size on the parent div. My Goal: You can clearly see the difference; the text and image are correctly vertical aligned. :) And this is my code simplyfied: <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> </head> <body> <div class="bet-content"> <div class="bet-prof" style="display: inline-block;"> <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;"> </div> <div class="bet-desc" style="display: inline-block;"> <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span> <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span> </div> </div> </body> </html>
Flexbox comes to mind: <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> </head> <body> <div class="bet-content" style="display: flex; align-items:center;"> <div class="bet-prof" style="display: inline-block; background: red;"> <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;"> </div> <div class="bet-desc" style="display: inline-block; background: green;"> <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span> <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span> </div> </div> </body> </html>
I cant put the pictures and text inline properly
how can I put text beside picture without disturbing the other content? this is a header html <div> <img src="logo.ico" width="300px" height="200px" alt="logo"/> <h1 class="header">Movies19</h1> </div>
you can add the two elements in the div to display:inline-block tag
.line>* {
display: inline-block;
}
h1 {
vertical-align: middle;
height: 200px;
margin: 0;
}
<div class="line">
<img src="http://placehold.it/300x200" width="300px" height="200px" alt="logo" />
<h1 class="header">Mo</h1>
</div>
Use this
<style type="text/css">
img {
display: inline-block;
}
</style>
look at this link it may help more:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_default_css
<div> <table> <tr> <td> <img src="logo.ico" width="300px" height="200px" alt="logo" /> </td> <td> <h1 class="header">Movies19</h1> </td> </tr> </table> </div>
how to stack multiple images side by side so it overflows its <div> boundary
I ran into a difficulty, where I used float or inline-block to stack images side by side, but on reaching the max-width of the div tag, it automatically stacks below.
Of course with overflow-x: hidden; I want to stack as many images as possible in a single line so I can animate it.
<html>
<head>
<style>
div {max-width: 250px;}
</style>
</head>
<body>
<div>
<img src="" width="100px"/>
<img src="" width="100px"/>
<img src="" width="100px"/>
<img src="" width="100px"/>
</div>
</body>
</html>
Use like this...
<html>
<head>
<style>
div {width: 250px;overflow: hidden;
white-space: nowrap;}
div img{display:inline;}
</style>
</head>
<body>
<div>
<img src="http://www.familyfriendpoems.com/images/hero/nature-nature.jpg" width="100px"/>
<img src="http://www.familyfriendpoems.com/images/hero/nature-nature.jpg" width="100px"/>
<img src="http://www.familyfriendpoems.com/images/hero/nature-nature.jpg" width="100px"/>
<img src="http://www.familyfriendpoems.com/images/hero/nature-nature.jpg" width="100px"/>
</div>
</body>
</html>
It also works if you place your images in a table with one row.
<html>
<head>
<style>
div {max-width: 150px; overflow-x: hidden;}
</style>
</head>
<body>
<div>
<table cellspacing=0>
<tbody>
<tr>
<td><img src=""/> </td>
<td><img src=""/> </td>
<td><img src=""/> </td>
<td><img src=""/> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
cannot make my data in small centerd gray boxes
This is the beginning of my html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"></link> <script type="script" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <h1>Delta Fresh Samples:</h1> <p>save date: 08:23:11 31-May-02015</p> <div class="jumbotron" id="distance_small"> <h3>distance small</h3>0_1 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span> <br> </div> <div class="jumbotron" id="distance_large"> <h3>distance large</h3>0_0 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/? and this is the result: I wanted to created boxes in the center of the page. I saw twitter bootstrap example (this example) but I cannot make class "jumbotron" center my data in medium size gray boxes. what am i missing? In Addition, if i would want to style this without twitter bootstrap how would you advise me to do this?
you can achieve that with some styling
like this:
html
<h1>Delta Fresh Samples:</h1>
<p>save date: 08:23:11 31-May-02015</p>
<div class="jumbotron" id="distance_small">
<h3>distance small</h3>0_1
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span>
<br>
</div>
<div class="jumbotron" id="distance_large">
<h3>distance large</h3>0_0
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?"></a>
</div>
css:
.jumbotron{
background:#ddd;
width:220px;
margin:0 auto;
}
.jumbotron img{
display:block;
margin:0 auto;
}
.jumbotron a,.jumbotron span{
display:inline-block;
margin-left:10px;
}
see this fiddle
.jumbotron{
position : relative;
margin: 0 auto;
}
and for being in one line use display: inline-block
CSS positioning problems (basic)
I'm designing a website and I need it to look something like this http://www.spookycraft.net/
excluding the slide show and javascript and such, I just need 4 separate clickable blocks in the middle of a webpage, I've tried to use margin:auto and then re-position it using margin-left and margin-bottom ect but when I use margin-bottom It just splits apart more and acts rather interestingly here's my current code keep in mind I also need it to look the same on a higher resolution screen which is why I was attempting to use margin:auto;
<!DOCTYPE HTML>
<html>
<head>
<table border="10px"; class="head">
<tr>
<td>
<img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
</td>
<tr>
</table>
<style media="screen" type="text/css">
.tone{
margin:auto;
}
.ttwo{
margin:auto;
}
.tthree{
margin:auto;
}
.tfour{
margin:auto;
}
.head{
margin:auto;
}
</style>
</head>
<body>
<table border="5px"; class="tone">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px"; class="ttwo">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tthree">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tfour">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
</body>
</html>
Any help would be appreciated! I'll be working to find a answer to my problem, and when I do I'll update this thread.
Don't use tables, they are a no-no in my books. Tables should not be used for structure in a HTML page these days, they should only be used for presenting data in a tabular format. Just use <div>s with a master wrapper <div> around them. Something like this is perfect:
HTML:
<div class="container">
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
</div>
CSS:
body{
margin:0;
padding:0;
}
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
}
.spacing{
margin-right:20px;
}
Demo here: http://jsfiddle.net/aRSNh/172/
I'm not familiar with table design, but if you want to build it with div I have my code here
<div class="container">
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
</div>
with this css
.container {
width: 680px;
margin: 10px auto;
}
.box {
float: left;
margin: 20px;
}
A nice library for fast CSS development is Twitter bootstrap http://twitter.github.io/bootstrap/index.html Here is a quick example using bootstrap: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Layout Demo</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid" style="margin: 100px 0px; 0px; 0px;"> <div class="row"> <div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div> <div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div> </div> <br> <div class="row"> <div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div> <div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div> </div> </div> </body> </html> Plunker: http://embed.plnkr.co/iKgsmZ/preview