I have been working on re-doing my fathers website that was created in the nineties (ugh) and I have been having trouble getting the text to fit inside of a div and align horizontally. I need the text to sit next to each other so they fit in the div. Here's the code for the page in a jsfiddle
Example HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<div>
<img id="header" src="http://www.salesprofessionalsinc.com/images/new%20logo.jpg">
</div>
<div id="links">
<div class="home">
<span></span>Home
</div>
<div class="home">
<span></span>Inside Staff
</div>
<div class="home">
<span></span>Our Mission
</div>
</div>
Example CSS
div img#header{
width: 50%;
height: 15%;
margin-left: 125px;
margin-right: auto;
}center input#search{
width: 300px;
height: 45px;
border: solid 1px black;
margin-top: 55px;
font-size: 25px;
}center button#searchbutt{
border: solid 1px black;
width: 65px;
height: 30px;
}#searchbutt:hover{
color: #FFF;
background-color: #000;
}#searchbutt{
background-color: #FFF;
color: #000;
}#links{
height: 40px;
width: 100%;
text-align: center;
line-height: 40px;
}.home{
width: 80px;
text-align: center;
height: 40px;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: inline-block;
border: solid 1px black;
vertical-align: middle;
}.DL{
width: 95;
text-decoration: none;
text-align: center;
height: 40px;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: inline-block;
border: solid 1px black;
}.home a{
text-decoration: none;
color: gray;
}.DL a{
text-decoration: none;
color: gray;
}div center a#DLbutt{
border: solid 1px black;
width: 100px;
height: 50px;
background-color: black;
}div center a#DLbutt{
text-decoration: none;
color: gray;
}#download{
padding-top: 30px;
}html{
background-image: url("watermark.gif");
}.home a span{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
I need the "Our Mission part" to be in the same div.
You need to set the display to be display: table-cell for div.home and then remove the line-height you have set for these. This should automatically align the text for you.
div img#header {
width: 50%;
height: 15%;
margin-left: 125px;
margin-right: auto;
}
#links {
height: 40px;
margin-left: 125px;
text-align: center;
display: inline-block;
}
.home {
width: 80px;
text-align: center;
height: 40px;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: table-cell;
border: solid 1px black;
vertical-align: middle;
}
.home a {
text-decoration: none;
color: gray;
}
http://jsfiddle.net/03syn1to/
I believe this is what you are asking for. You want the "Our Mission" to be in the button vertically. Just update with this code. And it should work. Let me know what you think.
.home{
width: 80px;
text-align: center;
height: relative;
background-color: white;
color: black;
padding-left: auto;
padding-right: auto;
display: inline-block;
border: solid 1px black;
vertical-align: middle;
}
I changed the height.. height: relative;
Related
I am making a sidebar for my site and I want the side bar to fill the rest of the screen but also scroll separate to the right of the screen when it overflows with other elements inside. When I use 100% for the height the element only goes to the height of the last element inside of it.
I am trying to get it to fill the rest of the screen as I stated previously but it only goes to not all the way.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
margin-left: 345px;
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
Your leftmain IS taking up 100% of the space available to it, leftmain stops when it reaches . You have leftmain set to flex-direction: column;
when only the .main should have it. Also don't use the tag, it is no longer supported in HTML5 and is display: block; when it should be inline-block.
I would change just to and set display to inline-block and set a width so the leftmain has room to go past it.
I hope this solves your problem.
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
align-content: center;
background-color: #333333;
overflow: scroll;
}
#nameOfCenterDiv {
position: absolute;
left: 300px;
display: inline-block;
}
Give to the sidebar a position fixed so it always stays there wherever you scroll and and a margin-left to your content on the right (the width of the margin-left must be the same of sidebar width)
.leftmain{
position: fixed
}
.main{
margin-left: 345px;
width: 450px //remove this so it's 100%
}
You have to wrap the left sidebar and right panel within the same container.
Using the display: flex on the container, you no longer need to specify a 100% height for the left sidebar since it will automatically fill in the remaining space.
You also need to remove the margin-left rule for the right content so that it lays nicely with the sidebar.
You can optionally set a max-height of 100vh to the sidebar so that it scrolls when its content exceeds the viewport height.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.container {
display: flex;
}
.leftmain {
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div class="container">
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
</div>
I'm just wondering how I can put my button at the right-bottom of the parent box.
I have put position: relative; to the parent box and used position: absolute; for the button class.
This worked perfectly. However, the button overlapped with the contents of the parent box.
What would be the best way to fix this?
Here's my html and css Thank you!!
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
position: relative;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn {
position: absolute;
right: 10px;
bottom: 10px;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
I removed your relative and absolute position declarations. Then I added following css declrations:
.btn {
float: right;
margin-bottom: -20px;
}
float: right; will align the button to the right side. With margin-bottom: -20px; you counter the padding bottom of 30px so that the spacing will only be 10px as previos attempted.
.color {
border: 1px solid black;
width: 70%;
margin: 10px auto;
padding: 0 30px;
}
.color p {
display: inline-block;
width: 200px;
height: 80px;
margin-right: 10px;
text-align: center;
line-height: 78px;
}
p.black {
background: black;
color: white;
}
p.gray {
background: gray;
color: white;
}
p.blue {
background: blue;
color: white;
}
p.white {
border: 1px solid black;
}
.btn a {
display: inline-block;
background: #efd9ca;
padding: 25px;
width: 300px;
text-align: center;
text-decoration: none;
}
.btn {
float: right;
margin-bottom: -20px;
}
<h1 class="heading">color</h1>
<p class="black">black</p>
<p class="gray">gray</p>
<p class="white">white</p>
<p class="blue">blue</p>
<div class="btn">Mozilla color collection website</div>
I'm new in Web. everything was fine but in the case border-radius not working in browser anyone like chrome/FF.
The CSS code like this :
.work-step div {
color: #e67e22;
margin: 2px solid #e67e22;
display: inline-block;
border-radius: 50%; //not working
height: 50px;
width: 50px;
text-align: center;
float: left;
padding: 5px;
font-size: 120%;
margin-left: 25px;
}
Add this to your css
overflow:hidden;
Try this:
.work-step {
background-color: #555555;
color: #e67e22;
margin: 2px solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
float: left;
padding: 5px;
font-size: 120%;
margin-left: 25px;
}
I have arranged the anchor tag with text with borders.
I want to make the text to center inside the block.
I have tried padding, margin left, float but nothing is working.
body {
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title{
height: 17%;
width: 100%;
margin: 0%;
text-align: center;
font-size: 2rem;
color: white;
}
.subjects{
color: white;
width: 28%;
height: 7%;
border: 2px solid white;
font-size: 2rem;
border-radius:20px;
margin-top: 86px;
margin-left: 8px;
text-align:center;
vertical-align: middle;
}
.maths{
margin-left: 24%;
margin-top: 41px;
}
.maths a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 140px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px 103px;
padding-right: 206px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.chemistry{
margin-left: 24%;
margin-top: 41px;
}
.chemistry a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 169px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="title">
<h1>Syllabus</h1>
</div>
<div class="subjectsList">
<div class="subjects">
Syllabus
<span class="triangle"></span>
</div>
<div class="maths">
<a href="mathsinfo.html" target="_blank">
<!--<img src="images/maths.jpg" height="50px" width="50px" alt="Mathematics Icon">-->
Mathematics</a>
</div>
<div class="physics">
Physics
</div>
<div class="chemistry">
Chemistry
</div>
</div>
that physics text must be at middle.Can anyone help me out to solve this problem.
Just change the padding (left and right padding to half of what you had for right padding):
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 103px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="physics">
Physics
</div>
remove padding-right:206px; add text-align:center
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 0px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
text-align:center;
}
remove margin-left from .physicsc and padding-right from .physics a and set
.physics {
text-align: center;
}
.physics a {
width:30%; // or anything you need
}
Also check out centering guide.
How can put the div #box at the same height and 20px at the right of the div #mytext
HTML
<div id="mytext">This is a centered text</div>
<div id="box">
CSS
#mytext {
display: flex;
margin: 0 auto;
width: 450px;
height:280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline:none;
resize:none;
font-size:45px;
font-weight:500;
text-align:center;
align-items:center;
background-color:white;
padding:10px;
}
#box {
display:inline-block;
width:90px;
height:280px;
background-color:dimgrey;
border-radius: 8px;
}
https://jsfiddle.net/fredericmarcel/kuv1m851/5/
Thank you for your help.
Wrap the elements and center them.
.wrapper {
text-align: center;
}
#mytext {
display: inline-flex; /* switched from 'flex' */
width: 450px;
height: 280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline: none;
resize: none;
font-size: 45px;
font-weight: 500;
text-align: center;
align-items: center;
background-color: white;
padding: 10px;
}
#box {
display: inline-block;
vertical-align: top;
width: 90px;
height: 280px;
background-color: dimgrey;
border-radius: 8px;
}
<div class="wrapper">
<div id="mytext">This is a centered text</div>
<div id="box">
</div>
You can achieve this by wrapping the content in a div with display: flex. Updated fiddle
.container {
display: flex;
}
#mytext {
margin: 0 auto;
width: 450px;
height: 280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline: none;
resize: none;
font-size: 45px;
font-weight: 500;
text-align: center;
align-items: center;
background-color: white;
padding: 10px;
}
#box {
display: inline-block;
width: 90px;
height: 280px;
background-color: dimgrey;
border-radius: 8px;
}
<div class="container">
<div id="mytext">This is a centered text</div>
<div id="box"></div>
</div>
If you want the grey box to be aligned 20px to the right you can use this. Note that the container has a set width. It also includes 8px to account for the blue border width:
#container {
background: #cc0000;
margin: 0 auto;
width: 568px;
}
#mytext {
display: flex;
float: left;
width: 450px;
height: 280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline: none;
resize: none;
font-size: 45px;
font-weight: 500;
text-align: center;
align-items: center;
background-color: white;
padding: 10px;
}
#box {
float: right;
width: 90px;
height: 280px;
background-color: dimgrey;
border-radius: 8px;
}
<div id="container">
<div id="mytext">This is a centered text</div>
<div id="box"></div>
</div>
Use float:left; instead of display: flex; and display: inline-block;