I have this bare bones navigation that I am putting together and for some reason I am getting about a 40px left margin before the first link starts. I dont have a left margin on the div so not sure why it is happening. Of course it wont look good to be completely flush against the left side of the screen but id like to control any margin size myself.
I could not use jsfiddle for this because inside jsfiddle the error is not there. it renders fine.
With that said, this is the html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
#footer_enhanced {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
line-height: 50px;
float: left;
background-color: #121212;
z-index: 999;
margin: 0px;
left: 0px;
}
#navigation_enhanced {
color: #000;
margin: 0px;
padding: 0px;
height: 50px;
float: left;
clear: both;
}
#navigation_enhanced ul {
list-style: none;
margin: 0;
}
#navigation_enhanced li {
float: left;
line-height: 50px;
}
#navigation_enhanced li a {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #FFF;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
}
#navigation_enhanced li a:hover {
color: #000;
background-color: #fff;
}
.current {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #000;
background-color: #fff;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div id="footer_enhanced">
<div id="navigation_enhanced">
<ul>
<li class="current">home</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
</ul>
</div>
</div>
</body>
</html>
The "unwanted" space doesn't exist in a fiddle by default because they reset (incorrectly labeled as normalize) the css. By default, ul has a padding-left, but jsfiddle clears it.
ul {
padding-left: 0;
}
Related
Pretty simple question that I'm struggling to solve via Google. My main issue is that I can't seem to figure out how to resize dropdown menu box's borders horizontally. I tried max-width command in css, but it only does it for one side, and my text isn't centered inside that box.
Here's my project where I'm practicing my html/css/js skills: https://project01-assh.web.app
#charset "UTF-8";
#import "https://fonts.googleapis.com/css?family=Poppins:100,200,400,500,600,700,800|Nunito:300,400,600,700,800";
body {
background-color: #2250fc;
}
li {
list-style-type: none;
}
.dropdown {
text-align: center;
position: absolute;
top: 3%;
left: 90%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 15px;
font-weight: 555;
display: inline-block;
}
#logo {
position: absolute;
top: 1%;
left: 1%;
color: #ffffff;
text-decoration: none;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 800;
letter-spacing: 1.5px;
}
a {
color: #ffffff;
text-decoration: none;
}
h1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: .5px;
}
#main_button {
position: relative;
transition: .5s ease;
top: 1%;
left: 90%;
color: #ffffff;
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
}
nav ul li a {
display: block;
padding: 14px 24px;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
left: 10%;
top: 50px;
transform: translateX(-70%);
background-color: #fff;
padding: 10px;
border-radius: 15px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
nav ul li ul li a {
color: black;
font-size: 12px;
font-family: poppins, sans-serif;
font-weight: 555;
padding: 8px 14px;
}
nav ul li ul li a:hover {
color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Project01" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project01</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="logo"> <span class="logo">АСБ</span> </div>
<h1> Автоматические Системы Безопастности</h1>
<div class="dropdown">
<nav>
<p></p>
<ul>
<li>Сервисы
<ul>
<li>Something01</li>
<li>Something02</li>
<li>Something03</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="particles-dots" class="particles"></div>
<script src="plugins/particles/particles.js"></script>
<script src="plugins/particles/particles-dots.js"></script>
</body>
</html>
Dropdown menu is to the right. I'd really appreciate if you can point out bad practices/mistakes in my code so far. I'm trying to learn web development the proper way as a long term career.
Thanks for your time and have a wonderful day!
Sorry for such basic request, I hope it's okay to ask it here.
if you want to resize the nav bar, you need to remove the 200px in li:
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
and use padding or margin if you need more space.
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
I just started building a cms, and i have not even gotten to the server side scripting yet but i noticed something about my html tag each time i declare the doctype tag in the html the whole html and body tag is always shortened here is a screenshot http://postimg.org/image/h3lj4ozzd/ i've checked my css and html for any mistake but i can't find any error. i was using firefox to run my pages initially, i even switched to chrome, but the error still comes up. i even tried running it on a windows system with wamp (I'm using linux) but the error is still there.i've tried everything i can lay my hands on and they are not working...pls i need suggestions.Thanks
This is the normal document
http://postimg.org/image/xcahm9bsj/
This is the html file with the doctype in it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to quick score</title>
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<div id = "top_bar"><p>Home</p></div>
<div id = "two">
<p>Database connection was succesful</p>
</div>
<div id = "one">
<ul>
<li><img src = "images/sidebar/dashboard.png" /> Dashboard</li>
<li><img src = "images/sidebar/attendance.png" /> Attendance sheet </li>
<li><img src = "images/sidebar/grades.png" /> Grades</li>
<li><img src = "images/sidebar/students.png" /> Students</li>
</ul>
</div>
</body>
</html>
and this is the css file i'm using
#charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
padding: 0;
border: 3px solid #000000;
}
p {
padding: 0;
margin: 0;
font-family: "Trebuchet MS";
}
a {
text-decoration: none;
}
#top_bar {
padding-top: 5px;
background-image: url(images/back3.jpg);
color: #ffffff;
border-bottom: 2px solid #ffffff;
height: 40px;
width: 100%;
}
#one { background-image: url(images/back3.jpg);
width: 15%;
height: 100%;
margin-top: -16px;
color: #ffffff;
}
#one ul {
list-style-type: none;
padding: 0;
height: 50%;
padding-top: 20px;
}
#one ul li {
padding-bottom: 2px;
text-align: left;
display: block;
}
#one ul li a {
color: #ffffff;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
display: block;
font-family: "Comic Sans MS";
}
#one ul li a:hover {
background-color: #ffffff;
}
#one ul li a img {
margin-bottom: -10px;
}
.position {
margin-top: 5px;
}
#one ul li a:hover {
color: #000;
}
#one ul li:active{
text-decoration: none;
background-color: blue;
padding-left: 48px;
padding-right: 47px;
padding-bottom: 9px;
text-align: center;
}
#two {
width: 81.5%;
height: 200px;
float: right;
padding: 20px 0 0 20px;
}
.login {
margin: 0 auto;
padding: 10px;
background-color: #999;
}
form ul li {
padding-bottom: 5px;
display: block;
}
#white {
display: block;
background-color: black;
height: 40%;
width: 50%;
}
.buttons {
color: white;
margin-left: 60px;
}
.register_buttons {
color: white;
margin-left: 70px;
}
input[type=submit] {
border: 1px solid #f44c0e;
color: #fff;
background: tomato;
padding: 10px 20px;
border-radius: 3px;
}
input[type=submit]:hover {
background: #f44c0e;
}
For HTML5 compliant browsers and a good way to follow the web evolution keep that doctype in place.
Have you tried adding:
html, body{
width:100%;
height:100%;
}
Also you should get rid of your borders, specially on body. Otherwise add:
*{box-sizing: border-box;}
Hi I'm trying to make my maintenance page for my site however when I try and put the main content div in the middle by using margin: auto; however it seems to stay at the top and the only way to pull it down is by using <br /> but i'd prefer not to use that as it looks messy so I was wondering if you has any ideas what's wrong
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div class="topBarcontainer">
<img class="logo" src="images/logo.png" alt="Chattrd home">
</div>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
<div id="mainContent"></div>
</body>
</html>
CSS:
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
white-space: nowrap
}
.topBar {
background: #06C;
height: 40px;
}
#navigationBar {
background: #1f1f1f;
height: 28px;
color: white;
font-family: 'Open Sans';
}
.topBarcontainer{
margin: auto;
width: 1000px;
}
.logo {
padding: 7px;
height: 24px;
width: 98px;
}
#navigationBar ul {
margin: 0;
padding: 3px;
list-style-type: none;
text-align: center;
}
#navigationBar ul li {
display: inline;
}
#navigationBar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
}
#navigationBar ul li a:hover {
color: #FFF;
background-color: #06C;
}
#mainContent {
margin: auto;
width: 500px;
height: 200px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Vertical centering will not work because there is nothing to center - the body will, like all HTML elements by default, be just the height needed to accomodate its contents.
Since your main content is of a fixed size you could simply solve it with absolute positioning:
#mainContent {
width: 500px;
height: 200px;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -250px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Fiddled for your pleasure.
I've searched this site all over and can't find the solution to my problem. First of all here's an image of my problem. (The div's with the "sssss" should expand vertically). So the content of the div should go to the next line when it hits the border. Any advice is very well appreciated.
Image
Here is my code.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<LINK rel=StyleSheet href="styles/StyleSheet.css" type="text/css" media=screen>
</head>
<body>
<form id="Form1">
<div id="header">
<div id="header-center">
<div id="logo">Logo</div>
<div id="search-user">
<form action="" id="SearchUser">
Search User: <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
</form>
</div>
</div>
<div id="nav-menu">
<ul>
<li>Account</li>
<li>Burndown Chart</li>
<li>Projects</li>
<li>Reports</li>
<li>Extra</li>
<li>Extra</li>
</ul>
</div>
</div>
<div id="wrapper">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</form>
</body>
</html>
CSS
html, body
{
padding: 0px;
margin: 0px;
text-align: center;
background-color: #f3f4f9;
font-family: Verdana;
border: 0px;
}
#header
{
width: 100%;
background-color: #0066CC;
}
#header-center
{
margin: 0 auto;
width: 800px;
height: 80px;
}
#logo
{
float: left;
margin-top: 13px;
height: 50px;
font-size: 40px;
color: White;
font-weight: bold;
}
#search-user
{
float: right;
color: White;
font-size: 11px;
font-weight: bold;
margin-top: 25px;
}
#nav-menu
{
width: 100%;
margin: 0 auto;
border-top: 1px solid #003366;
clear: both;
}
#nav-menu ul
{
list-style-type:none;
margin:0;
padding:0;
height: 48px;
background-image: url(../images/menu-ul-bg.png);
}
#nav-menu ul li
{
display:inline;
line-height: 50px;
}
#nav-menu ul li a
{
padding: 0px 40px 0px 40px;
text-decoration: none;
color: Black;
font-size: 14px;
}
#nav-menu ul li a:hover
{
color: White;
}
#wrapper
{
margin: 0 auto;
width: 200px;
border: 1px solid black;
}
It's because you have one long string that the browser won't break on its own. The height will adjust automatically if you break it up into smaller words, if you use the CSS3 word-break or word-wrap property.
Ex: word-break:break-all;
You need to add to your #wrapper styling:
word-wrap: break-word;
This will brake long words like the 'ssssssssssssssssssssssss' one and make it go along divs width.