Okay guys so I have this green container:
And I need the text - Would you like to chat ? - to be at the bottom of it's parent (the green background)
I tried adding a style to the text like this:
<div class="row" style="position: relative;">
<div style="position: absolute; bottom:0; right:0;"> Would you like to chat ? </div>
</div>
But that did not work, the text is just over another text, not bottom.
I do not want to use margin-top, because it won't be good at mobile screens.
Here is the code:
<!-- About page -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6 bg-success">
<div class="col-lg-6">
<img src="images/girlprofile.jpg" class="img-responsive" alt="pic1notworking" height="220" width="220" style="padding-bottom: 25px; padding-top: 15px;">
</div>
<div class="col-lg-6" style="padding-bottom: 25px; padding-top: 15px;">
<center>
<div class="usernamestyle"> Username <br> </div>
<div class="onlinestyle">
is currently online <br>
Would you like to chat ? <br>
</div>
</center>
</div>
</div>
<div class="col-lg-6">
<p style="font-size: 140%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum, felis ac tristique tempor, tortor justo fringilla erat, id porta dui nisl quis leo. Proin non quam vitae erat placerat tincidunt. Mauris aliquam tempor finibus. Nulla a purus vehicula, tempus augue placerat, tincidunt odio. Mauris aliquet placerat urna vitae fermentum. Duis posuere risus ac elit mattis gravida. Pellentesque a quam eu massa efficitur aliquam. <br> <br>
Suspendisse tincidunt convallis nulla in pharetra. Ut ac erat convallis, dictum velit nec, sagittis ipsum. Quisque venenatis, nisi id consectetur imperdiet, nibh velit scelerisque arcu, ac placerat neque elit sit amet nisl. Aliquam nec dolor quam. Pellentesque maximus dui id justo ullamcorper auctor. Ut placerat purus vitae ipsum sodales, vel molestie magna finibus.
</p>
</div>
</div>
</div>
</div>
CSS:
.usernamestyle{
font-size: 200%;
}
.onlinestyle{
font-size: 160%;
}
<div class="col-lg-6" style="position: relative;height:100%; padding-bottom: 25px; padding-top: 15px;">
<center>
<div class="usernamestyle"> Username <br> </div>
<div class="onlinestyle">
is currently online
</div>
</center>
<div style="position: absolute; bottom:0; right: 0;">
Would you like to chat ?
</div>
</div>
Related
I have two separate classes in my gallery box container. I've set it to use a flex display, however there is no spacing in the column. Plus, It's not showing all of the pictures as well as the text.
I've messed around with a few of the justify-content attributes, but that hasn't seemed to work. I've also tried messing around with the classes with no luck.
HTML:
<body>
<h1>Gallery Mockup</h1>
<div id="content">
<!-- put your card HTML here -->
<div class="card">
<div id="workplease">
<button onclick="contract_gallery()" type="button" id="close_gallery" style="display:none" align="left">× Close</button>
<center>
<h2>Gallery Mockup</h2>
</center>
</div>
<div id="gallerybox" class="inactive">
<img class="pic" id="pic1" src="https://picsum.photos/230/400">
<img class="pic" id="pic2" src="https://picsum.photos/230/400" style="display:none">
<div class="inactive" id="gtext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat pellentesque lacus, sit amet sodales tellus porttitor sed. Donec mattis lectus in hendrerit mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis id est vitae leo viverra egestas. Donec commodo, mauris ut sagittis commodo, erat erat tristique metus, at faucibus quam arcu eu metus. Duis eget metus eu arcu porttitor venenatis nec sed nibh. Sed eleifend efficitur orci. Suspendisse eu felis vitae sem varius fringilla. Aliquam erat volutpat. Integer a molestie felis, non ultricies mi. Proin facilisis commodo nisi id fermentum. Ut porttitor molestie rhoncus. Curabitur tempus volutpat mauris, eu dignissim mauris viverra quis.</p>
<p>Donec elementum vestibulum felis, ac commodo erat commodo a. Aenean in felis scelerisque justo ornare gravida et sed massa. Etiam in venenatis neque, accumsan volutpat sapien. Sed molestie nisl sem, ac fringilla mauris dignissim nec. Sed placerat ut elit vitae convallis. Donec iaculis efficitur tincidunt. Suspendisse mollis ut orci at maximus. Sed consectetur diam a mauris consectetur, eu sodales purus sollicitudin. Pellentesque quis tellus id est venenatis pharetra fringilla quis libero. Praesent semper, odio eu consectetur malesuada, enim felis euismod eros, in aliquam leo mi non est. Nam ornare scelerisque nisi nec gravida.</p>
</div>
<img class="pic" id="pic3" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic4" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic5" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic6" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic7" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic8" src="https://picsum.photos/230/400" style="display:none">
</div>
<center>
<button type="button" id="gbutton" onclick="expand_gallery()">See Gallery</button>
</center>
</div>
</div>
<script src="js/final-frontier.js"></script>
</body>
CSS:
#media only screen and (max-width: 490px) {
#gallerybox.active {
display: flex;
flex-direction: column;
justify-content: center;
}
}
When the width of the screen goes below 490px, it's supposed to go to flex view, and it does, however there is no spacing in between the photos, and it's not showing all of them. This is what it looks like: https://i.imgur.com/QC9PXfV.png
Your best options would be to wrap your images in div's and use Flexbox accordingly. This approach always works for me and I would recommend it:
Your Html
<div class="flexbox">
<div class="item">
<img src=""/>
</div>
<div class="item">
<img src="" />
</div>
<div class="item">
<img src=""/>
</div>
Your Css:
#media only screen and (max-width: 490px) {
.flexbox {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
width: 100%; //take full width
}
.item img {
width: 100%; //set 100% width
height: auto; //auto height adjustment
}
}
I am trying to get my login form in the middle of the screen and the company logo on the right above.
In the picture this is what I want to make in bootstrap.
This is my HTML code:
<div class="row">
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
Sign In
</div>
<div class="forgot-password">
Forgot password?
</div>
</div>
<div class="panel-body body-panel-styling">
<form class="form-horizontal" id="loginform"></form>
</div>
</div>
</div>
<div class="col-sm-3">
<img alt="Cerrix" class="img-responsive" src="~/Images/Cerrix-Logo.gif">
</div>
</div>
I already try this website but no luck
https://css-tricks.com/centering-css-complete-guide/
How can I center the login form in the middle of the screen and the company logo on the right above side of the screen?
Kind regards
UPDATE: jsfiddle
https://jsfiddle.net/fok6f2fc/
Would something like this match your needs? Login box centered horizontally and vertically with 100% height columns. Best viewed here on CodePen.
html,body,.container {
height: 100%;
}
#login-box {
display: table;
height: 100%;
}
.container {
display: table;
width: 100%;
padding: 0;
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.row .no-float {
display: table-cell;
float: none;
vertical-align: top;
}
.new {
display: table-cell;
vertical-align: middle;
float: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3 no-float">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dui augue, sollicitudin et tortor sodales, mollis luctus massa. Praesent non tincidunt neque. Pellentesque facilisis maximus risus, ut porta risus vulputate in. Aliquam erat volutpat. Ut neque mi, tincidunt accumsan diam sed, vehicula vulputate ante. Morbi congue purus nulla, a sodales mi pellentesque id. Vestibulum tempor diam cursus nunc convallis, ac vehicula ipsum faucibus. Aenean malesuada pretium est, id laoreet diam aliquam porta. Aenean elementum pharetra leo id consequat. Pellentesque nec odio leo. Donec luctus nibh orci, sit amet malesuada risus suscipit eget. Maecenas aliquet odio nec vulputate vestibulum. Fusce tincidunt enim a mauris ornare, id iaculis nunc luctus. Donec placerat ex in lorem semper faucibus. Praesent ut tempus erat.</p>
</div>
<div class="col-md-12" id="login-box">
<div class="new"><div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forgot-password">Forgot password?</div>
</div>
<div class="panel-body body-panel-styling">
<form id="loginform" class="form-horizontal" role="form">
<div class="input-group styling-field">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username">
</div>
<div class="input-group styling-field">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group styling-button">
<div class="col-sm-12 controls">
Login
</div>
</div>
</form>
</div>
</div></div>
</div>
<div class="col-md-3 no-float">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/300x100" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dui augue, sollicitudin et tortor sodales, mollis luctus massa. Praesent non tincidunt neque. Pellentesque facilisis maximus risus, ut porta risus vulputate in. Aliquam erat volutpat. Ut neque mi, tincidunt accumsan diam sed, vehicula vulputate ante. Morbi congue purus nulla, a sodales mi pellentesque id. Vestibulum tempor diam cursus nunc convallis, ac vehicula ipsum faucibus. Aenean malesuada pretium est, id laoreet diam aliquam porta. Aenean elementum pharetra leo id consequat. Pellentesque nec odio leo. Donec luctus nibh orci, sit amet malesuada risus suscipit eget. Maecenas aliquet odio nec vulputate vestibulum. Fusce tincidunt enim a mauris ornare, id iaculis nunc luctus. Donec placerat ex in lorem semper faucibus. Praesent ut tempus erat.
</div>
</div>
</div>
</div>
</div>
use flexbox to align the login form to the center of the parent container:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
you'll need to extend the height of the your parent div <div class="row"> for the centered field to work. assuming you want this container to fill the whole page, you can use viewport units to achieve it:
https://www.sitepoint.com/css-viewport-units-quick-start/
I have a big problem with my page and I can't find a solution anywhere. Could anyone help me?
When I try to add a well with elements inside my page sometimes need scrolling.
There is my code. Thank you.
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1> Some text</h1>
<div class="well">
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-12">
<img class="img-responsive" src="image" style="width:100%">
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<p class="tittle">Tittle</p>
<p class="font"> Nullam consectetur nunc massa. Praesent arcu libero, porttitor ut lacus nec, elementum sagittis est. Donec finibus ex eget nibh blandit, a gravida justo tincidunt. Integer efficitur risus et blandit molestie. Sed hendrerit accumsan faucibus.
Quisque urna ligula, ultrices et scelerisque sed, blandit sed ligula. Etiam odio sem, semper non ex sit amet, euismod pharetra dolor. Donec tristique quis neque vel tincidunt. Sed tincidunt, metus sed varius blandit </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have problem with my buttons when I resize the browser to under 1120px the buttons aren't responsive.
I don't know if my code is wrong or if I missed something else(?)
This is piece of my code :
<!-- Main content -->
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</dv>
</section>
<!-- /.content -->
pic 1 : more than 1120px
pic 2 : under 1120px
ss1
ss2
Based on the classes, I am assuming that you are using Bootstrap. If this is the case, you could add the classes col-xs-10 col-xs-offset-1 to your buttons:
ADMIN<br>
SISWA
Here is the full snippet, fully functional:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div> <!-- NOTE: I fixed a mis-closed div here -->
</section>
Also note that I fixed a mis-closed div.
I'm trying to position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -
This is my coded version -
I'm using the hr tag to create it as this seems the most straightforward way - here's the code -
hr {
display: block;
width: 250px;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div><hr>
</div>
</div>
</section>
The hr is already given a style in the framework, so if you give it a class like this, it will override the default.
The major reason why it is not exactly positioned vertically between the text and image part, is that the text row and image row has not the same top/bottom margin/padding, so I increased the margin-top/bottom a little, and the second hr, the one after the images, were placed within the row, so I moved it outside.
To get it exact in between, you have elaborate with the row's padding/margin.
Stack snippet
hr.hr250center {
display: block;
width: 250px;
margin-top: 2em;
margin-bottom: 2.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: red; /* here you set color */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr class="hr250center">
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
<hr class="hr250center">
</div>
</section>
You can use the option: 'padding-top' or 'padding-bottom'
<section id="welcome">
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div> <hr>
</div>
</section>