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>
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
So I am using brackets to code and I am very new to programming I put a div element around my image so I could edit it in css but for some reason the width and heights are not changing
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
.character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class: "character">
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg">
</div>
</body>
</html>
<div class: "character"> is a wrong notation to assign a class to a div. Try it as <div class="character">
You need to update your css to target the image. See below.
.character img{
width:45px;
height:45px;
}
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
img{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class= "character">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
</div>
</body>
</html>
Try this
. character img{
width:100px;
height:100px;
display:block;
}
You need to give the width and the height to the image not the div.
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
#character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div>
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg" id="character">
</div>
</body>
</html>
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.
The div with style contentdetailleft is absolute and so will be positioned to the div with the style container (since container is absolute). You can see that I have set left to 0px and top to 0px just to illustrate this. If you run it you will see the div with contentdetailleft overlap the div with style contentTop as you would expect. This is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Now remove the left:0px and top:0px on the contentdetailleft style (see the HTML below). Now the div with style contentdetailleft is within the div with style contentBottom. How can this be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Thanks
Ian
The reason you are seeing this change in behavior is because the default positioning that occurs when you use "position: absolute;" is "left: 0;". However, "top: 0;" is not default behavior, so when you add that (as you correctly said), ".contentdetailleft" is positioned to the ".container" element.
Because ".contentdetailleft" comes after ".contentheaderleft" in the DOM (*and more importantly, because ".containerBottom" and ".containerTop" are still default position - static), once ".containerdetailleft" becomes positioned absolutely it is pulled out of the normal flow of the DOM and positioned based on it's relative/absolute parent (".container"). At this point it is sitting at the top-left corner of container, on top of ".containerTop", and thus on top of ".contentheaderleft".
You don't need the style "left: 0;" on ".contentdetailleft" once it has been positioned absolutely. If you would like to keep it absolute and have the "top" styling, but not have it overlap/cover ".contentheaderleft", simply position it from the top at the exact height of ."contentheaderleft" (42px), i.e. "top: 42px;".
*see below, all I updated was the top position of ".contentdetailleft"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:42px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
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