I'm trying to build a page with a lightbox gallery and an included menu down the side. When the menu is included it creates a large space between the gallery rows that I can't remove which goes away when the menu is removed.
<tr>
<td rowspan="10" id="body-text-other">
<span style="float:left;"><?php include("includes/header-store.html") ?></span>
<span style="width: 100px;"><?php include("includes_releasing/store_menu.html") ?></span>
<div>
<p id="body-text-lrg">Pledge Cards</p>
<div class="imageRow">
<div class="single">
<img src="images/art/gallery/Arise-thumbnail.png" alt="" />
</div>
<div class="single">
<img src="images/art/gallery/Reluctance-thumbnail.png" alt="" />
</div>
</div>
<div class="imageRow">
<div class="single">
<img src="images/art/gallery/Correlation-thumbnail.png" alt="" />
</div>
<div class="single">
<img src="images/art/gallery/Dissidence-thumbnail.png" alt="" />
</div>
</div>
Thanks
Welcome to SO. If you could provide more sample code we can take a better look at it. The problem may be that you are using tables and the default padding/margin are making it bigger.
If you could provide a JSFiddle we can help more.
Thanks and goodluck.
http://jsfiddle.net/
Related
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
I have the following bit of code that changes my logo on the mobile to a Click To Call image otherwise on all other sizes it's just a regular logo with no click to call feature. However I can't seem to get it to actually click to call. It does change the logo on the mobile size but it won't click to call. It does nothing when you click it. What I'm I doing wrong here?
<div class="container">
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg" align="center">
<a href="tel:8003220503">
<img src="../mobile/Acrictc.png" class="btn-responsive" style="width:100%" alt="Image"></a>
<!--Mobile <img src="../mobile/Acrictc.png" class="img-responsive"alt="image" /> -->
</div>
<div class="hidden-xs col-sm-12 hidden-md hidden-lg" align="center">
<img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
<!--Tab-->
</div>
<div class="hidden-xs hidden-sm col-md-3 hidden-lg" align="center">
<img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
<!--Desktop-->
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-3" align="center">
<img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
<!--Large-->
</div>
<div class="hidden-xs hidden-sm col-md-5 col-lg-5" align="center">
<p>
<font color="#000080">Windows - Siding - Roofing - Bathroom Remodeling - Patio Spaces</font>
</p>
<a align="center"><h1><strong><font color="red">800-322-0503</font></strong></h1></a>
<p>
<font color="#000080">Quality Products at Unbelievable Prices - Since 1967</font>
</p>
</div>
<div class="col-md-3" align="center">
<span class="visible-lg"></span>
<img src="http://acricompany.com/pics/fpq2.gif" width="220" height="120" alt="" />
</div>
</div>
</div>
The issue you're having is that the very bottom <div> (the fpq2.gif) only has a class of col-md-3, which at smaller sizes is causing it to overlap the image above for some reason (didn't look into it). Add col-xs-12 and any other required classes to that div and your issue will be resolved.
First of all, know that there are such classes as visible-md and visible-xs. They save a lot of code and improve readability. Note that these classes are called hidden-*-up and hidden-*-down in Twitter Bootstrap 4 (where * stands for the size).
Secondly, note that SVG is supported really well these days, see: http://caniuse.com/#search=svg. You just might want to use that for your logo. SVG renders perfect on any size. This will drastically reduce the amount of images you need. You might end up with a 'click me' image with a visible-xs class and a regular one with an hidden-xs class.
Last of all, please note that looking at the rendered size of the page (which is done by Twitter Bootstrap) is not an acurate way (anymore) to determine the amount of pixels you need for your image, due to retina displays. A visible-xs class image might actually need more pixels to be perfectly sharp than an image with a hidden-xs class. Please read this article: http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/ (or a similar one).
Can anyone advise and perhaps sample code to arrange the images below please ? It's for a html signature with linked images but i'm unsure whether tables or CSS would be best.
Image Far Left should align with the other 4 horizontally and the two top images need to be centered above the larger images below.
Any help appreciated.
enter image description here
using css is better than table.I think you want something like this. but you should scale your images by width and height properties:
<!DOCTYPE html>
<head>
<title>goodarzi</title>
</head>
<style>
.first{
float:left;
width:30%;
text-align:center;
}
</style>
<body>
<div class="wrapper">
<div class="first">
<a href="" ><img src="" title="" /></a>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
</div>
</body>
</html>
I have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
I have the following html..
<div class="container animate" data-animation="pulse">
<div class="margin30 "></div>
<h2 class="border-title">Powering payments for <span></span></h2>
<div class="margin25"></div>
<div style="display:table-cell;">
<div>
<img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
</div>
</div>
</div>
Can someone tell how could I arrange all the divs having images in a horizontal line.I want all the images in one line
div, img {
float: left;
display: inline-block;
}
float: left on your divs is one option:
http://jsfiddle.net/c3DV3/
Since you are only storing images in your div, you should check if it's better for you to use the <img> tag or to set them as a background-image, as stated in this post. It mainly depends on what you are going to do with those images. Check the link for further informations.
Floating the divs on left like others already said is the proper way to do it. You could also use display:inline-block; (even if divs are rendered as blocks by default).
Personally I didn't get if you wanted just to display them on one line, or to align them on top: in this case, you can use vertical-align:top; in addition to the other CSS parameters to achieve the result.