Images are not appearing on my local host. Here is HTML code. I've tried several variations to display te images. Twitter Bootstrap is used. Any help would be greatly appreciated.
<div class="media">
<a class="pull-left" href="">
<img class="media-object" src="/img/grads.jpg/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Collaborate with students at other Universities</h4>
<p>Join your classes and work with other students on studying without having to meet up.</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="">
<img class="media-object" src="grads.jpeg/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Meet new friends you're in class with</h4>
<p>Pick who you want to be a stranger in your own classes. School is social and so is moreo. : )</p>
</div>
</div>
Here is the CSS code. Not sure what I'm doing wrong.
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 10px;
padding-bottom: 20px;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 30px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 72px;
line-height: 1;
}
.jumbotron .btn {
font-size: 15px;
padding: 10px 20px;
}
/* Supporting marketing content */
.marketing {
margin: 5px 0;
}
.marketing p + h4 {
margin-top: 14px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
Try to view source and check for the paths of the images. Since you have used relative paths, Check whether the correct path for the image is taken or not on local
Verify your images path. it should end with file-name and its proper extension.
See you have,
<img class="media-object" src="grads.jpeg/64x64">
This could be like this, i think;
<img class="media-object" src="/64x64/grads.jpeg">
Now, if the image (grads.jpeg) is available in root's 64x64 folder, that will definitely render.
use Bootstrap image for image loading and media object use data-src attribute not src but i did not see any example of loading image with direct image URL Bootstrap Media object
EDIT
i think this tag refers online url, i am not sure. take a look at this placehold this URL is utility site which re-size the hosted image just like bootstrap example
Related
so i'm very new to web development and can't find anything online about the issue i'm having. I'm basically just trying to change a hover function on 4 logo's i've inserted into the web page i'm working with. All image are PNG's with a plain white colour and a transparent background (I converted it myself in Photoshop). However, i'm trying to use the hover function on each image so it turns to a grey(ish) shade but for some reason the white colour doesn't change but the background colour does, when I only want the white part of the image to change to the slightly darker shade. Any help would be much appreciated.
Here is the HTML (just in case it's needed)
<!-- social media bar -->
<div class="socials">
<!-- instagram link -->
<div class="instaBox" id="socialBox">
<a href="#">
<img src="/assets/instaLogo.png" alt="Instagram Logo" class="instaLogo" id="socialsLogo">
</a>
</div>
<!-- tiktok link -->
<div class="tiktokBox" id="socialBox">
<a href="#">
<img src="/assets/tiktokLogo.png" alt="tiktok logo" class="tiktokLogo" id="socialsLogo">
</a>
</div>
<!-- youtube link -->
<div class="youtubeBox" id="socialBox">
<a href="#">
<img src="/assets/youtubeLogo.png" alt="YouTube Logo" class="youtubeLogo" id="socialsLogo">
</a>
</div>
<!-- vimeo link -->
<div class="vimeoBox" id="socialBox">
<a href="#">
<img src="/assets/vimeoLogo.png" alt="Video Logo" class="vimeoLogo" id="socialsLogo">
</a>
</div>
</div>
And here is the CSS
/* social media bar */
.socials{
float: left;
width: 20%;
height: 100%;
}
#socialBox{
float: left;
width: 10%;
overflow: hidden;
margin-left: 5%;
margin-right: 5%;
}
#socialsLogo{
border: none;
width: 100%;
}
#socialsLogo:hover{
background: #b0b0b0;
}
I'll add an image of the logo's on the web page as well so you can see the issue i'm getting.
Logo's normally
Logo's with the hover effect
You can use filter
If your goal is to change the icons lines colors, then use svg images and change their color
img { transition: filter .25s ease-out }
img:hover { filter: grayscale(.5) }
<img src="https://placekitten.com/200/300" />
According to your screenshot, your icons apparently have transparency.
I also assume your html body or parent element has a black background color.
You could actually just change the opacity to emulate a gray icon color.
As an alternative you could also change contrast.
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
body {
background-color: #000;
}
.socialBox {
text-align: center
}
.socialLink {
background-color: #000;
color: #fff;
display: inline-block;
text-align: center;
width: 1em;
height: 1em;
font-size: 5em;
}
.socialLink img {
width: 100%;
}
.socialLinkFontAwesome {
color: #fff;
}
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
.socialLink:hover .icon-img2 {
opacity: 0.5;
}
.socialLinkFontAwesome:hover {
color: #999;
}
/* just for adjusting example icon sizes */
.svg-inline--fa {
height: 1em;
font-size: 0.75em;
vertical-align: 0.125em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<!-- tiktok link -->
<p class="socialBox">
<a class="socialLink tiktokLink" href="#">
<img class="icon-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink tiktokLink2" href="#">
<img class="icon-img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink socialLinkFontAwesome"><i class="fab fa-tiktok"></i></a>
</p>
Recommendations
Avoid duplicate element IDs. Better add your ids to class attribute like this:
<div class="socialBox tiktokBox">
You might also consider to use a svg/vector based icon library like fontAwesome, feather-icons etc. (see third icon example )
These libraries can simplify your development tasks and offer a superior rendering quality, since they are scalable.
So I just finished building a site called https://services.codexcentre.com, and able to duplicate the page fine on my PC.
But when I provide my friend to review the site, she inform me on the first page down below where the 4 boxes are located it looks squeezed together - this only shows on mobile (PC it looks fine.)
When I duplicate the problem on my phone, I find the same issue and not sure why it's doing this. I have the code pasted below to how this was structured. To have an idea, this is a wordpress site and I custom coded this section due to problems with the wordpress column structure.
Any feedback is appreciated.
<style>
.gallery_container{
max-width: 1200px;
padding: 30px;
margin: 20px auto;
}
#shop_column{
column-count: 2;
column-gap: 15px;
}
#shop_page{
text-align: center;
font-family: 'Tangerine', cursive;
font-size: 36px;
padding: 0px;
margin: 0px auto;
}
#shop_image{
cursor: pointer;
width: 750px;
height: 345px;
padding: 10px;
margin: 10px auto;
}
</style>
<div class="gallery_container">
<div id="shop_column">
<a href="http://services.codexcentre.com/new-build/">
<img id="shop_image" src="imgs/home01.jpg">
</a>
<p id="shop_page">New Build</p>
<a href="http://services.codexcentre.com/dining-remodel/">
<img id="shop_image" src="imgs/dining01.jpeg">
</a>
<p id="shop_page">Living Room Remodel</p>
</div>
<div id="shop_column">
<a href="http://services.codexcentre.com/kitchen-remodel/">
<img id="shop_image" src="imgs/kitchen01.jpg">
</a>
<p id="shop_page">Kitchen Remodel</p>
<a href="http://services.codexcentre.com/bathroom-remodel/">
<img id="shop_image" src="imgs/bathroom01.jpg">
</a>
<p id="shop_page">Bathroom Remodel</p>
</div>
</div>
What are you expecting should happen?
As I can see, you have two problems depending what you want.
You get two columns in mobile but want one. Fix by adding media-query to one column in mobile.
Images get stretched since you have fixed values.
You have To make your website responsive so that it look attractive in all the devices.
#media(Max-width:345px){#shop_image{width:250px}}
And change other aspects also according to the width of device
I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.
This is the navbar before making the image clickable.
This is the HTML for it:
<div class="top_nav">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
This is the CSS for it:
.top_nav {
overflow: hidden;
background-color: #2c3e50;
border-bottom: 20px solid #ed0162;
position: fixed;
top: 0;
width: 100%;
}
.top_nav a {
float: left;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 17px;
margin-bottom: 0;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
.logo {
float: left;
margin: 15px;
}
This is the HTML and webpage after I try to make the image clickable:
There is now big spacing inbetween and the hover style now affects the image when I don't want it too.
The HTML code after:
<header>
<div class="top_nav">
<a href="https://www.ntu.ac.uk/">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
</a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
</header>
I've tried removing the 'logo' class from the image style but it doesn't really change it that much.
There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.
.top_nav {
display:flex;
justify-content:space-around;
align-items:center;
overflow: hidden;
background-color: #2c3e50;
font-size:2vw;
width: 100%;
}
.top_nav a {
width:10%;
color: white;
text-decoration: none;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
img{
width:100%;
}
#short{
width:2.5%;
}
<div class="top_nav">
<a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
I find that it's generally pretty poor practice to use element names (such as a and div) in CSS selectors at all, for this exact reason.
Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav .navigation. Then you could add a similar class to the logo <a>.
Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.
One way to solve this is to use the :first-of-type pseudo css selector. Something like that would be the correct way to handle it:
.top_nav a:first-of-type {padding: 0;}
EDIT
I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
To:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge" />
I am trying to make a navbar, background, and style consistent through a few paged site. I have done a bit of research and found I might be able to use a server side include or the link property to embed a page in all the pages so I can change once and feel the effects on all the pages, I found the way to change the background is to add it to the body tag, but shouldn't the body tag be separate from the embedded file? I considered opening the body tag in the template file and closing it in each individual page, but that seems very bad.
Here is my unfinished template file.
<style>
body {
background-color: #afa7a7;
color: white;
}
.button {
background-color: #424242;
color: white;
border:none;
padding 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px; 2px;
cursor: pointer;
}
</style>
<body>
<a href="Main.shtml">
<img src="images/pentagram.png" alt="Pentagram" width="200px" height="200px" style="float: left;" />
</a>
<a href="Main.shtml">
<img src="images/pentagram.png" alt="Pentagram" width="200px" height="200px" style="float: right;" />
</a>
</body>
I have the following HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.rtwilson.com/robintheme/style.css" />
</head>
<body>
<div id="branding">
<div id="blog-title">
<h1>Robin's Blog</h1>
</div>
<div id="logo-div" style="float:right; display:inline;">
<img class="logo" src="http://rtwilson.com/academic/mugshot.jpg" height=100px>
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
</div>
</body>
</html>
I am trying to get the image to display to the right of both of the h1's but without creating a gap between the h1's. That is, I would like the top of the image to be aligned with the top of the first h1, the image to be on the right, and the spacing between the h1's to be exactly how it would be without an image there.
I thought it could do this by floating the image to the right and setting the display property to inline, but I've tried this and there is a gap between the h1's.
How can I fix this?
Fiddle: http://jsfiddle.net/9vRLH/
Demo: http://jsfiddle.net/9vRLH/embedded/result/
Try the below css and HTML: Please se inline Css in image div.
#blog-title {
float: left;
font-family: 'Droid Serif',serif;
font-size: 40px;
font-weight: 400;
}
#blog-description {
clear: left;
float: left;
font-family: 'Droid Serif',serif;
font-size: 20px;
}
<div id="blog-title">
<h1><a rel="home" title="Robin's Blog" href="http://127.0.0.1:8888/wordpress/">Robin's Blog</a></h1>
</div>
<div style="float: right; display: inline;" id="logo-div">
<img height="100px" src="http://rtwilson.com/academic/mugshot.jpg" class="logo">
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
I'd float the image right and give the divs some right-margin, like this:
<div id="branding">
<img class="logo" style="float:right;" src="http://rtwilson.com/academic/mugshot.jpg" height="100">
<div id="blog-title" style="margin-right: 110px;">
<h1>Robin's Blog</h1>
</div>
<h1 style="margin-right: 110px;" id="blog-description">A PhD student talking about interesting things</h1>
</div>
Fiddle: http://jsfiddle.net/Qch6u/
I recommend something like the following for these reasons:
The HTML is more concise (less elements), and reflects better the intent of your titling--a main title with a subtitle description. Generally, one should only have a single h1 tag on a page, and this places both the relevant pieces into a single tag. A search engine will now read it as a single title "Robin's Blog A PhD student talking about interesting things" instead of as two items "Robin's Blog" ... "A PhD student talking about interesting things."
Since you want the image to not interfere at all with the text, then using absolute positioning to effect that makes sense, as it will never cause any gaping in the text, nor reposition itself down the page. Of course, it is then good to at least give a min-width to keep from any overlap of the image to the text.
HTML
<div id="branding">
<h1>
<a id="blog-title" href="http://127.0.0.1:8888/wordpress/" title="Robin's Blog" rel="home">Robin's Blog</a>
<span id="blog-description">A PhD student talking about interesting things</span
</h1>
<img src="http://rtwilson.com/academic/mugshot.jpg" >
</div>
CSS
#branding {
padding-right: 110px;
position: relative;
min-height: 100px;
font-family: 'Droid Serif',serif;
min-width: 200px;
}
#branding img {
height: 100px;
position: absolute;
top: 0;
right: 0;
}
#blog-title {
color: black;
font-size: 40px;
font-weight: 400;
text-decoration: none;
}
#blog-description {
display: block;
font-size: 20px;
}