I am having a very weird html problem. My main menu is not in its place.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="clear"></div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="78" style="font-size:20pt;"/>
</form>
</div>
</div>
</body>
</html>
and here's the css
body {
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3 {
margin: 0;
padding: 0;
}
p,ul,ol,li {
margin: 0;
padding: 0;
}
#outer {
background-color: rgb(67,68,71);
}
#outer ul {
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li {
float: left;
}
.current {
background-color: rgb(56,63,137);
}
#outer a {
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover {
color: black;
background-color: white;
}
#outer .current a:hover {
color: white;
background-color: inherit;
}
#clear {
clear: both;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#pic {
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content {
position: absolute;
top: 60px;
left: 90px;
}
#forms {
margin-top: 50px;
}
Now you may ask that how come i didn't noticed my menu not in placing during early stages of coding. Well the thing is that i was using borders on wrapper div during coding and everything was in place however as soon as i removed the border the whole thing fell apart.
I think it has something to do with the float not being cleared correctly resulting in pic div messing everything up. I would be really appreciative for your suggestions.
Thank you.
I don't know what you mean by "not in its place", but removing a border suggest you have a problem with collapsing margins.
If that's the case, you could solve it by adding overflow: auto or padding: 1px 0 to the rule where you removed the border.
Replace your
<div id="clear"></div>
with
<br id="clear">
or even better change it from and id to a class. That way you can use it multiple times.
For some reason it doesn't work with the div. But the "br" also shorter so I'd prefer that anyway.
Related
I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.
I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.
I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.
Here is the html5 code (super basic btw!):
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?
Thanks
UPDATE-1:
I've resolved the problem but I don't understand why that's solving it.
In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}
So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?
Thanks.
Thierry
Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.
The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:
-webkit-margin-before: 0
I just began to play around with HTML/CSS and I'm already stuck.
I tried to google my problem but I think I'm missing some keywords to find a solution. Why isn't the Link and Text inside <div id="NavContent>?
DEMO
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scrare</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<div id="NavContent">
<a id="Link" href="/">Link</a>
<div id="Text">Text</div>
</div>
</nav>
</body>
</html>
Once you set elements inside a div as float, they lost their influence on height attribute on parent element.
That said, you can:
Set a height for the div; or
Add a empty <div> after <div id="text"> but not inside, with style='clear: both;'
Easy fix is to add overflow: hidden; to #NavContent.
Or you can add the clearfix solution -
#NavContent:after {
content: "";
display: block;
clear: both;
}
body {
margin:0;
background-color: #ffffff;
}
nav {
background-color: #2a9dfc;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
#NavContent {
border: 2px solid black;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
#Link {
float:left;
}
#Text {
float:right;
}
#NavContent:after {
content: "";
display: block;
clear: both;
}
<nav>
<div id="NavContent">
<a id="Link" href="/">Link
</a>
<div id="Text">
Text
</div>
</div>
</nav>
<main>
</main>
<footer>
</footer>
There are few ways to solve your problem.
Add a suitable height to #NavContent element (like height:200px)
Or
set overflow property of #NavContent to auto
On my site, matprichardson.co.uk, when you click the 'help' button in the dialog in the center of the screen, another dialog pops up containing some content.
For some reason, when this happens, the first two lines of the first paragraph element are strangely indented, as well as the header, which is normally centered.
I've looked at my markup and css a number of times now and I'm really struggling to see why this is happening. Could somebody please point me in the right direction?
CSS
body {
margin: 0;
padding: 0;
}
#maincontainer {
font-family: arial;
margin-bottom: 20px;
}
.dialog {
border: 5px solid black;
display: inline-block;
background-color: white;
}
.dialog p, .dialog ul {
font-family: "Courier New";
font-size: 12px;
}
.dialogtitle h2 {
margin: 0;
padding: 1px 0;
font-family: "courier new";
font-size: 12px;
background-color: black;
color: white;
text-align: center;
}
.dialogtitle {
cursor: move;
}
.dialogcontent {
margin: 10px;
}
.windowsbutton{
width: 70px;
height: 22px;
font-family: "courier new";
font-weight: bold;
font-size: 12px;
border-width:2px;
border-top: 2px solid white;
border-left: 2px solid white;
}
.buttonsurround {
border: 1px solid black;
max-width: 70px;
border-radius:3px;
display: inline-block;
margin: 0 10px;
}
.buttonselected {
border-width: 2px;
}
.windowsbutton:focus {
outline: none;
}
#maindialog {
position: absolute;
top: 220px;
left: 50%;
margin-left: -150px;
}
#helpdialog {
display: none;
width: 500px;
top: 70px;
left: 110px;
}
#helpClose {
margin:0 200px;
}
/*Menu*/
#menu {
margin: 0 0 20px 0;
padding: 0;
height: 30px;
background-color: black;
width: 100%;
}
/*Icons*/
.iconcontainer {
width: 80px;
float: left;
}
.iconcontainer:hover {
cursor:pointer;
}
.foldericon {
height: 40px;
width: 40px;
border: 2px solid black;
border-radius: 0 0 10px 0;
text-align: center;
margin: 0 auto;
background-color: white;
}
.iconhead {
height: 10px;
border-bottom: 2px solid black;
background-color:black;
}
.foldertext {
margin-top: 5px;
}
.iconcontainer h1 {
font-family: "Courier New";
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mat Richardson</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="menu">
</div>
<!--an icon. Lovely, isn't it?-->
<div class="iconcontainer" id="blog">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>blog</h1>
</div>
</div>
<div class="iconcontainer" id="pictures">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>pics</h1>
</div>
</div>
<div class="iconcontainer" id="websites">
<div class="foldericon">
<div class="iconhead">
</div>
<div class="iconmain">
</div>
</div>
<div class="foldertext">
<h1>websites</h1>
</div>
</div>
<div id="maindialog" class="dialog">
<div class="dialogtitle">
<h2>Welcome to matprichardson.co.uk</h2>
</div>
<div class="dialogcontent">
<div class="buttonsurround buttonselected"><input type="button" id="mainOK" value="OK" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /></div>
<div class="buttonsurround"><input type="button" value="H̲elp" id="mainHelp" class="windowsbutton" /></div>
</div>
</div>
<div id="helpdialog" class="dialog">
<div class="dialogtitle">
<h2>Help</h2>
</div>
<div class="dialogcontent">
<p>Welcome to the personal site of Mat Richardson. There's not much to see right now,
but do feel free to have a click about.</p>
<p>Some links you might want to visit (or not, your choice):</p>
<ul>
<li>2toria (another site I own)</li>
<li>My Codepen Profile</li>
<li>My StackOverflow Profile</li>
<li>My twitter account</li>
<li>My LinkedIn Profile</li>
</ul>
<div id="helpClose" class="buttonsurround buttonselected"><input type="button" value="Close" class="windowsbutton" /></div>
</div>
</div>
</div>
</body>
</html>
It's because the position property for your blog, websites,and pics divs is set to relative and therefore it's taking up space. Change it so that they're set to absolute, and the text on your help dialog goes back to normal.
You could add something like:
#blog, #pictures, #websites {
position:absolute;
}
#blog {
left:20px;
}
#pictures {
left:80px;
}
#websites {
left:140px;
}
jsFiddle example
As I noted in my comment:
This is because the dialog is positioned relatively and it is still in
document normal flow. Therefore the content wraps the floated icons
which are at the left-top of the page.
Positioning the dialog box absolutely will fix the problem.
Alternatively, you can add clear: both declaration to the dialog element in order for clearing the floats. Thus the content of relative positioned dialog won't wrap the floated icons anymore.
In each list item I have a text box within a div element.
<html>
<body>
<!-- Window -->
<div id="sample_container_id">
<div class="bucket" id="defaultBucket">
<h3>Default Bucket</h3>
<input type="button" value="Add" class="button">
<div class="innerBucket">
<ul id="tasks">
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
</ul>
</div> <!-- innerBucket -->
</div> <!-- defaultBucket -->
</div>
</body>
</html>
This is the result:
body
{
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p
{
color: #333;
}
#sample_container_id
{
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
margin: 0px;
}
.innerBucket
{
width: 290px;
height: 355px;
margin-top: 40px;
margin-left: 5px;
position: relative;
background-color: white;
}
.bucket
{
width: 300px;
height: 400px;
background-color: #ddd;
position: absolute;
}
.bucket h3
{
float: left;
padding-left: 10px;
padding-top: -10px;
}
.bucket ul
{
margin: 0;
padding-left: 30px;
position: relavtive;
list-style: none;
}
.bucket ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
display: block;
position: relative;
}
.bucket .button
{
background-color:#fbb450;
border:1px solid #c97e1c;
float: right;
margin: 5px;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
Result
As you may notice the first item is indented, and I would like the list items to all be aligned on the left. How do I fix this with the CSS (there probably is a lot of things wrong with my CSS, I was trying everything)?
EDIT
I added some more code. You should be able to replicate the problem now.
I didn't want to post a wall of code :)
Solution
I found the solution to the problem. The problem was actually the <h3> element. The bottom margin was forcing the first element off to the side.
Adding this fixed the problem:
.bucket h3
{
...
margin-bottom: 0;
}
Don't float the divs, if you do make sure to clear them or you get
what FakeRainBrigand got in his pen.
Spell relative right For that
matter take the positioning out of that code, it's pointless.
list items by definition are block elements, you don't need to declare
that either.
Close your input tags.
The float is likely the issue, pushing the divs against some invisible element.
.TaskDiv
{
margin: 0;
padding: 0;
}
ul
{
margin: 0;
padding-left: 30px;
list-style: none;
}
ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
}
Example: http://jsfiddle.net/calder12/Yw4tB/
I found the solution to my own problem. The issue was the margin of the header forcing the div over (see the end of my question). The solution was simple once I figured that out.
Simply adding this to the h3 styling fixed my problem:
margin-bottom: 0;
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?