I'm trying to have the textarea boxes align with the photo, and whether they are looking at it from a desktop or cell phone I need the layout to adjust so the boxes don't fall apart from each other. Help please?
html
<center>
<h1>Custom Cut Sizing</h1>
<p> </p>
<p> </p>
</center>
<div class="center">
<div class="inline-div"><textarea style="resize: none;" cols="2" id="HeightCC" rows="2" class="leftbox"></textarea></div>
<div class="inline-div"><img class="img2" src="https://foamtouch.com//wp-content/themes/jshop/cuboid.png"/></div>
<div class="inline-div"><textarea style="resize: none;" cols="2" id="WidthCC" rows="2" class="rightbox"></textarea></div>
</div>
<center><textarea style="resize: none;" cols="2" id="LengthCC" rows="2"></textarea></center>
Estimated Costs (Including shipping):<p id="Estimated Costs"></p>
<button onclick="CalculateCosts()">Calculate Costs</button>
css
.center {
margin: auto;
padding: 0px 0px 0px 40px;
}
.inline-div {
display:inline-block;
height: 10px;
}
.leftbox {
position: relative;
top: 19%;
}
.rightbox {
position: relative;
top: 0%;
}
.img2{
width: 550px;
}
Thanks.
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I have 4 divs that lay two in row and two columns. They are different height and I want it to be taken into consideration when displaying on page. I always want the lower divs to stick vertically to upper ones like in the left side.
Now the code.
app.component.html
<div id="wrapper">
<div id="content">
<div id="first-row">
<div class="col">
<br>
<a routerLink="/projects/endless-blow">Endelss Blow</a>
<br>
<a routerLink="/projects/endless-blow"><img src="assets/images/endlessblow_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="https://freeiconshop.com/wp-content/uploads/edd/android-flat.png" width="75px" height="75px">
<img src="https://cdn.iconscout.com/icon/free/png-256/java-23-225999.png">
<img src="https://inforce.rs/wp-content/uploads/2018/07/spring-boot-logo-e1530901263416.png" width="188px" height="75px">
<img src="assets/images/postgresql_icon.png" width="75px" height="75px">
</div>
</div>
<div class="col">
<br>
<a routerLink="/projects/book-library">Book Library API</a>
<br>
<a routerLink="/projects/book-library"><img src="assets/images/win_console_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="assets/images/java_icon.png">
<img src="assets/images/jetty_icon.png" width="265px" height="75px">
</div>
</div>
</div>
<div id="second-row">
<div class="col">
<br>
<a routerLink="/projects/endless-blow">Endelss Blow</a>
<br>
<a routerLink="/projects/endless-blow"><img src="assets/images/endlessblow_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="assets/images/android_icon.png" width="75px" height="75px">
<img src="assets/images/java_icon.png">
<img src="assets/images/spring_boot_icon.png" width="188px" height="75px">
<img src="assets/images/postgresql_icon.png" width="75px" height="75px">
</div>
</div>
<div class="col">
<br>
<a routerLink="/projects/book-library">Book Library API</a>
<br>
<a routerLink="/projects/book-library"><img src="assets/images/win_console_icon.png"></a>
<br><br>
<hr>
<br>
<div class="technology_images">
<img src="assets/images/java_icon.png">
<img src="assets/images/jetty_icon.png" width="265px" height="75px">
</div>
</div>
</div>
</div>
</div>
app.component.css
html, body {
margin: 0;
padding: 0;
align-items: center;
text-align: center;
}
body {
border: 3px solid green;
max-width: 600px;
margin: 0 auto;
color: #fff;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: darkcyan;
}
#content {
border: 3px solid red;
box-sizing: border-box;
position: absolute;
padding: 0;
margin-left: 0;
margin-right: 0;
text-align: center;
overflow: auto;
left: 0;
right: 0;
top: 70px;
width: 100%;
}
#content a {
font-size: 25px;
}
#first-row {
margin-top: 20px;
}
.col {
border-radius: 15px;
-moz-border-radius: 15px;
display: inline-block;
width: 350px;
min-height: 350px;
border: 3px solid green;
background: rgba(150, 150, 50, 0.8);
vertical-align: top;
text-align:center;
margin: 0 40px;
/* margin-right: 100px; */
}
.col a img {
padding:0;
left:0;
right:0;
margin: 0 auto;
}
.technology_images {
text-align: left;
}
div:not(.technology_images, .col) {
min-height: 400px;
box-sizing: border-box;
width: 100%;
}
If you need code uploaded with result just take a look here
I did not see any topic that corresponds to my problem so please do not close this topic.
Thank you! :)
This is really hard to achieve with HTML/CSS, and be flexible at the same time, nearly to impossible I would say, because in the real world, you might not know what height and width your elements really are and how many there are on each column.
The only HTML/CSS solution (if this fits your case) would be to create a single row, with multiple columns in it and display all the items by column. For this one, you really need to know beforehand exactly how many elements you would have on each column.
For a flexible solutions, I would really recommend using Masonry. This library would help you achieve the result you need really fast without having to do a complicated layout, which will also be complicated to maintain in the long run when multiple items might get added.
I am still learning CSS therefore the code may not exactly be perfect. I wanted to ask, how can I move the search bar to the top right corner? It displays below the main text and that does not look good. Any idea?
.container {
width: 900px;
margin: 0 auto;
}
.info {
font-family: "Comfortaa";
font-size: 1.3em;
margin-left: 4.06em;
}
.logo {
float: left;
margin-top: 1.25em;
}
.search-box {
float: right;
}
.vyhladavac {
width: 150px;
}
<header role="header" id="header">
<div class="container">
<img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
<p class="info">Spojená škola, Komárňanská 28, Nové Zámky s o. z. Stredná <br> priemyselná škola elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
</p>
<div class="search-box">
<input class="vyhladavac" type="text" name="" placeholder="Search">
</div>
</div>
</header>
To put two containers side by side, you can use display:flex on the parent container.
Therefore, I put the rest of your header into a div called headLeft, and the search div is the other container - allowing us to put display:flex on the parent container (which in your case is the .container div)
Flexbox is a very easy way to arrange containers side-by-side ("inline"), and it is also very useful for centering content both vertically and horizontally.
.container {
width: 900px;
margin: 0 auto;
display:flex; /* <==== ADDED */
border:1px solid red;
}
.headLeft{ /* <==== ADDED */ }
.info {
font-family: "Comfortaa";
font-size: 1.3em;
margin-left: 4.06em;
}
.logo {
float: left;
margin-top: 1.25em;
}
.search-box {
float: right;
}
.vyhladavac {
width: 150px;
}
<header role="header" id="header">
<div class="container">
<div class="headLeft">
<img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
<p class="info">Spojená škola, Komárňanská 28, Nové Zámky s o. z. Stredná <br> priemyselná škola elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
</p>
</div>
<div class="search-box">
<input class="vyhladavac" type="text" name="" placeholder="Search">
</div>
</div>
</header>
REFERENCE:
Must Watch 25min Flexbox tutorial - fast paced
Best Flexbox cheat sheet
.container{
position:relative;}
.search-box{
position:absolute;
right:0;
}
You can move the search box out of the layout by utilizing the position attribute. Setting its value to absolute will position the element absolutely in the window. Where the element is positioned can then be controlled using the top, bottom, left, or right attributes.
You may also need to move other elements on the page as elements with the absolute attribute are rendered on their own layer (that may be above existing elements).
.container {
width: 900px;
margin: 0 auto;
}
.info {
font-family: "Comfortaa";
font-size: 1.3em;
margin-left: 4.06em;
}
.logo {
float: left;
margin-top: 1.25em;
}
.search-box {
position: absolute;
top: 10px;
right: 10px;
}
.vyhladavac {
width: 150px;
}
<header role="header" id="header">
<div class="container">
<img src="img/cloud.jpg" class="logo" height="50px" width="45px" alt="">
<p class="info">Spojená škola, Komárňanská 28, Nové Zámky s o. z. Stredná <br> priemyselná škola elektrotechnická S. A. Jedlika - Jedlik <br> Ányos Elektrotechnikai Szakközépiskola a Obchodná <br> akadémia - Kereskedelmi akadémia
</p>
<div class="search-box">
<input class="vyhladavac" type="text" name="" placeholder="Search">
</div>
</div>
</header>
I'm not sure if this is what you're wanting. But give this a try. When I tested the code, It shifted the search bar to the top right of the page.
.search-box {
position: absolute;
right: 0px;
top: 0px;
}
On this page I have a logo (image file, with a set height to fit better) which centers itself fine in its own div. This logo is wrapped in a wrapper div with text-align: center and centers fine. There are also 2 text input boxes with a search button wrapped in a separate div from the logo's, and they're also wrapped in the wrapper div, but when I load the page that div appears on the left side of the page.
If I comment out the searchArea div so the button and boxes are surrounded only by the wrapper, everything centers fine but gets stretched out because of the width property.
How do I get everything inside the searchArea div to center under the logo without losing the set styles for the searchArea class???
HTML:
<div id="logo" class="centerWrapper">
<img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>
<div id="search" class="centerWrapper">
<div id="searchArea" class="searchArea">
<input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
<input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
<button type="button" class="searchButton">Search</button>
</div>
</div>
CSS:
.centerWrapper {
text-align: center;
}
.logo {
height: 46px;
}
.searchArea{
margin-top: 0.8%;
height: 125px;
width: 340px;
}
input.inputBox {
background-color: #0B122F;
border-color: #877055;
color: #4A4E5A;
margin: 5px 0px;
padding: 5px 10px 5px 10px;
width: 72%;
}
In order to horizontally center block-level elements like <div>, you're looking to the apply the margin-left and marign-right properties, both with auto values.
Normally you can use the shorthand margin: 0 auto, but considering you have a margin-top of 0.8%, you need to specify both manually for your .searchArea selector.
This can be seen in the following:
.centerWrapper {
text-align: center;
}
.logo {
height: 46px;
}
.searchArea {
margin-top: 0.8%;
height: 125px;
width: 340px;
margin-left: auto;
margin-right: auto;
}
input.inputBox {
background-color: #0B122F;
border-color: #877055;
color: #4A4E5A;
margin: 5px 0px;
padding: 5px 10px 5px 10px;
width: 72%;
}
<div id="logo" class="centerWrapper">
<img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>
<div id="search" class="centerWrapper">
<div id="searchArea" class="searchArea">
<input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
<input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
<button type="button" class="searchButton">Search</button>
</div>
</div>
Hope this helps! :)
To horizontally center block elements you have to use margin: 0 auto;
But there is margin-top: 0.8%;
So you can use it together:
.searchArea {
margin: 0.8% auto 0;
}
Good luck!)
I'm building a website, but I have a problem.
I have one div that creates the content with a BG color!
The problem is, the text appears in line to the bottom but I want them next to each other!
Here is a link to a screenshot for an example:
http://www.mupload.nl/img/9x7jco1v45f.png
I've tried some code in my CSS but nothing worked.
This is what I have now:
CSS:
#rechts {
float: right;
margin-right: 10px;
}
#lings {
float: left;
margin-left: 10px;
}
.inhoud {
padding-bottom:100px; /* Height of the footer element */
padding-top:150px;
background-color: #f5f5f5;
z-index: 999;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
utilize display:inline-block; like below
.container {
background-color: lightgray;
}
.section {
display: inline-block;
vertical-align: top;
width: 49%;
}
<div class="container">
<div class="section">
Some random inforamtion here<br/>
more contact information
</div>
<div class="section right">
Name<br/>
<input type="text" /><br/>
Email<br/>
<input type="text" /><br/>
Phone<br/>
<input type="text" /><br/>
</div>
</div>
For the HTML you provided, simply change your css to
.contactInhoudLings{
float: left;
width: 50%;
}
.contactInhoudRechts{
float: left;
width: 50%;
}
Demo
You could use flex to split the container in two or any other number.
.container {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
}
<div class="container">
<div class="col">
text
</div>
<div class="col">
your form
<form>
<label for=name>Name:<label/>
<input type=text name=name placeholder=name />
<input type=submit />
</form>
</div>
</div>
If you want margin-left and margin-right than try this:
HTML
<div class="inhoud">
<p class="contactInhoudLings">
// Here is the personal info.
<p class="contactInhoudRechts">
// Here is the PHP Contact form.
</p>
</div><!-- #inhoud -->
CSS
.inhoud{
width: 100%;
}
.contactInhoudLings{
background-color: red;
float: right;
margin-right: 1%;
width:49%;
}
.contactInhoudRechts{
background-color: green;
float: left;
margin-left: 1%;
width:49%;
}
Look also the jsfiddle example
I´m trying to place a slided image in the center if the page. I have it almost done, the thing is that inner each piece of the image I have a small space, like if it has some little padding (which it hasn't), does anybody sees something wrong in the code?
<style type="text/css">
html, body, #wrapper, images {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
}
.center {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.center_mini {
margin: 0px;
padding: 0px;
border: 0px;
}
.center_mini_float {
float: left;
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
<div class="center">
<div class="center_mini">
<img src="images/background_01.png" width="800" height="144" alt="bg">
<div class="center_mini">
<div class="center_mini_float">
<img src="images/background_02.png" width="503" height="456" alt="bg">
</div>
<div class="center_mini_float">
<div class="center_mini">
<div class="center_mini">
<img src="images/background_03.png" width="246" height="89" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_05.png" width="246" height="106" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_06.png" width="246" height="102" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_07.png" width="246" height="159" alt="bg">
</div>
</div>
</div>
<div class="center_mini_float">
<img src="images/background_04.png" width="51" height="456" alt="bg">
</div>
</div>
</div>
<!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>
Try adding:
img { display: block; }
The problem is that IMG tags have a natural DISPLAY value of "INLINE". This causes extra whitespace to appear around the image in certain situations.
Depending on your layout needs, try
img { display: block; }
or
img { display:inline-block; }
If your images are otherwise working the way you want, inline-block will cause the least amount of thrash.
More info:
http://www.w3schools.com/cssref/pr_class_display.asp
http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/
I think the better solution will be using
img { vertical-align: middle; }
This way you won't alternate the default browser image display. Also, make sure the image container has line-height: 100%, that could be causing problems too.
Images have display:inline; by default, that's what's causing the whitespace between your images. You can do three things to prevent this:
float:left;
or
display:inline-block;
or
display:block;