I'm working on a responsive website and my there is extra space after my main image:http://juddbuilders.com/www/
I cannot figure out what is causing this extra space. Even if I take out the nav/all class styles on the photo the space remains between between the photo and .
Could someone please help me? Thank you!
<div id="wrapper">
<?php include('includes/header.php'); ?>
<img class="fluid-img" src="images/header-photo.jpg" alt="Plan Your Home" width="1140" height="400"/>
Just add to ur CSS.
.fluid-img{
display:block;
}
Related
I'm trying to display images from my PC on my website, i've tried using floats but nothing works. Everything I try ends up the same:
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;" align="left";>
<img src="pup.jpg" style="width:50%;height:50%;" align="right";>
</div>
Remove the align left and right and white space between image tags.
<div class="feat">
<img src="nirvana.jpeg" style="width:50%;height:50%;"><img src="pup.jpg" style="width:50%;height:50%;">
</div>
Read up this blog post about white space. Here is a working plunkr (without your images, obviously): http://embed.plnkr.co/sytM7HeFUVDPT1p3HoXN/preview
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'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>
i have this HTML Code:
<div id="header-small">
<img src="/images/logo.png" width="294" height="41" />
<p> </p>
<p align="center">Tel: <?php echo $main_phone_number; ?><br />Email: <?php echo $company_emailaddress_sales; ?></p>
<p> </p>
</div><!-- header-small -->
and CSS:
#header-small {
display:block;
text-align:center;
margin-top:20px;
}
for some reason, its not displaying the image on an iphone :/
any ideas what it could be why its not displaying - im just getting an outline box
Yes, I have experienced this before. You get a black outline instead of an image? Like Flowen said, it is due to your image being too large. It will probably work on android devices and if I remember correctly windows phones also had some variation of border or other issue with large images.
Hopefully resizing the image should fix this for you.
edit: sorry new to this, thought it would add with the comments.
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 {