Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
This is my page http://suntmormon.ro/jarman-home-page/ and I want to know why my four smaller images are staggering and not aligned. I use wordpress.
Here is my current code
[one_half padding="0 0 0 5px"]
<link><img class="alignnone wp-image-203 link_img" src="http://suntmormon.ro/wp-content/uploads/2014/02/Vizioneaza-un-mesaj-mormon-final-optiunea-2.png" alt="rounded_corners" /></a>
[/one_half][one_half_last padding="0 13px 0 5px"]
<link><img class="alignnone wp-image-210 link_img" src="http://suntmormon.ro/wp-content/uploads/2014/02/Ce-facem-noi-final.png" alt="Munți de urcat" width="465" height="232" /></a><link><img class="alignnone wp-image-222 link_img" src="http://suntmormon.ro/wp-content/uploads/2014/02/Ce-credem-final.png" alt="În ce cred Mormonii" width="465" height="233" /></a>
[/one_half_last]
<br clear="all">
[one_fourth]
Elena
<link><img class="mormon-thumbnail" src="http://suntmormon.ro/wp-content/uploads/2014/06/elena.png" height="168" width="180" alt="" /></a>
<link>Descarcă</a>
[/one_fourth]
[one_fourth]
Sergiu
<link><img class="mormon-thumbnail" src="http://suntmormon.ro/wp-content/uploads/2014/09/sergiu.png" height="168" width="180" alt="" /></a>
<link>Descarcă</a>
[/one_fourth]
[one_fourth]
Cătălin şi Carmen
<link><img class="mormon-thumbnail" src="http://suntmormon.ro/wp-content/uploads/2014/07/foteas1.png" height="168" width="180" alt="" /></a>
Descarcă
[/one_fourth]
[one_fourth]
Alin
<link><img class="mormon-thumbnail" src="http://suntmormon.ro/wp-content/uploads/2014/07/alin.png" height="168" width="180" alt="" /></a>
<link>Descarcă</a>
[/one_fourth]
I tried a clear break and that did not work.
Your current simplified code is this
HTML:
<div class="content-column one_fourth"></div>
<p></p>
<br>
CSS:
p {
margin-bottom: 1.5em;
}
All you need to do is either:
Change the css for the p element to margin-bottom: 0em;
OR
Delete that p element from the html.
AND
Delete the br element from the html.
you need to delete all p elements and br elements
Related
so im designing a website using html, php, all that fun stuff & im trying to make facebook, twitter, youtube & instagram links that will open a new tab and take you to the website. but at the moment the URL is going to localhost/horizonphotography/www.facebook.com instead of opening the new tab and THEN going to www.facebook.com.
heres my HTML
<div class="social">
<a href="www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
<a href="www.twitter.com" target="_blank">
<img border="0" alt="twitter" src="img/twitter.png" width="50" height="50">
</a>
<a href="www.youtube.com" target="_blank">
<img border="0" alt="youtube" src="img/youtube.png" width="50" height="50">
</a>
<a href="www.instagram.com" target="_blank">
<img border="0" alt="instagram" src="img/instagram.png" width="50" height="50">
</a>
</div>
and my css 'if' required.
.social {
position: fixed;
bottom: 0;
right: 7%;
width: 300px;
}
thanks in advance!
Try using a protocol like http:// or // to external links like this :
<a href="http://www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
You need to specify the protocol, or put // at the start of the href attribute. For example:
http://www.youtube.com
Or
//www.youtube.com
Awesome, needed to identify the protocol as suggested. working well now! thanks everyone!
I need to make sure that my 3 footer widgets are the same height, even if the site user decides to put more content in one of the widgets, so that they adjust in height. I understand using display: flex is the best solution. I can't seem to make it work.
My html:
<div class="footer-widgets"><div class="wrap"><div class="footer-widgets-1 widget-area"><section id="testimonial_footer-3" class="widget widget_testimonial_footer"><div class="widget-wrap"><div id="testimonial_widget"><h4 class="widget-title widgettitle">Testimonial</h4><p class="myclass">Loved being a student at derby skill build. They really helped me grow as a</p><div id='tinyname'> </p> - Louise findlay, former student </div> </div></section>
</div><div class="footer-widgets-2 widget-area"><section id="blog_widget-2" class="widget widget_blog_widget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Blog</h4>
<ul class="realty_widget">
<div class="titleblogcolor"> <a href="http://localhost/wordpress/?blog_posts=this-is-a-blog-by-a-student" title="this is a blog by a student">
this is a blog by a student</a></a> </div>
Find out more about this in our blog. We have lots going on here at Derby Skill Build</ul></div></section>
</div><div class="footer-widgets-3 widget-area"><section id="black-studio-tinymce-2" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Associated with:</h4>
<div class="textwidget"><p><img class="alignnone size-full wp-image-244" src="http://localhost/wordpress/wp-content/uploads/2015/03/council.png" alt="council" width="80" height="43" /> <img class="alignnone size-medium wp-image-245" src="http://localhost/wordpress/wp-content/uploads/2015/03/edexcel.png" alt="edexcel" width="80" height="15" /> <img class="alignnone size-medium wp-image-247" src="http://localhost/wordpress/wp-content/uploads/2015/03/ofsted.png" alt="ofsted" width="80" height="69" /> <img class="alignnone size-medium wp-image-248" src="http://localhost/wordpress/wp-content/uploads/2015/03/woodhead.png" alt="woodhead" width="80" height="29" /> <img class="alignnone size-medium wp-image-249" src="http://localhost/wordpress/wp-content/uploads/2015/03/ascentis.png" alt="ascentis" width="80" height="49" /> <img class="alignnone size-medium wp-image-250" src="http://localhost/wordpress/wp-content/uploads/2015/03/beauty2.png" alt="beauty" width="80" height="35" /> <img class="alignnone size-medium wp-image-251" src="http://localhost/wordpress/wp-content/uploads/2015/03/connexions.png" alt="connexions" width="100" height="23" /></p>
</div></div></section>
</div></div></div>
I have tried the following in my style.css:
.footer-widgets { display: flex; }
.footer-widgets .wrap (display: flex; }
neither seem to work. I need to put `display: flex' for the parent div of these 3 widgets I understand. Any ideas please?
I am using the genesis framework.
The items you want automatically adjusted (flex items) need to be contained in a parent flexbox.
So, you need to do something like this and apply it to your code:
.flexbox {
display: flex;
}
.flex-item {
flex: 1; /* you need to use the "flex" property on the items you want in the flexbox, not the "display" property */
}
It's hard to see what you want adjusted based on your code. All of the widgets will need to have the same child-to-parent relation with the .flexbox container. So, if you give each widget a class of .footer-widget, then you can use .flexbox > .footer-widget to target each flex-item.
Hope that helps!
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
End tag td seen, but there were open elements. I don't get it, what's wrong with this markup?
<td class="column-9">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/03/the-best-online-casinos-yes-transparent-good-e1395756650738.png" alt="This images tells that the option is positive" width="40" height="40" class="alignnone size-full wp-image-61" />
</td>
<td class="column-10">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
</td>
<td class="column-11">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-info-sign-e1396351202753.png" alt="This gives you more specific information about the online casino offer" width="40" height="40" class="img-info" />
</td>
<td class="column-10">
Inside a TD
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
Inside an A inside a TD
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
An IMG. The element is self closing. Still inside an A inside a TD
</td>
Trying to close a TD but currently inside an A
You can't close the TD before you close the A, you are missing </a>.
you need to close your link <a> tag
<td class="column-9">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/03/the-best-online-casinos-yes-transparent-good-e1395756650738.png" alt="This images tells that the option is positive" width="40" height="40" class="alignnone size-full wp-image-61" /></a>
</td>
<td class="column-10">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" /></a>
</td>
<td class="column-11">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-info-sign-e1396351202753.png" alt="This gives you more specific information about the online casino offer" width="40" height="40" class="img-info" /></a>
</td>
The only thing that is missing there is the </a>. And it would be making the HTML markup invalid.
It is totally invalid, you should enclose the elements as your open them.
Here is the markup that you can trust on:
<td class="column-9">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/03/the-best-online-casinos-yes-transparent-good-e1395756650738.png" alt="This images tells that the option is positive" width="40" height="40" class="alignnone size-full wp-image-61" />
</td>
<td class="column-10">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
</a>
</td>
<td class="column-11">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-info-sign-e1396351202753.png" alt="This gives you more specific information about the online casino offer" width="40" height="40" class="img-info" />
</a>
</td>
Close <a>:
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
</a>
I made my first attempt here to create my own webpage.. But what can be the error in the code i wrote here?
<div align=center>
<img src="icons/twittergrey.png" alt="Twitter" name="Twitter" width="48" height="48" border="0" id="Twitter" />
<img src="icons/facebookgrey.png" alt="Facebook" name="Facebook" width="48" height="48" border="0" id="Facebook" />
<img src="icons/youtubegrey.png" alt="YouTube" name="YouTube" width="48" height="48" border="0" id="YouTube" />
<img src="icons/rssgrey.png" alt="RSS" name="RSS" width="48" height="48" border="0" id="RSS" />
<img src="icons/androidgrey.png" alt="Android Market" name="Android Market" width="48" height="48" border="0" id="Android Market" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','icons/twitter.png',1)">
<a href="#" target="_blank" onmouseover="MM_swapImage('YouTube','','icons/youtube.png',1)" onmouseout="MM_swapImgRestore()">
Sorry i got this loong lines here.. Dunno how i could make it look like a list..
Well there's only two problems I can see, the first is that the center should be in speech marks, so it should look like ="center". Secondly you need to add </div> at the end... Should work then :D
After breaking your lines, a couple of your anchors are missing the </a> on them, which I'm sure is going to be causing some problems for you.
Also, align="center" is deprecated. Use style="text-align: center" instead.
P.S. You really shouldn't write your code all on one line like that (at least hopefully you aren't). All that will cause is problems like this.
You have an embedded anchor tag in an anchor tag (may cause problems) you also are missing two ending anchor tags and an ending div tag as noted by others.
Your markup is really confusing though XD
cleaned up (a little) version of your markup
http://jsfiddle.net/MZge2/1
You need to Close
<div align=center> with </div>
<div align=center> Should be <div align="center">
I am trying to create images hyperlinked to some URL's and hyperlinks donot seem to work.
I am using the code as given below at http://windchimes.co.in/index_w%20-%20Copy.html
Can you tell me why the hyperlinks to the icons are not workking?
<td width="29" style="padding-bottom: 42px;><img align="middle" title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif"><td>
Don't know if there is more, but you're missing the closing quotes at:
<td width="29" style="padding-bottom: 42px;>
^^^
It is much easier to diagnose, maintain and adjust your web pages if you do the following.
Keep your concerns separated - your HTML should describe a document, not its style. Put your style rules into a cascading style sheet (CSS), which will also mean you'll satisfy the next rule
Don't repeat yourself. You had a width and style rule on all of these elements that was exactly the same. That means if you want to change the width to 30px, you'd have to find / replace each of these items (and if you automate your find and replace, you have to hope you don't accidentally replace something you didn't mean to.
Layout your code - by properly tabbing your HTML code, you will spot errors like missing closing tags as it will instantly look wrong to the eye.
Use validator.w3.org to make sure the code is correct - this will spot errors for you and will help you avoid the two problems in your code - a missing quote and a missing closing tag.
Here is a clean version of your code...
CSS:
td.myClass {
width: 29px;
padding-bottom: 42px;
text-align: center;
}
And HTML:
<td style="myClass">
<a href="http://windchimes.co.in/blog" target="_blank">
<img title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.linkedin.com/groups?gid=120310" target="_blank">
<img title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank">
<img title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif">
</a>
</td>
<td style="myClass">
<a href="http://twitter.com/windchimesindia" target="_blank">
<img title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.youtube.com/user/Windchimesindia" target="_blank">
<img title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif">
</a>
</td>
A good idea is to run your code through the W3 Validator:
http://validator.w3.org/check?uri=http://windchimes.co.in/index_w%2520-%2520Copy.html
It will tell you in what ways your HTML is malformed.
Your last <td> tag isn't properly closed, either.
<td width="29" style="padding-bottom: 42px;>
...
<td>
should be </td> instead of <td> at the end.