I'm trying to add several images on my wordpress page but I don't want any spaces in between all of the images. All of them stacked on top of another..trying to create one big vertically inclined image but all of them have a white line or space in between.
I've tried the following:
No spaced between the tags:
<img src="http://www.test.com/images/packages/unnamed (1).jpg"></img><img src="http://www.test.com/images/packages/unnamed.jpg"></img>
I read this in another post on here:
<div>
<img border="0" src="http://www.test.com/images/packages/unnamed (1).jpg">
</div><div>
<img border="0" src="http://www.test.com/images/packages/unnamed.jpg">
</div>
Any help would be greatly appreciated.
Thanks
you might need to play with the margins/ border with a little css. Both can add space between anything.
Example for your code:
you will need to do a couple things:
1) make the images part of a css class (lets call it noBorder)
ex:
<img src="file" class="noBorder" >
you will add this class to all of your image tags
2) make the actual class
pretty much like this:
<head>
<other head tags>
<style>
.noBorder{
margin:0px;
border:0px;
}
</style>
</head>
3) alternatively, you could just insert this inline code to each of your image tags:
style="border:0px;margin:0px;"
ex:
<img src="file" style="border:0px;margin:0px;" >
note that these styles will also work on those divs you have there
A great resource for these things is: http://www.w3schools.com/css/default.asp
and on this subject: http://www.w3schools.com/css/css_boxmodel.asp
I actually got it fixed, thanks for the help.
All I did was this code for all of the images one after another and boom fixed.
<img src="http://www.domain.com/images/packages/unnamed (1).jpg" style="display:block"></a>
Related
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp
having trouble with a CSS problem, but I can't figure it out. none of my images are displaying, yet they have working urls and the HTML is correct.
there's no image styling, and the image class's only styling is: .postimg { width: 100%; }
problem here:
http://jsfiddle.net/4pmUu/5/
this probably has a really simple solution, but i can't figure out what's wrong..
You do not have the correct image tag. To show an image in HTML use the <img> tag.
see http://jsfiddle.net/4pmUu/7/
As far as I can tell, you just have the image tag wrong. <i> is italic text; you want <img> instead. That is, <img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" />
If you substitute <i ...></i> and use it (below) it should work.
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"/>
You are using the image tag as:
<i src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"> this is where the actual error it.
The correct way to do is to write <img... use this:
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" alt="photo" />
Also please note that, using alt="" is necessary in images, as if the image is not loaded because of some issue, the user will be shown a text about that image.
I am new to web building. Currently following a tutorial for making an image gallery.
http://www.webreference.com/programming/css_gallery/index.html
It all works okish (enough for me to fix things to my liking) apart from the thumbnail section. Below is a snippet of the html and css for the thumbnails which I think is relevant to the help I seek. Basically, when you hover over the thumbnail, the main image will appear in a free space in the page above. That kind of works (image doesnt appear in the right place, but I can fix that no probs) but the thumbnails are not displaying my images.
I changed the container div to "gallery" as I already have a container in my html, and dont want it to be affected by the new css following the tutorial...
html:
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/Picture 014.jpg" alt="Wedding" title="Wedding" />
<br />
Wedding
<br />
Outside area wedding
</span>
</a>
</li>
CSS:
#gallery a.slidea {
background:url(images/Picture 014 thumb.jpg);
height:38px;
width:50px;
}
Also for my CSS, the W3C validator says " #gallery a.slidea " Value Error : background Parse Error thumb.jpg) which I dont understand.
Would love some help :D
Cheers
P.S I'm looking at putting this website onto wordpress (thats a tutorial I'll follow later on with more success I hope)
Your error is here:
background:url(images/Picture 014 thumb.jpg);
That space is throwing it off. Put the url in quotes:
background:url('images/Picture 014 thumb.jpg');
The other problem is in your HTML.
Your CSS says #gallery a.slidea
This would point at all links with the class 'slidea' that are in an element with the id of 'gallery'. Your HTML indicates that the link is of class 'gallery' and 'slidea'. The right way to do it would depend on your goals.
The call to the class doesnt match the name of the class
<a class="gallery slidea" href="#nogo">
is calling
#gallery a.slidea {
Try making them the same name, e.g.
<a class="gallery_slide" href="#nogo">
#gallery_slide a {
Why is my image not becoming hyperlinked? Here's my HTML code (with links taken out), and the CSS of the div it's in:
<div class=bannercontainer>
<img src="image.png" width="194" height="67" border="0" /></div>
.bannercontainer{ margin-left: auto; margin-right:auto; width:900px; height:500px; margin-top:50px;}
<div class=bannercontainer>
needs quotes like this
<div class='bannercontainer'>
Adding "clear:both" to .lowerpart is a solution, of sorts. But I'd recommend re-writing your HTML. It doesn't need to be so complicated... or filled with errors :-/
Note: #feature should be a class (.feature), not an ID, as there's many of them in the document.
Tip: Trying verifying your HTML in the future: http://validator.w3.org/
Also maybe getting a book on learning HTML (Headfirst HTML/CSS couldn't make it much easier) or doing some online training: http://www.w3schools.com/html/default.asp