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 {
Related
Okay so i just started a Tumblr blog the other day, and when i was editing the profile page i had happily found a edit with HTML button, and i thought wow now i can finally loose this (image below) that's intruding on my theme.
So, I hit CTRL + F to find code relating to the shape, and found that the shape was actually a fill rather than a preset image, so i entered the hex code for a transparent black #00000000), but to no avail, it didn't work, and after about an hour or so of scouring the web, I decided to reach out, and was possibly hoping that someone with HTML experience could help, anyways here's the code
Right the background you should be able to change within your template settings as this is just a background you need to change. This is not something within the HTML template - I am not sure how to change background in Tumblr but look within profile or theme settings, widgets or block.
Use inspect element and you will see this:
.header-image.cover {
background-image: url(http://static.tumblr.com/d3c51755c609fd193d623381320efcb6/kcvyami/oSJnx6juu/tumblr_static_tumblr_static_jqy1bj0w774s0o04wc4wsskc_focused_v3.gif);
}
The image that you are looking for is found here:
http://static.tumblr.com/d3c51755c609fd193d623381320efcb6/kcvyami/oSJnx6juu/tumblr_static_tumblr_static_jqy1bj0w774s0o04wc4wsskc_focused_v3.gif
If you're looking to delete the doge image, then delete this from the HTML:
<figure class="avatar-wrapper animate">
<a href="/" style="background-image: url(http://33.media.tumblr.com/avatar_e1fbc1eda419_128.png)" class="user-avatar">
<img src="http://33.media.tumblr.com/avatar_e1fbc1eda419_128.png" alt="" class="print-only invisible">
</a>
</figure>
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!
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
I'm using Dreamweaver to derive the pixel co-ordinates for image maps. One is already done but the other is proving impossible, perhaps because what I intend isn't permissible. My 'impossible' image that I'd like to set hotspots for is one of the list entries inside an unordered list, and whenever I try to select the img element in code view to marquee the map, it won't work and selects the ul element instead.
I only ever use this software for image-mapping and its code validation feature, but its a pain and I'd just as soon do without it if there's a method for defining/calculating pixel co-ordinates for a circular image map.
Any advice, or is DW behaving itself and what I'm trying isn't permitted in HTML?
Updated: To be more specific, it's not just a list but a div-bounded list that acts as a gallery with its input from clickable thumbnail image anchors, as per the code below (just one list item for clarity). What I'd like to do is make 'stuff-medium.jpg' a clickable image that maps to the next image in the gallery (via a href "#two"), providing navigation bars for my gallery also...
<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img src="../images/stuff_medium.jpg"></li>
</ul>
</div>
<div>
<img src="../images/stuff_thumb.jpg">
</div>
Update II -- this code works; I did it by hand, but I'm blown if I can figure out how to do it in DW:
<li id="one"><img src="../images/stuff_medium.jpg" border=0 usemap="#gallerymap">
<map name="gallerymap"><area shape="circ" coords="399,157,30" href="#two" target="_top"></li>
Place a warning in your code that only shows up if javascript is turned off. Use js to add a class to the body. if js is turned off, the class won't be added and the message will be displayed, if js is on, the class will be added to body and the msg will not be displayed
html:
<aside id="js-warning">This site requires JavaScript to work properly. Please turn it on for more awesomeness!
</aside>
js:
<script>
$(document).ready(function(jswarning) {
$('body').addClass('js');
});
</script>
css:
#js-warning {
display:block;
}
.js #js-warning {
display: none;
}
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>