I'm having a bit of a problem. For some reason a horizontal scroll bar keeps appearing from my code. I've tried everything but I can't seem to remove it. The following link is a live preview of the code.
http://jsfiddle.net/y5x7V/
HTML
<body>
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo">Magna Contra</li>
<li class="active">Blog With Us</li>
<li>Compxta</li>
<li>Laurie</li>
<li>SUBTITLESOFLIFE</li>
</ul>
</div>
</div>
</section>
<div class="bg">
<h1>SUBTITLESOFLIFE</h1>
</div>
<ul class="check">
<li class="bold">Hot Trends</li>
<li class="topic">Daft Punk</li>
<li class="topic">#bbcqt</li>
<li class="topic">Petite Noir - Major</li>
<li class="topic">Alt J Album Teaser</li>
<li class="topic">Materialistic Happine$$</li>
<li class="topic">WOLF</li>
</ul>
<div class="contar">
Lorem Dosi
</div>
</body>
</html>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}
.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;
}
::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}
li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
hr{
color:#dfe0db;
border: 0;
background-color: #dfe0db;
height: 1px;
}
.bold{
display: inline;
}
.bold a{
color:#e94378;
}
.topic{
display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;
}
.topic a{
-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.topic a:hover{
color:#e94378;text-decoration:none}
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.image {position: relative; text-align: center;width:100%;height:75%;}
.image span {position: absolute; line-height: 20px; display: block; top: 50%;
margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
text-transform: uppercase;
font-size: 1.5em; letter-spacing:;}
#media screen and (max-width:800px) {
.image span {
font-size:0.8em;
}
}
#media screen and (max-width:400px) {
.image span {
font-size:0.7em;
}
}
.bg{
background-color: #e94378;
}
img.ri
{
position: relative;
max-width: 100%;
width:100%;
display: inline-block;
vertical-align: middle;
}
#media screen and (orientation: portrait) {
img.ri { max-width: 100%; }
}
#media screen and (orientation: landscape) {
img.ri { max-height: 100%; }
}
.text{
font-family: "proxima-nova";
font-size: 1em;
letter-spacing: .2em;
text-transform: uppercase;
background-color: #e94378;
padding:20px;
color:yellow;
position: absolute;
left:200px;
bottom:50px;
}
.tex{
font-family: "proxima-nova",sans-serif;
font-size: 2.5em;
letter-spacing: 3px;
text-transform: uppercase;
bottom:160px;
left: 320px;
color:white;
padding: 10px;
}
.image{
vertical-align: middle;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: center;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.contar {
margin: 0 auto;
text-align: center;
width:100%;
height:400px;
background-color: white;
}
img.ft{
float:left;
}
.featured{
background-color: white;
width:69%;
text-align: center;
margin: 0 auto;
display: inline-block;;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
h1{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}
.txt{
font:800 proxima-nova;
}
h2{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}
h2 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}
Don't use overflow-x: hidden - it only papers over the cracks, it doesn't fix the issue. You can fix it by using the box-sizing property on the top div:
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This takes your padding: 10px into account when applying 100% width.
You can also use a polyfill to check for browser support, using the Modernizr plugin.
add
overflow-x:hidden
to the main wrapper class
This is because you're combining both 100% width and padding. If 100% width evaluates to 100px, for example, adding 5px padding to the left and right on top of that will cause your element to have an overall width of 110px. You can get around this by changing the element's box-sizing.
.bottom, .top {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
JSFiddle demo.
You can set overflow-x in body to hidden
http://jsfiddle.net/y5x7V/1/
body {
line-height: 1;
text-align: center;
overflow-x: hidden;
}
You can fix this correctly rather than hacking in some CSS to hide the scrollbar by fixing the top class in your CSS. Set the padding to 0 (as it's taking the full width of the parent) by adding:
padding:0;
to .top
JSFiddle
You can set the padding's height property to get the original look, this is just a quick fix to demo why it's breaking.
Change
.top {padding:10px;}
to
.top {padding:10px 0; }
Line 261 of css you provided, change from padding: 10px;, to padding: 10px 0;.
Related
I have this html code of my home page. The website is wwww.chatziefraimidis.com. It works perfectly fine in a desktop browser but in mobile the footer and the header are smaller than the screen and that even more weirdly happens only on the home page and on the other pages with exactly the same code it works both on desktop and mobile browser correctly. Does anyone know how to fix this?
and the coresponding css code is
body{
font: 15px/1.5 "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding: 0;
margin:0;
font-weight:normal;
background: #f6f6f6;
}
/*Global*/
.container{
width:90%;
margin:auto;
overflow:hidden;
}
header ul{
margin:0;
padding:0;
}
.button_1{
height:32px;
background:#7B68EE;
border: 0;
padding-left:20px;
padding-right:20px;
color:#ffffff;
}
.dark{
padding:15px;
background:#35424a;
color:#ffffff;
margin-top:10px;
margin-bottom: 10px;
}
/*Header**/
header{
background: #35424a;
color:#ffffff;
padding-top:20px;
min-height: 70px;
border-bottom: #7B68EE 5px solid;
}
header a{
color:#f4f4f4;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li{
float:left;
display:inline;
padding: 0 16px 0 16px;
}
header #branding{
float:left;
}
header #branding h1{
margin:0;
}
header nav{
float:right;
margin-top: 15px;
}
header .highlight, header .current a{
color:#7B68EE;
font-weight:normal;
}
header .current2 a{
color:#000000;
font-weight:normal;
}
header a:hover{
color:#cccccc;
font-weight: bold;
}
/* showcase*/
#showcase{
min-height:600px;
min-width:500px;
background:url('../img/showcase.png') no-repeat 0 -100px ;
background-position: center;
background-size:100%;
text-align:center;
color: #ffffff;
}
#showcase h1{
margin-top:100px;
font-size:50px;
margin-bottom:10px;
background: #35424a ;
opacity: 0.6;
}
#showcase p{
font-size:20px;
background: #35424a ;
opacity: 0.6;
}
/*newsletter*/
#newsletter{
padding:15px;
color:#ffffff;
background:#35424a;
}
#newsletter h1{
float:left;
font-size:17px;
}
#newsletter form{
float:right;
margin-top:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:25px;
width: 250px;
}
/*boxes*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float:left;
text-align: center;
width:33%;
padding:10px;
}
#boxes .box img{
width:30%;
}
/*side bar*/
aside#sidebar{
float:right;
width: 30%;
margin: 10px
}
/*main cal*/
article#main-col{
float:left;
width: 65%;
}
/*projects*/
ul#services li{
list-style: none;
padding: 20px;
boarder:#cccccc solid 1px;
margin-bottom:5px;
background:#e6e6e6;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 33%;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 33%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
.column {
width: 49.9%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
.column {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/*people*/
ul#people li{
list-style: none;
padding: 20px;
boarder:#cccccc solid 1px;
margin-bottom:5px;
float: left;
background:#e6e6e6;
}
ul#people img{
float: left;
}
/*form*/
aside#sidebar .quote input, aside#sidebar .quote textarea {
width:90%;
padding: 5px;
}
/*footer*/
footer{
padding:20px;
margin-top:20px;
color:#ffffff;
background-color:#483D8B;
/* text-align: center;*/
}
.column1 {
float: left;
width: 50%;
margin-left:50px;
}
.column2 {
float; top;
float: right;
width: 50%;
margin-right:50px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.fa {
padding: 20px;
font-size: 30px;
text-align: center;
text-decoration: none;
margin: 2px 2px 2px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
/*media quaeris*/
#media(max-width:768px){
header #branding, header nav , header li , #newsletter h1, #newsletter form, #boxes .box,
article#main-col, aside#sidebar
{
float:none;
text-align:center;
width:100%;
}
header {
padding-bottom: 15px;
}
#showcase{
background-size:768px;
}
#showcase h1{
margin-top:40px;
}
#newsletter button, .quote button{
display: block;
width: 100%;
}
#newsletter form input[type="email"], .quote input, .quote textarea{
margin-bottom: 5px;
width: 100%;
}
}
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Fasma</span> Engineers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Projects</li>
<li>People</li>
<li class="current2">|EN</li>
<li>GR|</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>World Class Structural And Geotechnical Engineers</h1>
<p>Expienced With The Most Prestigious Projects</p>
</div>
</section>
<section id= "newsletter">
<div class="container">
<h1>Subsctibe to our NewsLetter</h1>
<form name="submit-to-google-sheet">
<input type="email" name="email" placeholder="Enter Email">
<button type="submit" class= "button_1">Subscribe</button>
</form>
</div>
</section>
You have to remove min-width: 500px; from style.css line 90.
and add
#media(min-width:500px){
#showcase{
min-width:500px;
}
}
So It will look like -
Convert your widths to use percentages if you want a really responsive layout.
header {
padding-bottom: 2%;
}
#showcase{
background-size:88%;
}
#showcase h1{
margin-top:5%;
}
I'm building a website on Github page and I am trying to change color of footer.
As you can see, I made with class "footer" .
On CSS, I put background-color property and set as #000000.
But, I still can't see background color with black on desktop.( I can see on mobile page because I set media query)
The Code is below.
#media screen and (min-width: 1000px) {
html, body{
font-family: "Comfortaa";
}
.header-logo{
float: left;
padding: 10px 30px;
}
.header li:hover{
border-bottom: 2px solid #24ABE2;
}
.header a{
float:left;
display:block;
color:black;
}
.header-link li{
float: left;
padding: 5px 60px;
font-size: 20px;
color:#24ABE2;
}
/* Dropdown Button */
.droplist{
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 240px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 20;
margin-top: 29px;
height: 210px;
color:#24ABE2;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #24ABE2;
padding: 12px 16px;
text-decoration: none;
display: block;
z-index: 20;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
border-bottom: 2px solid #24ABE2;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: white;
}
.footer-logo{
float: left;
padding: 15px 20px;
width: 300px;
height: auto;
margin-left: 30px;
margin-top: 20px;
}
.footer-list{
margin-top:10px;
font-size: 20px;
color: #ccfbff;
float: right;
padding: 2px 8px;
margin-right: 40px;
}
.footer-list li{
padding: 10px;
}
}
#media screen and (max-width: 1000px) {
html, body{
font-family: Nunito;
}
.header-logo{
text-align:center;
margin-left:20px;
padding: 10px 30px;
}
.header li{
display:none;
}
.header-link{
display:none;
}
.footer-logo{
padding: 15px 10px;
width: 300px;
height: 90px;
margin:auto;
text-align:center;
}
.footer-logo img{
width: 300px;
height: auto;
margin:auto;
text-align:center;
}
.footer-list{
display:block;
margin:auto;
font-size: 20px;
color: #ccfbff;
padding: 2px 8px;
text-align:center;
}
.footer-list li{
margin:auto;
padding: 5px;
font-size:20px;
text-align:center;
}
}
/* CSS for default design */
html { scroll-behavior: smooth; }
html, body{
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
z-index:-10;
}
/* Settings of a tag for whole page*/
a:link {
text-decoration: none;
cursor: pointer;
}
a:visited {
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: none;
cursor: pointer;
}
a:active {
text-decoration: none;
cursor: pointer;
}
.header {
border-bottom:2px solid #0E76BC;
background-color: white;
height: 60px;
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
opacity: 90%;
margin: 0px 0px 0px 0px;
z-index:10;
}
.header-logo{
width: 300px;
height: auto;
}
li{
list-style: none;
}
.footer{
height: auto;
background-color: #000000 !important;
width: 100%;
margin: 0px 0px 0px 0px;
}
.footer a:link {
color: #ccfbff;
}
.footer a:visited {
color: #ccfbff;
}
.footer a:hover {
color: #ccfbff;
}
.footer a:active {
color: #ccfbff;
}
<div class="footer">
<img src="https://i.ibb.co/p4LvvdH/Copy-of-LOGO-White.png" alt="SLED Logo" class="footer-logo" />
<div class="footer-list">
<ul>
<li>Back to Top</li>
<li>Instagram</li>
<li>Facebook</li>
<li>Jcbms-sled-team#mail.fcboe.org</li>
<li>J.C. Booth Middle School</li>
<li>Fayette County Public Schools</li>
</ul>
</div>
</div>
Whenever we give float property on child item then parents give automatically own height to 0, so please put it:
.footer:before,
.footer:after
{
clear: both;
display: block;
content: '';
}
The reason is because you set your footer height to auto without defining a minimum height. To solve this just put min-height: 50vh; to your .footer class. Of course you can change 50vh to whatever minimum height you want.
try something like this
.footer
{
min-height: 100%;
background-color: #000000 !important;
width: 100%;
margin: 0px 0px 0px 0px;
}
set min-height: 100% instead of height:auto from .footer class
I need to build a small website and I'm having problems with the page resizing.
I want that the png image that I put as header is resizable with the whole page (zooming in or out).
I use this css
div#container {
overflow: hidden;
min-width:900px;
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('header.png') no-repeat center center;
height:20%;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
and here the html part
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
Here a link with the test code: https://jsfiddle.net/809ofmvr/1/ I don't know how to add image in the test. Let's say that in the upper part there is the header image and in the bottom part the footer.
I use for the header, a div header and inside the upper_nav div with some links. I think the problem is inside the header div but I don't know where. I also tried to replace position:relative; with display:block; but gives me the same problem.
What can I do to allow a complete resize of the entire page when changes the monitor resolution, zoom, using a smartphone or whatever? With the content it resizes in the correct way.
You can use 20vw to force the header to have a height:
html {
margin:0;
padding:0;
background-color:#ffffff;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color:#000;
text-align:justify;
background-image: url('http://placehold.it/800x200');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
div#container {
overflow: hidden;
min-width:900px;
/*max-width:2000px;*/
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('http://placehold.it/800x200') no-repeat center center;
background-size: cover;
height:20vw;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
div#navigation_left {
padding:5px 5px;
float: left;
width:22%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#content {
overflow:auto;
margin-left:25%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#footer {
clear:both;
background: url('footer.png') no-repeat center center;
height:105px;
position:relative;
}
div#footer_content {
position: relative;
bottom:-50%;
text-align:center;
z-index:9999;
background-color:#fff;
}
P {
font-size: 17px;
color:#000;
font-family:Tahoma;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,h3,h4,h5,h6,h7,h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_left{
font-size: 11px;
list-style: none;
}
ul#menu_left li {
display: block;
width: 150px;
height: 30px;
margin: 2px;
}
ul#menu_left li a {
color:#000;
display: block;
line-height: 30px;
text-decoration: none;
text-align: left;
}
ul#menu_left li.active, ul#menu_left li:hover {
background-color: #c9c9c9;
}
ul#menu_header {
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu_header li {
background-color: #737373;
display: block;
width: 150px;
height: 30px;
margin: 2px;
float: left; /* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
display: block;
line-height: 30px;
text-decoration: none;
width: 150px;
height: 30px;
text-align: center;
}
ul#menu_header li.active, ul#menu_header li:hover {
background-color: #b1b1b1;
}
<div id="container">
<div id="header">
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">
<a hfre="#">links</a>
</ul>
</div>
<div id="content"><p>text</p></div>
<div id="footer"><div id="footer_content">text</div></div>
</div>
Also, I added background-size: cover; to make sure the background image always fills the container
I'm trying to create a hover effect that will change the color of the image to blue, as the mouse hovers it. I've already created a class for the images and styled it in my css but its still not working. I've also tried changing z-indexes but to no avail.
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Images/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
#content_area
{
width: 100%;
margin: 10px;
}
.sub-menu
{
position: absolute;
background-color: white;
list-style-type: none;
width: 5px;
display: none;
z-index: 60;
border-radius: 15px;
}
#nav_menu .sub-menu li a
{
color: black;
}
#nav_menu li:hover .sub-menu
{
display: block;
}
#nav_menu li .sub-menu
{
width: 16.5%;
}
#nav_menu li .sub-menu li
{
display: block;
margin-left: 20px;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1100px;
box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
}
.slider .bx-wrapper .bx-prev{
background: url("../Images/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Images/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Images/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Images/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third {
width: 27.35%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
background-color: white;
}
.guitarLogo img:hover
{
color: yellow;
background-color: blue;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ibanezLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/gibsonLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/prsLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ernieballLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/espLogo.jpg" runat="server"/>
</div>
</section>
If you don't want to affect other elements and change the background color of div element around your images, then create new class like myHover and add existing CSS to it, like:
HTML:
<div class="border_section myHover">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server" />
</div>
CSS:
.myHover:hover {
color: yellow;
background-color: blue;
}
JSFiddle example: https://jsfiddle.net/59drat5e/4/
The selector would be img.guitarLogo:hover
But setting a background-color for an image will only affect the visible part around the image (if there is ANY), and color would only affect text (and there isn't any), so you will problably see no effect, even if it works.
It looks like that you are targeting the wrong element. The background-color:blue will only be visible if the image is transparent, otherwise most of the time the image will just overlap any background color for it to be visible.
What you should be doing is targetting the container element as shown below.
.border_section:hover
{
color: yellow;
background-color: blue;
}
DEMO
If you have images with transparencies or still if you want to set the background-color of the img just for the sake of it, then maybe you should write the rule as below.
img.guitarLogo:hover
{
color: yellow;
background-color: blue;
}
Try this code in your css
.guitarLogo:hover {
background: blue;
}
you can also overlay background color to image
.overlay {
position:relative;
width:400px;
height:auto;
}
.overlay img {
width:100%;
vertical-align:top;
}
.overlay:after {
content:'';
position:absolute;
width:100%;
height:100%;
top:0; left:0;
background:red;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}
<div class="overlay">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>
Your CSS:
.guitarLogo img:hover {
color: yellow;
background-color: blue;
}
Is incorrect, because the .guitarLogo already targets the <img> element - no need for img:hover.
Also, that isn't going to work, because there is no way you can set z-index to background only - it's possible only for elements.
The way to do what you want is to register :hover on parent container and in it by using pseudo element :before / :after as the foreground you can get the desired effect.
I have this image:
http://www.problemio.com/img/phoneimage.png
But when I placed in inside a page like this:
<div style="float:left">
<img src="https://i.stack.imgur.com/83Z5U.png" style="border: none;" />
</div>
<div style="float:left">
<p>
Some text
</p>
<p>
Some text
</p>
</div>
It got displayed as very big. Here is how it looks on a test page:
http://problemio.com/business/business_economics.php
Would anyone know why that happened? It is really unexpected. Here is the css I am working with
/* layout styles across the problemio project */
html
{
background-color: #ECE5B6;
#4a4647;
}
body, html
{
padding: 5px;
}
body
{
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
font-size: 1.3em;
#background-color: #5C5957;
#background-color: #4a4647;
#background:url(/img/ui/background_image.png) top left no-repeat;
#background-size: 100%;
}
/* makes the background of the top bar gray */
.container
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
-moz-border-radius: 15px;
border-radius: 15px;
}
.container_home
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
}
div#bd
{
/* background-color: #f5f6f6; */ /* some form of gray */
background-color: white;
border-style:solid;
border-width:1px;
}
/* styles for banner: */
.banner
{
position: relative;
height: 40px;
background-size:100%;
#background-color: #4a4647;
}
.site_title
{
float:left;
margin-top: -3px;
margin-left: 10px;
font-weight: bold;
color: #ffce2e;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
font-size:2.5em;
text-align: left
text-color: black;
width: 300px;
}
.site_login
{
width: 700px;
float:right;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 90.0%;
color: gray;
text-align: right;
text-align: bottom;
}
/*
.bgdiv
{
position:absolute;
right:0px;
left:240px;
top:0px;
bottom:0px;
background-image: url('http://www.problemio.com/img/ui/banner_background.png');
#background-repeat: no-repeat;
}
*/
/* styles for basic template */
.content .basic
{
background: #fff;
padding: 15px;
border: 1px solid #888;
border-color: gray;
text-align: left;
}
.content .basic h1{
font-size: 2em;
font-weight:bold;
text-align: center;
}
.content .basic h2{
font-size: 1.5em;
font-weight:bold;
}
.content .basic h3{
font-size: 1.0em;
font-weight: bold;
}
#layout
{
/*margin:auto; */
#margin-top: 5px;
padding-right: 20px;
padding-left: 20px;
text-align:left;
/* background-color: #EDEDED; */
}
label span
{
float: left;
width: 15em;
}
p.half_text
{
font-size: 80.0%;
font-type: arial;
}
span.half_text
{
font-size: 80.0%;
font-type: arial;
}
p.half_height
{
margin: 5px 0;
}
.index_problem_title:visited
{
font-weight:bold;
text-decoration: none;
}
.index_problem_title
{
font-weight:bold;
text-decoration: none;
}
.index_problem_title:hover
{
text-decoration:underline;
color: gray;
}
footer a
{
color: white;
}
div.footer
{
text-align: right;
#color:#999999;
color: white;
background-color: black;
font-family:arial,times,serif;
font-size:18px;
#padding-top:20px;
line-height:150%;
position:relative;
float:right;
bottom:10px;
#height: 100px;
style: clear:both;
width: 1000px;
#background:url(/img/ui/footerbar.png) top left no-repeat;
}
#tabs-1
{
padding-left: 10px; !important;
}
.ui-tabs-panel
{
padding: 5px !important;
}
.ui-widget-header
{
background-image: none;
background-color: #EBEBEB;
padding-left: 50px;
}
.ui-state-default
{
background-image: none;
background-color: Gray;
}
To make adjacent,
<div style="float: left; width: 68%; display: inline;">
<img width="60%" height="60%" style="border: none;" src="http://www.problemio.com/img/phoneimage.png">
</div>
<div style="display: inline; float: left; width: 28%;">
<p>
Understanding and correctly forecasting the unit economics of your business is extremely important. It is a large part of a successful business plan, and the business itself. The term might sound complicated, but it is surprisingly simple. At least we will try to make it so with an example.
</p>
<p>
In an effort to make this material easy and fun to understand, we will actually go over the unit economics of a real business. Our example business: A single-location exercise gym. We will call it Bob's Fitness.
</p>
</div>
Actually , I just added some inline css to your code,you can made them in class or id also
#layout div img
{
max-width: 100%;
width: 100%;
}
Add this css in your page or place as you want.
I see you are modifying it :-) i'm testing with firebug!
In any case I tested it there
http://jsfiddle.net/eb56N/2/
I've just added
<img style="border: none; width: 100%;" src="http://www.problemio.com/img/phoneimage.png">
Maybe you already changed something.