I bought before-after jQuery plugin, and I made a simple WordPress-theme. But few things don't work. I wanted to make this slider as my background so I made div in which slider is fit to page, but it doesn't fit. That is my first problem.
My second problem is that gravity forms make some strange things, they are blocking some functions, but I'll fix that.
Here is code:
css:
html {
width: 100%;
}
body {
background-color:#A6B8CC;
margin: 0px!important;
}
.titlelogo {
background-image:url(../images/sitelogo.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:35px;
margin-top:20px;
margin-bottom:-5px;
display:block;
width:250px;
height:98px;
}
#big_divider {
margin-top:150px;
}
#example{
margin: auto;
padding: 0px!important;
}
#example img {
max-width: 100vw;
max-height: 100vh;
}
#after {
max-height: 100vh;
max-width: 100vw;
}
ul {
margin:0px!important;
}
#secondary {
display: none;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em!important;
-webkit-margin-after: 0em!important;
-webkit-margin-start: 0px!important;
-webkit-margin-end: 0px!important;
-webkit-padding-start: 0px!important;
}
#ext_ext_after {
margin: 0 auto;
}
html:
<div id="example" class="beforeafter_slider shadow1">
<ul>
<!-- THE 1. SLIDE -->
<li><img src="<?php bloginfo('template_url'); ?>/img/extralightgethaldus2.jpg" alt="<?php bloginfo('template_url'); ?>/img/withglassesgethaldus2.jpg">
<div id="textbox_1" class="before">
<div id="title_1b" class="fadeup">BEFORE</div>
</div>
<div id="textbox_1" class="after">
<div id="title_1b" class="fadeup">AFTER</div>
</div>
<div id="textbox_snw">
<div id="title" class="fadeup">Don't let the sun be your enemy!</div>
<div id="title2" class="fadeup">Do you consider yourself unique?<br>Your glasses should be as well.</div>
<div id="description" class="fadeup">We are soon lounching a new eyeware webshop<br>like you've never seen before across all Europe.<br><br>
Right now we cannot say anithing else, but if you want<br> to be among the firs to be noticed what it's all about<br>
leave your e-mail adress below and join our community.</div>
</div>
</li>
</ul>
</div>
And here is link: http://svinaweb.hr/gethaldus-lp/
The div will not always fit everyone's screen so to overcome this problem it might be a good idea to change your CSS style to this one below...
#example img {
width: 100%;
height: auto;
overflow: hidden;
}
Please comment back if you need more help or this is not what you are looking for.
Related
Trying to get two div's to line up side by side but having some trouble getting them to connect with each other. This is the design of what im trying to make where it says "We're hiring today" and "Schedule Today".
HTML:
<!DOCTYPE html>
<head>
<title>Merry Maids</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="backgroundofdivgreen">
<header>
<div class="logo"><img src="images/logo.jpg"></div>
<nav>
Home
Services
Offers
People
Franchises
Reviews
<div class ="phone">
Call Us Today: (800) Merry Maids
</div>
<div class="media">
<img src="images/twitter.png">
<img src="images/facebook.png">
</div>
<div class="clearboth"></div>
</header>
</nav>
</div>
<div class="banner"><img src="images/banner.jpg" alt="Merry Maids Banner Image"></div>
<div class="spacer1"></div>
<article>
<div class="wrapper">
<div class="yellow">
<h1>Schedule Appointments</h1>
<p>Our cleaning services are thorough, consistent and customized. If you would like to request a special service, change your cleaning schedule, or skip an area in your home, just let us know! We are happy to fulfill every request in order to exceed your expectations.Merry Maids home cleaning services are available weekly, every other week, monthly or one-time. On every visit, your Merry Maids team dusts, vacuums, washes and sanitizes each room.</p>
</div>
<div class="green">
<h1>We're Hiring Today</h1>
<p>For more than 30 years, our team members have provided reliable service for homeowners like you worldwide. We clean people's homes like they are our own and we treat our team members with the same concern, respect and care we expect them to show our customers. Merry Maids knows that our team members are our greatest asset and we recognize the power of our people.</p>
</div>
CSS:
.clearboth {
clear:both;
}
.backgroundofdivgreen {
height: 96px;
margin: 0px;
background-color: #39b54a;
}
header {
width: 980px;
background-color: #39b54a;
margin: 0px auto;
}
nav {
float:right;
width: 570px;
text-align: right;
padding-top:10px;
}
nav a {
color:white;
margin: 0px 25px 0px 0px;
text-decoration:none;
}
nav a:hover {
color: #fff799;
}
.logo {
float:left;
}
.phone {
margin: 40px 0px 0px 130px;
color: white;
float:left;
}
.media {
float: right;
margin: -23px 30px 0px 0px;
}
.banner {
height:553px;
width:1600px;
margin: 0px auto;
}
.spacer1 {
height:20px;
background-color: #39b54a;
margin: 0px auto;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
}
.yellow {
position:fixed;
width:800px;
height:313px;
background-color: #fff799;
float:left;
text-align:right;
}
.green {
position:fixed;
width:800px;
height:313px;
background-color: #005e20;
float:right;
}
Remove the position: fixed from the two divs. (position: fixed takes an element out of the document flow so the floats have no effect on them.)
You'll also need to make sure the wrapper has enough width to accommodate the full width of both divs.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code
I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!
I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)
A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/
I'm trying to build a small website that is one page with 5 stacked divs within the body. The first and second div are fine but all the divs after that(3, 4, and 5) all repeat the unique background image when the site is viewed in IE9. The site works fine in FF 20.0.1, IE10, IE 10 compatibility, and IE9 compatibility so this issues appears to only show up in IE9. I have taken everything out of the CSS and html except for just those 5 containers and find that I can't pinpoint the issue causing the background images to duplicate in the 3rd, 4th, and 5th div. I've also repeated the second div and it also duplicates the background in the second instance. If anyone has any insight as to what I am missing I would greatly appreciate it.
Also, I have played with no-repeat and other ideas I found while searching for a solution but nothing has worked for me at this point.
CSS:
* {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
font-family: Myriad, Arial, Helvetica, sans-serif;
}
p {
margin-bottom: 1em;
}
a {
color: #60789c;
text-decoration: none;
}
a:visited {
color: #60789c;
}
img {
border: 0;
}
body {
margin-bottom: 0px;
margin-top: 0px;
}
div#content {
margin: auto;
padding: 0;
width: 900px;
}
div#SectionOne {
Background-image: url(../images/section1.jpg);
height: 707px;
width: 100%;
}
div#SectionTwo {
Background-image: url(../images/section2.jpg);
color: #FFFFFF;
height: 1159px;
width: 100%;
}
div#SectionThree {
Background-image: url(../images/section3.jpg);
height: 668px;
width: 100%;
}
div#SectionFour {
Background-image: url(../images/section4.jpg);
height: 1385px;
width: 100%;
}
div#SectionFive {
Background-image: url(../images/section5.jpg);
height: 1165px;
width: 100%;
}
And this is the HTML:
<body>
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo" />
</div>
<div id="SectionThree">
<a name="SectionThree"/>
</div>
<div id="SectionFour">
<a name="SectionFour"/>
</div>
<div id="SectionFive">
<a name="SectionFive"/>
</div>
</div>
</body>
Close your a tags like this <a name="SectionXXX"></a> rather than this <a name="SectionXXX" />
HTML
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo"></a>
</div>
<div id="SectionThree">
<a name="SectionThree"></a>
</div>
<div id="SectionFour">
<a name="SectionFour"></a>
</div>
<div id="SectionFive">
<a name="SectionFive"></a>
</div>
</div>
All I can suggest with what you've posted is that you change Background-image to background-image ... but that's a long shot.
Also your <a> elements are incomplete; and the name attribute is out of date now. Use IDs instead. That is, if you want to link to one of those divs, use this:
Go to Section Five
Then just get rid of those as in the divs altogether.
The following is my first cut at coding-up a reddit-like comment in html+css. I have a few questions about css and the general structure:
How do I get the comment body ("The King took off his hat...") to align with the comment head ("Nathan, posted...") and the comment tail ("reply permalink ...")? I tried making the margin-bottom for .comment-left a little longer but that didn't fix the issue.
I know I've been a little trigger-happy with the tags. Which ones are redundant?
Is there a better/tighter way to get the same structure?
Thanks all, Nathan
ps I used the handy information here for stacking my voting arrows on top of each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS sandbox: comments</title>
<style type="text/css">
.vote {
width: 15px;
float: left;
clear: left;
}
.vote img {
display: block;
float: none;
clear: both;
width: 15px;
}
.userpic img {
width: 60px;
}
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
}
.comment-left {
float: left;
}
.head {
margin-left:10px;
}
.tail-list li {
display: inline;
}
img {
border: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="comment">
<span class="comment-left">
<span class="vote">
<img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif">
<img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif">
</span>
<span class="userpic">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
</span>
</span>
<span class="comment-main">
<ul class="comment-contents">
<li class="head">
Nathan, posted 2 hours ago
[-]
</li>
<li class="middle">
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.</p>
<p>Chapter 1 - untitled (eecummings)</p>
</li>
<li class="tail">
<ul class="tail-list">
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</li>
</ul>
</span>
</div>
</body>
</html>
Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}
.head {
margin-left:0px;
}
While you are at it, just use padding instead of margin for ".comment-contents li":
.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}
I recommend not using padding and margin on a class unless absolutly necessary.
Don't have time to do CSS at the moment (maybe later), but you should be able to achieve the look with this markup:
<div class="comment">
<p class="user">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
Nathan, posted 2 hours ago
[-]
</p>
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.
</p>
<p>Chapter 1 - untitled (eecummings)</p>
<ul class="commentTools">
<li class="voteUp">vote up</li>
<li class="voteDown">vote down</li>
<li>reply</li>
<li>permalink</li>
<li>offensive?</li>
</ul>
</div>
And the CSS
.comment {
position:relative;
padding-left:75px;
}
.comment p {
}
.comment .user img {
float:left;
margin-left:-60px;
}
.comment .commentTools {
padding-left:0;
}
.comment .commentTools li {
display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
position:absolute;
display: block;
left:0;
}
.comment .commentTools .voteUp {
top:0;
}
.comment .commentTools .voteDown {
top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown a {
display:block;
width: 15px;
height: 15px;
text-indent:-5000em;
}
.comment .commentTools .voteUp a {
background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}
I haven't tested this so there may be some bugs. Let me know if youwant any of the CSS explained.
How about setting the p margin-left to be set at 30px?