I have a little problem with set the positin of my input element. I have some code and I cant understand why my element is outside my div in my view. Please look at this:
https://jsfiddle.net/yzhL69fa/3/
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title"> Is Super </h3>
</div>
<div class="panel-body">
<input class="star-checkbox" type="checkbox" id="isSuper" name="isSuperCheckbox">
</div>
</div>
When I remove class="star-checkbox" from my input elements I can see checkbox input in correct place(custom checkbox, but I need this as a star). But when I add this class, my element go outside my div "panel-body".
Also when I add to my class: "star-checkobox" one think: display: inline-grid; then my checkobx go inside my "panel-body" but this is still out of position.
My goal is to have this checkbox which look like star but in center of my "panel-body". I dont want to padding and margins there. The best would be if my checkbox just look like star and appear in the center of my div with auto margin and auto padding. Can anyone help me with this?
You can add position : relative to the before class, to position the star element. JSFiddle.
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.star-checkbox {
visibility:hidden;
font-size:60px;
cursor:pointer;
}
.star-checkbox:before {
color:#FF912C;
content: "\2605";
visibility:visible;
position:relative;
font-size:30px;
top:-40px;
}
.star-checkbox:checked:before {
color:black;
content: "\2606";
}
Related
HTML/CSS newbie here. I am making a web page with a text header in the top center of the page and a login button on the upper right. I'm writing in Bootstrap using React (which uses embedded HTML). Here is the code.
Header:
<div className="page-header">
<h1 id="header">Header text</h1>
</div>
Login button:
<div id="login">
/*Displays login button if user is logged in, 'Welcome, user' if not*/
{this.state.loggedIn?
<div className="welcomeText">
<p>Welcome, {this.state.user}</p>
</div> :
<div>
<button id="loginButton" onClick={this.onClick}>Login</button>
</div>
}
</div>
CSS:
#header {
text-align:center;
}
#login {
float:right;
}
.welcomeText {
float:right;
}
The issue is that the login button is pushing the header text to the left and I have no way to move it back. I can temporarily solve this using padding; however, when the login button is replaced by a username, it gets pushed over even further the longer the username is. I'd like to know how I can fix this so that the username will be right-aligned and the header will stay in place. Thanks in advance!
As you write in it seems it may be react or something like javascript jsx format.
for header fix you should have to write code like below. this below given code is just to fix header at top position as per your need.
.page-header{
position:fixed;
top:0;
width:100%;
}
I'd use absolute positioning. I've simplified the example but you should get a good idea.
HTML
<div id="page-header">
<h1 id="header">Header text</h1>
<div id="login">
<div className="welcomeText">
<p>Welcome, Test User</p>
</div>
<div>
<button id="loginButton">Login</button>
</div>
</div>
</div>
CSS
#page-header {
background-color: #f0f0f0;
padding: 1em;
position: relative;
text-align: center;
}
#login {
position: absolute;
right: 1em;
top: 1em;
}
Set position: relative on #page-header so that the child element is positioned relative to it rather than the page. Then set position: absolute on the #login element. If you set its right position it will always sit to the right of the centralised #header text.
As long as you apply to absolute position to the #login element the size of the children won't matter. You'll probably need to tweak this on smaller devices, though, as there will be text overlapping.
https://codepen.io/raptorkraine/pen/QBdbPy
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.
Given this simplified snippet :
<html>
<body>
<div>
<div style='text-align:center;'>asdfaskjdfakjsd</div>
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
</div>
</body>
</html>
The button floats to the right, but below the text(On the next line). I know I can realign it using relative positioning, but is there a correct way of having both on the same line.
Even better if adding the button on the right would not effect the centre align of the text. ie it does not get pushed to the left.
You can switch the order of the two divs:
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
<div>asdfaskjdfakjsd</div>
As long as you don't mind them being in reverse order.
Here's a fiddle to demonstrate this effect. The fourth example shows the divs reversed.
I apologize for jumping around. I noticed that even with the reversed divs, the text didn't appear completely centered.
Here is yet another solution (5th example): http://jsfiddle.net/tracyfu/zYzqr/
#method5 {
position: relative;
}
#method5 .submit {
position: absolute;
right: 0;
top: 0;
}
The only problem with this is that if you're not careful, or your text is dynamic, it could collide with the absolutely positioned submit.
I misunderstood your question the first time. You should add float:left; on your initial div and also make sure to add clear:both; to the div below them. If you want the text to be centered, you need to have a width on the initial div.
HTML:
<div id="container">
<div id="content">
asdfaskjdfakjsd
</div>
<div id="containerButton">
<input type='submit' value='asdf' />
</div>
</div>
<div class="clear">asdfaskjdfakjsd</div>
CSS:
#container {
width:300px;
}
#content {
float:left;
text-align:center;
width:90%;
}
#containerButton {
text-align:right;
}
.clear {
clear:both;
}
Live DEMO
The standard approach is to use the "clearfix" hack. CSS:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
*zoom:1;
}
Credit Nicolas Gallagher. Then wrap your line in a cf element:
<div class="cf">
<span>Button text</span>
<div style='float:right'>
<input type='submit' value='asdf' />
</div>
</div>
Button text is changed to a span, or you could leave it as a div and float it left. cf is used to give block properties to a set of elements that do not naturally exhibit them. Without it, ensuing content will not be cleared.
DEMO
This is my html code :
<div id="d1" class="division">
<input type="button" value="one" class="division">
</div>
<div id="d2" class="division">
<input type="button" value="two" class="division">
</div>
This is my css code
.division
{
top:50px;
left:100px;
display: none;
}
But my div element part is not at all changing its top and left position.If its not the right method then How to change the location of a element using its class?
display: none will make the element invisible.
Try this instead:
.division
{
top:50px;
left:100px;
position: relative;
}
You would need to define is position like so:
position: relative;
or
position: absolute;
Depending on how exactly you want to position the elements. Also using .division will position both elements.
Use the following if you want to just position one:
#d1 { ... }
(Assuming display:none is an initial setting modified by jQuery, for example. Otherwise, you won't see the element at all.)
You need to explicitly use position:relative (or similar, depending on the rest of your CSS) for the browser to render the position offsets.