I'm trying to get my name and trip input fields to line, but they're all over the place.
http://prime.programming-designs.com/test_forum/viewboard.php?board=0
#formdiv{
margin: auto;
text-align: left;
width: 30%;
}
.fielddiv1{
background-color: #222222;
border: 2px solid #333333;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #222222;
border: 2px solid #333333;
vertical-align: middle;
width: 100%;
}
.fieldtext{
width: 100%;
background-color: #333333;
}
Remove the <br /> that's between those two fielddiv1 div's
You have a <br> between the divs that contain them.
Wrap both of them (the two divs with fielddiv1 class) into a single div. And also delete the line break in between them.
Related
I have figured out a new problem in TCPDF (new for me), ie I can't place elements next to each other. I have tried so many solutions but they were zero in the end. Seems like TCPDF doesn't support the converting from all the css attributes. Hope you can help ;)
The code I had tried:
<style>
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader div{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
horiz-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
</style>
And the html:
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Thanks in advance for the answers!
Maybe this is your problem:
You are adding this:
.protHeader div{
width: 100%;
}
that means, that every <div> in your class .protHeader has 100% width.
EDIT: (i change the last part of the css and colored the inline-block divs red, for viewing that they should stay next each other)
Try to remove this line or change your styling to:
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader .fl_left{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
.protHeader .fl_left div {
background-color: red;
display: inline-block;
}
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Okay, found a method, I had changed the whole framework to another (dompdf), which is easier to use and supports the newer CSS too.
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I am working in wordpress and I have this menu with 4 menu items.
The problem is that they are touching each other and there is 0
space between which makes it ugly in my opinion.
Now this problem only
occurs in wordpress. So I have to find a solution how to put some space between.
Maybe you guys know a solution without having to install something on WP.
(the codes in the body is exactly as in my wordpress to demonstrate how it looks like. You can enter it and that will put some space between, but unfortunately that doesn't work in wordpress.)
<style>
.smallmenu {
margin: 0 auto;
max-width: 436px;
width: 100%;
}
.Capital {
margin: 0px 0 -5px 0;
line-height: 63px;
font-size: 60px;
font-weight: ligter;
}
.smalltext {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
}
.smalltextpub {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
margin-left: -5px;
}
.cornermenu {
display: inline-block;
margin: auto;
border-radius: 25px;
background: #769DBD;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
#hoverr:hover {
border-radius: 25px;
background: #464646;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
* {
box-sizing: border-box;
}
</style>
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span>
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span>
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span>
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span>
<span class="smalltextpub">Publications</span></a></div>
Just set a fixed margin on .cornermenu.
Something like margin: 2px
JSFiddle link
.cornermenu {
...
margin: 2px;
...
}
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
My "Page [0]" text isn't centered on my webpage. Anyone know why? I could really use some help please.
Here is the html:
<html>
<head>
<title>Test Forum</title>
<link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" />
<h1>Test Forums</h1>
<hr />
<div id="navi"><div id="naviheader">Boards</div>Testing<br />General Discussion<br />Video Games<br />Anime and Manga<br />BlazBlue<br />Shin Megami Tensei<br />Earthbound<br />Phantasy Star<br />Mobile Suit Gundam<br /></div>
<div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [0]
</body>
</html>
Here is the CSS:
#charset "windows-1252";
body{
background-color: #EEFFF8;
color: #000000;
text-align: center;
}
.postbox{
text-align: left;
margin: auto;
background-color: #dbfef8;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
.stickypostbox{
text-align: left;
margin: auto;
background-color: #F5FFFA;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
h4{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #9932CC;
}
h1{
color: #551A8B;
}
hr{
color: #82FFCD;
background-color: #82FFCD;
height: 1px;
border: 0px dotted #82FFCD;
}
a{
color: #7F00FF;
text-decoration: none;
}
a:hover{
color: #7F00FF;
text-decoration: underline;
}
form{
margin: 0px auto;
width: 50%;
}
#formdiv {
background-color:#dbfef8;
border:1px solid #82FFCD;
}
.fielddiv1{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 100%;
}
.fieldtext1{
width: 50%;
background-color: #82FFCD;
float: left;
}
.fieldtext2{
width: 100%;
background-color: #82FFCD;
}
#replydiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#admindiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#navi{
width: 200px;
background-color: #dbfef8;
border: 1px solid #82FFCD;
text-align: left;
float: left;
}
#naviheader{
width: 100%;
background-color: #82FFCD;
}
#submitbutton{
border: 1px solid #82FFCD;
background-color: #DBFEF8;
color: #000000;
margin-top: 5px;
width: 100px;
height: 20px;
}
#banner{
border: 1px solid #82FFCD;
}
.postbar{
margin-right: 0px;
margin-top: 0px;
}
.bannedtext{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #FF0000;
}
And here is the webpage so you can get some context (you'll notice that my "page [0]" is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/
The float on the left is pushing the content to the right. It's still centred across the line, but it's not centred across the page. Adding a large bottom margin to .postbox illustrates this.
Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png
My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.
Change:
Page: [0]
To (wrap it in a div with pager class):
<div class="pager">Page: [0]</div>
Change this in your CSS:
.postbox, .pager{
text-align: left;
margin: auto;
width: 50%;
margin-top: 10px;
}
.postbox {
background-color: #dbfef8;
border: 1px solid #82FFCD;
}
.pager {
text-align: center;
}
The reason this is happening is because your float is pushing over your content. You pager is coming straight off the body tag. In general, it's best to wrap plain text inside an html element.
You may want to revisit the structure of your page. Create a left column and a center column div or something like that.