I have a little problem with CSS hover...I have two divs in the same class but I wanna hover only one.
I already tried but it is not working and if it's working it changes for each color.
<div class="container iphone">
<!-- First box -->
<div class="span3 iphone-box-left">
======> <div class="quoteLeft"> <====== :hover
<blockquote>
<p>
description here
</p>
</blockquote>
<p class="credit">
johny
</p>
</div>
</div>
<!-- First box end -->
<!-- Second box -->
<div class="span6">
<img src="images/iphone.png">
<!-- Start Logo -->
<div class="logo-second">
<h3>
==============================================================
So when i hover on qouteLeft i wanna change the color on icon
this icon i also have in logo
====> <i class="icon-cloud icon-large"></i> <=================
creative
</h3>
</div>
<!-- Logo end -->
</div>
<!-- Second box end -->
CSS
.iphone {
position: relative; margin:50px auto; background:url(../images/11.png);
}
.quoteLeft {
position:relative;
top:40px;
padding:15px 25px 20px;
margin:20px auto;
font:italic 26px/1.4 Georgia, serif;
color:#fff;
background:rgba(34, 34, 34, .5);
}
.quoteLeft:after {
content:"";
position:absolute;
top:100%;
left:100%;
margin-top:-4px;
background:url(../images/box-line.png) no-repeat;
width:150px; height:165px;
}
.quoteRight {
position:relative;
top:150px;
padding:15px 25px 20px;
margin:20px auto;
font:italic 26px/1.4 Georgia, serif;
color:#fff;
background:rgba(34, 34, 34, .5);
}
.quoteRight:after {
content:"";
position:absolute;
top:100%;
right:80%;
margin-top:-4px;
background:url(../images/box-line-2.png) no-repeat;
width:300px; height:165px;
}
.credit {
margin:1em 0 0;
font:14px/1.2 Arial, sans-serif;
}
.credit:before {
content:"— ";
}
blockquote, p {padding:0; margin:0;}
.logo-second { position:absolute; margin-top:-20%; margin-left:11%;}
.logo-second h3 { font-size:56px;}
.quoteLeft:hover {And....}
I prefer any ideas css or jquery
Thanks
I think this is what you are looking for:
HTML
<div class="main">
<div class="first">First</div>
<div class="second">Second</div>
</div>
CSS
.main .first:hover ~ .second {
background-color: #f00;
}
I also made a jsFiddle
Related
I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
I am trying to implement the following code in % way to set up the position, in case of different screen width.
.text {
padding:10%;
}
.title {
font-family: 'Great Vibes',cursive;
font-size:150%;
position:relative;
border-bottom: 11px solid rgba(248,221,225,0.7);
top:-10px;
left:0;
width:70%
}
.title p {
position:relative;
top:40px;
left:-20px;
}
<div class="text">
<div class="title">
<p> title title title title title </p>
</div>
</div>
So, I change the setting on top, and left:
.text {
padding:10%;
}
.title {
font-family: 'Great Vibes',cursive;
font-size:150%;
position:relative;
border-bottom: 11px solid rgba(248,221,225,0.7);
top:-8%;
left:0;
}
.title p {
position:relative;
top:50%;
left:-8%;
}
<div class="text">
<div class="title">
<p> title title title title title </p>
</div>
</div>
But, no matter how much I changed on .title p's top, its position doesn't change.
Anyone knows why? and How to change that?
Thanks in advance!!
You have to give parent element a height
.text {
padding:10%;
}
.title {
font-family: 'Great Vibes',cursive;
font-size:150%;
position:relative;
border-bottom: 11px solid rgba(248,221,225,0.7);
top:-8%;
height:50px;
left:0;
}
.title p {
position:relative;
top:50%;
left:-4%;
}
<div class="text">
<div class="title">
<p> title title title title title </p>
</div>
</div>
I just added "margin" before top and it's working.
.title p {
position:relative;
margin-top:50%;
left:-8%;
}
I am trying to set out my webpage and I am facing a big problem. I have wrapped all of my code in a tag as I wish to wrap all of my content in an additional background of different color.
However when I set the attributes for my code this happens:
It is as if by bottom element is overlapping somehow with the two above. I am using column separators I do not know if this affects it. Here is my full CSS & HTML code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Featured</li>
<li>Coming Soon</li>
</ul>
<ul class="pull-right">
<li>Sign In</li>
<li>Register</li>
</ul>
<div id="logo-game">
<img src="http://upload.wikimedia.org/wikipedia/he/b/b7/Gamespot_logo.png">
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="feature-cont">
<div id="feature-cont-back">
<h1>100's Of Featured Game Reviews</h1>
<p>Browse through our collection of the most popular game reviews out there</p>
Find Out More
</div>
</div>
</div>
</div>
<div class="bodytwo">
<!--Recommened Section-->
<div class="recommended">
<div class="text-center">
<div class="container">
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Destiny.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_CODAW.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Evolve.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_AssassinsCreed.jpg"</li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FIFA.jpg"</li>
</ul>
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Forza.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_BattlefieldHardlines.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_GTAV.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Halo.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FarCry4.jpg"> </li>
</ul>
</div>
</div>
</div>
<!--Start Of Tables-->
<div class="mainc">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="new-game">
<table>
<tr>
<th colspan="3">Games</th>
</tr>
<tr>
<td>
<img src="http://static.gamespot.com/uploads/original/1197/11970954/2396871-battlefield4.jpeg">
<p>Battlefield 4 is the genre-defining action blockbuster made from moments that blur the line between game and glory...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/fifa_14/cover_large.jpg">
<p>This year it's all about the emotion of scoring great goals - the challenge of building play as a team...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/dead_island_riptide/cover_large.jpg">
<p>Take on hundreds of Zombies at once as your screen becomes swamped with the undead all after one thing…. You!</p>
</td>
</tr>
<tr>
<td height="400">
<img src="http://images.pushsquare.com/games/ps4/need_for_speed_rivals/cover_large.jpg">
<p>High speed meets high stakes in Need for Speed: Rivals. Play as a lone-wolf racer or a team-based cop as you speed... </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps4/watch_dogs/cover_large.jpg">
<p>Join the Community and Social Team from GAME as they head to Paris for a special Watch Dogs event with Ubisoft!.. </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/last_of_us/cover_large.jpg">
<p>From the creators of the Uncharted Series comes an emotionally-charged experience that’ll keep you gripped...</p>
</td>
</tr>
</table>
</div>
</div>
<!--End Of Tables-->
<!--Start of chart-->
<div class="col-md-6">
<div class="table-chart">
<table class="background">
<tr>
<th colspan="3"><h1>Game Charts</h1></th>
</tr>
<tr>
<td><h1>1</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td>
<td><h3>Gran Turismo</h3>View Review</td>
</tr>
<tr>
<td><h1>2</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td>
<td><h3>Call of Duty:Ghosts</h3>View Review </td>
</tr>
<tr>
<td><h1>3</h1></td>
<td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td>
<td><h3>Killzone</h3>View Review</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--End of chart-->
</div>
<div class="feature-article">
<div ="feature-back">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Call Of Duty: Ghosts</h2>
<img src="http://eaglerising.com/wp-content/uploads/2013/11/call_of_duty_ghosts-hd-300x180.jpg">
<p>Build your team and take up to 6 of them into battle in the all new Squads mode. This mode takes the best parts of the multiplayer experience and allows you to play either solo or cooperatively with the custom soldiers created and leveled up in multiplaye</p>
</div>
<div class="col-md-4">
<div id="feature_back">
<h2>Grand Theft Auto V</h2>
<img src="http://ronewiznation.files.wordpress.com/2013/10/grand-theft-auto-game-cover.jpg?w=300&h=180">
<p>Grand Theft Auto V Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets, and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV. </p>
</div>
</div>
<div class="col-md-4">
<h2>Assasins Creed</h2>
<img src="http://www.ketubanjiwa.com/wp-content/uploads/2013/12/Assassins-Creed-IV-Black-Flag-Freedom-Cry-DLC-Reloaded-Single-Link-300x180.jpg">
<p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#121212;
}
.bodytwo {
background-color:white;
position:relative;
}
.nav {
background-color:black;
width:100%;
position:fixed;
z-index:5;
}
.nav li {
display:inline;
}
.nav a {
padding:10px 8px;
position:relative;
top:6px;
color:#FF6600;
text-transform:uppercase;
}
#logo-game img {
position:relative;
height:50px;
left:20%;
}
.jumbotron {
position:relative;
top:50px;
background-image:url('http://collectortoys.net/wp-content/uploads/2014/06/battlefield-4-server-bannerladder-standings-for-xboxone-battlefield-4---bf4-xbox-one-mretosqa.jpg');
height:500px;
z-index:2;
background-size:cover;
}
.feature-cont {
position:relative;
left:800px;
width:350px;
color:white;
z-index:2;
}
#feature-cont-back {
background-color:rgba(20,20,20,.5);
width:400px;
height:400px;
position:relative;
border-radius:10px;
padding:5px;
z-index:1;
}
.jumbotron h1 {
font-family:ubuntu, Arial;
}
.recommended li {
display:inline;
margin:auto;
float: none;
position:relative;
top:80px;
}
.new-game {
position:relative;
}
.new-game td, th {
padding: 0.5;
}
.new-game table {
border-collapse:separate;
border-spacing:15px 10px;
border: 1px solid black;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game tr {
padding:10px;
}
.new-game tr th {
text-align:center;
color:white;
font-family:ubuntu;
font-size:25px;
}
.new-game td {
padding:10px;
width:100px;
height:200px;
vertical-align:top;
background-color: rgba(24,24,24,.2);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game td p {
text-align:center;
font-family:arial;
font-size:12px;
color:white;
}
.new-game td img {
width:100px;
height:100px;
}
.background {
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png")
no-repeat;
height:500px;
width:424px;
}
.table-chart table {
position:relative;
border-collapse:separate;
}
.table-chart tr td h3 {
width:150px;
text-align: center;
font-family:Arial;
font-size:20px;
position:relative;
top:-20px;
color:black;
}
.table-chart td a {
position:relative;
top:-20px;
}
.table-chart td img {
width:100px;
height:100px;
}
.table-chart th h1 {
text-align:center;
font-family:ubuntu;
color: #dd6a15;
text-shadow: 0 2px rgba(0,0,0,0.75);
}
.table-chart td {
padding:15px;
box-shadow: 0 3px 1px rgba(26,26,26,0.75);
}
.feature-article {
position:relative;
clear:both;
height:400px;
border-bottom:3px solid #2f2f2f;
border-top:3px solid #2f2f2f;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/1_zps87c3163e.jpg');
}
.feature-article .col-md-4 {
width:370px;
height:200px;
text-align:center;
margin:auto;
z-index:1;
}
.feature-article .col-md-4 img {
width:300px;
height:180px;
}
.feature-article .col-md-4 p {
width:350px;
}
#feature_back {
clear:both;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/line-01_zps79e6ad19.png');
height:400px;
width:370px;
padding-left:10px;
background-repeat:no-repeat
}
/*Buttons Design*/
.view-review {
margin-top: 0px;
margin-right: 0px;
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
display:inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
/*for different browsers */
-webkit-transition: background 0.4s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
/*END*/
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.view-review:active {
padding-top: 15px;
margin-bottom: -1px;
}
.view-review, .view-review:hover, .view-review:active {
outline: 0 none;
text-decoration: none;
color: #fff;
border-radius: 3px;
}
.view-review {
background-color: #2f2f2f;
box-shadow: 0px 3px 0px 0px #ea6300;
width:150px;
height:35px;
}
.view-review:hover {
background-color: #454545;
}
.mainc .row {
position:relative;
top:80px;
}
To summarise I want to have the white background wrapped around only the table elements on the page running all the way down the page, however the bottom element is overlapping the tables.
Any idea at all of what I could possible do?
The problem is that you gave a 'top:80' to '.mainc .row'. This causes the overlap. Delete it, and your footer will not overlap the content. Also, give a 'margin-top:100px' to your '.mainc' class. this will fix the new overlapping problem.
You need to learn to use bootstrap more efficiently. Don't be afraid to abuse bootstrap's 'container' and 'row' divs. Think of those element as some big lego blocs that will stack themselves untop of each others.
Also I would not recommend using tables, as they are old-school and less edit-friendly. Use DIVs, you will have more control over them and they will adjust more easily with bootstrap.
If you want your site to be responsive, learn how to scale and place your columns accordingly by adding all of bootstrap 'col-x-x' classes.
You're adding position:relative all over for no good reason. In general you use position:relative to set the anchor point for absolutely-positioned child elements. You'd then use position:absolute to move those elements around in the layout.
If you need to perform minor tweaks of element positioning, use margin:, not position:relative.
I have a div class with a background image set. It displays ok on pc browsers but it wont show the image on mobile browser(i have tried android and ios)
the html
<div class="wrapper">
<div class="headerdiv">
<?php include '../inc/header.php';?>
</div>
<div id="wherewhen">
<div id="when">
<span class="wherewhen">WHEN IS IT?</span><br />
<span class="wherewhentext">9TH/10TH FEBUARY 2014</span>
</div>
<div id="where">
<span class="wherewhen">WHERE IS IT?</span><br />
<span class="wherewhentext">HOLIDAY INN, MILTON KEYNES, ENGLAND</span>
</div>
<div id="what">
<span class="wherewhen">WHAT IS IT?</span>
</div>
<div id="info">
<span class="wherewhentext">
A BACK IN THE DAY STYLE CONVENTION
FOR DISENFRANCHISED ARTISTS AND TATTOO FANS FED UP
WITH TODAY'S COMMERCIAL CORPORATE EXPOS.
</span>
</div>
</div>
<div class="poster">
</div>
the css
html, body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:auto;
background:#000000;
}
.wrapper{
width:80em;
margin: 0 auto 0 auto;
background:#000000;
overflow:hidden;
}
.poster{
float:left;
margin:-900px 0 0 910px;
width:370px;
min-height:600px;
background:#ffffff url('../images/siteimages/background.png');
}
#wherewhen{
background:#392da3;
width:600px;
margin:20px 20px 0 295px;
text-shadow: 2px -2px #000000;
}
#where{
float:left;
text-align:center;
width:20em;
}
#when{
float:right;
text-align:center;
width:15em;
}
#what{
width:20em;
text-align:center;
margin:0 auto 0 auto;
}
#info{
width:30em;
margin:0 auto 0 auto;
}
Can anyone offer assistance here?
Thanks...
oki, #poster background could be in #wrapper with background-attachement:fixed.
Else from your code (#poster outside #wrapper )
#wrapper {
position:relative;
z-index:1;
/* your rules */
}
#poster {
position:fixed;
z-index:0;
top:0;
left:0;
/* your rules */
}
I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.
First of all, I would like you to check my website: http://mmking9999.com
After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="http://mmking9999.com/css/style.css" />
</head>
<body>
<!--Site logo. Clicking on it will redirect to this page.-->
<div class="logo">
<img src="http://mmking9999.com/Images/SiteLogo.png" />
</div>
<!-- Menu window goes here. The text are images that link to other pages.-->
<div class="menu">
<img src="http://mmking9999.com/Images/MenuWindow.png" />
</div>
<div class="portfolio_url">
<img src="http://mmking9999.com/Images/portfoliourl.png" />
</div>
<div class="blog_url">
<img src="http://mmking9999.com/Images/blogurl.png" />
</div>
<div class="random_url">
<img src="http://mmking9999.com/Images/randomurl.png" />
</div>
<div class="email">
<img src="http://mmking9999.com/Images/emailicon.png" />
</div>
<div class="linkedin">
<img src="http://mmking9999.com/Images/linkedinicon.png" />
</div>
<div class="twitter">
<img src="http://mmking9999.com/Images/twittericon.png" />
</div>
<div class="window"><br><br><p>Welcome to my website! My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future. I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play. Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!</p></div>
</body>
</html>
And here is the CSS I'm using:
/*The code for the body sets the default settings for all pages */
body
{
background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}
/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}
/* Main window. Used to display text and images */
img
{
margin: 2px;
height: auto;
width: auto;
float: left;
}
h1
{
color:red;
text-align:center;
font-family:calibri;
}
p
{
/* font */
color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;
text-align:left; width:700px; margin-left:200px;
}
/* Main window. All info is displayed in here */
div.window
{
background-image:url('http://mmking9999.com/Images/IframeWindow.png');
background-repeat:no-repeat;
position:relative;
width:60%;
height:70%;
top:80px;
left:500px;
/*text*/
/*color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;*/
}
/* Menu */
div.menu
{
position:relative;
width:40%;
height:10%;
}
/*Site logo */
div.logo
{
position:relative;
width:40%;
height:5%;
left:500px;
}
/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
position:absolute;
left:20px;
}
/* In case I need another row of images */
div.image2
{
position:relative;
left:-150px;
width:90%;
height:90%;
}
/*Menu urls*/
div.portfolio_url
{
position:relative;
left:-175px;
top:30px;
}
div.blog_url
{
position:relative;
left:-305px;
top:90px;
}
div.random_url
{
position:relative;
left:-445px;
top:150px;
}
div.email
{
position:relative;
top:250px;
left:-600px;
}
div.linkedin
{
position:relative;
top:250px;
left:-580px;
}
div.twitter
{
position:relative;
top:250px;
left:-560px;
}
/*iframe
{
position:relative;
top:80px;
left:280px;
width:60%; height:70%;
}*/
Thanks for any advice you can provide.
http://d.pr/i/OhIF
Try using position:absolute rather than relative on your divs.