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
Related
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
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.
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>
My final goal is to have two "textArea" elements parallel to each other. Each "textArea" should occupy 45% of the screen. Problem that I am facing is, when I include 'Content/site.css' in _LayOut.cshml, width of "textArea" elements always stays the same. I tried changing the width of "textArea" in CSS but that had no effect. Please see the code below.
site.css has the code to restrict the width of "textArea". I commented that code; and tried changing the width of "textArea" and that had no effect. Then I removed the site.css completely. Then width of "textArea" started responding to the changes made in CSS.
//Index.cshtml
<div id="d1">
#using (Html.BeginForm())
{
<div>
<p>
<textarea id="T1"></textarea>
</p>
<p>
<textarea id="T2"></textarea>
</p>
<p>
<input type="submit" value="Create" />
</p>
</div>
}
</div>
//CSS
body
{
width: 95%;
}
#d1
{
border-color: blue;
padding: 10px;
}
#T1
{
border-color: red;
padding: 10px;
float: left;
width: 45%;
}
#T2
{
border-color: green;
padding: 10px;
width: 45%;
}
///_Layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
(BundleConfig)
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/s1.css",
"~/Content/bootstrap.css"
//"~/Content/site.css"
something is overriding your css. try addind !important after your css so it dosent get overridden.like :
T1{
width: 45% !important;
}
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