I've been looking for an answer for so many hours since yesterday and despite loads of tutorials that I've watched on youtube, I still don't have a solution to my problem.
Here's the thing: I created 6 boxes of products, using array, that I styled in css, so they would stand in a row next to each other. Then I put a background image into my header and styled the background. At this point everything worked as planned but the background image was on the top of the website and the boxes with products were moved in the bottom (under the background image). I was trying to get the boxes over the background image, so they would overlay the background but no success. Then I added " top:0; " value to the 'position' attribute and it actually worked BUT now all of the 6 boxes stand in the left top of the site, at the very same spot, overlaying each other.
My code looks pretty wild now as I was trying to make this work. So I apologize in advance. Does any of you guys please have an advice how to make this work, so the 6 boxes with products would stand next to each other in a row and overlay the background image? Thanks a lot!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eshop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Main menu</li>
<li>About us</li>
<li>Contact</li>
<li>Delivery</li>
<li>FAQs</li>
</ul>
</nav>
</header>
<main>
<div class="container">
<?php
$TV = ["id" => "1", "name" => "TV", "img" => "<img src='img/TV.png'>", "price" => "1000 USD"];
$Computer = ["id" => "2", "name" => "Computer", "img" => "<img src='img/computer.png'>", "price" => "2000 USD"];
$Laptop = ["id" => "3", "name" => "Laptop", "img" => "<img src='img/laptop.png'>", "price" => "750 USD"];
$Camera = ["id" => "4", "name" => "Camera", "img" => "<img src='img/camera.png'>", "price" => "500 USD"];
$Phone = ["id" => "5", "name" => "Phone", "img" => "<img src='img/phone.png'>", "price" => "400 USD"];
$Smartwatch = ["id" => "6", "name" => "Smartwatch", "img" => "<img src='img/smartwatch.png'>", "price" => "300 USD"];
// echo "<img src='img/computer.jpg'>";
$catalog = array ($TV, $Computer, $Laptop, $Camera, $Phone, $Smartwatch);
// print_r($catalog);
foreach ($catalog as $item){
echo
"<div class='catalog-item'>
<div class='catalog-img'>
".$item ["img"]."
</div>
<div>
".$item ["name"]."
</div>
<div>
".$item ["price"]."
</div>
<div>
Buy
</div>
</div>";
// print_r($item);
// echo "<br>";
}
?>
</div>
</main>
<footer class="footer-page">
<div class="row">
<div class="social">
<p>Facebook</p>
<p>Instagram</p>
</div>
<div class="footer-text">
Copyright © 2023. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
and here's my CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1500px;
margin: 0 auto;
background-color: rgb(255, 255, 255);
}
/******* Header *******/
header {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
background-size: cover;
height: 100vh;
background-attachment: fixed;
color: white;
position: relative;
overflow: hidden;
}
/******* Main *******/
.catalog-item {
width: 200px;
height: 300px;
background: linear-gradient(rgba(4, 65, 85, 0.5), #12688580);
margin: 20px;
font-size: 15px;
font-family: Arial;
font-weight: bold;
color: white;
box-sizing: border-box;
text-align: center;
margin-top: 20px;
box-shadow: 20px 10px 20px gray;
border-radius: 15px;
padding-bottom: 80px;
display: inline-block;
position: absolute; top:0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
img {
max-width: 140px;
max-height: 200px;
object-fit: cover;
padding-top: 50px;
}
.catalog-img {
height: 100%;
}
/* .catalog-item:link,
.catalog-item:visited {
background: #ff7c32;
} */
.catalog-item:hover,
.catalog-item:active {
transition: background 0.5s;
background: #6dc4e080;
}
/******* Footer *******/
.footer-page {
background-color: #12688580;
margin-top: 30px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.social {
text-align: center;
margin: 10px 0px;
}
.social p {
display: inline;
margin-right: 20px;
}
.social p a:link,
.social p a:visited {
text-decoration: none;
color: #fff;
font-size: 22px;
}
.social p a:hover,
.social p a:active {
color: #08111480;
}
.footer-text {
text-align: center;
margin: 10px 0px;
font-size: 13px;
}
The usual solution for your use case, is to specify a background image through CSS (e.g. with background-image property), instead of as an HTML <img> Element:
.container {
width: 1500px;
/* Background image defined in CSS */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/12-ClairDeTerre-Cropped.jpg);
}
.catalog-item {
width: 200px;
height: 300px;
background: linear-gradient(rgba(4, 65, 85, 0.5), #12688580);
margin: 20px;
color: white;
box-shadow: 20px 10px 20px gray;
border-radius: 15px;
padding-bottom: 80px;
display: inline-block;
/*position: absolute; top:0;*/
}
img {
max-width: 140px;
max-height: 200px;
object-fit: cover;
padding-top: 50px;
}
<div class="container">
<!--<img src='img/computer.jpg'>-->
<div class='catalog-item'>
<div class='catalog-img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/91/1634_stad_lichtenvoorde.jpg'>
</div>
</div>
<div class='catalog-item'>
<div class='catalog-img'>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/91/1634_stad_lichtenvoorde.jpg'>
</div>
</div>
</div>
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 10 months ago.
I have
<!DOCTYPE html>
<html>
<head>
<title> Friends </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
background-image: url(images/RegisterAndLoginBackground.jpg);
}
body {
margin: 0px;
}
h1 {
margin-top: 3%;
margin-bottom: 4%;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #03cafc;
}
#Home, #AddFriends {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #058db0;
}
#AddFriend, #RequestsOne, #RequestsTwo {
text-align: center;
padding: 10px;
width: 14%;
height: 30%;
margin-top: 15px;
margin-bottom: 15px;
margin-right: auto;
margin-left: auto;
background-color: #03cafc;
}
input {
width: 60%;
height: 15%;
}
#AddFriendButton {
margin-top: 6%;
border-style: solid;
background-color: #8ae7ff;
border-color: #004354;
width: 50%;
height: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<main>
<div id = "NavBar">
<ul id>
<li id = "Home"> Home </li>
<li id = "AddFriends"> Friends </li>
</ul>
</div>
<div id = "AddFriend">
<h1> Add Friend </h1>
<label for = "Username"> Username: </label>
<input type = "text" id = "Username">
<button id = "AddFriendButton"> Add Friend </button>
</div>
<div id = "RequestsOne">
<h1> Requests Received </h1>
<ul id = "RequestsReceived">
</ul>
</div>
<div id = "RequestsTwo">
<h1> Requests Sent </h1>
<ul id = "RequestsSent">
</ul>
</div>
</main> //Some more code
My problem is that AddFriendButton height does not work. I know the parent height has to be defined, which I believe I did. On another page, it worked. I'm not really sure, this is my first time making a large website. I know it will work if I use pixels instead. It will also get larger if I change the font size, but why won't height percentage work?
The containing block for #AddFriendButton is #AddFriend
It is a percentage of its height.
The height of #AddFriend is 30%.
Again, it is a percentage of the height of the block containing it.
The containing block for #AddFriend is main
But main has no height.
Therefore, browsers cannot calculate heights by percentages.
Try to give specific height to main.
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
i put online my website but if i watch it from smartphone or small device every elements cant view in a responsive way! this fact never happened to me. Why?
In staging mode i cant view this website in a responsive mode, than i suppose this is not a js problem but a css error
body {
width: 100%;
margin: 0;
background: #fff;
}
a {
color: blue;
text-decoration: line-through;
}
p {
color: blue;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.white-contact {
background-color: #fff;
padding: 20px;
margin-top: 30px;
}
a:hover {
color: black;
text-decoration: underline;
}
h1 {
position: absolute;
z-index: 998 !important;
/* margin: 0 auto; */
width: 100%;
text-align: center;
height: 100vh;
line-height: 75vh;
font-size: 13em;
color: #fff;
font-family: 'Condiment', cursive;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
letter-spacing: 2px;
color: blue;
text-transform: uppercase;
text-decoration: line-through;
}
h2.last {
color: blue !important;
}
li {
list-style: none;
color: blue;
font-family: 'Montserrat', sans-serif;
margin-bottom: 2px;
}
ul.do {
padding-left: 0px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 2px;
color: blue;
}
h3.top-left {
position: fixed;
left: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
}
h3.top-right {
position: fixed;
right: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
text-align: right;
padding-right: 30px;
}
h3.bottom-left {
position: fixed;
z-index: 999;
padding-left: 30px;
bottom: 0px;
}
h3.bottom-right {
bottom: 0px;
position: fixed;
text-align: right;
padding-right: 30px;
z-index: 999;
width: 49%;
right: 0px;
}
.top {
}
.bottom {
}
a.social {
text-decoration: line-through;
}
a.social:hover {
text-decoration: underline;
color: yellow;
}
canvas#canv {
z-index: 1;
position: absolute;
}
.mekis-img {
width: 100%;
position: absolute;
z-index: 1;
text-align: center;
height: 100vh;
margin-top: 10%;
}
section{
margin-top: 50px;
}
section.top {
height: 100vh;
margin-top: 0px;
border-bottom: 1px solid blue;
}
section.second {
height: 100vh;
/* background-image: url('http://i.giphy.com/3oEdvcNIvJXteYUEXm.gif');*/
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
section.third {
height: 100vh;
background-image: url('http://i.giphy.com/Dc5JEeUuPosN2.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
section.last {
height: 100vh;
background-image: url('http://static2.blog.corriereobjects.it/seigradi/wp-content/blogs.dir/70/files/2013/02/div1.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.twitter {
text-align: center;
height: 100vh;
/* line-height: 50vh; */
font-size: 1em;
text-transform: uppercase;
font-weight: 900;
padding-top: 10%;
}
}
img.gif-second {
position: absolute;
right: 60px;
opacity: 0.8;
margin-top: -40%;
z-index: -1;
}
.container {
width: 90%;
margin:0 auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
}
<!doctype html>
<!-- CSS -->
<title>Mekis | Official Website</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mekis Official Website | Producer , Dj Brescia, Italy | Electro, Reggae, Dub, Drum and Bass, Big Beat | Electro vs Rock with Joao at Lio Bar, Road to Zion Electro Dub, Jungle Massive," />
<meta name="keywords" content="brescia dj, mekisdj, mekis, unnu can wid mi, drop 39, djset, electro, rock, dub, reggae, alternative, producer, electro vs rock, road to zion, sound design" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<link rel='stylesheet' id='default-style-css' href='style.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js'></script>
<script type='text/javascript' src='viewport.js'></script>
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
<!-- FONTS -->
</head>
<body>
<section class="top">
<canvas id='canv'>
</canvas>
<div class="top">
<h3 class="top-left">Mekis / msdvc</h3>
<h3 class="top-right">Official Web</h3>
</div>
<audio loop autoplay>
<source src="http://static1.grsites.com/archive/sounds/vehicle/vehicle005.mp3" type="audio/mpeg">
</audio>
<div class="mekis-img">
<img src="img/mekis.png" alt="mekis">
</div>
<div="bottom">
<h3 class="bottom-left"><a class="social" href="https://www.facebook.com/mekisdj/" target="blank">Facebook</a></h3>
<h3 class="bottom-right"><a class="social" href="https://instagram.com/mekisdj/" target="blank">Instagram</a></h3>
</div>
</section>
<section class="second">
<div class="container">
<h2>Ciao! My name is Mekis.<br/>Everyday i do some works</h2>
<h3>What i do?</h3>
<ul class="do">
<li>President at Cockroach Int. Production</li>
<li>Music Production</li>
<li>Dj and Producer</li>
<li>Sound Designer</li>
<li>Professor for Laba for Sound Design and Computer Graphic</li>
<li>Web at Adoratorio Creative Collective</li>
</ul>
<p>-</p>
<h3>What i love</h3>
<ul class="do">
<li>Music and Sound FX</li>
<li>Reggae</li>
<li>Pizza with Salami</li>
<li>Friday Night</li>
</ul>
<p>-</p>
<h3>What i hate</h3>
<ul class="do">
<li>Conventional Design and Music Production</li>
<li>Mostarda</li>
</ul>
<!-- <img class="gif-second" src="img/mekis.png"> -->
</div>
</section>
<section class="third">
<!-- <div class="container">
<h2>I love Twitter</h2>
<div class="twitter">
<p class="twitter">tweet with me. hashtag #mekisdj (for music) or #msdvc (for web)</p>
</div>
</div> -->
</section>
<section class="last">
<div class="container">
<h2 class="last">Ok. Say hello!</h2>
<div class="white-contact">
<h3>Send me email for booking</h3>
<p>Yes. I love Gmail<br/>
massimo.devicienti[at]gmail.com<p>
</div>
<div class="white-contact">
<h3>Press Kit</h3>
<p>Do you want more info about my projects?<br/>
click and download my press kit<p><br/>
<small>in coming</small>
</div>
</div>
</section>
<!--
Variation of Screwed:
http://codepen.io/tmrDevelops/pen/xwBYvN
!-->
</body>
<script type='text/javascript' src='script.js'></script>
<!--<script type='text/javascript' src='preloader.js'></script>-->
</html>
link for website
enter link description here
you forgot for responsive view as
<meta name="viewport" content="width=device-width, initial-scale=1">
the issue is mentioning values in px. These fixed values wouldn't change on resolution change. whereas values like em and % would change on resolution change. Also, we have responsive frameworks to do the task for us. We need to make use of media queries.
Also we need to add the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
In principal I only have to take care of FireFox.
For my content I want to have two div's that have the same width and with a vertical line between them that takes the whole height, with 20 pixels of the top of the bottom.
I got under-way, but the right div is much to small and I also do not know how to get the vertical line.
At the moment I have the following:
<?xml version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "nl" lang = "nl">
<html>
<head>
<style>
h1 {
color: #18A5D7;
}
html, body {
height: 100%;
margin: 0px;
}
#container {
background: linear-gradient(blue, white);
height: 100%;
margin: auto;
width: 100%;
}
#footer {
height: auto;
margin: auto;
position: relative;
width: 100%;
}
#main {
overflow: auto;
}
.col {
}
.row {
background-color: white;
display: flex;
border: 1px solid black;
border-radius: 10px;
margin-left: 50px;
margin-right: 50px;
}
.title {
font-weight: bold;
}
button.no {
background: #84a0C4;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
color: #FFFFFF;
}
button.yes {
background: #84a0C4;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
color: #FFFFFF;
}
div.block {
background: #E6EBF1;
border-radius: 15px;
color: #1C589B;
margin-bottom: 10px;
padding: 10px 20px;
}
div.content {
border-style: solid;
}
div.vl {
border-left: 2px solid grey;
width: 0;
height: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/JavaScript">
function doResize() {
var footer_height = $('#footer').height()
footer_height += 2
$('#footer').css('margin-top', '-' + footer_height + 'px')
$('#main').css('padding-bottom', footer_height + 'px')
var footer_position = $('#footer').offset().top + window.screenY
var content_position = $('#content').offset().top + window.screenY
var newHeight = footer_position - content_position - 2
var newWidth = $(document).width() - 100
$('#content').css({
'height': newHeight,
'width': newWidth
})
}
$(document).ready(function() {
doResize()
})
$(window).resize(function() {
doResize()
})
</script>
</head>
<body>
<div id="container">
<div id="main">
<div id="header"><div class="header">
Header
</div></div>
<div class="row">
<div class="col" id="content">
<h1>03 Complaints</h1>
Question one
<br/><br/>
Question two
<br/><br/>
</div>
<!-- I tried, but it did not work, puts content in the border
<div class="col vl" >
--->
<div class="col" >
Be short, concise and to the point
<br/>
Stick to the medical terms
<br/>
Questioning
<br/>
Stick to the medical terms
</div>
</div>
</div>
</div>
<div id="footer"><div class="footer">Footer</div></div>
</body>
</html>
What do I need to change?
To give the two divs the same width, you need to add a css class that works for both of them, like:
div.col {
width: 50%;
word-wrap: break-word;
}
And to make the vertical line in between them, you need to make a div and put it between the two divs to act as the divider, like:
//your div 1
<div id="divider"></div>
//your div 2
and adding some css to make it look a vertical line :
#divider {
width: 2px;
background: gray;
height: inherit;
margin-top: 20px;
margin-bottom: 20px;
}
SAMPLE DEMO
I have a div, like this:
<div id="div1" name="div1" style="display:none;">
hello world
</div>
Thats on the bottom of my page. Now, when putting the mouse on an image, I want to show that div below the image. The problem is, I have 10 images next to each other and the div should be displayed below each of them dynamically, meaning putting the mouse on image 6 should display the div below image 6.
How can I do that?
Thanks!
This could be an approach if you want to use jQuery and want to move the div inside your DOM:
$(function() {
var div1 = $('#div1').remove();
$('img')
.bind('mouseenter', function() {
$(this).parent().append(div1);
})
.bind('mouseleave', function() {
div1.remove();
});
});
This can be accomplished by only CSS here is an working example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { font: 12px Helvetica, Sans-Serif; }
img {width: 125px;}
#page-wrap { width: 125px; margin: 62px auto; }
h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people { position: relative; width: 125px;}
a { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; }
a .name { font: 12px Georgia, Serif; width: 125px; display: none;}
a:hover .name { color: #900; font-weight: bold; position: relative; display: block;}
a:hover img { border: 1px solid #000; margin: 0px; }
a .photo { display: block; position: absolute; width: 125px; height: 125px; }
#toby .photo { top: 0; left: 0; position: relative;}
</style>
</head>
<body>
<div id="page-wrap">
<div class="people">
<a href="#toby" id="toby">
<div class="photo">
<img src="http://www.style-makeover-hq.com/images/what-is-my-face-shape-and-what-is-the-best-haircut-for-it-21276689.jpg" alt="Toby Pic" />
</div>
<div class="name">Toby Yong<br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table.
</div>
</a>
</div>
</div>
</body>
</html>
Here is jsfiddle of it: http://jsfiddle.net/Ek4Ej/
Code is based on this article: http://css-tricks.com/remote-linking/
you can easily add more images with this effect on page or apply any style to it.
try this DEMO
$(function() {
$("#main").on("hover",".img img", function(){
pos = $(this).offset();
$(".box").css({"left":pos.left,"top":(pos.top + $(this).height())});
$(".box").show();
});
});