I am trying to add a new line between the btn and the txtbox but nothing worked. I tried , and \n
It is shown as:
My code:
<td>
<div>
<a class="btn btn-default pull-left" style="color: inherit" id="btn">my button</a>
</div>
<div>
<input id="mytxt" >
</div>
</td>
This being HTML, your best bet is to either add some CSS to increase the margin/padding on either the bottom of your first div or the top of the second one. Alternatively, you could add an empty div in between and apply your styles to that.
Just add css padding style in the head:
<head>
<title>Page Title</title>
<style>
#btn-div {
padding-bottom: 20px;
}
</style>
</head>
<body>
<td>
<div id="btn-div">
<a class="btn btn-default pull-left" style="color: inherit" id="btn">my
button</a>
</div>
<div>
<input id="mytxt" >
</div>
</td>
</body>
You can try inserting between code.
<p> </p>
Also, you can try
<br />
And my favorite, make a CSS file
<html>
<head>
<style>
.gap-10 {
width:100%;
height:10px;
}
.gap-20 {
width:100%;
height:20px;
}
.gap-30 {
width:100%;
height:30px;
}
</style>
</head>
<body>
<!-- this div will give a gap of 10px -->
<div class="gap-10"></div>
<!-- this div will give a gap of 20px -->
<div class="gap-20"></div>
<!-- this div will give a gap of 30px -->
<div class="gap-30"></div>
</body>
I hope it helps
Related
I have two boxes set up and i wanted to put some buttons and text in the middle but when ever I try to add text there it makes the far right box go down one. I want them to stay aligned.
I tried adding another between the 2 boxes but this did not work. im new at html so im not sure how to format this.
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 300px; float:left; border: 15px solid green; height:300px; background:white; margin:10px">
Inventory
<br />
Bronze: <span id="Bronze">0</span>
<br />
Silver: <span id="Bronze">0</span>
<br />
Gold: <span id="Bronze">0</span>
<br />
Diamond: <span id="Bronze">0</span>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px">
Skills
<br />
Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span>
<br />
Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
I expect the buttons / words I want to put in the middle of these 2 boxes to not upset the alignment. But my actual output is words and buttons move the far right box down.
There are multiple ways to approach this problem, just to include a few here in the below code:
You can use bootstrap to implement a grid system, here's the bootstrap grid system reference.
I have included the grid system in your code. To do that, first is to include bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
What the grid system does is it breaks the width of your row into 12 equal columns, and in the code below, the left box takes 5 columns and the right box takes 5 columns, and the center where you want to add text and stuff will take 2 columns, totaled 12 columns. To do that we add class="col-sm-5" for 5 columns for example, (you can use col-lg-5 etc. you can look it up for more details, basically this has to do with the Responsiveness of your page).
We can also implement max-width to limit the maximum width of your center div, and use overflow wrap to control the overflow. Look up CSS overflow to see what are your options. One of them is to make a scrolling effect if the elements in the center is too big. That way if it overflows and push the right box to the bottom, you can do a scrolling effect so the right box stays where it is.
In the code below overflow-wrap: break-word; is used if you were to put text in the middle.
You can also utilize the position:absolute; attribute to position your right box in a absolute position, that way it won't be pushed down. See position for reference.
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="nav_bar">
<ul>
<li>
Home
</li>
<li>
SkillTree
</li>
<li>
Equipment
</li>
<li>
Pets
</li>
<li>
Skills
</li>
<li>
Quests
</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="float:left; border: 15px solid green; height:300px; background:white; margin:10px" class="col-sm-5">
Inventory
<br />Bronze:
<span id="Bronze">0</span>
<br />Silver:
<span id="Bronze">0</span>
<br />Gold:
<span id="Bronze">0</span>
<br />Diamond:
<span id="Bronze">0</span>
</div>
<div style="max-width: 30px; overflow-wrap: break-word;" class="col-sm-2">
<h1>lkjdlfkjdlkfjdljfdlkjfdlkjfd</h1>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px;" class="col-sm-5">
Skills
<br />Strength: Lv
<span id="Strengthlv">1</span>
<span id="StrengthCexp">0</span> /
<span id="StrengthMexp">100</span>
<br />Magic: Lv
<span id="Magiclv">1</span>
<span
id="MagicCexp">0</span> /
<span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
</div>
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
I added a flexbox to your code. I hope this was helpful.
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<style>
.flex-container {
display: flex;
align-items: stretch;
}
.flex-container>div {
width: 600px; /*change the max columb width*/
background-color: #f1f1f1;
border: 15px solid green;
background:white;
margin: 10px;
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<div class="main_container">
<div class="flex-container">
<div style="order: 1">
<p><b>Inventory</b></p>
<p>Bronze: <span id="Bronze">0</span></p>
<p>Silver: <span id="Bronze">0</span></p>
<p>Gold: <span id="Bronze">0</span></p>
<p>Diamond: <span id="Bronze">0</span></p>
</div>
<div style="order: 3">
<p><b>Skills</b></p>
<p>Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span><p/>
<p>Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span></p>
<button onclick="Magicexp()">Click Me!</button>
</div>
<div style="order: 2">
<h1>content</h1>
</div>
<!-- You can add more div's here, if you want -->
</div>
</div>
</body>
</html>
If you have any questions, go ahead!
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
Looking to have a title, subtitle and then two boxes close together and next to each other in the final third div.
Struggling to get 2 buttons to align in the centre next to each other. Seems fine in certain widths, but flows onto the next line at full width
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
My CSS
.myoffer3 {
display: inline;
padding:20px;
}
.myoffer4 {
display: inline;
padding: 0 20px;
}
.button-box {
width:100%;
text-align:center;
}
I already knew what you mean.
Here is the correct way to fix.
HTML
<div class="button-box col-lg-12">
About Us
Our Products
</div>
CSS
.button-box {
text-align:center;
margin-top:20px;
}
DEMO
You have to use boostrap class text-center
Use below like this,
<div class="button-box">
<div class="myoffer3 col-lg-6">
About Us
</div>
<div class="myoffer4 col-lg-6">
Our Products
</div>
</div>
</div>
<div style="text-align: center;">
About Us
Our Products
</div>
This works for me, the buttons are next to each other
Simplest Way to do in Bootstrap 4 and above / Two Button Inline.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Download</button><button class="btn btn-primary ml-3">Print Confirmation</button>
</body>
</html>
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }
I'm trying to get a bunch of div's to wrap around an image, but am failing.
Since pasting HTML doesn't seem to work in StackOverFlow, here is my current attempt at emulating a Outlook 2010 contact entry.
Source from: http://www.perfmon.com/download/contactdivtest.htm
(edit: or check out #Hristo's cool online editor )
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</body>
</html>
Can anyone tell me what I need to do to make all the div's move up and wrap around the image? I really hope I'm not missing something simple...
Here is the target layout I'm attempting:
alt text http://perfmon.com/download/contactdivtest.bmp
foor your specific solution span can work better for you:
check the version with span:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
.contactLarge span{
font-weight: bold;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt="">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<span>LastName, Firstname</span> <br />
<span>CompanyName</span> <br />
<span >Title</span> <br>
<span >Work#</span> <br>
<span >Mobile#</span> <br>
<span >Home</span> <br>
<span >email1</span> <br>
<span >email2</span> <br>
<span >email3</span> <br>
<span >Street</span> <br>
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br>
<span style="background-color:#F1F5F9; float:left;" >State</span> <br>
<span style="background-color:#F1F5F9;" >Zip</span> <br>
<span style="background-color:#F1F5F9;" >httppage</span> <br>
<span style="background-color:#F1F5F9; ">im</span> <br>
</div>
</body>
</html>
Div is a block-level element. It will take up full width and generate a break before and after.
Img is, by default, an inline element. You want to wrap it in another one (not float). Either use span's instead (span is div's inline brother) or set the css display property to inline on the div.
A very useful trick for these sorts of things is the "display: inline-block".
It displays things inline (so the wrapping will work), but leaves you with almost the full configurability of a block-level element.
A <div> is a block level element - this means that it automatically clears to a new line and has 100% width. Without seeing your html or css it's hard to see where you're going wrong but try using float:
div {
float: right;
width: 50%;
}
Edit:
Now that you've posted a picture of what you want I can say that you'll probably want something like this:
HTML:
<div id="container">
<img src="foo.jpg" />
<div id="content">
<p>Blah blah</p>
<p>More blah blah</p>
</div>
</div>
CSS:
#content {
width: 60%;
float: right;
}
Just make sure that the width of the img + width of the inner div is less than the width of the containing div.
If you create a "textbox" div around your text and float it left you should be good to go. See:
<html>
<head>
<title>
</title>
<style type="text/css">
.contactLarge{
width: 250px;
height: 220px;
}
img.picture {
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
.textbox {
float: left;
}
.contactLarge item{
}
</style>
</head>
<body>
<div class="contactLarge">
<div style="background-color:#C5CED8;clear:both">title </div>
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt="">
<div class="textbox">
First, Last <br>
First, Last <br>
First, Last <br>
First, Last <br>
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div>
<div style="font-weight:bold;clear:both;" >CompanyName</div>
<div >Title</div>
<div >Work#</div>
<div >Mobile#</div>
<div >Home</div>
<div >email1</div>
<div >email2</div>
<div >email3</div>
<div >Street</div>
<div style="background-color:#F1F5F9; float:left;" >City,</div>
<div style="background-color:#F1F5F9; float:left;" >State</div>
<div style="background-color:#F1F5F9;" >Zip</div>
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div>
<div style="background-color:#F1F5F9; ">im</div>
</div>
</div>
</body>
</html>