I am currently working on a portfolio for my website. I added my picture in it, but the picture does not show.
<div id="wrap">
<h1>Portfolio/CV</h1>
<ul id="gallery">
<li>
<a href="#">
<img src="logo.png"> <!-- doesn't show -->
<div>These are coming soon!</div>
</a>
</li>
</ul>
</div>
You can see above html live on my portfolio.
I have uploaded the image to my server.
Does somebody understand what I'm doing wrong?
this is how your HTML looks, when you are able to access those links your site will work. Seems your images are uploaded to a different folder or maybe permission to read is not there.
http://www.anika.nl/logo.png
<body>
<div id="wrap">
<h1>Portfolio/CV</h1>
<ul id="gallery">
<li><img src="logo.png"><div>These are coming soon!</div></li>
<li><img src="lights2.jpg"><div>I am working on it!</div></li>
<li><img src="flo3.jpg"><div>Why are you even reading this?</div></li>
<li><img src="lights1.jpg"><div>Humans are always so curious</div></li>
<li><img src="flo2.jpg"><div>LOL </div></li>
<li><img src="lights3.jpg"><div>Can't stop?</div></li>
</ul>
</div>
</body>
</html>
Related
I'm using Thymeleaf (Spring Boot project). I have the code:
<div class="single_product_thumbnails">
<ul>
<li class="active"><img th:src="${product.mainImage}" alt="" data-image="${product.mainImage}"/></li>
<li><img th:src="${product.imageSecond}" alt="" data-image="${product.imageSecond}"/></li>
<li><img th:src="${product.imageThird}" alt="" data-image="${product.imageThird}"/></li>
</ul>
</div>
Th:src load image thumbnail in left panel (EL code works). Data-image load image on the center of screen - code not work i.e. if I use data-image="http://image.png" or data-image="images/single_2.jpg" it works but my EL expression doesn't work.
Original code (fully works - from https://colorlib.com/etc/coloshop/single.html):
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" data-image="images/single_1.jpg"></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" data-image="images/single_2.jpg"></li>
<li><img src="images/single_3_thumb.jpg" alt="" data-image="images/single_3.jpg"></li>
</ul>
</div>
How to use EL properly in this data-image example? Thank you in advance for your help.
Thymeleaf only evaluates attributes that are prefixed with th:. You should be able to use:
<div class="single_product_thumbnails">
<ul>
<li><img src="images/single_1_thumb.jpg" alt="" th:data-image="${product.mainImage}" /></li>
<li class="active"><img src="images/single_2_thumb.jpg" alt="" th:data-image="${product.imageSecond}" /></li>
<li><img src="images/single_3_thumb.jpg" alt="" th:data-image="${product.imageThird}" /></li>
</ul>
</div>
The other option would be to use th:attr, to dynamically generate the attribute you want. Like this:
<img src="images/single_1_thumb.jpg" alt="" th:attr="data-image=${product.mainImage}">
I'm trying to set an image as the background but because it's a browser bases editor, I cannot just link the photo as they are not saved together.
<body>
<div id="backG"> <img src="(image link. i didnt add the link here as it is very long) " alt="concert stadium">
</div>
<div id="mainPage">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;"> Ice Arena
</h1>
</div>
<ul>
<li style="color:#ffe700;">
Home
</li>
<li>
Gallery
</li>
<li>
Order Form
</li>
<li>
The Arena
</li>
<li>
Contact Us
</li>
< /ul>
</div>
</div>
</body>#
here is the CSS for the photo.
#backG{
diplay:block;
border:0;
}
Free Codepen does not let you host your own images, so you have to upload them somewhere else and link to them. A lot of people use dropbox or imgur
for this. Hope this helps!
I have one iframe on my index page that I want to have links to different pages. But I also want the link when clicked to navigate down to the actual frame, as right now it is just staying at the top of the page. I am quite confused about this.
Here is my code:
HTML
<header>
<div id="logo">
<img src="../../assets/images/logo.png" alt="">
</div>
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>Gallery</li>
</ul>
</nav>
<div id="mainInfo">
<iframe src="about:blank" name="iframe"></iframe>
</div>
I think you're thinking of anchored links:
<li>Gallery</li>
And iframegallery.html:
<div id="mainInfo">
<iframe src="about:blank" name="iframe" id="iframe"></iframe>
</div>
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.
Learning Bootstrap (and frontend-stuff in general) recently and am stuck at one particular problem. I have a navbar that scales across the whole pagewidth with a logo aligning to the left and then a followup of 5 items in an unordererd list, floating to the right. Works great as long as the responsiveness doesn't kick in. The general behavior showing when entering a certain min/max width - ordering the list-items underneath each other - is great, however, the right floating is lost somewhere down the road then. While skimming through the bootstrap-responsive.css I have trouble spotting the line responsible for this behavior.
Does anybody have any idea where I should start looking?
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
<ul class="nav" style="float: right;">
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
</ul>
</div>
</div>
Besides the inline-styling of the unordered list, the only rule I override is .navbar-inner from the main bootstrap.css to adjust the coloring.
Regards!
::edit: I just realized that this has nothing to do with the bootstrap-responsive.css, since I removed it but the behavior remains the same. However, the problem still exists. ::
html
<ul class="nav" id="nav_ul">
CSS
#nav_ul{
float:right!important;
}
Try Boostrap helper class pull-right:
<ul class="nav pull-right">
or try to display in block:
<ul style="display:block" class="nav pull-right">
Try this
<div class="navbar">
<div class="navbar-inner clearfix">
<a class="brand pull-left" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
<ul class="nav pull-right">
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
<li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
</ul>
</div>
</div>
Try using:
float: right!important;
clear: right;
text-align: right;
Also to kepp it on the same line though if the screen gets too small it will disappear so won't work well on mobile devices use this line of css:
white-space: nowrap;
http://jsfiddle.net/hive7/b9cgn/4