I've got this Div slide which makes your div box change to another div box.
The problem is when I zoom in or out, or when Chromes message pops up, the box where it asks you if you want the webpage translated. I've tried many things but it still moves :/ I think the problem is with the CSS, but as I said, I don't know where the problem is :(
Picture of the problem:
CSS:
#wrapper {
width:960px;
height: 750px;
margin-top: 30px;
overflow:hidden;
position:absolute;
}
#mask {
width: 500%;
}
.item {
width:20%;
height:100%;
float:left;
}
.content {
width:100%;
height:750px;
margin:0 auto;
margin-top: 20px;
}
.content a{
color:#F00;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration:none; }
.selected {
font-weight:700;
}
.clear {
clear:both;
}
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img src="Images/testknapp.png" />
<img src="Images/testknapp1.png" />
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/voltex.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - beliel</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/noize.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">noize - nothing special</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes" height="30"><tr><td class="noizebuy"> <img src="Images/knapp.png" class="noizeitunesbutton" /> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dubwood.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Dubwood - Beatz for streetz</h2><p class="available">available now on itunes & beatport!</p><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <img src="Images/knapp.png" class="dubwooditunes" /> </td><td class="dubwoodbuy"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /> </td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/metaphix.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">metaphix - facets</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <img src="Images/knapp.png" class="metaphixitunes" /> </td><td class="metaphixbuy"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /> </td></tr></table></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dtsk.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">lök - i'm a dtsk lover</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/strobe.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">toltex - strobe</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes" height="30"><tr><td class="noizebuy"> <img src="Images/knapp.png" class="noizeitunesbutton" /> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/gohard.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Toltex - go hard</h2><p class="available">available now on itunes & beatport!</p></br><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <img src="Images/knapp.png" class="dubwooditunes" /> </td><td class="dubwoodbuy"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /> </td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/ineedu.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">crypehead - i need u</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <img src="Images/knapp.png" class="metaphixitunes" /> </td><td class="metaphixbuy"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /> </td></tr></table></td>
</tr>
</table>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<img src="Images/testknapp1.png" />
<img src="Images/testknapp.png" />
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/rewind.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - rewind</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/killerkraut.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">killerkraut - time to get rollin'</h2><p class="available">available now on itunes & beatport!</p><table class="killerkrauttable"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/harbinger.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">oskri - harbinger</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/philosophy.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">dubtheraphy - philosophy</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/philosophy/1118970"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/anditgoes.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">crypehead - and it goes (like this)</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <img src="Images/knapp.png" class="toltexitunesbutton" /> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/and-it-goes-like-this/1114352"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
</table>
</div>
</div>
</div>
Do any of you have any idea what the problem could be? :)
change the position of #wrapper to relative and check..
if you need further help, please consider adding your entire style and html in JSFiddle.net. It will be easier for me to locate the actual error.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am making a photography website and I wanted to have a gallery of images and a list like
Wildlife
Landscape
Ocean
and when I click on them it opens a gallery of images.
I tried looking some tutorials up on youtube and google but couldn't find anything and since I'm not very experienced in HTML and CSS I don't know where to start
Currently I only have a gallery like this
<h1>### </h1>
<h1>###</h1>
<table align="center">
<tr>
<td>
<img src="Images/plant_with_web.png" height="150" width="200" alt="rocks" />
</td>
<td>
<img src="Images/rock_in_water.png" height="150" width="200" alt="rock_on_log" />
</td>
<td>
<img src="Images/rock_on_log.png" height="150" width="200" alt="sunset" />
</td>
</tr>
<tr>
<td>
<img src="Images/Rocks.png" height="150" width="200" alt="sun_on_beach" />
</td>
<td>
<img src="Images/sunset.png" height="150" width="200" alt="rock_in_water" />
</td>
<td>
<img src="Images/waves_crashing.png" height="150" width="200" alt="bird" />
</td>
</tr>
<tr>
<td>
<img src="Images/bird.png" height="150" width="200" />
</td>
<td>
<img src="Images/birdrock.png" height="150" width="200" />
</td>
<td>
<img src="Images/DSC04758.jpg" height="150" width="200" />
</td>
</tr>
You mean like this??
button {
background-color:white;
border:0px;
}
button:hover {
text-decoration:underline;
}
<button> Button 1 as a text
</button>
<button> Button 2 as a text
</button>
$(document).ready(function() {
$("button#wildlife").click(function() {
$(".wildlife> img").toggle();
$(".landscape> img").hide();
$(".ocean> img").hide();
});
$("button#landscape").click(function() {
$(".landscape> img").toggle();
$(".ocean> img").hide();
$(".wildlife> img").hide();
});
$("button#ocean").click(function() {
$(".ocean> img").toggle();
$(".wildlife> img").hide();
$(".landscape> img").hide();
});
});
button {
background-color: white;
border: 0px;
}
button:hover {
text-decoration: underline;
cursor: pointer;
}
.landscape>img {
display: none;
}
.ocean>img {
display: none;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button id="wildlife">Wildlife</button><br>
<button id="landscape">Landscape</button><br>
<button id="ocean">Ocean</button>
<div class="wildlife">
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
</div>
</body>
</html>
I don't really understand your problem.
However, if you are trying to make a button then use the <input type='text'> button </input> or the button element.
Or if you want an image to be clickable then use <img href="image_URL>"
If galleries are on their separate page: use Wildlife
If galleries will open as a full screen pop-up: use <button id="wildlife">Wildlife</button>
You can also use <details><summary> element to get the same functionality without depending more on JavaScript
EDIT 1:
you can us a js library like PhotoSwipe,
it could fit perfectly in your use case
Use input type="submit" value="add"
Value mean Name
This button name is add
I don't recommend the use of a table for a gallery. You can maybe put each gallery in a different html page and use the tag to access them. like:
Wildelife
But if you want them to appear or slide dynamically on the same page you may need some javascript or jquery.
you should use <img src="" alt="" />
Hey your question is a bit unclear, but if you want a button that you click that opens up a wildlife gallery you can have something like this <button> <a href = www.wildlife-photos.com/gallery></a> Wildlife </button> or just make a page called wildlife.html and make the button direct to it <button> <a href = wildlife.html></a> Wildlife </button>
I hope this helps :D
Sorry if this isn't much of a direction.
so i have a table and i want the buttons side by side instead of stacked
Css or HTML is fine but not js sorry if the question isnt very clear im still new to this :/
i tried
display: flex;
align-items: center;
justify-content: center;
but that just does this
ive included the CSS and html code snippett bellow thanks to everyone who can help i kept the alts instead of the actual image because this is for my photography website
#charset "UTF-8";
button{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;
}
button:hover{
color:#DDDDDD;
border-color:#DDDDDD;
}
button:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
#media all and (max-width:30em){
button{
display:block;
margin:0.4em auto;
}
}
<div style="text-align:center">
<button id="wildlife">EG </button><br>
<button id="landscape">EG </button><br>
<button id="ocean">EG </button>
</div>
<div class="wildlife">
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<font face="sans-serif" color="#017bf5" size="5" align="center">
<h1>### </h1>
</font>
<font face="sans-serif" color="#444" size="3" align="center">
<h1>###</h1>
</font>
</body>
In Your HTML Code, you used <br> tag after each button. Which pushes your button to the next line.
Solution: Remove <br> tags after button elements.
A div box around the buttons with display: flex; and flex-direction: row; Should work
Ive been given a task to make the links (which are also images) go from 6 horizontal links, then collapsing them into 3 and then 3 on top of each other.
The catch here is its for en email template to be sent out. And although I have been making my template responsive, it only seems to go from 6 links in a horizontal line, to 6 links aligned vertically. No mini collapsing in between? Just straight horizontal, or straight vertical.
My main dilemma, is because this is for email, I am forced to do everything with inline CSS, something im not to keen on..
Ive tried using flex (obviously wont work) tried using different implementations of tables, but I cant get it to collapse in the desired manner...
Goal: To get it from going 6 horizontal, to collapsing to 3 and 3 on top of each other vertically. Any advice or help is greatly appreciated, thanks.
NOTE I only put 2 as there was no need to do it up to 6, but this is the usual approach I was taking
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<style type="text/css">
#media only screen and (max-width: 640px){
.templateColumnContainer{
display:block !important;
width:100% !important;
}
}
</style>
Here is the resolution to your problem using flex and having divs. I don't see the need of nested tables.
Js Fiddle Link
Html
<div class="container">
<div class="inner-container">
<div class="element">
<img src="whatever" alt="Fragrances"/>
</div>
<div class="element">
<img src="whatever" alt="Wicks"/>
</div>
<div class="element">
<img src="whatever" alt="Vessels"/>
</div>
</div>
<div class="inner-container">
<div class="element">
<img src="whatever" alt="Wax"/>
</div>
<div class="element">
<img src="whatever" alt="Kits"/>
</div>
<div class="element">
<img src="whatever" alt="Diffusers"/>
</div>
</div>
</div>
And Styles:
.element {
padding: 5px;
border: 1px black solid;
}
.inner-container {
display:flex;
justify-content: center;
}
#media (max-width: 600px) {
.container {
display: block;
}
}
#media (min-width: 600px) {
.container {
display: flex;
justify-content: center;
}
}
Try float left and width 100% ...
THis is what got the closest success as flex WILL NOT work with email services, although it wasn't inline, the only aspect that wont work in terms of responsive email is:
#media (max-width: 600px) {
.non-flex-inner-container {
display: inline-block;
}
}
as this cannot be made inline to my knowledge..
Here is the closest success:
<style type="text/css">
.non-flex-container {
display: inline;
text-align: center;
width: 100%;
float: left;
}
.non-flex-inner-container {
display: inline;
text-align: center;
width: 100%;
}
.non-flex-element {
display: inline;
}
#media (max-width: 600px) {
.non-flex-inner-container {
display: inline-block;
}
}
</style>
<div class="non-flex-container">
<div class="non-flex-inner-container">
<div class="non-flex-element">
<img src="img" alt="" width="100" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="50" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="70" height="10" style="margin:10px;"/>
</div>
</div><br>
<div class="non-flex-inner-container">
<div class="non-flex-element">
<img src="img" alt= width="40" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="40" height="10" style="margin:10px;"/>
</div>
<div class="non-flex-element">
<img src="img" alt="" width="100" height="10" style="margin:10px;"/>
</div>
</div>
</div>
This was complete success in terms of email and inline css, HOWEVER I was only able to achieve this with AMP pages, and apparently email services arent able to freely send amp pages unless said person whitelists you... Which completely defeats the purpose regardless...
width:100%; float:left;">
<div class="non-flex-inner-container" style="display:inline; text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(min-width: 600px)" /></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="50" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="70" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
</div>
<div class="non-flex-inner-container" style="display:inline; text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img>
</div>
</div>
<!-- Display Inline-block when less than 600px -->
<div class="non-flex-container" style="display:inline; text-align:center; width:100%; float:left;">
<div class="non-flex-inner-container" style="display:inline-block;" text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(max-width: 600px)" /></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="50" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="70" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
</div>
<div class="non-flex-inner-container" style="display:inline-block;" text-align:center; width:100%;">
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
<div class="non-flex-element" style="display:inline;">
<amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img>
</div>
</div>
</div>
The conclusion... It isnt possible yet.... If anyone else has any more insight, please let me know. Big thanks to #Rustam Goygov for the insight and guidance!
I am new to HTML5. I used to code HTML years ago, but I am not familiar with the new ways of doing things. I'm basically starting from scratch. I have started a design and the beginnings of code for a website I want to put up. Before I go farther, I wanted to get what I have done looking properly. There is padding around each image that I'm am unsure of how to remove. I need all images to put up against each other. I've tried putting padding: 0 and margin: 0 on all elements in the code, but nothing is working. What am I doing wrong?
Images with padding I want removed
Here's a snippet of the code I'm using:
<style>
html, body { padding: 0; margin: 0 }
</style>
</head>
<body>
<header>
<img src="images/logo.gif" />
</header>
<nav>
<table>
<tr>
<td>
<img src="images/purpleBarLeftOfNav.gif" width="173" height="77" alt="" title="" />
<img src="images/navHomeTopSel.gif" alt="Home" title="" />
<img src="images/navAboutTop.gif" alt="About" title="" />
<img src="images/navServicesTop.gif" alt="Services" title="" />
<img src="images/navPortfolioTop.gif" alt="Portfolio" title="" />
<img src="images/navContactTop.gif" alt="Contact" title="" />
<img src="images/purpleBarPgTitleHome.gif" alt="Home" title="" />
</td>
</tr>
<tr>
<td>
<img src="images/spacerWhite.gif" width="114" height="146" alt="spacer" title="" />
<img src="images/phoneEmail.gif" width="59" height="146" alt="Phone and Email" title="" />
<img src="images/navHomeBtmSel.gif" width="32" height="146" alt="Home" title="" />
<img src="images/navAboutBtm.gif" width="32" height="146" alt="About" title="" />
<img src="images/navServicesBtm.gif" width="32" height="146" alt="Services" title="" />
</td>
</tr>
</table>
</body>
Today, 2016, we use flexbox for layout, not table (unless you need to make it work on older browsers)
html,
body {
margin: 0
}
div {
display: flex;
}
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
And if you really can't use flexbox, just float them
html,
body {
margin: 0
}
div:after {
content: '';
clear: both;
display: block;
}
div img {
float: left;
}
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
A <table> and <img> based layout/design is probably not the best direction to be heading these days.
To answer your question you're likely seeing white space from a couple of places.
Spaces between table cells - use border-collapse: collapse; to remove. You might have to remove padding from the table cells as well.
Space around images - images are inline elements and as such have space for descenders, the parts of a letter form that fall below the baseline, and space around the image as well (at least if there's space between the <img> in your markup. Since you have images in a row you can float them or use flexbox to get rid of the space around them. In other instances you'd want to make the images display: block; to remove the inline white space.
Example 1 - What you likely have
td {
background-color: red;
}
<table>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
</table>
Example 2 - More modern approach, NO TABLES with FLEXBOX
.flex {
display: flex;
}
<header>
<div class="flex">
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/aacc00">
<img src="http://placehold.it/100x100/ffcc00">
</div>
<nav class="flex">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
</nav>
</header>
Example 3 - More modern approach, NO TABLES with FLOAT
/* Clearfix to clear floats - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
img {
float: left;
}
<header>
<div class="cf">
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/aacc00">
<img src="http://placehold.it/100x100/ffcc00">
</div>
<nav class="cf">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
</nav>
</header>
Example 4 - Old school with FLOAT
td {
padding: 0;
background-color: red;
}
table {
border-collapse: collapse;
}
img {
float: left;
}
<table>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/11cc00">
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
</table>
Example 5 - Old school with FLEXBOX
td {
display: flex;
padding: 0;
background-color: red;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/11cc00">
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
</table>
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags