I'm trying to make this image a href, its like this because I couldn't figure out how to have the image align with the menu on the right. But now I'm trying to make the logo go to the front page, I have tried making the code <div class="wrapper"> <div href="index.html" class="picture1"></div> but that doesn't work. Any ideas how to fix this
div.picture1 {
width:153px;
height:60px;
background-image:url('Carlsberglogof.png');
<div class="wrapper">
<div class="picture1"></div>
enter image description here
You can replace your div with an anchor tag. I added the green colour so you can see it.
a {
display: block;
width: 153px;
height: 60px;
background-image:url('Carlsberglogof.png');
background-color: green;
}
<div class="wrapper">
</div>
You could use JavaScript, for example:
<div onClick="location.href='/index.html'"> ...
...or simply wrap the whole element in an <a> tag:
<div class="wrapper">
<a href="index.html">
<div class="picture1"></div>
</a>
</div>
Related
I am having an image and text to be displayed on a page. Is there any way to have fixed distance between the both? Tried with media queries but couldn't do it.
<div id="element">
Text Here
<div class="imagehere">
<img src="./img/pic.jpeg"/>
</div>
</div>
Note: The text need to be displayed above the image. Problem is the text is disappearing when the image overlaps with it.
Add this style
.imagehere {
margin-top: 10px; /* This will be fixed distance */
}
A simple margin will do the trick:
.text-wrapper {
margin-bottom: 30px;
}
<div id="element">
<div class="text-wrapper">Text Here</div>
<div class="imagehere">
<img src="./img/pic.jpeg" />
</div>
</div>
I am making a website to host my blog and artwork. I am trying to put the Twitter icon between the centered header and the very left of my screen.
Click here to see the top of the page that I'm referencing.
Here is the following code for the respective parts.
CSS: https://pastebin.com/mqQUqxs1
HTML: https://pastebin.com/GA2bqBXG
This is probably not the best way but you could hack it using flexbox. You're gonna need empty span elements to make sure space is distributed how you want it to. Like this:
header {
background: #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
<header>
<span></span>
<div id="twitter">
<img src="img\twitter.png" alt="Twitter" class="social">
</div>
<h2 id="sultown" class="nav"> SULTOWN </h1>
<span></span>
<span></span>
</header>
<form>
<div id="search"><input type="text" name="search" placeholder="explore"></div id="search">
</form>
<img src="img\spectroscopy.png" alt="Spectroscopy" class="media">
As I said, the spans are only place keepers for the spacing...
Hey I have a problem with social buttons. I am trying to move them but only one show up on my page and I can't move that. I have three buttons and them images can someone help I am trying to put them straight line center of header or above my video.And I want to put them links.
HTML
<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
CSS
img {
position: absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
#icons {
top: -220px;
}
If using absolute positioning. Each button needs a different class. It is best practice to use classes for css styling and keep id for targeting elements with JavaScript. The images need to be wrapped in links ( tags) and the # in the href below should be set to the URL of your facebook, twitter and instagram home pages.
Personally I would set out html as:
<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
Rather than use absolute positioning I would simply display the links as blocks and float them left. Use a margin on the containing div to position your icons. See below.
css
.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;
}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}
Using these principles laying out the rest of you pages should be straight forward.
You're giving the same style to all img tags, causing them to overlap! try changing positions for each
I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/
i have several images, with the image i have a link(text).
However i want both the text and image to click-able rather than just the text.
This is my code: html:
<div id="testimage">
<div id="a1">Awards</div>
</div>
(another image) :
<div id="testimage1">
<div id="a2">Events</div>
</div>
css:
#testimage {
background-image: url(images/mja1.jpg);height: 205px;width: 322px;
}
#a1 a
{position: absolute;font-size: 25px;color: #085da2;top: 503px;}
#a1 a:hover
{color:#085da2;opacity:0.5;}
as you can see the a1 has a link, however i need a link to testimage too.
i have tried :
HTML
<div id="testimage"></div>
CSS
a{ display:block; }
with this; when I added the 2nd image, the whole page started to look different.
So am looking to have a link for both div.
I think this is what you need.
<a href="http://mja.co.uk/Events">
<img src="images/mja1.jpg"/>
<span id="a2">Events</span>
</a>
a { display: inline-block } will "expand" the clickable area of the link to the full size of it's containing element, in this case, the <div>, yet holds the layout.
Just wrap the div in an a tag... <div id="whatever">The text</div>