I have HTML code for a website, but the <button> elements in the center are too far up. Here's my code:
h1
{
text-decoration: underline;
}
/* Common Header */
body
{
background-color: #d5d5d5;
}
.header button
{
background-color:#8C481B;
text-align:center;
}
button
{
display:inline-block;
border-radius:15px;
height:50px;
width:125px;
font-size:20px;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<button type="button">Home</button>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<button type="button">Help</button>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>
As you can see, the buttons in the center are slightly higher. Why is this happening, and how can I align them correctly?
The default vertical alignment of inline elements is "baseline," which means the baseline of the element will be the same as the baseline of its parent.
If you add text to the parent element (nav), you'll see that the first word of each button sits on the same line as it:
To overcome this, set vertical-align of the buttons to "top" or "bottom":
button {
vertical-align: top;
}
h1
{
text-decoration: underline;
}
/* Common Header */
body
{
background-color: #d5d5d5;
}
.header button
{
background-color:#8C481B;
text-align:center;
}
button
{
display:inline-block;
border-radius:15px;
height:50px;
width:125px;
font-size:20px;
vertical-align: top;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<button type="button">Home</button>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<button type="button">Help</button>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>
You have an extra space in your CSS -- the "comingsoon" class is not being applied to your span;
Changing that from
button span .comingsoon
to
button span.comingsoon
Will fix the button alignment and font size mistakes.
you need to reset vertical-align value :
a,
button {
vertical-align: top;
/* or any other value that suits you */
}
h1 {
text-decoration: underline;
}
/* Common Header */
body {
background-color: #d5d5d5;
}
.header button {
background-color: #8C481B;
text-align: center;
}
button {
display: inline-block;
border-radius: 15px;
height: 50px;
width: 125px;
font-size: 20px;
}
button span .comingsoon {
color: #eeeeee;
font-size: 10px!important;
}
nav {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<a href="index.html">
<button type="button">Home</button>
</a>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span>
</button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span>
</button>
<a href="help.html">
<button type="button">Help</button>
</a>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>
You have to remove blank space between span and .comingsoon
use : button span.comingsoon
They are mis-aligned because the text is in multiple lines.
Try setting a smaller font-size, or seting a white-space:nowrap style to achieve one-line only text.
Alternatively, you can remove the width and let the buttons grow organically, based on the text within.
Related
I am trying to give space between two menus
using margin left and margin right but it's not working.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<style>
/* .space{
margin-left:5px;
}*/
</style>
</head>
<body>
<div class="navbar-fixed-top">
<div class="col-md-12">
<a link href="" style="font-size:20px;">ABCD Technology</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4 space">
<div style="margin-right:20px;"></div>
#Html.ActionLink("Home", "Index", "Home")
#Html.ActionLink("Services", "Index", "Home")
#Html.ActionLink("PortFolio", "Index", "Home")
#Html.ActionLink("About", "Index", "Home")
#Html.ActionLink("Hire Developer", "Index", "Home")
</div>
</div>
</div>
</div>
#RenderBody()
<div class="navbar-fixed-bottom" style="margin-left:45px;">
<footer>
<p>© #DateTime.Now.Year - CopyRight#flt.com</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
site.css
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Below given code is also not working:
<div style="margin-left:5px;"></div>
I am using external css class like
<style>
/* .space{
margin-left:5px;
}*/
</style>
but this also does not work.
see above image I am trying to add a space between two menus
is there any change in site.css class or I design a wrong menu?
Please replace the code.
<style>
/* .space{
margin-left:5px;
}*/
</style>
BY
<style>
.space a{ margin:0 7px; display: inline-block; }
</style>
Try this:
<style>
/* .space a{
margin: 5px;
}*/
</style>
it will help to margin whole a tag
using bootstrap grid for responsive design, but when screen size is reduced, the footer is lost, and one can't move down page. shown below is why.html page plus styling from css file and scss file.
my attempts to fix this have been:
to look for some syntax problem in css file, and i changed background image from body to html to no avail. any help appreciated. https://jsfiddle.net/eojcam/htkxnywL/7/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
<title>why</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My styles for project0 -->
<link rel="stylesheet" href="css/styles_p0.css">
<!-- My sass styles for project0 -->
<link rel="stylesheet" href="css/variable_p0.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="index.html">Home</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<h1></h1>
<h2>Drop That Pick!</h2> <!-- use of unicode for emoji -->
<p class="header_p">It's gonna happen anyway...😎</p>
</header>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<p>Several years ago, after returning from a position as Orchestral Guitarist on Royal Caribbean Cruise
Lines ship the "Monarch of the Seas,"</p>
<p>I decided to take some Classical Guitar lessons with a private
teacher. I learned how to play the guitar without a pick...</p>
...revealing some new possibilities.
Like playing Walking Bass Lines,
Chords, and Melody all at once!
</div>
</div>
</div>
</section>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<table>
<tr>
<th>Finger Style</th>
<th>Pick</th>
</tr>
<tr>
<td>Thumb and Fingers work independently.</td>
<td>Only one attack possible.</td>
</tr>
<tr>
<td>Invented first 😎 (technique has been developed for longer time.)</td>
<td>Reliance, such that if you drop it, (or don't have one),
means you are "out of business!"</td> <!--use of table -->
</tr>
</table>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="footer_p">Copyright © 2020 Joe Austin Mcintosh. All rights reserved.</p> <!-- id used -->
</div>
</footer>
</body>
</html>
css:
body{
padding-top:5rem;
background:url(/Users/king/proj_0/images/nylon_string_original.JPG) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
color: #ffffff;
{box-sizing: border-box;}
}
div {
padding: 2px;
text-align: center;
}
h1, h2, h3, h4 {
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
}
header {
margin-left: 1%;
margin-bottom: 1%;
}
p {
margin-bottom: 0;
}
table {
margin: 0 auto 0 auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.header_p { /* use of class*/
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
.join {
padding:2px;
margin-top: -20px;
text-align: center;
}
.row > div {
padding-top:5rem;
color: #ffffff;
}
#media print {
.screen_only {
display: none;
}
}
.section_d {
padding: 2px;
margin-bottom: 0px;
font-family: Palatino, serif;
text-align:center;
}
#a_examples {
color: #ffffff;
}
#footer_p { /* use of id */
font-family: cursive;
padding-top:2px;
padding-left:4px;
padding-right: 2px;
margin-top: 0;
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
#p_examples {
text-align: center;
}
#media (min-width: 500px) { /* media query use */
h1::before {
content: "Finger Style Guitar Club";
}
}
#media (max-width: 499px) {
h1::before {
content: "Finger Style!";
}
}
scss:
$cap: small-caps; /* variable use*/
ul {
font-variant: $cap;
}
div {
ul { /* use of nesting*/
li a {
color: #ffffff;
}
}
}
%style { /* inheritance use */
border: 1px solid black;
padding: 1px;
margin: 0px;
}
.full_name {
#extend %style;
color: blue;
}
.age {
#extend %style;
color: blue;
}
.playing_style {
#extend %style;
color: blue;
}
.where {
#extend %style;
color: blue;
}
the footer gets lost as you are not using the repsonsive Bootstraps design in your footer element. Also to utilise the responsive element, and grid component it is best to define an elements col per the device being used. For example:
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-9">
<!-- code in here -->
</div>
</div>
The lg large devices, md medium devices and sm small devices. This is will allow all of your elements to adapt to a device. https://getbootstrap.com/docs/4.5/layout/grid/
Here is more information on the grid system bootstrap uses and how to write responsive code.
Also, to make it easier for custom styling your website you can just use one stylesheet and only link one stylesheet. Your SASS stylesheet will get changed into a .css file, you can write vanilla css in your SASS file and it will remain css.
This is the HTML code: http://ideone.com/ExjCnv
#import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
/* Adding !important forces the browser to overwrite the
default style applied by Bootstrap */
body {
background: url(img/dark.png); !important;
position:relative; z-index:-1;
}
#logo {
text-indent: 500px;
z-index:9999;
position:relative;
}
#links { padding-top: 0.7cm }
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="logo">
<h2>Audhgjhg</h2>
</div>
<div class="col-md-4" align="right" id="links">
Read
Write
Play
Help
</div>
</div>
<div class="jumbotron" style="background-color:#666633">
<h1 align="center">Read books</h1>
<h4 align="center">Enter a bookname:</h4>
<div class="form-group">
<label for="usr"></label>
<input type="text" class="form-control" id="usr">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
The text on line 26: <h2>Audhgjhg</h2> is not displayed in the browser. I tried setting the z-index of the text and the background but it's still hidden. Please help.
The background dark.png used was http://subtlepatterns.com/dark-embroidery/ which consists mainly of the dark grey color #333. Bootstrap was assigning #333 as the text color and making the text appear to not show while it matched the background.
excuse me ... first from this
<style type="text/css">
body { background: url(img/dark.png); !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<style>
#logo { text-indent: 500px; z-index:9999; position:relative;}
</style>
<style>
#links {padding-top: 0.7cm}
</style>
do this
<style type="text/css">
//edited
body { background: url(img/dark.png); !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
#logo { text-indent: 500px; z-index:9999; position:relative;}
#links {padding-top: 0.7cm}
</style>
also i think that it is background: url(img/dark.png) !important; not background: url(img/dark.png); !important;
change all that it should be fine. it works for me.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>A</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
body { background: url(http://images.hngn.com/data/images/full/47684/selena-gomez.jpg?w=650); !important; position:relative; z-index:-1; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
#logo { text-indent: 500px; z-index:9999; position:relative;}
#links {padding-top: 0.7cm}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="logo">
<h2>Audhgjhg</h2>
</div>
<div class="col-md-4" align="right" id="links">
Read
Write
Play
Help
</div>
</div>
<div class="jumbotron" style="background-color:#666633">
<h1 align="center">Read books</h1>
<h4 align="center">Enter a bookname:</h4>
<div class="form-group">
<label for="usr"></label>
<input type="text" class="form-control" id="usr">
</div>
</div>
</div>
</body>
</html>
I've tried margin 0 auto in the css but it didn't seem to work, i'm not quite sure what i'm doing wrong, could anyone help me? I would like to move the text to touch the left side of the container because as of now it is in the middle of the container. The text I'm talking about is the text in the p tags, which are the email, Facebook, instagram, and twitter. Thanks for taking the time to help. Have a good day!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Paulo Pinzon-Iradian
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<p style="font-size:24px;"></p>ppinzon-iradian#hotmail.com</p>
</br>
<p><a>Facebook</a></p>
<p><a>Instagram</a></p>
<p><a>Twitter</a></p>
</div>
</div> <!-- /container -->
<div>
</div>
</body>
</html>
Css:
.navbar-default{
background: #fff;
margin-top:3.5%;
border:0px;
}
.navbar-brand
{
font-family: helvetica;
font-size: 24px;
}
ul, li, a
{
font-family: helvetica;
font-size: 24px;
color: #000000;
letter-spacing: -0.5px;
font-weight: 100;
}
.navbar-toggle
{
border:0px;
}
.col-xs-6
{
margin-top:1.5%;
line-height: 27px;
}
.row
{
width: 92%;
margin-left: auto;
margin-right: auto;
}
.jumbotron
{
background: #fff;
border:0px;
font-family: helvetica;
font-size: 24px;
text-decoration: none;
}
Currently there's a large padding surrounding the p elements. To fix that without overriding it using bootstrap class, add new class no-padding or something then override it on the css targeting that new class.
e.g.
HTML
<div class="container">
<div class="jumbotron no-padding">
<p style="font-size:24px;"></p>ppinzon-iradian#hotmail.com</p>
</br>
<p><a>Facebook</a></p>
<p><a>Instagram</a></p>
<p><a>Twitter</a></p>
</div>
</div> <!-- /container -->
CSS
.container .jumbotron.no-padding
{
background: #fff;
border:0px;
font-family: helvetica;
font-size: 24px;
text-decoration: none;
padding-left: 0;
padding-right: 0;
}
Fiddle
The elements you want to remove the margin are inside a .jumbotron element, this is styled by bootstrap and will add those margins/paddings. Check the docs for jumbotron
<div class="jumbotron">
You can either override the styles by adding !important in your styles (bust me after the bootstrap styles), or use another bootstrap component other thant jumbotron.
If you mean text in .jumbotron class, you can simply remove padding-left in
#media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 60px;
padding-left: 0;
}
}
or simply remove it
#media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 60px;
{
}
Remove the left padding from the jumbotron container, either through your css page or inline styling.
Example:
<div class="jumbotron" style="padding-left:0px;">
// your content here
</div>
or (using css):
.jumbotron {
padding-left: 0px !important;
}
Fiddle:
https://jsfiddle.net/mwatz122/614wjpjh/
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article