I'm trying to link a button to my LinkedIn profile, but it's not working.
<div id="header">
<img id="profile_pic" src="Images/profilepic.jpeg">
<img src="Images/name.png">
<img class="social" src="Images/linbutton.png">
</div>
Here is my CSS:
.social {
float: right;
padding-top:10px;
padding-left:5px;
}
My button shows up just fine and everything. But every link (including non-image ones), do not work. They bring up a 500 Internal Server Error page. I use JustHost.
Okay, I figured it out. I was just putting "http://www.google.com" but when I put "https://www.google.com" it worked. It must have to use a secure website. Thanks for your suggestions everyone!
Here are the solutions..now it working fine...fiddle : http://jsfiddle.net/nikhilvkd/6SK7F/
Html
<div id="header">
<img id="profile_pic" src="Images/profilepic.jpeg">
<img src="Images/name.png">
<img class="social" src="http://www.clker.com/cliparts/B/h/t/2/I/K/linkbutton-bo-md.png">
</div>
CSS
.social {
float: right;
padding-top:10px;
padding-left:5px;
}
Related
So I only want to change a small part of my website. I thought it would be easy, but somehow it doesn't change and I don't know why. I'm using bootstrap so that might make it a little bit difficult. I want to change my sidebar from just one solid color to an image. And it just doesn't show, when I delete the color it just shows nothing. I'm trying to use the 'background-image' property.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/flat2.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="border-right" id="sidebar-wrapper" >
<div class="sidebar-heading"> <img src="text\flat.png" class="title" alt="FLAT"> </div>
<div class="list-group list-group-flush zijkantje">
<img src="text/home.png" onMouseOver="this.src='text/home2.png'" onMouseOut="this.src='text/home.png'" alt="Home" class="glassescase" id="thuis">
<img src="text/risoprints.png" onMouseOver="this.src='text/risoprints2.png'" onMouseOut="this.src='text/risoprints.png'" alt="Risoprints" class="glassescase" id="glassescase">
<img src="text/paintings.png" onMouseOver="this.src='text/paintings2.png'" onMouseOut="this.src='text/paintings.png'" alt="Paintings" class="glassescase" id="littlehouse">
<img src="text/tiles2.png" onMouseOver="this.src='text/tiles.png'" onMouseOut="this.src='text/tiles2.png'" alt="Tiles" class="glassescase" id="ceramic">
<img src="text/alphabet.png" onMouseOver="this.src='text/alphabet2.png'" onMouseOut="this.src='text/alphabet.png'" alt="Alphabet patterns" class="glassescase" id="green">
<img src="text/collage.png" onMouseOver="this.src='text/collage2.png'" onMouseOut="this.src='text/collage.png'" alt="Collage" class="glassescase" id="collage">
<img src="text/Tarotdeck.png" onMouseOver="this.src='text/tarotdeck2.png'" onMouseOut="this.src='text/Tarotdeck.png'" alt="Tarot deck" class="glassescase" id="tarot">
<img src="text/digital.png" onMouseOver="this.src='text/digital2.png'" onMouseOut="this.src='text/digital.png'" alt="Digital" class="glassescase" id="digital">
</div>
</div>
This is for a larger screen, this is the css:
Navbar2 is for the smaller screen.
#sidebar-wrapper {
margin-left: 0;
width:150px;
background-image: url("sidebar.png") !important;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
.navbar2 {
display: none;
}
.zijkantje {
position: relative;
display: flex;
align-items:flex-start;
margin-top:10px;
justify-content:space-around;
margin-left: 27px;
}
Hopefully this is enough code to figure out what goes wrong. I always find it more difficult to change a small detail from an already finished site hah. I'm new to coding btw, be kind :)
U can use the Inspector integrated on your browser to review the code, anyway:
Are u sure is the correct image route which you want to use ?.
Set the background-repeat and background-position properties to be sure the image shows correctly, and also background-size if necessary.
Check if sidenav have the background-blend-mode property, and removeit.
Please give me instructions how to fix some Blogger codes. I just made an image logo and put it beside my blog title (behind title and description/using awesome template). I got successful making the blog title clickable, but no success in finding how to make the image logo clickable. I also tried putting my URL in
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
still not changing.
I tried changing it in the Chrome console using this code it worked, but I don't know how to fix it in the source html.
<a href="#">
<div id="header-inner
</a>
I inspect the page and tried some CSS codes but only made me more confused. Please give me some instructions how to fix...Big big thanks to all.
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"'
expr:src='data:sourceUrl' expr:width='data:width' style='display:
block'/>
</a>
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
element.style {
background-image: url(//3.bp.blogspot.com/-
yjBU04mgpNw/W0l9tFJDjEI/AAAAAAAADRw/-
uOagCGc3cIhBSJsH3Zl4RetnKK_iuhUQCK4BGAYYCw/s1600/101bloggertips-logo.png);
background-position: left;
width: 120px;
min-height: 37px;
_height: 37px;
background-repeat: no-repeat;
}
You can add a div element to specifically target a smaller zone around your image and not the whole header.
Try replacing :
<a href="#">
<div id="header-inner
</a>
With :
<div class="header-inner>
<div class="logo-container">
<a href ="#">
<img src="Your image url" class ="logo_header" alt="My Logo">
</a>
</div>
</div>
Then you can add some css using your logo_container and logo_header classes as follow :
.logo_container {
width:200px;
height:auto;
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
}
.logo_header {
width:200px;
height:auto;
}
Hope it helps !
Picture
if you click on this link you will see at left corner of the navigation bar i want to create an folat image like it
so i started to get some codes to preform it
so i found this
<html>
<head></head>
<body>
<div class="menu">
<li>
<img style="float: left;margin-left: -50%;" src="../images/logo.png" alt="Tera Host inc." height="60" width="200">
</li>
</div>
</body>
</html>
but its appearing at the top of the page i want something on the top left corner so an friend told me to do something
You have to make 2 divs following each other
And on each one you do style="float:left;"
And when yuu re done with the floating left
Make a big div that contain those divs
and on the ending do
so if anyone could help me pls reply the whole code
Thanks in advance
I am not very clear with your question! But i just gave a try in an assumption and I think you need to make the menu & logo float separately.
You can check this fiddle,
https://jsfiddle.net/8brvykvn/1/
<div class="header">
<a href="#" class="logo">
<img src="../images/logo.png" alt="Tera Host inc." height="60" width="200"></a>
<ul class="menu">
<li>Dashboard</li>
<li>Game Monitor</li>
<li>TS3 Admin</li>
</ul>
css:
.header a{
float: left;
margin-right:10px;
}
.header .menu{
float : left;
margin : 0;
padding: 0;
}
.header:after{
content:'';
display:block;
clear: both
}
.header .menu li{
list-style:none;
display:inline-block;
}
.header .menu li > a{
margin-right:10px;
}
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
I am designing a website and I want the footer to have two small images on the bottom left side followed by #* (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.
At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.
I am using HTML and CSS on macromedia dreamweaver.
The current code is:
<div class="footer content">
<ul>
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li>#TWITTERADRESS</li>
<li>POSTAL ADDRESS </li>
<li>TEL NUMBER</li>
</ul>
</div> <!--end of footer-->
CSS
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
First of all edit the CSS as
.footer ul li {
display: inline; // in a straight line
}
Edit the HTML part as:
<div class="footer">
<ul>
<li class="image"><img src="Images/facebook.png" />
<img src="Images/twitter.png" /></li>
<li class="twitter">#TWITTERADRESS</li>
<li class="address">POSTAL ADDRESS </li>
<li class="number">TEL NUMBER</li>
</ul>
</div>
Edit the CSS part now as:
.image {
float: left; // float to the left
}
.number {
float: right; // float to the right
}
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/
maybe something like this:
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
.footer li{
float: left;
width: 25%;
}
From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):
<div id="wrapperdiv">
<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>
At this point we can write the CSS3 code (maybe at styles.css):
...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}
Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:
footer{
background:url(.../footer_bg.png) repeat_x;
width:...;
height:...;
margin:...;
}
#footerLogo_left {
float:left;
margin:...}
#footerMiddle_text {
float:left;
margin: (the same than left)}
#footerLogo_right {
float:right;
margin: (the same than left)}
Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).