I'm trying to put some text over image and it isn't working. It just puts my text under my image and I can't bring it up.
My code:
.Happylady {
position: relative;
width: 100%;
}
.Happylady p {
float: left;
position: absolute;
left: 0;
top: 80px;
width: 100%;
}
<div class="Bannerimage">
<img src="content/severroom.png" class="centerimage" />
<p>Check out speeds up to 60Mbps!</p>
<button >View Packages!</button>
</div>
<div class="Internet">
<div class="Information">
<h3>INTERNET</h3>
<h7>CABLE, DSL & RURAL WIRELESS</h7>
</div
<div class="HappyLady">
<img src="content/happylaptoplady.png" alt="" />
<div class="contents">
<h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
<div class="Benefits">
<p>UNLIMITED PLANS AVAILABLE</p>
<p>NOW WITH LOWER PRICES</p>
<p>FASTER SPEEDS - UP TO 60 MBPS!</p>
</div>
</div>
</div>
</div>
<div class="Phone">
<h3>PHONE</h3>
<h7>RESIDENTIAL & COMMERCIAL</h7>
</div>
<div class="Television">
<h3>TELEVISION</h3>
<h7>SHAW DIRECT / INTERNET TV</h7>
</div>
Edit: I've added my entire HTML code... that may show where I'm going wrong.
Your class is misspelled in your CSS and you're positioning all your paragraphs over top of each other. You need to wrap your content in a container and position it. Also you won't need that float.
.HappyLady {
position: relative;
width: 100%;
}
.HappyLady div.contents {
position: absolute;
left: 0;
top: 80px;
width: 100%;
}
<div class="HappyLady">
<img src="http://placehold.it/400x400" alt="" />
<div class="contents">
<h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
<div class="Benefits">
<p>UNLIMITED PLANS AVAILABLE</p>
<p>NOW WITH LOWER PRICES</p>
<p>FASTER SPEEDS - UP TO 60 MBPS!</p>
</div>
</div>
</div>
Try to refactor your code using the image as a background-image:
.HappyLady {
position: relative;
width: 100%;
background-image: url('http://truespeed.ca/wp-content/uploads/2016/06/happylaptoplady.png');
background-size:100% 100%;
}
and remove the image tag from your code.
Related
I have a wordpress site and I am using the spacious theme. And what I want to archive is just a green box under de image slider. So the code of the image slider is like this:
<section id="featured-slider">
<div class="slider-cycle" style="height: 465.922px;">
<nav id="controllers" class="clearfix">
<a class="active"/>
<a class=""/>
<a class=""/>
<a class=""/>
<a class=""/>
</nav>
<div class="slides displayblock cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
<figure>
<img class="lazy loaded" width="1500" height="655" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/doe-mee-2/" title="">Doe mee</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4950" height="2162" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/steun-ons/" title="">Steun ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4350" height="1899" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/verbind-op-locatie-of-thema/" title="">Verbind op locatie of thema</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4799" height="2095" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/word-lid/" title="">Word lid en één van ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4200" height="1834" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/evenementen/" title="">Evenementen >>> agenda</a>
</div>
</div>
</div>
</section>
And I try it with css like this:
#featured-slider img {
border-bottom: 70px solid #72BF44;
width: 1067x;
height: 466px;
}
But this is not the correct way. Because the images are transforming. And also the greenbox takes space from the images.
And I also want to have some text in the green box.
So I have added a image how it have to look like.
With the text in the green box. And I am using the Guttenberg layout for editing the pages.
if I do it with the option: "Custom HTML" in the Gutenberg page.
It already looks better. But how to make this full width. Like the images above?
There is a class inner-wrap:
<div class="inner-wrap">
<div id="primary">
<div id="content" class="clearfix">
<div style="background:#72BF44;height:70px;width: 100%;"></div>
</div>
with the css:
.inner-wrap {
width: 94%;
}
.inner-wrap {
margin: 0 auto;
max-width: 1218px;
}
So how to overrule the inner-wrap, so that the greenbox has the full widht of the images?
Add an "Custom HTML" block with this content:
<div style="background:#72BF44;height:70px"></div>
So I have been busy with a navbar and I want to make it fixed but whenever I use position: fixed, the navbar does stay fixed but it creates whitespace and pushes everything down (the parent container and it's sister elements).
So what could be causing this and how do I solve this issue?
Thanks in advance for your help.
Screenshot of how it looks with the issue
The HTML
The CSS
nav {
padding: 15px;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.hero-section {
background-image: url(img/dylann-hendricks-Ll-A9nKuOhk-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 0px;
height: 100vh;
}
<pre>
<code>
<section class="hero-section">
<nav class="navbar">
<div class="logo">KM</div>
<div class="links-container">
<div>About</div>
<div>Skills</div>
<div>Projects</div>
</div>
</nav>
<div class="intro-container">
<div class="greeting rev-block"><span>Hi there,</span></div>
<div class="my-name rev-block" id="onemore1">
<span>I'm Khanya Mateta</span>
</div>
<div class="job-title rev-block" id="onemore2">
<span>Front End Developer</span>
</div>
<div class="contact-btn">Contact Me</div>
<div class="social-media">
<img src="img/github.png" />
<img src="img/linkedin.png" />
<img src="img/twitter.png" />
</div>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</section>
</code>
</pre>
Try using this in the css for nav element:
left: 0;
right: 0;
Adjust the left and right values while using position: fixed.
Using this I solved the same issue in my site.
Thank you 😊.
JSFIDDLE: http://jsfiddle.net/5nd6bexc/1/
I am trying to position a div (the contact us form) next to the contactus button, that is not the parent.
I know how to achieve that if the div is a parent(for instance the contactus is already placed in the page using that)
the best i got is this:
.managed-form {
background-color:#5B8F22;
width: 311px;
height: 369px;
z-index:99;
float: right;
margin: -75% 0% 0% 55%;
position:absolute;
display:none;
}
but it's not right because it positioning according to the parent div
HTML CODE
...........
...........
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 top-area">
<div class="managed-area row">
<div class="block-wrapper sliderblock">
<div class="block">
<div class="owl-carousel">
<div class="item slide">
<img src="/xcf.png" class="slide-image" />
<div class="slide-content">
<h2>Slide 1</h2>
<div class="managed-content">
<p>This is slide 1</p>
</div>
</div>
</div>
<div class="item slide">
<img src="cfv.png" class="slide-image" />
<div class="slide-content">
<h2>Slide 2</h2>
<div class="managed-content">
<p>This is slide 2</p>
</div>
</div>
</div>
</div> <span class="ContactForm" id="ContactForm">CONTACT US ∨ </span>
</div>
<div class="color-stripe color-stripe-2"></div>
</div>
</div>
.............
.............
.............
<div class="managed-form">
<div class="ContactForm-Heading">Contact Us</div>
<div class="ContactForm-Subheading"> <div class="managed-form">
<div class="ContactForm-Heading">Contact Us</div>
<div class="ContactForm-Subheading"></div>
<hr />
<div >
<hr />
<div >
......
</div>
Well, if the button has a fixed width and you want the space between the button and the form to be a fixed width, you just add them. The example code below would leave a 100px space between the 2 elements.
.button: {
position: absolute;
right: 0;
width: 20px;
}
.form {
position: absolute;
right: 120px;
}
On the other hand, if you want the space between the button and the form to be a percentage, you should do the following:
.button: {
position: absolute;
right: 0;
width: 20px;
}
.form {
margin-right: 20%;
position: absolute;
right: 20px;
}
So I have a theatre view for pictures( just like Facebook when clicking on a picture) and every time I resize the browser I want the picture to be resized along with the browser, I have tried many things, nothing seems to be working.
Here is the html:
<div class="fullView" id="photoView" alt="close">
<div class="tableDisp">
<div class="tableCell" id="tableCell">
<div class="_n3">
<div class="theatreFloated">
<div class="theatreHolder">
<div class="imageHolder clearfix">
<img class="imageTheatre" id="imageTheatre" src="#">
</div>
</div>
</div>
<div class="infoHolder">
<div class="photoUser">
<p>gabryel</p>
</div>
</div>
<div class="exitView">
<img src="<? echo APP_PATH; ?>public/cuts/exit.png" width="15px" title="Close">
</div>
</div>
</div>
</div>
</div>
The CSS:
.fullView{position:absolute;background:rgba(0,0,0,0.9);height:100%;width:100%;z-index:400;top:0px;bottom:0px;min-height:100%;display:none;}
.fullView .tableDisp{height:100%;width:100%;display:table;}
.tableCell{display:table-cell;vertical-align:middle;text-align:center;}
._n3{display:inline-block;margin:20px;position:relative;overflow:hidden;padding:10px;}
.theatreFloated{float:left;}
.theatreHolder{position:relative;height:500px;width:500px;background:black;display:table-cell;vertical-align:middle;}
.imageTheatre{max-width: 100%;height: auto;width: auto\9;display:inline-block;vertical-align:middle;}
.infoHolder{width:300px;background:#5B748A;float:left;text-align:left;}
.exitView{position:absolute;right:5px;top:5px;cursor:pointer;}
Thank you for the help.
I think you're over-complicating the problem here... All you really need to resize the image depending on the browser window is setting its max-height and max-width as a % relative to the window size. Simplify your theatreview type HTML to:
<div class="fullview" id="photoview" alt="close">
<img class="imageTheatre" id="imageTheatre" width="auto" src="#" />
<span> Image by blah blah... </span>
<div class="exitView">
<img src="<? echo APP_PATH; ?>public/cuts/exit.png" width="15px" title="Close">
</div>
</div>
Then you can actually start setting these as % relative to the window in your css:
#fullview{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#imageTheatre{ position: relative; max-width: 80%; max-height: 80%; display: block; margin: 0 auto; }
#fullview span{ position: relative; display: block; margin: 20px auto; width: 400px; }
then resize your screen and the image will resize... I haven't tested the code, so I am just giving this to you as a simple method which I have used in the past!
Good luck!
I've set up some features boxes on my home page, however the background image .../images/darker.png is only showing on the left of the image, leaving the remains of the box transparent.
Here is my CSS code for my Home-Boxes:
/* Features Area */
.box { background-repeat: repeat-y; background-position: 0 0; }
.box .box-b { background-repeat: no-repeat; background-position: 0 bottom; }
.box .box-t { background-repeat: no-repeat; background-position: 0 top; }
.home-box {
float: left; display: inline; width: 314px;
background-image: url(images/darker.png);
margin-right: 19px;
}
.home-box .box-b { background-image: url(images/darker.png);}
.home-box .box-t { background-image: url(images/darker.png); padding: 10px 20px; }
.home-box h4 {
font-size: 16px; color: #36429B; font-weight: bold; text-transform: none;
}
.home-box a {
color: #1a8f1d; font-weight: bold; padding-top: 5px; display: block;
}
.home-box img.right { margin-top: 50px; }
.cl {
display: block; height: 0; font-size: 0; line-height: 0;
text-indent: -4000px; clear: both;
}
Here is my HTML for the home boxes..
<!-- home boxes -->
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Control Panel</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We use an ultra-sleak, clean control panel that is rarely used by other companies, it's fast and extremely easy to use, full of brand new features!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Powerful Hardware</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>Using powerful machines, nothing is a match for our hardware and we can provide you with fast and responsive customs at all times!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- second line -->
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Server Mod Support</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p><b>We support almost every server mod including Tekkit, Bukkit, Hexxit and much more. Need help installing them? Submit a ticket!</b></p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Specialized Support</h4>
<!--<img src="css/images/home-box-image1.gif" alt="" class="right" />-->
<p>We have a professional support team who are always happy to help, and are fast and caring about what they do. You can rely on us!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box">
<div class="box-b">
<div class="box-t">
<h4>Migration Assistance</h4>
<!--<img src="css/images/home-box-image2.gif" alt="" class="right" />-->
<p>If you have a server elsewhere and want to move to us, we'll help you transfer all your files and data, apsolutely free of charge!</p>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="box home-box last">
<div class="box-b">
<div class="box-t">
<h4>Hardware Specs</h4>
<!--<img src="css/images/home-box-image3.gif" alt="" class="right" />-->
<p>E3-1270v3<br />32GB DDR3 ECC Memory<br />240GB Solid-State Drives<br />1Gbps Uplink</p>
<div class="cl"> </div>
</div>
</div>
</div>
<!-- end home boxes -->
As you can see the home-boxes are overlapping the footer. The footer should have about a 1 centimeter space above it so nothing overlaps it. Also, the background image for the footer is showing 2 colors but the background of the footer is only supposed to be 1 color.
Here is the image script, please refer to previous code for the image style.
bg-image="/images/darker.png".
I would appreciate any help I could get here.
For further information on this problem, here is a link to my site: http://cudahost.com/new
For the home boxes, you need to set the background to repeat:
.box {
background-repeat: repeat;
background-position: 0 0;
}
In fact, if I understand your problem correctly, the style on the inner div needs changing too. Currently you prevent the background repeating using no-repeat, instead:
.box .box-b {
background-repeat: repeat;
background-position: 0 bottom;
}