I have an image in my footer linked to my blog. This link is overflowing to the copyright and I have no idea why.
I never added a link to the copyright itself only to the image but for some reason when I hover over the copyright it links to the blog. I can't explain it this has never happened to me before.
Any help would be appreciated.
HTML
<footer>
<div class="footer">
<div class="left">
<img src="#" alt="">
<h6>Title</h6>
<p></p>
</div>
<div class="middle">
<p><a href="#"><img src="#" alt=""></p>
</div>
<div class="right">
<p><a href="#"><img src="#" alt=""></p>
</div>
</div>
</footer>
CSS
footer {
width: 100%;
background-color: #212119;
}
.footer {
margin: 0 auto;
width: 960px;
height: 350px;
margin-bottom: 10px;
color: #474741;
}
.footer .left {
margin-top: 20px;
margin-left: 10px;
float: left;
width: 33%;
text-align: left;
}
.footer .left img {
margin-top: 40px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
height: 110px;
width: 113px;
}
.footer .left h6 {
color: #474741;
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
font-family: arial, sans-serif;
}
.footer .left p {
margin-top: 40px;
font-size: 14px;
}
.footer .left p:last-child {
margin-top: -15px;
font-family: arial, sans-serif;
}
.footer .middle {
text-align: center;
margin-top: 40px;
float: left;
width: 33%;
}
.footer .middle p {
margin-top: 0px;
}
.footer .right {
text-align: center;
float: right;
width: 33%;
}
.footer .right p {
margin-top: -152px;
}
.copyright {
clear: both;
}
.copyright p{
margin: 0 auto;
width: 960px;
color: #e8ad4f;
font-size: 20px;
margin-bottom: 10px;
vertical-align: top;
}
You need to close your a tags...
<p><a href="#"><img src="#" alt=""></p>
... becomes ...
<p><img src="#" alt=""></p>
Otherwise everything that follows will be enclosed in the link.
Related
I need to achieve a nice 2 column layout as shown in
So far i could get only: https://jsfiddle.net/8qskxqfh/
code in fiddle link
Could you please suggest me on improving this design.
.myRatingBoxRed {
display: inline-block;
width: 15px;
height: 15px;
background-color: red;
}
.myRatingBoxYellow {
display: inline-block;
width: 15px;
height: 15px;
background-color: yellow;
}
.myRatingBoxGreen {
display: inline-block;
width: 15px;
height: 15px;
background-color: green;
}
.myResourceViewBody {
width: 960px;
position: relative;
margin: 0 auto;
}
.myResourceViewBody.myResourceSideBar {
position: absolute;
left: 0;
width: 240px;
height: 100%;
min-height: 800px;
color: #fff;
}
.myResourceViewInfo {
background: #fff;
padding-left: 300px;
}
.myResourceViewInfo .section-title {
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
color: #2d7788;
position: relative;
margin-top: 0;
margin-bottom: 20px;
}
.myResourceViewInfo .attributes-section .item {
margin-bottom: 15px;
}
.h2.myResourceTitle {
font-weight: bold;
background: #9A3324 none repeat scroll 0px 0px;
width: 66%;
padding-left: 5px;
color: #FFF;
font-size: 18px;
vertical-align: middle;
display: inline-block;
position: relative;
height: 50px;
padding-top: inherit;
margin-top: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.myResourceViewBody ul {
font-size: 1.2em;
font-weight: bold;
list-style-type: none;
margin-left: 300px;
padding: 0 0 0 10px;
}
<div id="myResourceHeader">
<h2 class="header-title myResourceTitle">Test article 1</h2>
</div>
<div class="myResourceViewBody">
<div class="myResourceSideBar">
<div class="myImageBox"></div>
<div class="myEvaluationArea">
<div class="myRatingBoxRed"></div>
<div class="myRatingBoxYellow"></div>
<div class="myRatingBoxGreen"></div>
</div>
</div>
<div class="myResourceViewInfo">
<h2 class="myViewInfo section-title"><i class="fa icon-info-sign"></i>Description</h2>
<ul>
<li>demo 1</li>
<li>demo 2</li>
</ul>
</div>
</div>
<div class="myResourceViewFooter"></div>
Check example below:
.row {
display: table;
width: 100%;
}
.row:after {
clear: both;
}
.col {
display: table-cell;
border: 1px solid red;
}
.width-70 {
width: 70%;
}
.width-30 {
width: 30%;
}
<div class="row">
<div class="col width-30">
col1
</div>
<div class="col width-70">
col2
</div>
</div>
Try using col-spans inside row
something like this
<div class="row">
<div class="col-md-6">
//first column
</div>
<div class="col-md-6">
// second column
</div>
</div>
refer to bootstrap classes for more details and how to make it responsive also.
I would like to know how to build this example for all resolutions ( from 27 to iPhone ), I would like to put my text just above my bottom image ->
.content {
display: inline-block;
width: 100%;
max-width: 800px;
margin: 0px auto 75px
}
.imgstyle {
float: left;
max-width: 800px;
width: 100%;
}
.textcontent {
text-align: left;
display: inline-block;
margin: 0 auto;
max-width: 300px;
position: absolute;
left: 0px;
right: 0px;
z-index: 1000;
width: 100%;
}
.hr {
height: 1px;
width: 50px;
background: #282828;
}
.textstyle1 {
font-family: 'GFS Didot', serif;
font-weight: 300;
text-align: left;
margin-top: 30px;
font-size: 40px;
}
.textstyle2 {
text-align: left;
line-height: 21px;
margin-top: 20px;
}
.textstyle3 {
text-align: left;
line-height: 21px;
font-weight: 700
}
<div class="content">
<img class="imgstyle" src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" />
<div class="textcontent">
<div class="hr"></div>
<h1 class="textstyle1">Keep them<br/>closed</h1>
<p style="textstyle2">Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p class="textstyle3">Read more ></p>
</div>
</div>
you have to remove the left: 0 and add right: 0.
Updated Fiddle
Try it:-
.textstyle1{
margin:0px auto;
float:right;
}
<h1 class="textstyle1">Keep them<br/>closed</h1>
or
.textstyle1{
margin:0px auto;
float:right;
}
P{
text-align:right;
margin:60px auto;
}
<h1 class="textstyle1">Keep them<br/>closed</h1><br>
<p>Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p>Read more</p>
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;
I am new to this, so I have this problem where the contents in the page will be shifted when the browser is minimized. When the browser is minimized, the contents including the logo will be shifted and the contents will be shifted out of the blue transparent background.
here is my css codes
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1300px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.whole{
margin: 0px auto;
height: 1242px;
width: 1000px;
}
.clear{
margin: 0 auto;
clear: both;
}
.logo {
width: 460px;
height: 170px;
margin: 0 auto;
}
.fax {
margin: 0 auto;
width: 480px;
height: 110px;
margin-right: 267px;
}
.fax p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
text-align:center;
float:left;
margin: 0 auto;
margin-top: 55px;
width: 394px;
}
.faxLogo{
float: left;
height:60px;
width: 60px;
margin: 0 auto;
margin-top: 40px;
margin-left: -385px;
}
.tel{
margin: 0 auto;
width: 480px;
height: 70px;
margin-right: 267px;
}
.telDetails{
float:left;
height: 10px;
}
.telLogo{
float: left;
height:60px;
width: 60px;
margin: 0 auto;
margin-top: -10px;
margin-left: 65px;
}
.tel p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
text-align: center;
margin:0 auto;
margin-top: 10px;
margin-left: 10px;
}
.locationLogo{
float: left;
height: 60px;
width: 60px;
margin: 0 auto;
margin-left: 65px;
}
.location{
margin: 0 auto;
width: 500px;
}
.location p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
float: left;
margin:0 auto;
margin-top: -35px;
margin-left: 160px;
line-height: 60px;
}
.detail1 {
margin: 0 auto;
text-align:center;
}
.detail1 p{
font-size: 45px;
font-family: 'Istok Web', sans-serif;
color:white;
text-align:center;
margin-left: 130px;
}
.detail2 {
font-size: 45px;
font-family: 'Istok Web', sans-serif;
color: white;
margin: 0 auto;
}
.detail2 p{
margin-top: -20px;
text-align:center;
margin-left: 45px;
}
here is my HTML codes
<div class="clear" style="height: 445px;"></div>
<div class="whole">
<div class="logo"><img src="images/logo_3.jpg" /></div>
<div class="clear" style="height:50px;"></div>
<div class="detail1">
<p>TEXT</p>
</div>
<div class="detail2">
<p>TEXT</p>
</div>
<div class="clear" style="margin-top:-53px;"></div>
<div class="location">
<div class="locationLogo">
<img src="images/location.png" />
</div>
<div class="locationDetails">
<p style="width: 500px;">TEXT<br />TEXT<br />TEXT</p>
</div>
</div>
<div class="tel">
<div class="telLogo" style="width: 10px;">
<img src="images/tel.png" />
</div>
<div class="telDetails">
<p style="width: 365px;">TEXT</p>
</div>
</div>
<div class="fax">
<div class="faxLogo" style="width: 10px;">
<img src="images/fax.png" />
</div>
<div class="faxDetails">
<p style="width: 394px;">TEXT</p>
</div>
</div>
</div>
Your content inside your transparent box moves when the window resizes but your transparent box is part of the background image. Use the oil rig as a background image and put your content in a div. Something like this:
.box {
width: 100%;
height: auto;
background-color: rgba(0,0,255,0.5);
}
<div class="box">
<ul>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
</ul>
</div>
You can now place the div wherever you see fit on your page.
I'm trying to align several DIVS, Images and text and I can't figure this out..
Here's what I'm trying to achieve:
Heres' my HTML
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<img src="iphone.png" width="375">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
Here is my CSS:
.section5{ height: 525px; background-color: #5e6172; text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45; height: 100%; margin: 0 auto; position: relative;}
.title1{color: #ffffff; font-size: 2.6em; font-family: h35; }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.container1{display: block; background-color: #ccc; }
.container2{display: block; background-color: #fffc1e; }
Here is the JSFIDDLE:
http://jsfiddle.net/mib92/hogwohf8/
My current problems:
1) My text at the bottom needs to be on the right side of the image.. center like in my example image.
2) the bottom of my bottom picture must be align to the bottom of container2 AND the bottom of section5
3) While doing this, the container 1 must remain in the vertical middle of the remaining space of the section5.
Thank you
I hops it's help you.
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.right-sied {
display: inline-block;
vertical-align: top;
width: 41%;
}
.left-sied {
display: inline-block;
width: 49%;
}
.left-sied img {
max-width: 100%;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="icon.png" width="85">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
<div class="container2">
<div class="left-sied">
<img src="iphone.png" width="375">
</div>
<div class="right-sied">
<div class="subtitle2">Text</div>
</div>
</div>
</div>
</div>
Live Demo
check this:
.section5 {
height: 525px;
background-color: #5e6172;
text-align: center;
position: relative;
}
.outer {
width: 80%;
background-color: #45da45;
height: 100%;
margin: 0 auto;
position: relative;
}
.title1 {
color: #ffffff;
font-size: 2.6em;
font-family: h35;
}
.subtitle1 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.subtitle2 {
color: #ffffff;
font-size: 1.5em;
font-family: h35;
margin-top: 0.25em;
}
.container1 {
display: block;
background-color: #ccc;
}
.container2 {
display: block;
background-color: #fffc1e;
}
.container1 .wrapper {
display: inline-block;
float: right;
}
.container2 img {
margin: 0 auto;
}
<div class="section5">
<div class="outer">
<div class="container1">
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
<div class="wrapper">
<div class="title1">Text</div>
<div class="subtitle1">Text</div>
</div>
</div>
<div class="container2">
<div class="subtitle2">Text</div>
<img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
</div>
</div>
</div>