This is my code:
html,body,ul,li {
margin:0;
}
#container {
padding-left:5px;
height:100%;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right:30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:inherit;
height:50px;
background-color:paleGoldenRod;
position:relative;
left:0;
top:0;
}
li {
display:inline;
}
th, td {
text-align:center;
border:1px dashed grey;
width:90px;
height:40px;
}
.formText {
margin:10px 0px;
}
footer {
background-color:SlateGray;
width:100%;
height:100px;
position:relative;
bottom:0px;
left:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<div id="container">
<h2>Contact Me Directly</h2>
<form>
<label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
<label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
<datalist id="ageList">
<option value="18">
<option value="19">
<option value="20">
<option value="21">
<option value="22">
</datalist>
<label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
<label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
<textarea></textarea>
<input type="submit" value="Submit">
</form>
</div>
<footer>
<p>This website </p>
</footer>
</body>
</html>
I would like my footer to always be at the bottom of the page according to the content displayed in the page. I don't want to use position:absolute because some pages have more content and position:absolute just makes the content hide behind the footer.
How can I keep the footer always at the bottom of the page without position:absolute? or is there a way to use position:absolute but still make the page scroll down according to the displayed content
Just change footer style to this:
footer {
background-color:SlateGray;
height:100px;
position:fixed;
bottom:0;
left:0;
right:0;
}
Apply position: fixed on footer.
footer{position: fixed; background-color:SlateGray;width:100%;height:100px;bottom:0px;left:0px;
}
Apply position: fixed. rather than using position: relative. Your problem will be solved.
you can use this code for position fixed :
footer {
background-color: SlateGray;
bottom: 0;
height: 100px;
left: 0;
position: fixed;
width: 100%;
}
Related
I am learning HTML & CSS and I want to know how can I remove the space above and on the sides of the navigation bar.The navigation bar should be in such a way that there is no space around it.Below is the code.Thanks in advance.
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:none;
}
.sb{
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
You wanted the navbar to not to have any white space around it. So I took you code and did some changed to it.
First is the HTML which I removed your <nav> and <ul> then replaced those parts with <div>.
Code:
<body>
<div class="div">
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<div class="link">
Home |
Profile |
Settings
</div>
</div>
</body>
After that I took your CSS and made changed to it to fit the query made by you.
Code:
.link{
margin-left:80%
}
.div{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
height:10%;
}
.sb{
float:left;
margin-left: 2%;
}
body,html{
margin: 0;
padding: 0;
border: 0;
}
A working fiddle Here
Now your navbar doesn't have any white space up or right or left. Now it's up to your tinker it to fit your need.
I guess, you looking for this.??
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:15px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin:0px;
}
.sb{
float:left;
}
body{
margin: 0px
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
<style>
html,body{
margin:0;
padding:0;
}
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:0;
}
.sb{
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
Add the following style for body and ul tags, so that there is no space around the navigation bar.
margin:0
padding:0
Just add this rule to reset the browser's default margins and the default margins for ul which cause your white space above the navigation bar:
html, body {
margin: 0;
}
ul {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
<style>
html,
body {
margin: 0;
}
nav {
text-align: right;
padding-right: 0px;
padding-top: 0px;
}
ul {
color: white;
background-color: cyan;
padding-top: 19px;
padding-bottom: 19px;
padding-right: 10px;
list-style: none;
margin-top: none;
margin: 0;
}
.sb {
float: left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
<style>
body{
margin:0px !important;}
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:0px;
}
.sb{
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
First, great that you want to learn HTML and CSS. Keep learning, exercising and never stop asking! Times will come when you can help others aswell, keep rocking :)
Second, what you faced are CSS default vales. As for many things websites need to work even if they dont have any css applied to it. The reason for this is that "external" CSS (linking a css file to an html file) was developed years after HTML. Therefore the most HTML elements have default values to guarantee websites dont break. For your specific example the body element has default values too:
body {
display: block;
margin: 8px; /* this is what you do not want */
}
Official list of css default values - https://www.w3schools.com/cssref/css_default_values.asp
There are different approaches to get rid of default css values. In todays web is more likely to add a CSS file that adjust all default values to the same look, this is what Normalize.css is doing. The more radical one is Eric Meyers "CSS Reset", which removes all default styles.
I can highly recommend this Stack Overflow question if you want to go a bit deeper into this topic: What is the difference between Normalize.css and Reset CSS?
Add these lines in your style sheet To reset CSS
body,html{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Please do bear with me I am aware this is mind-numbingly basic but I need to start somewhere and I both can't find an answer and can't find a reason why.
My nav bar does not correspond to my div's border and this is less of a problem but how do I get it so that the nav bar and the header don't overlap when I use the border because as of now the div border is only working on the header.
you need overflow hidden to container.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
overflow: hidden;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Have you thought about adding a 5px top margin to your nav bar, this will account for the 5px border... I think. I'm also still learning. Best of luck, I'll be watching.
Also you always want body to be the outer most thing of what is rendered on the page. So any containers need to be inside of it.
Problem is a) your body tag is in the wrong place (should start just before head, and end just before html tag and b) there is no height declaration on the container.
Adding this code to the CSS:
html,body {
background-color:Lavender;
height:100%;
}
div.container {
width:100%;
height:100%;
border:2px solid purple;
}
and having this to html should work.
<body>
<div class="container" style = "border: solid yellow;">
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</div>
<br class="clear" />
</body>
</html>
I have worked very hard on this website but i have ran into an annoyance that I cannot seem to figure out! I am using Mozilla Firefox and unlike other webpages, when I zoom everything moves out of place! Usually that only happens when you resize but for some reason it is doing it for zoom also!! How can I fix this? Here is the code bellow:) Thanks! P.S. My zoom is at 90%, if there is a way to automatically set the zoom of browser when the user opens the page, please let me know!
*{margin:0; padding:0;}
.container{
width:100%;
height:100%;
background-image:url(backgrounds/background4.jpg);
background-size: cover;
overflow:hidden;
}
body{
width:100%;
}
.mainHeader{
width:100%;
height:100px;
background-color:rgba(0,0,0,0.6);
/*background-color:#182418;*/
/*opacity:0.7;*/
}
.mainHeader nav ul{
margin-right:70px;
float:right;
}
.mainHeader nav ul li{
display:inline-block;
margin-top:30px;
margin-right:20px;
}
.mainHeader nav ul li a{
text-decoration:none;
font-family:Arial;
font-size:25px;
color:#ACACAC;
margin-right:30px;
}
.mainHeader nav ul li a.active{
color:white;
}
.mainHeader nav ul li a:hover{
color:white;
}
.mainHeader img{
margin-top:-25px;
}
.mainArea .panel{
margin-left:25%;
margin-top:2%;
width:50%;
height:620px;
background-color:rgba(0,0,0,0.6);
}
.mainArea .panel h1{
color:white;
font-family:Arial;
padding:50px;
padding-left:60px;
text-align:center;
}
.mainArea .panel p{
color:white;
font-family:Arial;
padding:30px 50px 50px 50px;
text-align:center;
font-size:25px;
}
.mainArea .panel form{
margin-right:33%;
position:relative;
top:-5%;
float:right;
}
.mainArea .panel form .name, .email{
width:300px;
height:40px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
}
.mainArea .panel form .body{
resize:none;
width:300px;
height:200px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:20px;
padding-right:30px;
}
.mainArea .panel form .submit{
width:90px;
height:43px;
background:rgba(0, 0, 0, 0.55);
border:none;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:-3px;
border-radius:10px;
margin-top:-5px;
margin-left:100px;
}
.mainArea .panel form .submit:hover{
cursor:pointer;
}
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="contact.css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jqueryui.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>
<div class="container">
<div class="mainHeader">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a class="active" href="#">Contact</a></li>
</ul>
</nav>
<img class="logo" src="logo.png">
</div>
<div class="mainArea">
<div class="panel">
<h1>Welcome to our contact page!</h1>
<form action="php/mail.php" method="POST">
<input type="text" value="Name" name="name" class="name"><br/>
<input type="text" value="Email" name="email" class="email"><br/>
<textarea name="message" class="body" rows="4" cols="50">What would you like to ask?</textarea><br/>
<input type="submit" value="Send!" class="submit">
</form>
</div>
</div>
</div>
</body>
</html>
And here is the background named background4.jpg Also, if you try to run the code snipet on this site it will get messed up because of the way stack overflow is laid out and because it needs the background image. So copying to a text file would work best.
if your elements get dispersed while zooming or re-sizing your browser window
use min-width and min-height for the containers
that will make them stay in the right way you like them
try to add this line :
.mainArea .panel {
min-width: 790px;
}
Unfortunately there isn't an universal way for browsers to zoom everything. At least not without a whole lot of scripting.
In my opinion it's also pretty weird to design a website and force browsers to 90%.
Zooming isn't what people do a lot (on desktop). Why not design a page at 100%?
I am developing a website using the 960 Grid system.
I have 3 parts to the header. The logo, the navigation, and the login form.
I have media queries set to center both the logo and the login when the page gets below 1614 pixels. The issue is that while the logo centers, the div containing the log in does not.
Here is an screen shot with highlighting around the divs to show the issue.
Webpage
Heres an attempted fiddle
http://jsfiddle.net/6m8K7/
I'm not sure what is causing this.
HTML
<div id="header">
<div id="logoHolder">
<a href="index.html">
<img src="images/Pinnacle_ira logo_web.png" alt="Pinnacle IRA" width="125" height="84"/>
</a>
</div>
<div id="loginHolder">
<form action="https://www.theiracenter.com/customerLoginAction.gsx" method="post" >
<label for="username">Username:</label>
<input class="topLogin" type="text" name="login" />
<br />
<label for="password">Password:</label>
<input class="topLogin" id="passwordText" type="password" name="password" />
<input type="hidden" name="pd" value="C05" />
<br />
<input type="submit" />
</form>
</div>
<br />
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li>GuidedChoice</li>
<li>Pricing</li>
<li>FAQs</li>
<li>Investment Tools</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
CSS
/*Header*/
#logoHolder{
float:left;
}
#logoHolder img{
margin:5px;
margin-top:20px;
vertical-align:bottom;
}
#media (min-width:0px) and (max-width:1614px){
#logoHolder{
width:125px;
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}
}
#loginHolder{
float:right;
}
#media (min-width:0px) and (max-width:1614px){
#loginHolder{
display:block;
margin-left:auto;
margin-right:auto;
}
}
label{
font-family:Arial;
}
.topLogin{
width:175px !important;
height:20px !important;
}
#passwordText{
margin-left:22px;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
color:#888888;
margin-top:20px;
}
#navigation li:hover{
color:white;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
padding-bottom:3.5em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}
Is there any particular reason you have two decelerations of?
#media (min-width:0px) and (max-width:1614px){
Either way, simply adding float:none to the #loginHolder selector should do the trick. -This would need to be placed in your second deceleration of the same break point.
I want each text in each <li> to have the same width as the width of the <ul>. But somehow it doesn't work, the text just keeps going and going... I read somewhere on here that giving <ul> a width will solve the problem, but it doesn't work in my case. This is my HTML:
<div id="chat-wrapper" style="display:none;">
<div id="main-content">
<div id="user-list-wrapper">
<b>USERS</b>
<ul id="user-list">
</ul>
</div>
<div id="messages-main">
<ul id="messages"></ul>
</div>
<input id="message-input" placeholder="Your message here!" autofocus="autofocus"/>
<input type="button" id="datasend" value="send"/>
</div>
And this is my CSS:
#user-list-wrapper {
float:left;
width:100px;
border-right:1px solid black;
height:300px;
overflow:scroll-y;
}
#login-wrapper {
margin-left:auto;
margin-right:auto;
width:50%;
}
#messages-main {
height:320px;
width:950px;
overflow:none;
float:left;
margin-left:20px;
}
#message-input {
width:500px;
outline:none;
height:100px;
margin-left:300px;
line-height:100px;
}
#datasend{
}
#main-content {
width:100%;
height: 350px;
}
#messages {
list-style-type:none;
margin:0;
width:900px;
}
#messages li {
width:100%;
padding:3px;
border-bottom:1px solid #CCC;
}
#user-list {
padding:0;
}
#user-list li{
padding:3px;
list-style:none;
border-bottom:1px solid #CCC;
}
But this doesn't work for me. What do I have to do to achieve what I want in my case? Thanks.
UPDATE: I added the exact code I have.
UPDATE 2: The text exceeds also #main-content. So it's not only the <ul>
If you are using css3 you can try adding
word-wrap: break-word;
to the li css
You need to put 100% for li element. Here's an example, http://jsfiddle.net/HQPGS/
You can put "width: inherit" for li and set a width for ul
you have to add 3 css properties to li to make it:
li {
overflow:hidden;
white-space:no-wrap;
text-overflow:ellipsis;
}
but list-style-type will disapprear with option "overflow:hidden", and i have no idea how to get it apprear.