This is the code of my html in this when I set the #login id to float right it just overlap the #about-blog id.
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
position: absolute;
z-index: 1;
}
Here is the full code {below the code I have provided more information}
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kvians-Home</title>
<style type="text/css">
body {
background-color: #F0FFF0;
color: rgb(255,255,255);
font-family: monospace;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
.main-heading {
background-color: #0048ba;
text-align: center;
font-size: 35px;
font-weight: bold;
margin: 0px;
}
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
position: absolute;
z-index: 1;
}
/* all about links */
a{
background-color: #00FF00;
color: #00693E;
font-weight: Bold;
font-size: 25px;
}
a:visited{
background-color: #DFFF00;
color: #FF7F00;
}
a:hover{
background-color: #91A3B0;
color: rgb(0,0,0);
}
.left-margin{
margin-left: 5px;
}
/* all about links*/
</style>
</head>
<body>
<!--facebook SDK-->
<!-- Facebook SDK end-->
<!--page begin-->
<h1 class="main-heading">Here You Will Get</h1>
<!--Main Body Design-->
<div id="about-blog">
<h2 class="left-margin">School Feeds</h2>
<p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
<a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
</div>
<div id="login">
<h2>Login</h2>
<p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
</div>
</body>
</html>
how can I set the login to right And just overlap the about blog by a few pixles.
if you are using position:absolute try right:0 instead of float:right and left:0 instead of float:left
if you are using position:absolute you can't use floating cos the element is detached of the document that's why floating property won't work.
You can use right:0 or left:0 and the element will be forced to go left or right of the document.
Your float doesn't work because you also use position: absolute.
I removed position: absolute, as it will just give you problems down the road, and added float: left to #about-blog, this way, if you want to add any extra info, it will flow properly.
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
float: left; /* added */
z-index: 1;
}
body {
background-color: #F0FFF0;
color: rgb(255,255,255);
font-family: monospace;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
.main-heading {
background-color: #0048ba;
text-align: center;
font-size: 35px;
font-weight: bold;
margin: 0px;
}
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
float: left;
z-index: 1;
}
/* all about links */
a{
background-color: #00FF00;
color: #00693E;
font-weight: Bold;
font-size: 25px;
}
a:visited{
background-color: #DFFF00;
color: #FF7F00;
}
a:hover{
background-color: #91A3B0;
color: rgb(0,0,0);
}
.left-margin{
margin-left: 5px;
}
/* all about links*/
<!--facebook SDK-->
<!-- Facebook SDK end-->
<!--page begin-->
<h1 class="main-heading">Here You Will Get</h1>
<!--Main Body Design-->
<div id="about-blog">
<h2 class="left-margin">School Feeds</h2>
<p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
<a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
</div>
<div id="login">
<h2>Login</h2>
<p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
</div>
You can do margin-left: auto; to that element using id
Try this code:
#login{
background-color: #00FFFF;
float: right;
clear: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
I added clear: right; on it, I think it will work!
Related
I'm trying for tag SOLD OUT as shown in below figure
but able to achieve upto certain extend shown in below figure
using following HTML & CSS
<a href="some-href">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 142px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
You need to do a few things:
set the parent's position to relative(the in your case) and overflow to hidden.
set the "sold out"'s width to something that will overflow and the image's height and width to 100% to fill the parent
You'll need the position:relative of the parent so the "sold out" will be aligned to its parent when position:absolute and the overflow:hidden will be applied to it.
.parent {overflow: hidden; position: relative; display: block; width: 200px; height: 200px;}
.parent img { width: 100%; height: 100%;}
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 242px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
<a href="some-href" class="parent">
<img src="http://i.stack.imgur.com/Mmww2.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
https://jsfiddle.net/ivankovachev/snxt61an/
Try this, set backface-visibility:hidden
a{
text-decoration:none;
width:200px;
height:200px;
display:block;
position:relative;
overflow:hidden;
}
a > img{
width:100%;
height:100%;
}
a > .wp-sold-out-strip {
width: 180px;
color: #FFF;
font-size: 13px;
font-weight: bold;
position: absolute;
text-align: center;
background-color: #8760AF;
bottom:20px;
right:-30px;
transform:rotate(-30deg);
-webkit-backface-visibility:hidden;
}
<a href="some-href">
<img src="https://source.unsplash.com/user/erondu">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Here the solution!...
Try this code...
<div class="img-wraper">
<a href="some-href" class="">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
</div>
<style media="screen">
.img-wraper {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid #cccccc;
}
.img-wraper a {
display: block;
position: relative;
}
.img-wraper a img {
width: 100%;
height: 100%;
}
.wp-sold-out-strip {
position: absolute;
bottom: 20px;
right: -30px;
width: 142px;
transform: rotate(-33deg);
text-align: center;
background-color: #8760AF;
color: #FFF;
font-size: 13px;
font-weight: bold;
}
</style>
Here's another answer for you. Fiddle
What I did to set the parent element a position: relative and position: absolute on the banner. You can then more easily align the item with top and left.
It's also important to set the parent to overflow: hidden so that nothing appears to protrude outside your image. Finally, you need to override the default inline behavior of anchor tags so that you can align the banner properly.
I also increased the left padding for the text to make it appear centered.
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 170px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 7px 0 7px 14px;
position: absolute;
top: 107px;
left: -2px;
transform: rotate(-26deg);
}
a {
overflow: hidden;
position: relative;
width: 150px;
height: 150px;
display: inline-block;
}
<a href="some-href">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Just add
height:30px;
line-height:28px;
and change this value:
margin-top: -70px;
Demo (new tag in orange, old in purple), enjoy:
.wp-sold-out-strip {
text-align: center;
background-color: tomato;
width: 142px;
height:30px;
line-height:28px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -70px;
transform: rotate(-26deg);
}
<a href="some-href">
<img src="http://i.stack.imgur.com/Nahj0.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section
I am learning HTML,CSS and JAVAScript and I recently wrote a very simple code. It showed everything and was working fine until I added the div class "mainLeft". After that it doesn't show anything except for the code before that class. Can you kindly assist?
Below is the HTML and CSS code;
CSS Code
**CSS Code**
body {
background-color: white;
}
.main h1 {
font-family: Candara;
text-align: center;
color: white;
}
.main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
.SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
color: #13b5ea;
}
.SME h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.DataAnalysis h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.ProdMonitor {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.ProdMonitor h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.mainLeft h1 {
font-family: Candara;
text-align: center;
color: white;
}
.mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<title>My Home</title>
</head>
<body>
<!--Go bananas!-->
<div class="main">
<h1> XYZ</h1>
</div>
<div class="mainLeft">
<h1> Current Stats </h1>
</div>
<div class="SME">
<h4> My Explorer </h4>
</div>
<div class="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div class="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
</body>
</html>
first of all, I don't see any div with the class 'mainLeft'. You only have texts in those divs so the reason you can't see anything is because you have this css on your h definitions.
color: white;
Thank you Everyone. I solved it.
I had forgottent to add background-color attribute in CSS.
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 8 years ago.
I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/
I need to align this text at the bottom part of the image
I tried putting this in css:
.head_img p {
position: absolute;
left: 0;
width: 100%;
vertical-align:bottom;
}
but this doesn't work ...
.............
Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text
How do i do that
Try this:
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position:relative;
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom:5px;
margin:0;
padding:0;
}
#media (max-width: 1366px) {
.head_img img { display:none; }
}
I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.
Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.
Updated fiddle: http://jsfiddle.net/5AUMA/33/
http://jsfiddle.net/5AUMA/32/
your markup wasn't correctly set (moved the paragraph in the same div that contains the image)
<body class ="body">
<div class ="head_img">
<div style="text-align:center;"><img style="min-width:50%; min-height:60%;" src = "http://i.imgur.com/H56PB85.jpg"/>
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
also look for position:relative on the container div to make things work on all browsers
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position: relative; /* HERE */
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
color: white;
}
You need to make couple of changes to your css to make it work as follows.
.head_img p {
position: absolute;
left: 0;
width: 100%;
top: 0;--> Added
color: white;--> Added
}
.head_img{
<--Margin Removed-->
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
}
WORKING FIDDLE
Now to make your image to hide in particular width you can use media queries something like this
#media (max-width: 768px) {
.head_img img{
display:none;
}
}
try this
body {
color: #202020;
font-size: 100%;
font-family: 'Maven Pro', sans-serif;
line-height: 1.4em;
min-height: 100%;
background-color: #fdfdfd;
}
.head_img {
margin-top: 10%;
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align: center;
position: relative;
}
.head_img p {
left: 0;
width: 100%;
position: absolute;
bottom: 5px;
margin: 0;
color: #fff;
}
<body class="body">
<div class="head_img">
<div style="text-align:center;">
<img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
</div>
<p>display this text over the image
<br>and at the bottom part of the image</br>
</p>
</div>
</body>
i have added
top: 394px;
color: #fff;
in .head_img p jsfiddle
body {
background-color: #fdfdfd;
color: #202020;
font-family: "Maven Pro",sans-serif;
font-size: 100%;
line-height: 1.4em;
min-height: 100%;
}
.innerimg {
background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
border: 2px solid;
height: 500px;
width: 500px;
}
.head_img {
color: #000000;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 500px;
}
.head_img p {
display: table-cell;
height: 480px;
text-align: center;
vertical-align: bottom;
width: 500px;
}
<body class ="body">
<div class ="head_img">
<div class="innerimg" style="text-align:center;">
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
add HTML tags
<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>
CSS
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
i have updated the code in this FIDDLe