I have a transparent navigation bar that is fixed, and i am trying to get an image, or even just text aligned to the left. The following is the html code and css code I am using:
-------------------------------------------html code------------------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Home</title>
</head>
<body>
<div id="navigation">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
<div id="content">
Content Here!
</div>
</body>
</html>
-------------------------------------------------CSS Code------------------------------------------
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
text-align: center;
top: 0;
width: 100%;
color: #ffffff;
height: 20px;
padding-top: 5px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation a:visited {
color: white;
}
#content {
width: 80%;
padding-top: 70px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
Thanks for any help!
-Aaron
You could use css floats.
CSS
#navigation div.block-left {
float: left;
}
#navigation div.block-right {
float: right;
}
HTML
<div id="navigation">
<div class="block-left">
Put stuff here!
</div>
<div class="block-left">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
Because both blocks are floating left they will stack in order from left to right.
Also, you shouldn't be using anymore as afaik its deprecated. Better options would be or
I think you will need to explain further, but if I correctly understood what you want, you might try this:
#navigation {
background-image: url('path/to/img.gif');
}
Related
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
body {
background-color: rgb(30, 21, 120);
}
p {
color: white;
font-size: 20px;
}
.package {
border: 4px solid white;
border-radius: 70px;
margin: 60px 0px 60px 0px;
background-color: rgb(37, 110, 194);
}
p.package {
color: white;
font-size: 25px;
padding-left: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="package">
<div nowrap>
<p>Recommended Package</p>
<button value="Purchase">Purchase</button>
</div>
</div>
</body>
</html>
I am trying to make a box that text in it and I am trying to put a button to the right of the text. However, whenever I make the button float to the right or nest divs, the button ends up being under the text, or the entire box breaks. I also used display: inline on divs (which broke the box). I want the button to look like this:
However, it looks like this:
Add display: inline; to the <p>. The default is block, which means that the <p> will extend across the whole width of the screen. Setting it to inline will mean that it just takes up how much space it needs.
body {
background-color: rgb(30, 21, 120);
}
p {
color: white;
font-size: 20px;
display: inline;
}
.package {
border: 4px solid white;
border-radius: 70px;
margin: 60px 0px 60px 0px;
background-color: rgb(37, 110, 194);
}
p.package {
color: white;
font-size: 25px;
padding-left: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="package">
<div nowrap>
<p>Recommended Package</p>
<button value="Purchase">Purchase</button>
</div>
</div>
</body>
</html>
add display: inline-block and vertical-align:middle to p tag
I am trying to create list items that highlight when hovered but when I use inline, it works where the list items are horizontally next to each other but when I use inline block (so I can set height and width), they get pushed vertically below each other.
Can anyone find my issue?
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Master.css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="navBar">
<img id="imgLogo" src="Images/logo_netflix.png" />
<ul id="navBarRight">
<li id="liLogin" class="navItem"><a runat="server" href="Account/Login.aspx">Login</a></li>
<li id="liRegister" class="navItem"><a runat="server" href="Account/Register.aspx">Register</a></li>
</ul>
</div>
</form>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Css:
/* Universal */
body {
font-family: "Arial Black", Gadget, sans-serif;
background-color: #DEDEDE;
margin: 0px;
}
/* Navigation Bar */
div#navBar{
height: 50px;
margin: 0px;
background-color: #000000;
box-shadow: 3px 3px 1px #888888;
}
#imgLogo{
max-height: 100%;
max-width: 100%;
margin: 0px 0px 0px 10px;
}
ul#navBarRight{
height: 50px;
width: auto;
margin: 0px;
padding: 0px;
display: inline;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
display: inline-block;
color: black;
list-style-type: none;
height: 100%;
width: 100%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background-color: gray;
}
How about using float instead of inline or inline block. https://jsfiddle.net/37oseq80/2/
ul#navBarRight{
border:1px solid;
width:500px;
height: 50px;
margin: 0px;
padding: 0px;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
float:right;
color: black;
list-style-type: none;
height: 100%;
width: 40%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
And ofcourse dont forget use clear:both after the last child of the ul.
You have width: 100% in the CSS rule for li.navItem- that way the nav items will take the whole width of the parent element and get placed below each other as you describe.
Make that width smaller - try 20% (or a fixed pixel value) as a beginning and then gradually change it until it looks the way you want.
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.
I am having trouble vertically centering my labels/fields in my form. I have centered the content horizontally but now would also like to add vertical centering. When I run my code i can see that the fieldset padding is off. The value of the padding on the top is less than the value on the bottom. I figure for the vertical centering to occur they should be equal. Here is my code...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<header id="pageHeader">
</header>
<nav class="mainNav">
<ul>
<li>Home</li>
<li>Photos</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src="NewLogo3.png">
</nav>
<div class="contact">
<h1>Get In Touch</h1>
<form action="index.php" method="POST" >
<fieldset class="boxShadow">
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name" class="boxShadow"/>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email address" class="boxShadow"/>
<label>Message:</label>
<textarea name="message" placeholder="What's on your mind?" class="boxShadow"></textarea>
<input type="submit" value="Send message" />
</fieldset>
</form>
</div>
<footer id="pageFooter">
<p>Thanks for visiting my website</p>
<span>© 2013</span>
</footer>
</body>
</html>
html, body, h1, h2 , ul, nav, img{
margin:0;
padding: 0;
font-size: 1em;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
body{
background: #777777;
height: 100%;
}
nav{
background: #40B3DF;
height: 100px;
font-size: 2em;
width: 100%;
border-bottom: 1px solid black;
}
nav ul{
position: absolute;
top: 55px;
white-space:nowrap;
margin-left: 100px;
}
nav li{
display: inline-block;
background: #A8CB17;
padding-bottom: 0;
border-radius: 8px 8px 0 0;
border-bottom: 2px solid #A8CB17;
margin-right: 10px;
-webkit-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 7px 0px rgba(0,0,0,0.75);
}
nav a{
text-decoration:none;
color: #004158;
padding: 10px;
}
nav img{
position: absolute;
right: 50px;
top: 15px;
}
nav li:hover{
background: #17649A;
border-bottom: 2px solid #17649A;
}
p{
padding-top: 3em;
color: #454545;
text-align: center;
}
h1{
color: #393939;
font-size: 3em;
padding: 1em 0 0 1em;
text-shadow: 2px 2px 3px rgba(23, 23, 23, 1);
margin-bottom: 1em;
}
footer{
border-top: 2px solid #393939;
background: #40B3DF;
position:relative;
bottom:0;
height: 60px;
width: 100%;
text-align: center;
}
footer p{
display:inline-block;
margin: 0 auto;
padding-top: 1.5em;
color: #004158;
}
footer span{
position: relative;
top: 7px;
right: -45px;
}
textarea{
height: 150px;
width: 200px;
padding: 1em;
}
label, input[type=submit]{
text-transform: uppercase;
}
input, label{
display: block;
margin: 0 auto;
padding: 1em;
width: 200px;
}
input[type=submit] {
margin-top: 2em;
border-radius: 8px;
font-weight: 700;
}
fieldset {
height: 550px;
position: relative;
width: 60%;
text-align: center;
background: #676767;
margin: 0 auto;
margin-bottom: 2em;
/*border: 0;*/
}
The gap at the bottom of the form is due to the fact that your fieldset has a height of 550px, but your content does not fill that height. Remove the height, and adjust margin/padding from there.
As for the padding on the fieldset, browsers add padding to fieldsets by default. To make your site more consistent across browsers, use a CSS reset, like the HTML5 reset style sheet. That essentially overrides all of a browser's default styling. When using it, apply it above all of your other CSS styles. As for the padding itself, there are a few ways to manage it.
To adjust a certain side, you can use padding-top, padding-bottom, padding-right, or padding-left.
You can adjust top/bottom, left/right using padding: 10px 15px;, which would give you 10px on top and bottom, and 15px on the left and right.
You can also specify top, left/right, and bottom with padding:10px 15px 5px.
Margins are set the same way, just replace "padding" with "margin".