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.
Related
I'm pretty new to web development, and I decided to recreate a few sites without looking at their source for practice (before I design and code them myself). Everything was going well until I added <p> tags inside my divs.
Things I've tried: z-index, using spans instead, rebooting my PC, closing my browser, using another browser. It's probably a noob mistake, and possibly a duplicate. If it is a duplicate, I'd appreciate you linking me to the other question rather than closing it without context. I've already tried searching for it, and I can't find any results.
Problem:
<div id="below-headbar">
<div id="cloud-based">
<img src="images/cloud-based.png">
<h1>CLOUD BASED</h1>
<p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
</div>
<div id="dynamic-pricing">
<img src="images/dynamic-pricing.png">
<h1>DYNAMIC PRICING</h1>
<p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
</div>
<div id="print-ready">
<img src="images/print-ready.png">
<h1>PRINT READY</h1>
<p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
</div>
</div>
This is the HTML that I'm trying to get work. Everything inside it works, except for the text inside of the paragraph tags. As I said, I've already tried a few things. Here's the CSS that applies to it:
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
}
Any help/troubleshooting is appreciated. Here's the JSFiddle (Entire website so far, as I said, it's a copy of another website for practice):
https://jsfiddle.net/puvnw3a1/2/
The website looks a bit ugly without the images, but don't worry about that. Again, it's probably some beginner mistake. Thanks.
A quick look at your jsfiddle it says that your p tag has a font size of 0.
try:
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
font-size: 16px;
}
Similar to what Awad said in his comment, I would suggest setting the font-size property in your css for #below-headbar div p so that it doesn't inherit the size from any other elements.
Remove font-size: 0; from #below-headbar, updated example:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin:0;
}
html,body {
width:100%;
height:100%;
font-family: 'Roboto', sans-serif;
}
#font-face {
font-family:'Montserrat-Bold';
src:url("../fonts/Montserrat-Bold.ttf");
}
#wrapper {
width:1920px;
height:6000px;
margin:auto;
}
#logo-wrapper {
margin-top:30px;
margin-left:95px;
}
#headset-section {
width:100%;
height:830px;
}
#info-and-colors-wrapper {
width:950px;
height:100%;
}
#customize-info {
width:700px;
height:360px;
margin-left:95px;
margin-top:240px;
display:inline-block;
line-height:3rem;
}
#customize-info h1 {
text-transform:uppercase;
font-weight:300;
color:rgb(52,52,52);
color:#333;
font-family: 'Montserrat', sans-serif;
}
#customize-info h1 span {
display:block;
font-weight:700;
font-size:34px;
color:#333;
}
#customize-info p {
margin-top:20px;
font-size:26px;
color:rgb(102,102,102);
width:550px;
line-height:2.8rem;
}
#getstarted {
text-transform:uppercase;
font-weight:600;
color:white;
width:121px;
background-color:rgb(58,204,129);
height:46px;
text-align:center;
border-radius:4px;
margin-top:20px;
font-size:15px;
border:2px solid rgb(58,204,129);
cursor:pointer;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#getstarted:hover {
background-color:white;
color:rgb(58,204,129);
}
#headset-colors {
height:300px;
width:50px;
margin-left:850px;
margin-top:-250px;
}
.headset-color {
height:40px;
width:40px;
display:inline-block;
border-radius:50%;
margin-bottom:20px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
.headset-color:hover {
height:70px;
width:70px;
display:inline-block;
border-radius:50%;
margin-left:-15px;
cursor:pointer;
}
#red {
background-color:rgb(111,7,31);
}
#red:hover {
margin-top:-20px;
margin-bottom:10px;
box-shadow: 3px 3px 5px 3px rgba(101,5,21,.2);
}
#yellow {
background-color:rgb(237,202,37);
}
#yellow:hover {
margin-top:-15px;
margin-bottom:5px;
box-shadow: 3px 3px 5px 3px rgba(227,192,27,.3);
}
#orange {
background-color:rgb(251,144,63);
}
#orange:hover {
margin-top:-15px;
margin-bottom:5px;
box-shadow: 3px 3px 5px 3px rgba(241,134,53,.2);
}
#blue {
background-color:rgb(12,184,150);
}
#blue:hover {
margin-top:-15px;
box-shadow: 3px 3px 5px 3px rgb(2,174,140,.2);
}
#headset {
margin-left:1372px;
margin-top:-488px;
}
#headbar {
height:70px;
width:1920px;
display:flex;
vertical-align:center;
background-color:rgb(253, 251, 251);
border-bottom:1px solid rgb(226,226,226);
}
#headbar ul {
display:flex;
list-style-type:none;
width:400px;
margin:auto;
margin-right:-30px;
margin-top:25px;
}
#headbar ul li {
margin-right:45px;
box-shadow: 0px 3px 0px 0px rgb(253, 251, 251);
transition:300ms all;
border-bottom:10px solid rgb(253,251,251);
cursor:pointer;
}
#headbar ul li:hover {
box-shadow: 0px 3px 0px 0px rgb(58,204,129);
margin-bottom:-16px;
}
#request {
display:inline-block;
width:130px;
height:40px;
border-radius:10px;
background-color:rgb(58,204,129);
color:white;
margin-right:710px;
margin-top:15px;
line-height:40px;
text-align:center;
border:1px solid rgb(58,204,129);
transition:200ms all;
cursor:pointer;
}
#request:hover {
background-color:white;
color:rgb(58,204,129);
}
#below-headbar {
width:1260px;
height:400px;
margin:auto;
margin-top:100px;
/* comment out this style */
/* font-size:0; */
text-align:center;
}
#below-headbar div img {
width:130px;
height:auto;
display:block;
margin:auto;
}
#below-headbar div h1 {
font-size:26px;
color:#333;
font-weight:300;
font-family:'Montserrat-Bold';
width:250px;
margin-left:90px;
}
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
}
#cloud-based, #dynamic-pricing, #print-ready {
width:420px;
height:400px;
display:inline-block;
color:black;
font-family:'Montserrat', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Productimize</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="logo-wrapper">
<img src="images/logo.png" width="265px" height="40px">
</div>
<div id="headset-section">
<div id="info-and-colors-wrapper">
<div id="customize-info">
<h1>
Product
<span>Customization</span>
Made Easy
</h1>
<p>
Start selling customized products and skyrocket your conversion rate.
</p>
<div id="getstarted">Get Started</div>
</div>
<div id="headset-colors">
<div id="red" class="headset-color" onclick="change("red")"></div>
<div id="yellow" class="headset-color" onclick="change("yellow")"></div>
<div id="orange" class="headset-color" onclick="change("orange")"></div>
<div id="blue" class="headset-color" onclick="change("blue")"></div>
</div>
<div id="headset">
<img src="images/redheadset.png">
</div>
</div>
</div>
<div id="headbar">
<ul>
<li>Portfolio</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="request">Request a Demo</div>
</div>
<div id="below-headbar">
<div id="cloud-based">
<img src="images/cloud-based.png">
<h1>CLOUD BASED</h1>
<p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
</div>
<div id="dynamic-pricing">
<img src="images/dynamic-pricing.png">
<h1>DYNAMIC PRICING</h1>
<p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
</div>
<div id="print-ready">
<img src="images/print-ready.png">
<h1>PRINT READY</h1>
<p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
</div>
</div>
</div>
</body>
<script>
hset = document.getElementById("headset");
function change(color) {
hset.innerHTML = "<img src=\"images/" + color + "headset.png\">";
}
</script>
</html>
This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.
Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:
HTML
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
CSS
#div06
{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01
{
border:3px solid blue;
padding: 35px;
margin: 25;
}
Here is my current edit:
#div06{
margin-top:3%;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid #3b5998;
color:#000000;
font-family:arial, bold;
font-size: 30px;
padding: 35px;
margin: 25;
}
It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?
Also if you need the full code I will provide it below.
Full Code
HTML
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div id="div01">
<h1 id="h101">Bradley's Website</h1>
</div>
<div id="div02">
<h3 id="h301">My Band</h3>
<h3 id="h302">My Handlers</h3>
<h3 id="h303">My Ideas</h3>
</div>
<div id="div03">
<div id="div04">
<h2 id="h201">Formal Unknown Cereal Killer</h2>
</div>
<div id="div05">
<p id="p01">Date: 10/05/2016 (Latest Update)
<blockquote>
Summary:
<br/>
<br/>
Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
</blockquote>
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
<div id="div07">
<img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
</div>
</div>
</div>
</body>
CSS
a:link{
color:#1a0000;
border-right:2px solid;
border-left:2px solid;
padding:5;
}
a:visited{
color:#950f0f;
}
a:hover{
color:red;
}
a:focus{
color:#eeeedd;
}
#div01 {
position:fixed;
top:0px;
left:0px;
right:0px;
height:80px;
bottom:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
background-color:#73778c;
color:#950f0f;
text-align:center;
border-top:3px solid #950f0f;
border-bottom:2px solid #950f0f;
padding-top:0;
display:inline-block;
}
#h101{
margin-top:10;
margin-bottom:10;
}
#div02{
position:fixed;
top:85px;
left:0px;
right:0px;
display:inline-block;
background-color:#73778c;
color:#950f0f;
border-bottom:2px solid #950f0f;
text-align:center;
padding-top:5;
padding-bottom:5;
font-family:verdana;
font-size:12px;
}
#h301{
display:inline;
}
#h302{
margin-left :20%;
margin-right:20%;
display:inline;
}
#h303{
display:inline;
}
#div03{
position:fixed;
padding-top:0;
top:114px;
left:0%;
right:0%;
bottom:0%;
background-color:#73778c;
color:#950f0f;
border-bottom:3px solid #950f0f;
}
#div04{
font-size:30;
text-align:center;
margin-top:-30;
}
#h201{
font-family:Times New Roman;
}
#div05{
margin-left:100;
margin-right:100;
margin-bottom:100;
margin-top:-30;
padding-top:10;
padding-bottom:10;
padding-left:30;
padding-right:20;
border:3px solid #950f0f;
background-color:#e0e0d1;
}
#div06{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#div07{
margin-top:3%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid blue;
padding: 35px;
margin: 25;
}
#img02{
width:10%;
}
Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].
Trying using text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
And to make the chrome dev-tools full screen, press the 3 small dots close to the side (menu button), and beside 'Dock side' there is a button to 'pop out'. This will make a new window with which you can resize as much as you need.
My friend told me I should use a table and it worked! Here is the snippet of code:
HTML
<table>
<tr>
<div id="div06">
<th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
<th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
</div>
</tr>
</table>
CSS
#img01
{
width:100px;
height:100px;
vertical-align:middle;
}
span.span01
{
border:3px solid #ffffff;
color:#000000;
font-family:arial;
font-size: 16px;
padding:38.5px;
margin: 25;
}
i'm creating a div with the image and putting overlay on the top . when you hover on image the overlay will appear but it's not taking the padding
<div class="col-lg-6 text-center full-width">
<div class="overlay">
<p class="overlay-price-product">
$9.00
</p>
<p class="color-white">
MENS,T-SHIRT
</p>
<p>
<a href="#">
<button type="button" class="btn btn-default-buy">
add to cart
</button>
</a>
</p>
</div>
<img src="img/men_shirt_1.jpg" class="spaces">
</div>
My CSS
.full-width{
padding-right: 0px !important;
padding-left: 0px !important;
background-color: #F6F6F6;
}
now the problem is here its taking padding for the image class but its not taking overlay class padding
.overlay{
opacity: 0;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position: absolute;
padding: 20px;
}
.spaces{
padding:20px;
}
i wan't my overlay to be the exact size of image any suggestions ? or any efficient way of doing it?
You can use this code below: Here is the Live Demo
<div class="container">
<img src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" width="200"/>
<div class="overlay">
<p class="overlay-price-product"> $9.00 </p>
<p class="color-white"> MENS,T-SHIRT </p>
<p><button type="button">add to cart</button></p>
</div>
</div>
.container{
width:200px;
height:200px;
background:green;
position:relative;
}
.container img{
width:100%;
height:100%;
}
.overlay{
width:100%;
height:100%;
background:red;
opacity:0;
position:absolute;
text-align:center;
box-sizing:border-box;
padding:20px;
top:0;
transition:all .5s;
transform:scale(.9, .9);
}
.overlay:hover{
opacity:1;
transform:scale(1, 1)
}
There is another way. I will show an example. Here will be the three-type zooming effect.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Powerful Zooming Effect Using jQuery </title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300, 300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'Image/image1.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400, 400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'Image/image2.jpg' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
<style type="text/css">
.magnifyarea
{
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<img id="image1" border="0" src="Image/image1.jpg" style="width: 300px; height: 225px" /><p>
<p>
<img id="image2" border="0" src="Image/image2.jpg" style="width: 300px; height: 225px" /><p>
<p>
<img id="image3" border="0" src="Image/image3.jpg" style="width: 300px; height: 225px" /><p>
</form>
</body>
</html>
By default, background applies to the inner space, including padding.
If you don't want this, you can change with background-clip property. In your case,
.overlay {
background-clip: content-box;
}
fiddle
Add this css in overlay class
.overlay{
box-sizing: border-box;
}
I tried to reproduce your code. As you can see the padding works on the overlay.
Can you check if one of the paragraph tags inside the overlay class has some padding or margin?
Other option will be that some other css code overrides the overlay container elsewhere. You should check this with a browser inspector.
.container {
background:green;
}
.overlay {
position: absolute;
width:150px;
height:150px;
padding: 20px;
background:red;
}
.overlay:hover {
opacity:.5;
}
.spaces {
width:150px;
height:150px;
padding:20px;
}
<div class="container">
<div class="overlay">
<p>I'm overlay</p>
<p class="overlay-price-product">
$9.00
</p>
</div>
<img class="spaces" src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" />
</div>
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
I have an image of a map, and I want to add the address to the right hand side of it, I can't seem how to figure it out. Can any one help, this is the part of the coding I'm using:
<div id="main">
<span style="margin-top:5px;
margin-left:5px;
text-align:right;">
<h1 align="center" style="font-size:40px;"><span style="color:red;">Contact</span><span style="color:#FFFFFF;"> Us</span></h1>
<img id="map" src="images/map.png" title="Image of Map for Krazie Needles." align="centre" />
<p align="left" style="margin-left:5px;
margin-top: 5px;">
45 Station Road
with the css code
#main
{
margin-top:42px;
margin-left:auto;
margin-right:auto;
position:relative;
background:rgba(16,16,17,0.70);
height:85%;
width:90%;
box-shadow: 3px 3px 2.5px #888888;
border-radius:5px;
}
img#map
{
margin-left:5px;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:#FFFFFF;
}
I want to align the < p > tag next to the image.
I have tried to maintain your styling but have removed all inline styles.
#main
{
margin: 42px auto;
position:relative;
background:rgba(16,16,17,0.70);
width:90%;
box-shadow: 3px 3px 2.5px #888888;
border-radius:5px;
}
h1 {
text-align: center;
color: #fff;
font-size: 2em;
}
.red {
color: red;
}
.map
{
display:inline;
margin: 0 5px 0;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:#fff;
}
.address {
display:inline;
vertical-align: top;
}
<div id="main">
<h1><span class=red>Contact</span> Us</h1>
<img class=map src="http://lorempixel.com/200/200" title="Image of Map for Krazie Needles." />
<p class=address>45 Station Road</p>
</div>
You can use float: left; on the image tag (see float at W3.org), or place the image inside the <p>.
In the img tag, change the (incorrect) align="centre" to align="left".
(Note, there is no center attribute on img tag.)
You should add float:left to image css. If you want to put the address on Map you have to add position:absolute to paragraph with address css.