I need the header main and footer to have 855px with the float left to with 570px and the right side to float with 255px. it wont line up correctly without going into the other section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BrightIdeas</title>
<link rel="stylesheet" href=" C:\Users\Brandon\Desktop\html\css\style.css"/>
<link rel="stylesheet" href="C:\Users\Brandon\Desktop\html\css\reset.css"/>
<link rel="javascript" href="C:\Users\Brandon\Desktop\html\css\js\app.js">
</head>
<body>
<div id="wrapper">
<div id="header">
<header>
<div class="container">
<h1>BrightIdeas</h1>
<nav>Sign Up! | FAQ | Support
</nav>
</div>
</header>
</div>
<div id="content">
<main>
<div class="container">
<div id="left">
<h2>BrightIdeas will change your life!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<h3>Here's why you need bright ideas</h3>
<ul><li>It fits your lifestyle</li>
<li>It's awesome</li>
<li>We say so</li></ul>
</div>
<div id="right">
<img src="C:\Users\Brandon\Desktop\html\brightIdeas\images\brightidea.png" alt="an image of a lightbulb"/>
</div>
</div>
</main>
</div>
<div id="footer">
<footer>
<div id="contact">
<h5>Contact Us</h5>
<p>BrightIdeas</p>
<p>666 Sixth Street</p>
<p>Amherst, NY 12345</p>
</div>
<div id="sitemap">
<h5>Sitemap</h5>
<ul>Home</li>
<li>About Us</li>
<li>Privacy</li>
<li>Support</li>
<li>FAQ</li>
<li>Careers</li></ul>
</div>
</footer>
</div>
</div>
</body>
</html>
here is my stylesheet. ive changed it multiple times so it is a little jumbled
#body {
margin: 0 auto;
margin bottom: 120px;
height: 100%;
width:100%;
}
#main{
min-width:855px;
overflow: auto;
}
#header {
background: white;
min-width:855;
overflow:auto;
height: 70px;
padding:20px 20px;
}
div img{
float:right;
}
div h1{
float:left;
width:570px;
font-style: italic;
font-size: 250%;
overflow: auto;
}
div nav{
overflow: auto;
float:right;
width:285px;
}
#content {
/* Height of the footer element */
padding-bottom:120px;
}
}
#footer {
/*yellow footer*/
position:fixed;
background: #f9e933;
min-width:855px;
bottom: 0;
height:120px;
}
#contact{
float:left;
width:570px;
background: #f9e933;
height:120px;
padding
}
#sitemap {
float:right;
width:285px;
background: #f9e933;
height:120px;
}
#left{
margin: 20px;
float:left;
width:570;
overflow: auto;
}
#right{
float:right;
width:285;
overflow:auto;
}
.container {
max-width:855;
margin: auto;
column-count: 2;
}
#wrapper {
min-height: 100%;
position: relative;
width:855px;
}
Related
so im doing a Rock, Paper, Scissors game so i can play with javaScript and Jquery but im having trouble with the css.
Where i added the paragraph i want to add an image, depending on what the user chooses in the select box. I added a paragraph just to test it, im gonna add the image once i get my css fixed lol.
I want the 1st grid to look exactly like the 3th grid, which doesnt have anything above it yet.
Oh and also i have another question, this is my first time using Jquery, but i tried doing an alert and its not working, am i doing it right?
My code:
$( document ).ready(function() {
console.log( "ready!" );
});
body{
background-image: url(fondo.jpg);
background-color: #F7B05B;
}
#titulo{
background-color:#FCDE9C;
font-family: 'Gloria Hallelujah', cursive;
text-align:center;
font-size: 25px;
text-shadow: 2px 2px #ff0000;
margin-left:80px;
margin-right:80px;
}
.grid-container {
display: grid;
grid-column-gap:10px;
grid-template-columns: 450px 360px 450px; /* 3 columnas */
grid-template-rows: 450px; /* una sola fila */
margin:30px;
}
#usuario{
grid-column-start: 1; /* es lo mismo que grid-column: 2/3; */
grid-column-end: 1;
}
#computadora{
grid-column-start: 3;
grid-column-end: 3;
}
#resultado{
border-color: #C7EF00;
border-style: solid;
background-color: #F3DFA2;
}
.texto{ /* This is what i want inside my grid but it keeps going lower when i add something*/
text-align: center;
margin-top: 250px;
position:relative;
font-family: 'Indie Flower', cursive;
font-size:25px;
}
.estilo{
border-color: #F7CE5B;
border-style: solid;
border-width: 10px;
background-color: #FE5F55;
border-radius: 5px;
}
.botones{
padding:20px;
font-size:25px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #2D3142;
border:none;
color: #FCDEBE;
}
#nuevoIntento{
padding: 20px;
font-size:15px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #561D25;
border-color: #ECDD7B;
color: #FCDEBE;
width:250px;
border-style: outset;
border-width: 7px;
margin-top:25px;
}
#imageHolder{
/* This is the place where i want to insert an image, in this case i added a paragraph to test my css */
}
<!DOCTYPE html>
<html>
<head>
<script src="javascript1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower&display=swap" rel="stylesheet">
<title>Piedra, Papel o Tijera</title>
</head>
<body>
<header id="titulo">
<h1>PIEDRA, PAPEL O TIJERA!</h1>
</header>
<div class="grid-container">
<div id="usuario" class="estilo">
<div id="imageHolder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam cumque, aspernatur explicabo? Hic, officiis ad minima, tenetur atque alias beatae cum optio libero amet, commodi, quaerat iste consequuntur sint placeat!</p>
</div>
<br>
<div class="texto">
<h3>Seleccione una opción:</h3>
<select id="seleccion" class="botones">
<option value="Piedra">PIEDRA</option>
<option value="Papel">PAPEL</option>
<option value="Tijera">TIJERA</option>
</select>
</div>
</div>
<div id="resultado">
<div class="texto">
<p>Aca va mi resultado</p>
<button id="nuevoIntento" onClick="window.location.reload();">Volver a intentar!</button>
</div>
</div>
<div id="computadora" class="estilo">
<div class="texto">
<h3>Haga click y espere resultado:</h3>
<button class="botones"> Click me!</button>
</div>
</div>
</div>
</body>
</html>
You are almost doing the alert right. Ironically creating an alert is actually by using the word alert. This is Vanilla (non-jQuery or other library) JavaScript and is supported by every browser.
$( document ).ready(function() {
alert( "ready!" );
});
Keep up the good work!
Your content is just overflowing out of the bottom of your container. your margin-top on .texto is set to 250px, which is too high. Just set that to a lower number and it will display correctly. If instead you want the entire box to stretch to fit it's content, you'll need to remove the line grid-template-rows: 450px;, as it is defining how tall a row can be.
body{
background-image: url(fondo.jpg);
background-color: #F7B05B;
}
#titulo{
background-color:#FCDE9C;
font-family: 'Gloria Hallelujah', cursive;
text-align:center;
font-size: 25px;
text-shadow: 2px 2px #ff0000;
margin-left:80px;
margin-right:80px;
}
.grid-container {
display: grid;
grid-column-gap:10px;
grid-template-columns: 450px 360px 450px; /* 3 columnas */
margin:30px;
}
#usuario{
grid-column-start: 1; /* es lo mismo que grid-column: 2/3; */
grid-column-end: 1;
}
#computadora{
grid-column-start: 3;
grid-column-end: 3;
}
#resultado{
border-color: #C7EF00;
border-style: solid;
background-color: #F3DFA2;
}
.texto{ /* This is what i want inside my grid but it keeps going lower when i add something*/
text-align: center;
margin-top: 250px;
position:relative;
font-family: 'Indie Flower', cursive;
font-size:25px;
}
.estilo{
border-color: #F7CE5B;
border-style: solid;
border-width: 10px;
background-color: #FE5F55;
border-radius: 5px;
}
.botones{
padding:20px;
font-size:25px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #2D3142;
border:none;
color: #FCDEBE;
}
#nuevoIntento{
padding: 20px;
font-size:15px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #561D25;
border-color: #ECDD7B;
color: #FCDEBE;
width:250px;
border-style: outset;
border-width: 7px;
margin-top:25px;
}
#imageHolder{
/* This is the place where i want to insert an image, in this case i added a paragraph to test my css */
}
<!DOCTYPE html>
<html>
<head>
<script src="javascript1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower&display=swap" rel="stylesheet">
<title>Piedra, Papel o Tijera</title>
</head>
<body>
<header id="titulo">
<h1>PIEDRA, PAPEL O TIJERA!</h1>
</header>
<div class="grid-container">
<div id="usuario" class="estilo">
<div id="imageHolder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam cumque, aspernatur explicabo? Hic, officiis ad minima, tenetur atque alias beatae cum optio libero amet, commodi, quaerat iste consequuntur sint placeat!</p>
</div>
<br>
<div class="texto">
<h3>Seleccione una opción:</h3>
<select id="seleccion" class="botones">
<option value="Piedra">PIEDRA</option>
<option value="Papel">PAPEL</option>
<option value="Tijera">TIJERA</option>
</select>
</div>
</div>
<div id="resultado">
<div class="texto">
<p>Aca va mi resultado</p>
<button id="nuevoIntento" onClick="window.location.reload();">Volver a intentar!</button>
</div>
</div>
<div id="computadora" class="estilo">
<div class="texto">
<h3>Haga click y espere resultado:</h3>
<button class="botones"> Click me!</button>
</div>
</div>
</div>
</body>
</html>
I tried to replicate the carousel with this code, but the buttons are not behaving how the image looks and I'm not very certain of the code, because it needs to be responsive and work on different screens.
CSS
.slider {
display: inline-block;
margin: 1px;
}
.slide {
width: 300px;
height: 130px;
}
.carouselInput1 {
width: 300px;
height: 67px;
font-size: 18px;
line-height: 22px;
color: #313133;
font-family: "Arial";
font-weight: bold;
}
.carouselInput2 {
width: 260px;
height: 19px;
font-size: 14px;
line-height: 22px;
color: #000000;
font-family: "Arial";
}
HTML
<div id="carousel">
<div class="slider">
<button class= "next button">‹ </button>
<img class="slide" src="../assets/Picture1.jpg"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture2.jpg"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture3.jpg"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture4.jpg"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
</div>
For carousel you must set max width and height for carousel in his shildren.
You can check my demo, where I realized carousel via your html/css with vanila JS: https://codepen.io/GTech1256/pen/GRKaNLY
For the future
Set alt width height attribute on every <img>
Use flex instead of inline-block if you can
tag p (.carouselInput1) inherits font by default, so u can set font only on body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="carousel">
<div class="slider">
<img class="slide" src="../assets/Picture1.jpg" alt="picture description" width="300" height="100"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture2.jpg" alt="picture description" width="300" height="100"/>
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture3.jpg" alt="picture description" width="300" height="100"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
</div>
<div class="slider">
<img class="slide" src="../assets/Picture4.jpg" alt="picture description" width="300" height="100"/>
<div class="carouselInput">
<p class="carouselInput1">Lorem Ipsum dolore test content goes here and here if there is </p>
<p class="carouselInput2">Name here, Location here</p>
</div>
<button class="prev button" disabled>‹</button>
<button class="next button">≯</button>
</div>
<script>
var btnNext = document.querySelector('.next.button');
var prevNext = document.querySelector('.prev.button');
var firstSlider = document.querySelector('.slider:first-child');
var OFFSET_STEP_PX = parseInt(window.getComputedStyle(firstSlider).width, 10);
var OFFSET_MIN = 0;
var OFFSET_MAX = (document.querySelectorAll('.slider').length - 1) * OFFSET_STEP_PX;
var current_offset_px = 0;
function setOffset(toUp) {
console.log(OFFSET_MAX)
toUp ?
current_offset_px += OFFSET_STEP_PX :
current_offset_px -= OFFSET_STEP_PX;
validateOffset() // does not go beyond
firstSlider.style.marginLeft = '-' + current_offset_px + 'px';
}
function validateOffset() {
btnNext.disabled = false
prevNext.disabled = false
if (current_offset_px > OFFSET_MAX) {
current_offset_px = OFFSET_MAX
btnNext.disabled = true
} else if (current_offset_px < OFFSET_MIN) {
current_offset_px = OFFSET_MIN
prevNext.disabled = true
}
}
btnNext.addEventListener('click', function() {
setOffset(true)
})
prevNext.addEventListener('click', function() {
setOffset(false)
})
</script>
<style>
#carousel {
position: relative;
max-width: 1000px;
max-height: 300px; /* like height of .slider */
overflow: hidden;
}
/* set button on center */
.button {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.button.next {
left: auto;
right: 0;
}
.slider {
height: 300px;
width: 300px;
transition: margin 0.3s;
}
.slider {
display: inline-block;
margin: 1px;
}
.slide {
width: 300px;
height: 130px;
}
.carouselInput1 {
width: 300px;
height: 67px;
font-size: 18px;
line-height: 22px;
color: #313133;
font-family: "Arial";
font-weight: bold;
}
.carouselInput2 {
width: 260px;
height: 19px;
font-size: 14px;
line-height: 22px;
color: #000000;
font-family: "Arial";
}
</style>
</body>
</html>
I have a split screen slider that works fine on desktop but I needed jQuery UI to make it work on mobile.The draggable event lets me drag it back and forth but sometimes the image on the left moves from it's original position, or disappears altogether. Any ideas on how to approach this?
Here's the codepen. The slider bug is more visible on mobile devices.
document.addEventListener('DOMContentLoaded', function(){
let wrapper = document.getElementById('wrapper');
let topLayer = wrapper.querySelector('.top');
let handle = wrapper.querySelector('.handle');
let skew = 0;
let delta = 0;
if(wrapper.className.indexOf('skewed') != -1){
skew = 1000;
}
wrapper.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth / 2) * 0.5;
handle.style.left = e.clientX + delta + 'px';
topLayer.style.width= e.clientX + skew + delta + 'px';
});
});
$(".content-wrap").draggable({
containment: "parent",
dragx: true,
dragy: false,
rotate: false
});
body{
margin: 0;
padding:0;
font-size: 100%;
line-height: 1.6;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
position: relative;
width: 100%;
min-height:55vw;
overflow: hidden;
}
.layer{
position:absolute;
width:100vw;
min-height: 55vw;
overflow: hidden;
}
.layer .content-wrap{
position: absolute;
width:100vw;
min-height: 55vw;
}
.layer .content-body{
width: 25%;
position:absolute;
/* top:50%; */
top: 25%;
text-align: center;
transform:translateY(-50%);
color:#fff;
}
.layer img{
position:absolute;
width:65%;
/*width: 35% */
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.layer h1 {
font-size:2em;
font-family: 'Lato', sans-serif;
}
.bottom{
background:#686965;
z-index:1;
}
.bottom .content-body{
right:5%;
}
.bottom h1{
color:#7bbe9a;
font-family: 'Lato', sans-serif;
}
.top{
background:#eff0ec;
color:#222;
z-index:2;
width:50vw;
}
.top .content-body{
left:5%;
color:#333;
}
.handle{
position: absolute;
height: 100%;
display: block;
background-color: #7bbe9a;
width: 5px;
top:0;
left: 50%;
z-index:3;
}
.skewed .handle{
top:50%;
transform:rotate(30deg) translateY(-50%);
height:200%;
transform-origin:top;
}
.skewed .top{
transform: skew(-30deg);
margin-left:-1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content-wrap{
transform: skew(30deg);
margin-left:1000px;
}
#media(max-width:768px){
body{
font-size:75%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<link href="https://fonts.googleapis.com/css?family=Lato|Nixie+One" rel="stylesheet">
</head>
<body>
<section id="wrapper" class="skewed">
<!-- <div id="draggable"> -->
<div class="layer bottom">
<div class="content-wrap">
<div class="content-body">
<h1>Designer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt-min.png" alt="">
</div>
<!-- </div> -->
</div>
<div class="layer top">
<div class="content-wrap">
<div class="content-body">
<h1>Developer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt_print.png" alt="">
</div>
</div>
<div class="handle"></div>
</section>
<script src=""></script>
</body>
</html>
Forget the draggable as it is causing conflict with the mousemove event listener. I have used the touchmove event listener for mobile device.
CODEPEN
wrapper.addEventListener("touchmove", function(e) {
delta = (e.changedTouches[0].clientX - window.innerWidth / 2) * 0.5;
handle.style.left = e.changedTouches[0].clientX + delta + "px";
topLayer.style.width = e.changedTouches[0].clientX + skew + delta + "px";
});
Note: You may also enable/disable the touchmove and mousemove depending on the device type (touch or not).
Hope this helps.
I am new to web development and currently building a site for a friend that is being modeled after this one: http://fulton-demo.squarespace.com/
While I have most of the elements into code and styled, I cannot figure out how to get the images and content to fill 100% of the width AND resize when the browser window is resized. Like, take the first image on the link I provided for example...I would like it to look like this, meaning to not have any margins on either side and fill the browser window....and I can get it to do that, but it never shows 100% of the image and when I resize the window, nothing moves. Does that make sense?
I know this is probably a very elementary question, but I would love some insight on this. I can post any and all code if necessary. Thanks in advance guys!
EDIT: Here is my code:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
<div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
</div>
<div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
<div id=text-top-carousel>
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section id="info">
<div class="info">
<div class="icon"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm">
<div class="form">
<h3>Want to list a studio space?</h3>
<p>We are looking for more studios.
Send us your information so we can connect.</p>
</div>
</section>
<footer role="footer">
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
});
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
width:1500px;
}
.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
margin: 0px;
clear:both;
}
.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}
.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}
.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}
.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}
.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}
EDIT 2: THANK YOU for all the help thus far everyone!....For those following along in the comments, the issue that I'm having now can be shown by this screenshot. The image carousel seems to be filling the left side completely fine, but the right side still isn't being filled at all, there's still some space between the right edge of the img carousel and the browser window when I scroll to the right.
Try adding this to your CSS..
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
margin: auto;
}
Also remove the height width and align from the image tag or they'll override the CSS.
Slick tries to add arrows to the left and right side of the slider which is what is causing the issue. Since we're taking up 100% of the screen they have no place to go.
$('.single-item-rtl').slick({
rtl: true,
arrows: false
});
Edit:
Remove the width from #mainContent to make .container's with take up 100% of the screen.
Enclosing your content inside another element is helpful.
Note that you have to separate between enclosing elements required for your script to work, and those used to enchance your layout.
Also my solution implies you will ever be able to specify your image width in percent only. You can also add maximum and minimum properties.
.outer {
width: 5cm; // arbitrary
}
.full-width {
width: 100%;
}
.full-width img {
width: 15%;
max-width: 2cm;
min-width: 5mm;
}
<div class="outer">
<div class="full-width">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
</div>
</div>
Use Percentage widths!!!!
Something simple like this would do:
.myImageClass{
width: 50%;
/*by not setting height, it will auto scale*/
}
DEMO:
html,body{
margin:0;
padding:0;
}
.myFullImg{
width:100%;
}
.myHalfImage{
width:50%;
}
<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>
<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>
I'm trying to move a div inside a container div to another container div using jQuery sortable api. I have added the code in jquery ready function but for some reason it doesn't work.
Here is the code I added:
$(".portlet-content").sortable({
connectWith: ".portlet-content"
});
I'm adding the complete code below for proper understanding. Any help will be highly appreciated. Thanks in advance :)
<html>
<head>
<title>Javascript Create Div Element Dynamically</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style type="text/css">
body {
min-width: 520px;
background-color: dimgray;
}
.column {
width: 230px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
background-color: lightgray;
border: 2px solid white;
}
.portlet-content:hover {
background-color: lightblue;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
div {
min-height: 20px;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet-content").sortable({
connectWith: ".portlet-content"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all");
});
</script>
</head>
<body>
<div class="column">
<div class='portlet'>
<div class='portlet-header'><span class='rubrik'>Section 1</span></div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class='portlet'>
<div class='portlet-header'><span class='rubrik'>Section 2</span></div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</body>
</html>
$(".portlet").sortable({
connectWith: ".portlet",
items: ".portlet-content"
});