I cant seem to have a logo and a table side by side but not very close to each other. The only way I've been able to achieve this is using a table, but the image and the table become very close to each other. I want to the table in the middle of the page, and the logo between the table and the far end of the left screen.
like this
logo table
this is how it is right now
logo
---table
<div id="header" style="height:15%;width:100%;">
<img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
</tr>
</table>
</div>
use two div and set to float left
<div id="header" style="height:15%;width:100%;">
<div style='float:left'>
<img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
</div>
<div style='float:leftt'>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
<td><h1>Home</h1></td>
</tr>
</table>
</div>
</div>
1) Don't use tables for layouts. Learn how to use FLOATS.
2) Use a CSS background image for your logo. UI elements (that are not page content) should be CSS backgrounds, not inline images.
Assuming your logo is 100 x 100 (adjust accordingly):
.logoContainer {
background-image:url(../yourimage.png);
background-repeat:no-repeat
padding-left:100px;
min-height:100px;
}
This should be an easy way to get u going for what ur trying to achieve..
http://jsfiddle.net/8NDZP/
<div style='float:left'>
<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Moscow_July_2011-7a.jpg/325px-Moscow_July_2011-7a.jpg'>
</div>
<div style='float:right'>
<table border="1" width="44" style="margin-left:30%;float:top;">
<tr>
<td>
<h1>Home</h1>
</td>
<td>
<h1>Home</h1>
</td>
<td>
<h1>Home</h1>
</td>
</tr>
</table>
</div>
Related
Looking to have an image on the left side of a container, however, if the content is too short or too long I'd have to adjust the height of the image proportionally to prevent the content from sliding below the image. The reason I want to contain the Image and the content in the container is to ensure that the image is coherent throughout the entirety of the pages.
We can use HTML / in-line CSS / Markdown to make this adjustment. Perhaps I believe we may need to use Flexbox
I've attached the code below, I've used Grid and a table, and I don't really like it
<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
align=“left”
hspace=“30"
width=“100”
height=“100">
</div>
<div>
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</br>
</td>
</tr>
</table>
</div>
</div>
--Most Recent
The image is on the left side but the table seems to overlap the image
This is what it currently looks like
edit 2
I've edited this again for you if this needs to be inline styles, i've gave a class name on the different containers so you can clearly see how this is working,
your image can just go into image-container and your content can go in content-container. You can add size to the containers, padding, margin etc.. to adjust the layout that you want, but this should help with the basic setup for your HTML.
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
hspace="30" width="100" height="100">
</div>
<div class="content-container">
<h3>TITLE</h3>
<h4>Description for Title</h4>
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style="padding-left: 20px;">
<p>Updates are made annually or more frequently if needed</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><strong>Contact Us:</strong></td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email: Jane Doe
</li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Here a flexbox example:
HTML
<div style="display: flex; flex-flow: row nowrap;">
<div style="flex: 1 auto;">
<img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg” hspace="30" width="100" height="100">
</div>
<div style="flex: 1 auto;">
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”>
<p>Updates are made annually or more frequently if needed
<p />
</td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
DEMO HERE
I want to display 2 images on the same row like this:
Image Same Text Image
If I put one image it works, but if I put both of them I get 404.
I think I am doing something wrong in the code I don't have much experience with HTML and don't know what I am missing.
The files are in same folder.
Here is the code:
<td colspan="8" >
<h1>
<img src="/home/apps/myapp/dynamic/img/myimage1.png" style="float:left; " alt="This is my mage" height="130" width="455">
<b>Same text</b>
<img src="/home/apps/myapp/dynamic/img/myimage2.png" style="float:right; vertical-align:middle;" alt="My second image" height="130" width="454"></h1>
</td>
simply you can use bootstrap..
divide the page into 2 halves using col-md-6 and put your data in its individual divs
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="/path1">
</div>
<div class="col-md-6">
<img src="/path2">
</div>
</div>
</div>
There is an extra start tag in your code, which is giving the error.
The Problem:
<<img src="/home/apps/myapp/dynamic/img/myimage2.png"
style="float:right; vertical-align:middle;" alt="My second image"
height="130" width="454"></h1>
The Solution
<img src="/home/apps/myapp/dynamic/img/myimage2.png"
style="float:right; vertical-align:middle;" alt="My second image"
height="130" width="454"></h1>
You can do by creating a nested table.
<td>
<table width="100%">
<tr>
<td>Image 1</td>
<td>Text</td>
<td>Image 2</td>
</tr>
</table>
</td>
or you can do by creating div with float attributes. Do image1 and text to float:left; and image2 to float:right.
How would I go about aligning four images (two square images and two rectangular images) using a table? Should look something like this: http://imgur.com/a/PdbZq
<table>
<tr>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
</tr>
</table>
Doesn't make much sense to use a table for what you want does it? A table has equal size cells in an entire column - which is exactly what you don't want. One CSS solution:
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/B8jHVoB.png" />
<img src="http://i.imgur.com/SXEsKuc.png" />
</div>
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/SXEsKuc.png" />
<img src="http://i.imgur.com/B8jHVoB.png" />
</div>
Almost forgot: don't use an inline style, set a class to hold a row of images, with the white-space: no-wrap as an attribute.
I can get two divs next to each other using display: inline-block; in the style attribute, but then the div on the right side is aligned on the bottom rather than at the top. So I tried floating the divs and I get another issue...
If I use floats like so:
<div style="width:100%">
<div style="width:25%; float:left;">
<asp:HyperLink ID="hlPic" runat="server" Target="_blank" ToolTip="Click to open this picture.">
<asp:Image ID="imgPic" Width="256px" Height="256px" runat="server" ToolTip="Picture" />
</asp:HyperLink>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><asp:HyperLink ID="hlCGValue" runat="server" ToolTip="Go to this corporate group.">[hlCGValue]</asp:HyperLink></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<asp:Label ID="lblCompanyNameValue" runat="server"></asp:Label></h3>
<asp:Label ID="lblCompanyID" runat="server" Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="hlWebsiteValue" runat="server" Target="_blank">[hlWebsiteValue]</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAssignedToValue" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</div>
I get the following layout:
Notice the table with text is so far away from the picture...I'd like to move it right next to the picture. I tried doing it using display: inline-block but then the table of data would be next to the picture however it would sit at the bottom of the div rather then at the top (probably due to the size of the pic). If it helps the max size of the picture should only be 256px x 256px.
Can anyone help me with my CSS / HTML to make this look right...
Rendered html
<div style="width:100%">
<div style="width:25%; float:left;">
<a id="MainContent_hlPic" title="Click to open this picture." href="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" target="_blank"><img id="MainContent_imgPic" title="Picture" src="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" style="height:256px;width:256px;" /></a>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><a id="MainContent_hlCGValue" title="Go to this corporate group." href="../Corporate/Details.aspx?CorporateGroupID=39">Ford</a></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<span id="MainContent_lblCompanyNameValue">Ford Global Test Co.</span></h3>
</td>
</tr>
<tr>
<td>
<a id="MainContent_hlWebsiteValue" href="http://www.ford.com" target="_blank">www.ford.com</a>
</td>
</tr>
<tr>
<td>
<span id="MainContent_lblAssignedToValue">Name</span>
</td>
</tr>
</table>
</div>
</div>
You can use display: inline-block. When you want them aligned at the top, you must use vertical-align: top
<div>
<div id="#first">
<!-- image -->
</div>
<div id="second">
<!-- table -->
</div>
</div>
#first, #second {
display: inline-block;
vertical-align: top;
}
JSFiddle
The problem with display: inline-block is that the whitespace between your two div elements is NOT ignored. The result is that the width of your 2 divs + the width of the whitespace is more than 100%. That's why the second div appears under the first one.
One way to fix this is to set font-size: 0 on the parent element, but there are other solutions:
http://davidwalsh.name/remove-whitespace-inline-block
I am attempting to have a series of tables sit next to each other from left to right while being centered.
<div>
<table border="1px"; style="float:left";>
<!--left side Advertisement-->
<tr>
<td>
<p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
</td>
</tr>
</table>
<!--Player Table Collective-->
<table border="1px"; width="500"; height="500"; style="float:left";">
<td>
<!--Wavestreaming.com online Status-->
<p>Status: <span data-shoutcast-value="status"></span></p>
<!--Wavestreaming Song Title-->
<p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
</td>
<td>
<!--Album Art and PlayerTable-->
<p>Album Art goes here</p>
<p>Player goes here</p>
<!--Third Table in the Player Collective-->
</td>
<td>
<p>Stuff</p>
</br>
<p>stuff 2</p>
</br>
<p>stuff 3</p>
</td>
</table>
<!--right side advert-->
<table border="1px"; style="float:left">
<td>
<p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
</td>
</table>
By using float:left in my tables I have been able to get them to sit next to each other, but I have not been able to center the tables. I tried wrapping everything in a div and telling to to center everything, but that does not seem to work. Any help is appreciated!
Try changing the first div to:
<div style='position: absolute; width: 80%; left:50%; margin-left: -40%;'>
As long as the margin-left is - half the width, this should work.
Use display:inline-block instead of float:left.
Then use the div style text-align=center on the enclosing div.
Will also need to add vertical-align=top to each table style.
See here:
http://jsfiddle.net/KJhhc/
Concept is to set the width for <div> and specify margin-left and margin-right to auto.
<!DOCTYPE html>
<html lang="en-US">
<body>
<div style="width:1020px; margin:0 auto;">
<table border="1" style="float:left">
<!--left side Advertisement-->
<tr>
<td>
<p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
</td>
</tr>
</table>
<!--Player Table Collective-->
<table border="1" width="500" height="500" style="float:left">
<td>
<!--Wavestreaming.com online Status-->
<p>Status: <span data-shoutcast-value="status"></span></p>
<!--Wavestreaming Song Title-->
<p>Now Playing: <span data-shoutcast-value="songtitle"></span></p>
</td>
<td>
<!--Album Art and PlayerTable-->
<p>Album Art goes here</p>
<p>Player goes here</p>
<!--Third Table in the Player Collective-->
</td>
<td>
<p>Stuff</p>
</br>
<p>stuff 2</p>
</br>
<p>stuff 3</p>
</td>
</table>
<!--right side advert-->
<table border="1" style="float:left">
<td>
<p><img src="http://www.radiorebel.net/wp-content/uploads/2013/02/RadioRebelJamMaestroAd.png"></p>
</td>
</table>
</body>
</html>