I've made a simple intro website to my site, simply with the buttons 'Media' and 'Share' and a background. On my PC, when I run the site it appears exactly how I would like it to, however when I run it from my site's server (or JSFiddle) the second button doesn't appear. The image is on the server in the correct location.
#first {
margin: 0 auto;
margin-top: 5%;
text-align: center;
}
#second {
margin: 0 auto;
margin-top: 10%;
text-align: center;
}
https://jsfiddle.net/4cg2k722/1/ - Second button doesn't appear. (also appears like this on the server)
https://gyazo.com/6031a7b8c768120b8d7f4adb3e439e20 - How it appears on my PC.
I am using the same browser when I try both.
EDIT: When you load the page from the website, for a split second you see the icon of an unloaded image. before disappearing.
You had a typo in your HTML code. You were missing the closing " in your second <img> tag. The code should be <img src="http://i.imgur.com/4ZCrEHW.png">.
seem that you miss the location of your pictures. http:/asscave.co.uk/wallpaper.jpg do not reach; same for the 2 other pictures http://asscave.co.uk/media.png and http://asscave.co.uk/share.png.
check the link by copy and paste it in browser seperately. If it appears in your browser it must appear also on your Web page.
try to improve your CSS like this
html,body {
width:100%;
height:100%; //no need to specify
background-image:url(https://i.gyazo.com/6031a7b8c768120b8d7f4adb3e439e20.png)
margin: 0 auto;
text-align: center;
}
#first {
//set the width and float it
margin-top: 5%;
}
#second {
margin-top: 10%; //why 10px as margin-top?
//set the width and float it
}
Related
I have got this style.css
.testing {
display: block;
width: 800px;
text-align: center;
padding: 30px;
margin: 0 auto;
}
applying to one element in html
<div class="testing"><div id="disqus_thread"></div></div>
It works fine on localhost server, where it centers the things inside and makes it 800px wide. When I upload it on the same webpage as my localhost, but to the internet hosting, that one style does not apply at all. Looking at active page styles, it's not loaded. Can you help me explain and fix this? I have no clue why.
EDIT: css import <link rel="stylesheet" href="css/style.css">
how it should look like and how it looks on localhost server
(proper padding on top and sides with proper width)
how it looks like on web hosting
(no padding, no width, nothing applies)
other styles within style.css applies properly to other elements on my pages
Use # for ID selector not (.) because in your live site there is not class .testing it's an ID.
#testing {
display: block;
width: 800px;
text-align: center;
padding: 30px;
margin: 0 auto;
}
Hard coding it into HTML with style="" works. It's not pretty, but there's no other way around
Newbie here. I'm re-learning web on HTML5 - customizing a blogger site to cut-my-teeth. I've been able to change a lot from the defaults (w3schools is invaluable!) but I'm getting stuck when trying to change formats for specific objects.
Three things I can't figure out as examples (site www.paddlebeforethewave.com)
1) Featured Post (top) - image wrapping text is a default behavior for blog posts that isn't followed for featured post. I was able to change the image/size position as below - but can't figure out how to have text wrap the image.
.FeaturedPost .snippet-thumbnail img {
max-width: 100px;
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
2) Featured post (top) - I want to change background color of only the featuredpost. I've tried to identify and modify it as follows - but no effect.
.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: $(posts.background.color);
min-height: 40px;
padding: 30px 40px;
width: auto;
}
OR
.FeaturedPost .bgcolor {
background-color: #cfe2f3;
}
OR
many permutations of above
3) Page 2 content - I created a second page (http://www.paddlebeforethewave.com/p/contact.html) and the formatting is lost for vertical padding and location of page labels.
Is my approach flawed? Could you use one fix as example (I want to learn!)
thank you!
Screenshot for (1) and (2)
1) Add the following code to your theme:
.FeaturedPost .snippet-thumbnail,
.FeaturedPost .post-snippet {
display: inline;
}
2) Your approach is fine, if you haven't seen any changes, try to clear your browser cache. Correct classes for featured post are:
.Blog .post-outer-container, #page_body .FeaturedPost {
}
3) I'm not sure I can see the problem. Could you provide a screenshot, please?
EDIT:
Found it! Go to your theme code and add following property to this class:
.item-view .blog-name {
-webkit-flex-flow: column;
flex-flow: column;
}
I see you fixed your problem I did however see an issue on your site. For big screens a white bar appears if the screen is larger than 1800px.
You can fix this by finding this code in your CSS
.sidebar-container
and adding
display:none;
You could test this in your browser by zooming out until the bar appears. Cheers
I am just wondering how I can print a background image in a div in bootstrap. I can see the image in the page but when I try to print it is not there.
Here is my html
<div class="row">
<div class="col-p-3 card">1</div>
<div class="col-p-3 card">1</div>
<div class="col-p-3 card">1</div>
<div class="col-p-3 card">1</div>
</div>
And here is my css
#media print {
.col-p-1, .col-p-2, .col-p-3, .col-p-4, .col-p-5, .col-p-6, .col-p-7, .col-p-8, .col-p-9, .col-p-10, .col-p-11, .col-p-12 {
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
}
.card{
height: 200px;
width:200px;
background-image: url('card.jpg');
}
}
I can be able to print a background image for a whole page. I followed this link, How do I print only for a div? Will appreciate for any help
Your code, as-is, will really print 4 div's with background - just tested it.
You can demo it in Google Chrome in DevTools > More Tools > Rendering settings > Emulate CSS Media > print. I would look for fix somewhere else than code.
For any one having the same problem as mine, This is the possible solution. Web browsers disable background graphics by default, make sure that you enable background graphics. This guy really helped me to solve this problem
https://stackoverflow.com/a/3894013/6098616.
I tried to find a solution to this problem, but failed (maybe I my searching skills are just horrible). Basically, here is the webpage http://www.eboxlab.net/transbeam/our-solutions/data-and-internet-services/.
There are two menu items here, in the first box you see the link "Data and Internet Services is chosen" and the second box is just three elements behaving like anchors. Right now, those are aligned next to the top element in the first level menu (Data and Internet Services). What I need to achieve is that when you choose another option (VoIP and Voice Services for example) the second box moves next to it. So it's aligned depending on the active link in the first menu. I am pretty sure this can be achieved with javascript, but I am really bad at it.
PS: Although I am bad at JS feel free to use all the terms, I will do my research later, just need the code and a little explanation behind it, so in the future I will be able to do this myself.
May be setting a margin to the right box if a certain element in the left one is chosen.
Firstly, there is solution for your webpage, but it cannot be done via JavaScript.
JavaScript can do things like what you thought, but note that it only works on the same page. It means that when user click somewhere, and still remains on the same page, JavaScript can do many things, like change the DOM structure, change style of something, or do some animation. But if the page is redirected to another page, that's different.
[Solution for your webpage]
On the page for item "VoIP and Voice Services" (http://www.eboxlab.net/transbeam/our-solutions/voip-and-voice-services/), add following CSS to your page file:
#banner .left_box .box-2 {
margin: -10px 0 0 20px;
}
For other items, it would be similar to change the margin to adjust its position (vertically position):
Page of "Cloud Services"
#banner .left_box .box-2 {
margin: 30px 0 0 20px;
}
Page of "Integrated Voice and Data Services"
#banner .left_box .box-2 {
margin: 70px 0 0 20px;
}
Page of "Additional Data and Voice Features
#banner .left_box .box-2 {
margin: 110px 0 0 20px;
}
Or you can just change "margin-top", both work.
/* Following part added at 15:08 Oct 28, GMT+8 */
[Solution for webpage with Template]
1. In the template file, change this line
<div class="box-2">
to
<div class="box-2-{$item}">
Note: {$item} is variable format of Smarty, you may change this to your own template's format.
2. In each page, assign an identical value to this variable, you will do something like:
$smarty->assign('item','item1'); //assign item2, item3 to the other two pages.
3. In Style file ("transbeam/wp-content/themes/transbeam/style/style.css"), add following lines:
#banner .left_box .box-2-item1 {
background:url(../images/sep_1.png) no-repeat left;
float:left;
height:163px;
margin:-50px 0 0 15px;
}
#banner .left_box .box-2-item2 {
background:url(../images/sep_1.png) no-repeat left;
float:left;
height:163px;
margin:-10px 0 0 15px;
}
#banner .left_box .box-2-item3 {
background:url(../images/sep_1.png) no-repeat left;
float:left;
height:163px;
margin:30px 0 0 15px;
}
This should work, hope to help you out.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.