I am creating a simple(ish) website for one of my iPhone apps using the Twitter Bootstrap project. I have created a full website with this and found it quite easy to use but I am having some issues media-grid.
I am trying to achieve a row of 3 images using the media-grid class. The images are 280px in width which gives me 840px in total. The container is 940px wide so I have 100px grace to use for padding etc. I am finding this extremely difficult to do as when i view the site it puts two images side by side then the third on the next row. Some anomalies are showing up though, which are;
When I publish the index.html and associated css file via FTP the website displays the images with two side by side then the third image on the next row underneath the first.
When I preview the website in 'Coda' (the editor on Mac I am using to write the html and css) the website looks exactly how I want it too with all 3 images side by side in one row.
I have tried a number of things;
I have tried editing the .media-grid styles in the CSS and it doesn't seem to make a difference to how the site looks. Even if I had massive margins or padding it doesn't alter for some reason?
I have tried putting my own id onto the media-grid class for the three images then styling then myself which also has no impact on the visuals.
I have used the following code to insert my images;
<div class="container">
<ul class="media-grid" id="imagearray">
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>
Am I missing something in the CSS? I am not fluent with CSS so it is possible I am overlooking something? Any help would be appreciated.
To get the default styling to work correctly you need to wrap the <li>s with an <a href>.
e.g.
<ul class="media-grid" id="imagearray">
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
Related
I try to create my portfolio with using GitHub Pages https://rageanalyst.github.io/Portfolio/. I use a template and alter him. I don't know HTML. I have a problem with caption when I open a frame with project. Two pictures don't underneath, they have (untitled). Only the last picture have caption and is the project tittle.
Problem: example
Q: How can I add caption to individual pictures in this frame?
This is extract of code when I have a single project:
<article class="col-6 col-12-xsmall work-item">
<a href="images/thumbs/trainings.JPG" class="image fit thumb"><img src="images/fulls/gym.jpg" alt="" />
</a>
<h3>Gym Tracker</h3>
<p>This project contains tables that allow me to track my progress in the gym. </p><br>
<ul class="actions">
<li>Full Project</li>
</ul>
</article>
Edit:
I still haven't solved the problem, anyone else can help me?
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
I am trying to use the orbit feature in foundation 5. The loader seems to work but images don't load. I've inspected it and the link to images seems to be fine and i seem to have all the up to date JavaScript files needed for it to work.
Any ideas?
http://jsfiddle.net/p7PXS/
<div class="row">
<div class="slideshow-wrapper preloader">
<ul data-orbit data-options="animation:fade;
pause_on_hover:false;
animation_speed:1000;
navigation_arrows:true;
bullets:true;">
<li>
<img src="img/bodymetrix.jpg">
</li>
<li>
<img src="img/highgate.jpg">
</li>
</ul>
</div>
</div>
You seem to be missing those files from your working directory.
When you add a web link it works fine.
I have a page which displays images of youtube videos, and the user can select videos out of them.
I am displaying them like this
<ul>
<li>
<div class="youtubeMediaContainer">
<img src="video_preview_image1.jpg">
<img src="play_icon.png">
</div>
</li>
<li>
<div class="youtubeMediaContainer">
<img src="video_preview_image2.jpg">
<img src="play_icon.png">
</div>
</li>
<ul>
The user can select these videos (by selecting i mean a big border appearing on the container indicating that its selected) from here by clicking on the container (the image, except for the area occupied by the play icon). But the users can also play these videos by clicking on the play icons. When the click, the contents of youtubeMediaContainer is replaced by the youtube iframe where videos play.
Now the issue is that after a video is played, how does the user now select that video. Can i put an overlay of sorts over the iframe? What would be the best way for this?
Why not perhaps create a separate player div inside the entry? In the manner of:
<ul>
<li>
<div class="youtubeListEntry">
<img src="video_preview_image1.jpg">
<img src="play_icon.png">
<div id="youtubeMediaPlaceholder1"></div>
</div>
</li>
<li>
<div class="youtubeListEntry">
<img src="video_preview_image2.jpg">
<img src="play_icon.png">
<div id="youtubeMediaPlaceholder2"></div>
</div>
</li>
<ul>
This way, you still retain your original structure so you can have the user select the video.