My footer contains three images and i want to add a link to (coyright and companysite) that once you click on the image, it takes you to the website i tried different methods i found here but its not working with me. what should i add?
The page code:
<body>
<div id="wrap">
<div id="header">
</div>
<div id="main">
<div id="content">
</div>
</div>
</div>
<div id="footer">
<div id="img-1">
</div>
</div>
</body>
the CSS:
* {margin:0;padding:0;}
html, body {
height: 100%;
background: url('../../fresh/img/bg.png') repeat;
}
#wrap {
min-height: 100%;
}
#header {
background: url('../../fresh/img/header.png') no-repeat top center;
display:block;
text-indent:-9000px;
width: 100%;
height: 237px;
}
#main {
overflow:auto;
padding-bottom: 200px;}
#content {
background: url('../../fresh/img/log-in.png') no-repeat top center;
display:block;
width: 100%;
height: 201px;
}
#footer {
position: relative;
margin-top: -200px; height: 200px;
clear:both;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#img-1 {
bottom:0;
height:200px;
background : url('../img/footer.png') center no-repeat,
url('../img/companysite.png') left no-repeat,
url('../img/copyright.png') right no-repeat, ;
}
There are two ways to link a website.(If you use html)
1.By using Anchor tag (Most prefered method)
Your element tags like p,span,img,...
2.By using window.location function
<div onclick="window.location='http://www.yahoo.com'" style="cursor:pointer"></div>
Check fiddle
Just wrap your img tag in a link tag like so:
<img src="my_img.jpg>
Then any part of the image will be a clickable link.
<div id="img-1" onclick="window.location='http://www.google.com'" style="cursor:pointer">
</div>
You have to add images inside anchor elements as shown:
<div id="footer">
<div id="img-1">
<img src="yourImage1"/>
<img src="yourImage2"/>
<img src="yourImage3"/>
</div>
</div>
That's it.
It looks like you are placing all images as backgrounds in a div. Use three separate images instead:
<div id="footer">
<div id="img-1">
<img src="../img/footer.png" alt="" />
<img src="../img/companysite.png" alt="" />
<img src="../img/copyright.png" alt="" />
</div>
</div>
And remove the backgrounds from the CSS:
#img-1 {
bottom:0;
height:200px;
}
Change the
<div id="img-1">
</div>
into
<a href="your desired link">
<div id="img-1">
</div>
</a>
First of all you need to clarify that on one HTML page you cannot use more than one same name ID tag or else you will get W3C validation error on your page.
In order to achieved what you are looking for is as under:
//This is your HTML code
<div id="footer">
<div id="img-1">
CopyRights
</div>
<div id="img-2">
Company
</div>
</div>
**//Here is your CSS Code**
#footer {
position: relative;
margin-top: -200px; height: 200px;
clear:both;
bottom:0;
height:200px;
background : url('../img/footer.png') center no-repeat
}
#img-1 {
url('../img/companysite.png') left no-repeat;
}
#img-2 {
url('../img/copyright.png') right no-repeat, ;
}
Related
I'm trying to simulate a shelf of books so that they look like this:
photoshop_mock_up
I can get the books to align just fine, but can't figure out how to make them retain their odd heights/widths, and not all just resize to the container:
HTML:
<div class="images-outer">
<div class="image-inner">
<img src="img/_0002_aristotle__poetics_and_rhetoric.png">
</div>
<div class="image-inner">
<img src="img/_0005_david_mamet__make_believe_town.png">
</div>
<div class="image-inner">
<img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
</div>
<div class="image-inner">
<img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png ">
</div>
</div>
CSS:
.images-outer {
height: 50%;
max-height: 50%;
display: flex;
vertical-align: bottom;
}
.image-inner img {
max-height: 100%;
}
img {
max-height: 100%;
}
This makes them look like this: web_page
Ideas?
In display: flex, you should use align-items to set vertical align and justify-content for horizontal align.
.images-outer {
height: 300px;
max-height: 50%;
display: flex;
align-items:flex-end;
justify-content:center;
background: black
}
.image-inner {
max-width:30px;
padding: 0px 5px;
}
.image-inner {
object-fit: contain;
object-position: bottom;
width: 100%;
}
<div class="images-outer">
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/240" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/180" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
</div>
</div>
.image-inner img{
width:100%;
height:auto;}
This should help in sizing the images properly
Else, you could dive each image an individual class and give each it's individual height.
I have a div for slick slider, product card to be exact.
It should be displayed inline, and picture should be the whole size of the card-info.
.product-card__item {
display: flex;
width: 100%;
min-height: 450px;
}
.product-card__item-preview {
flex-basis: 48.5%;
height: 100% width:100%
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card__item-info {
width: 51.5%;
background-color: #fff;
padding: 1.2em;
}
}
```
<article class="product-card">
<div class="product-card__preview">
<img class="product-card__img" src="https://via.placeholder.com/150" alt="">
</div>
<div class="product-card__info">
<div class="product-card__info-top">
<a class="product-card__title" href="#">
One Page Resume Template
</a>
<div class="product-card__author">
<img class="product-card__avatar" src="https://via.placeholder.com/50" alt="user avatar">
<a class="product-card__top-name" href="#">
AazzTech
</a>
</div>
</div>
</div>
</article>
but with even slightly resizing the window for adaptation, picture starts doing this:
I know it could be fixed easily if I make amg as a bg for preview div, but how is it possible with img tag?
I dont have your code, but you can try this:
.container{
display:flex;
height:500px;
}
.container > div{
flex: 1 1 0;
overflow:hidden;
}
.second img{
height:100%;
}
.first{
background-color:red;
<div class="container">
<div class="first"></div>
<div class="second">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg" alt="">
</div>
</div>
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO
I want to make a responsive design with different images, for example:
<div id="home" class="page">
<div id="home_1" class="section"><!-- Page 1 -->
<div id="home_1_1" class="full">
<img src="images/home/home_1/home_1.png" class="full-image"></img>
</div>
</div>
<div id="home_2" class="section"><!-- Page 2 -->
<div id="home_2_1" class="full">
<img src="images/home/home_2/home_2_block1.png" class="full-image"></img>
</div>
<div id="home_2_2" class="full">
<img src="images/home/home_2/home_2_block2.png" class="full-image"></img>
</div>
</div>
<div id="home_3" class="section"><!-- Page 3 -->
<div id="home_3_1" class="full">
<img src="images/home/home_3/home_3_block1.png" class="full-image"></img>
</div>
<div id="home_3_2" class="full">
<img src="images/home/home_3/home_3_block2.png" class="full-image"></img>
</div>
</div>
</div>
home_1, home_2 and home_3 are seperate image blocks. but home_2_1 home_2_2 should have the same top position and they also should be below home_1.
this is my css:
#home{
width: 100%;
text-wrap: none;
white-space: nowrap;
}
.section{
position: relative;
display: inline-block;
width: 100%;
}
.full{
position: absolute;
top:0;
left:0;
}
.full-image{
width: 100%;
display: block;
}
The problem is that I see only one image, the others don't floats beside each other.
I hope somebody can help me with this.
I'm not quite sure what you mean, but have you tried just using floats?
Check this fiddle: http://jsfiddle.net/9Ryby/
.section {
clear: both;
}
.full-image {
width: 50%;
float: left;
}
I've got three images that I'm trying to use for a box like this in my website:
http://imageshack.us/photo/my-images/41/examplemg.png/
I am trying to do this with CSS and HTML but I have had no success on my own and have not found any article speaking on how to do this particularly.
I basically want it so that the mid_image repeats when I add content.
To repeat a background-image, you set the CSS background-repeat attribute. In your case you should set it to repeat-y.
Something like this should do it:
HTML:
<div id="top"></div>
<div id="middle">Content here</div>
<div id="bottom"></div>
CSS:
#top {
background-image: url("sometopimage.png");
}
#middle {
background-image: url("somemiddleimagetorepeat.png");
background-repeat: repeat-y;
}
#bottom {
background-image: url("somebottomimage.png");
}
Note Omitted size attributes in the example, since we don't have any measures on your layout. You will however need to add width and height to your elements, to fit your layout.
HTML:
<div class="container">
<div class="top"><img src="top.jpg" height="" width="" alt="" /></div>
<div class="middle">
/* content here */
</div>
<div class="bottom"><img src="bottom.jpg" height="" width="" alt="" /></div>
</div>
CSS:
.middle { background: url('path/to/middle/image.jpg') repeat-y; }
try to create the following html structure
<div id="wrapper">
<div id="top_image"></div>
<div id="middle_image">
text here
</div>
<div id="bottom_image"></div>
</div>
the assign the images as background images to their respective containers
My 2 cents worth
HTML
<div id="container">
<div id="content">Add some content</div>
<div id="bottomImg"> </div>
</div>
CSS
#container {
background-image: url("yourTopImage.png");
background-position: left top;
background-repeat:no-repeat;
padding-top: /*Use Height of top image*/;
width: /*Use Width Of Image*/
}
#content {
background-image: url("yourRepeatingImage.png");
background-repeat: repeat-y;
}
#bottomImg{
background-image: url("yourBottomImage.png");
height: /*Use Height of Bottom image*/;
width: /*Use Width Of Image*/
}
The Lean CSS3 CSS2.1 Version. Wont work in IE7 and below
:after browser support
HTML
<div id="container">
<div id="content">Add some content</div>
</div>
CSS
#container {
background-image: url("yourTopImage.png");
background-position: left top;
background-repeat:no-repeat;
padding-top: /*Use Height of top image*/;
width: /*Use Width Of Image*/
}
#content {
background-image: url("yourRepeatingImage.png");
background-repeat: repeat-y;
}
#content:after{
content: " ";
display: block;
background-image:url("yourBottomImage.png");
height: /*Use Height of Bottom image*/;
width: /*Use Width Of Image*/
}
The Leaner CSS3 CSS2.1 Version. Wont work in IE7 and below
:before/:after browser support
HTML
<div id="content">Add some content</div>
CSS
#content:before {
content: url("yourTopImage.png");
height: /*Use Height of top image*/;
width: /*Use Width Of Image*/
}
#content {
background-image: url("yourRepeatingImage.png");
background-repeat: repeat-y;
}
#content:after{
content: url("yourBottomImage.png");
height: /*Use Height of Bottom image*/;
width: /*Use Width Of Image*/
}
For an ugly as sin demo check out this fiddle
From all the answers you can see there are many ways to skin this cat!
Other than set extra div and backgrounds this is how I would do it..
<div id="side_bar">
<img src="top.jpg" alt="" class="top" />
<div id="middle">
text here
</div>
<img src="bottom.jpg" alt="" class="bottom" />
</div>
Then for the css I'd have
#side_bar {
width: xxxpx;
}
#side_bar .top, #side_bar .bottom {
display: block;
}
#middle {
background: url(middle.jpg) repeat-y;
}