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.
Related
I am trying to use css on an <ul> but for some reason I can't figure out why it won't apply. I am trying to style the list into a menu bar for practice but am unable to get it to register. Can anyone see what I'm missing?
I have tried #menu ul{} #menu ul li{} but neither of those work either.
#container {
width: 1050px;
border: 1px solid grey;
margin: 0 auto;
}
#header {
height: 100px;
padding: 10px 0;
}
#brand {
float: left;
}
h1 a{
font-size: 40px;
font-weight: 100;
text-decoration: none;
color: #861BFF;
}
#searchBox {
float: right;
background: linear-gradient(#E4F2B9, #B7E953);
width: 400px;
height: 50px;
padding: 20px 20px 0 20px;
}
.text {
float: left;
width: 200px;
padding: 5px;
font-size: 15px;
color: #E36A0C;
background: white url(./images/search22px.png) right center no-repeat;
}
.submit {
float: right;
font-weight: bold;
padding: 5px;
color: white;
background: #A751D6;
font-size: 15px;
}
ul {
list-style: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Maths Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="maths.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="brand">
<h1>Maths the Fun Way</h1>
</div>
<div id="searchBox">
<form method="get">
<input type="text" class="text" name="searchBox">
<input type="submit" class="submit" value="Search a Topic">
</form>
</div>
<div class="clear">
</div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Online Tutorials</li>
<li>Get a Private tutor</li>
<li>Sign Up</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
The above is the full code. I have tried in both firefox and chromium and the problem is present in both.
Your code works perfectly fine as Adam mentioned.
See https://jsfiddle.net/kabsw9gr/
#menu ul {
margin: 0 0 10px 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(#E4F2B9, #B7E953);
}
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>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
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 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;
}