I'm coding 3 boxes. There is pic and title at first column, then there is paragraph and at the bottom there is a link. So the boxes are not editable, just the content is. They should look the same no matter how long the title is. But the length of title changes size of pictures.
When the title needed more than one line, the pic shrank. So I added to my code a min-width. Now the ones previosly problematic are OK, but the third are wider than before, than the two other. Now the css code for pic looks like this. It is an icon with border (as you can see):
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
What should I add/change to make all 3 pics looks the same?
Structure:
<div class="box box--product">
<div class="box__content">
<div class="box__title d-flex">
<div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
<div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
<h3 class="box__hdl">'.$atts['nadpis'].'</h3>
</div>
<div class="box__excerpt match-height">
<p>'.$content.'</p>
</div>
<div class="box__more">
<hr>
Viac informácií
</div>
</div>
</div>
Sass:
.box {
$this: &;
background: $gray-lighter;
border-bottom: 7px solid $primary-green;
color: $black;
cursor: pointer;
//margin-bottom: $grid-gutter-width;
&--not-hover {
cursor: default;
}
&__title {
align-items: center;
&--subprod {
margin-bottom: 16px;
//min-height: 75px;
}
}
&__more {
text-align: center;
}
&__icon {
background: {
position: center;
repeat: no-repeat;
size: auto 44px;
}
border: 1px solid $gray-dark;
border-radius: 5px;
height: 80px;
margin-bottom: 16px;
margin-right: 10px;
width: 80px;
&--big {
background-size: 65px auto;
border-width: 2px;
height: 112px;
margin-bottom: 40px;
margin-top: 20px;
width: 112px;
}
&--hover {
border-color: $white;
display: none;
}
}
&__excerpt {
font-size: 14px;
letter-spacing: .44px;
line-height: 21px;
margin-top: 10px;
}
&--product {
border-bottom-width: 7px;
#{$this}__hdl {
color: $primary-green;
font-size: 16px;
line-height: 20px;
margin-left: 10px;
text-transform: uppercase;
}
#{$this}__content {
padding: 15px 22px 5px;
}
#{$this}__icon {
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
&--hover {
border-color: $white;
}
}
#{$this}__excerpt {
// border-bottom: 1px solid $primary-green;
color: $gray-dark;
margin-bottom: 15px;
}
#{$this}__more {
.link-warning,
.link-more {
letter-spacing: .4px;
margin-bottom: 10px;
}
}
&:hover,
&:focus {
#{$this}__hdl {
color: $white;
}
#{$this}__excerpt {
border-bottom-color: $white;
}
#{$this}__more {
.link-warning {
&::before {
background-image: url('../images/icon-warning--white.svg');
}
}
}
}
}
Something like this ?
.card {
width: 200px;
height: 300px;
display: inline-block;
margin: 12px;
border: 1px solid black;
overflow: hidden;
display: flex;
flex-flow: column;
}
.card .title {
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .link {
color: blue;
text-decoration: underline;
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .image {
flex: 1 1 auto;
overflow: hidden;
}
.card .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="card">
<div class="title">Some title</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="link">Some link</div>
</div>
<div class="card">
<div class="title">Some title that is way too long to fit in 200px</div>
<div class="image">
<img src="https://picsum.photos/1024/768">
</div>
<div class="link">Some link that is also way too long for this little box</div>
</div>
Well, it is not probably best practise. But I just add
max-width: 57px; (+1px)
and it works just fine.
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
I have a big bar of white space below my footer and cant figure out how to remove it. Basically I want everything below the footer to be gone.
Any help appreciated, just learning code so new to this.
https://jsfiddle.net/ptgL5pv6/1/
function active() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == 'Search') {
search_bar.value = '';
search_bar.placeholder = 'Search';
}
}
function inactive() {
var search_bar = document.getElementById('search_bar');
if (search_bar.value == '') {
search_bar.value = 'Search';
search_bar.placeholder = '';
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana, Arial, sans-serif;
}
.container {}
.top_section {
background: #000;
padding: 20px;
}
.first_image {
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a {
position: relative;
color: #fff;
Text-decoration: none;
padding: 20px;
}
.nav_bar a:hover {
color: #fff;
Text-decoration: underline;
}
.third_bar {
background: #000;
position: relative;
height: 350px;
}
.second_image {
position: relative;
text-align: center;
height: 370px;
}
#search_bar {
position: relative;
bottom: 50px;
height: 150px;
border: 1px solid #000;
border-right: none;
font-size: 36px;
padding: 10px;
outline: none;
width: 800px;
-webkit-border-top-left-radius: 10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right: 110px;
}
#search_button {
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover {
background: #f6e049;
}
.form {
width: 200px;
margin-top: -220px;
padding-left: 280px;
}
.footer {
position: relative;
background: #000;
color: #fff;
bottom: -10px;
}
.copyright {
position: relative;
bottom: -8px;
left: 0;
overflow: hidden;
}
.footer_notes {
position: relative;
text-align: center;
bottom: 10px;
left: 100px;
overflow: hidden;
}
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png" />
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
<img src="whisky.png">
</div>
<div class="form">
<form action="search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();" />
<input type="submit" id="search_button" value="Go!" />
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
Firt of all, edit this .footer-notes css and remove left:100px; from it. It is making your page width greater then 100%
.footer_notes{
position: relative;
text-align: center;
bottom: 10px;
padding-left: 100px;
overflow: hidden;
max-width:100%;
}
then dont declare height on .third-bar this makes your footer come up even if their is content above the footer
.third_bar{
background:#000000;
position: relative;
}
Even after doing this your footer will have maybe 20px or so space below it because their is not enough content above it. If you want your footer to always stay at bottom in any device then add this to your footer's css.
.footer{
position:fixed;
background: #000000;
color: #ffffff;
bottom:0px;
width:100%;
}
If you go through with all three changes this is what your page will look like :
function active(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == 'Search'){
search_bar.value=''
search_bar.placeholder= 'Search'
}
}
function inactive(){
var search_bar= document.getElementById('search_bar');
if(search_bar.value == ''){
search_bar.value='Search'
search_bar.placeholder= ''
}
}
body {
background: #efefef;
margin: 0 auto;
font-family: Verdana,Arial,sans-serif;
}
#container{
display:flex;
flex-direction:column;
height:100vh;
overflow:hidden;
background-color:black
}
.top_section {
background:#000000;
padding: 20px;
}
.first_image{
position: relative;
text-align: center;
}
.nav_bar {
background: #222b2f;
border: 10px; solid #222B2F;
font-size: 18px;
font-weight: bold;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.nav_bar a{
position: relative;
color:#ffffff;
text-decoration:none;
padding: 20px;
}
.nav_bar a:hover{
color: #ffffff;
text-decoration:underline;
}
.third_bar{
background:#000000;
position: relative;
}
.second_image{
position: relative;
text-align: center;
height:80vh;
background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#search_bar
{
position: relative;
bottom: 50px;
height: 150px;
border:1px solid #000000;
border-right: none;
font-size: 36px;
padding: 10px;
outline:none;
width: 800px;
-webkit-border-top-left-radius:10px;
-webkit-border-botton-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
right:110px;
}
#search_button
{
position: relative;
width: 200px;
bottom: 222px;
height: 172px;
border: 1px solid #000000;
font-size: 36px;
padding: 10px;
background: #f1d826;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius:10px;
-webkit-border-botton-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
left: 710px;
}
#search_button:hover
{
background:#f6e049;
}
.form{
width:200px;
margin-top: -300px;
padding-left:280px;
}
.footer
{
position: fixed;
background: #000000;
color: #ffffff;
bottom: 0px;
width:100%;
}
.copyright
{
position: relative;
bottom: -8px;
left: 0px;
overflow: hidden;
}
.footer_notes
{
position: relative;
text-align: center;
bottom: 10px;
margin-left: 100px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="top_section">
<div class="first_image">
<img src="logo.png"/>
</div>
</div>
<div class="nav_bar">
Home
Search
About us
Products & Pricing
Contact us
login
</div>
<div class="third_bar">
<div class="second_image">
</div>
<div class="form"><form action= "search.php" method="post">
<input type="text" id="search_bar" placeholder="" value="Search for your whisky here" max length="30" autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="search_button" value="Go!"/>
</form>
</div>
</div>
<div class="footer">
<div class="copyright">
© test.com ®
</div>
<div class="footer_notes">
test.com is a one of a kind fully automated and repsosive database of over 40,000 items. Second to none on ther Internet.
</div>
</div>
</div>
Using Bootstrap for some video launching with Modal and I keep getting a weird offset video at the end of my webpage and when I click on the anchor tag it brings me to a dead link. I built a jsfiddle to even show my work. I only replaced the image and video, but I got the images from off line so its basically mimicking my code.
HTML:
<a data-toggle="modal" href="#videoModal">
<img class="img-responsive img-rounded" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">
</a>
<div class="modal fade" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Learn how to make this app!</h4>
</div>
<div class="modal-body">
<iframe width="500" height="281" src="http://youtu.be/GWPc6EDwv8k" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
CSS:
/* Typography
================================= */
#font-face {
font-family:'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-weight: 200;
margin-bottom: 30px;
}
h2, h3 {
font-size: 1.25em;
color: #5f5d60;
margin-bottom: 16px;
margin-top: 0;
}
p {
color: #b3aeb5;
line-height: 1.7;
font-size: 1.1em;
font-weight: 200;
}
strong {
color: #5f5d60;
}
.navbar-text {
font-weight: bold;
margin-right: 0;
}
.lead {
color: #d5c1f2;
margin-bottom: 70px;
}
.lead:nth-of-type(2) {
font-size: initial;
margin-bottom: 20px;
}
.main-footer {
font-size: .95em;
}
.link-list {
list-style-type: none;
line-height: 1.8;
margin: 0;
padding: 0;
}
.copyright {
opacity: .8;
font-size: .9em;
}
/* Links
================================= */
.main-footer a {
color: #a6afb2;
}
.link-list .heading {
font-weight: bold;
margin-bottom: 10px;
}
/* Layout
================================= */
hr {
margin-bottom: 58px;
}
.ft {
margin-bottom: 72px;
}
.ft-copy {
padding-top: 32px;
}
.ft-copy p, .copy-offset {
width: 88%;
}
.panel {
background-image: url('../img/form-panel-bg.png');
background-repeat: repeat-x;
border-bottom: solid 1px #eee;
padding: 42px 0;
margin: 80px 0 132px 0;
}
.callout {
padding: 35px 0;
margin-top: 64px;
text-align: center;
border: 1px solid #e3e3e3;
border-right: none;
border-left: none;
}
.callout .glyphicon {
margin-left: 10px;
}
.teacher-desc strong {
display: block;
}
.th-copy {
padding-top: 30px;
}
.main-footer {
margin: 100px 0 80px 0;
}
/* Form
================================= */
.phone-txt {
padding: 24px 12px;
width: 90%;
}
.btn-submit {
color: inherit;
font-size: 1.6em;
background: transparent;
position: absolute;
right: 55px;
bottom: 3px;
}
/* Buttons
================================= */
.btn-default {
border-width: 2px;
border-color: inherit;
margin-right: 10px;
padding: 12px 22px;
}
.btn-default:hover {
background-color: #fff;
color: #957bba;
border-color: #fff;
}
.btn:active {
box-shadow: none;
}
.panel .btn-default:hover {
background-color: #ccc;
color: #f7f7f7;
border-color: #ccc;
}
.btn-success {
box-shadow: 0 3px 0 #23812f;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
font-size: 1.5em;
width: 330px;
padding: 15px 0;
}
/* Jumbotron
================================= */
.jumbotron {
background-image: url('../img/main-bg.png');
background-repeat: no-repeat;
background-position: 200% 100%;
padding: 200px 0 140px 0;
margin-bottom: 70px;
}
.device {
width: 345px;
height: 589px;
background: url('../img/device-hero.png') no-repeat;
}
/* Logos & Icons
================================= */
.main-logo {
width: 124px;
height: 34px;
margin-top: 22px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url('../img/main-logo.png') no-repeat;
background-size: 100%;
}
.ft-icon {
width: 94%;
height: 196px;
position: relative;
background: #8c73b0 url('../img/main-bg.png') no-repeat 270px -180px;
background-size: 140%;
}
.ft-icon.friends {
background-position: -500px 0px;
}
.ft-icon.cloud {
background-position: 260px 0px;
}
.ft-icon:before {
content:"";
display: block;
position: absolute;
width: 164px;
height: 102px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: url('../img/feature-icons.png') no-repeat;
background-size: 100%;
}
.friends:before {
background-position: 0 -105px;
}
.cloud:before {
background-position: 0 -210px;
}
[data-icon]:before {
font-family:'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
margin-right: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.th-logo {
width: 155px;
margin: -.75em 0 .95em 0;
}
/* Media Queries
================================= */
#media (max-width: 991px) {
.jumbotron {
padding-top: 120px;
padding-bottom: 20px;
background-position: 10% 10%;
}
.ft-copy {
padding-top: 12px;
}
.ft-copy p {
width: auto;
}
.device {
margin-top: 28px;
}
}
#media (max-width: 767px) {
.navbar {
min-height: 60px;
}
.main-logo {
width: 82px;
margin-top: 20px;
}
.jumbotron {
padding-top: 80px;
margin-bottom: 32px;
}
.lead {
margin-bottom: 40px;
}
.ft {
margin-bottom: 16px;
}
hr {
margin-bottom: 40px;
}
.btn-success {
width: 85%;
font-size: initial;
}
.callout, .link-list {
margin-top: 32px;
}
.main-footer {
margin-top: 64px;
}
.link-list {
float: left;
margin-right: 32px;
}
}
Are you sure you have included all required JS libraries such as jQuery and Bootstrap.js
I have copied your code to Codepen and it works perfectly for me (click on the gears near CSS and JS titles to see included libraries)
Codepen example
<a data-toggle="modal" href="#videoModal">
<img class="img-responsive img-rounded" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">
</a>
<div class="modal fade" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Learn how to make this app!</h4>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="http://www.youtube.com/embed/KueEWP91tWc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I couldn't set inline elements background like this:
My code is this:
#divMansetKategoriHaberleriContainer
{
background-color: Transparent;
margin-top: 4px;
font-size: 12px;
}
.divKategoriHaberItem
{
float: left;
background-color: White;
width: 324px;
height: 126px;
margin: 0;
padding: 0;
}
.divKategoriHaberItemImage
{
float: left;
width: 80px;
height: 80px;
border: 1px solid red;
margin: 2px;
}
.imgKategoriHaberResim_Cevre
{
width: 95%;
height: 95%;
}
.divKategoriHaberItemBaslikIcerik
{
}
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
}
.spHaberIcerik_Cevre
{
display: block;
}
.divKategoriHaberDevami_Cevre
{
background-image: url('../images/HaberinDevami_Cevre.png');
background-repeat: no-repeat;
background-position: right;
height: 13px;
}
<div class="divKategoriHaberItem">
<div class="divKategoriHaberItemImage">
<img src='' alt='DÜNYANIN MEKANİK Dengesi Bozuldu' class="imgKategoriHaberResim_Cevre" />
</div>
<div class="divKategoriHaberItemBaslikIcerik">
<span class="spHaberBaslik_Cevre">
<a href='CevreHaber.aspx?id=2128'>DÜNYANIN MEKANİK Dengesi Bozul</a>
</span>
<span class="spHaberIcerik_Cevre">Demokratik Kongo Cumhuriyeti'n</span>
</div>
<div class="divKategoriHaberDevami_Cevre"></div>
</div>
PS: Sorry for i couldn't write with sentences :(
If i understand the question correctly, you will need to add a line-height that equals the total height of your inline element ...
in your case that would be 30px (20px for the height + 10px for the padding 5px top and 5px bottom..)
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
line-height:30px; /*height + padding-top +padding-bottom*/
}