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;
Related
Ok I'm recreating a PSD I found online for practise. In the header there is a search bar and button. To the right of the button there is extra content taking up space, which I can't get rid of.
I have added a jsfiddle
https://jsfiddle.net/jb7j6ysz/
Please ensure the preview is expanded to the left as much as possible
<!DOCTYPE html>
<html>
<head>
<title>Education Compaony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="branding">
<h2>Education Department</h2>
<h5>A free PSD template</h5>
</div> <!-- /.Branding -->
<div class="directory">
<div class="search">
<input type="text">
<input type="submit" value="Search">
</div> <!-- /.Search -->
<div class="index">
<ul>
<li>A - Z index | </li>
<li>Studenet Login | </li>
<li>Staff Login </li>
</ul>
</div> <!-- /.Index -->
</div> <!-- /.Directory -->
</div> <!-- /.Header -->
</body>
</html>
/* Font Import */
#import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.header{
height: 95px;;
background-color: #FCD05D;
color: #3A302E;
font-family: 'Lora', sans-serif;
}
.branding {
float: left;
margin-left: 200px;
}
.branding h2 {
margin-top: 10px;
text-transform: uppercase;
font-size: 28px;
}
.branding h5 {
margin-top: -20px;
font-size: 16px;
}
.directory {
float: right;
margin-right: 200px;
}
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 0px 5px 12px;
}
.search input[type=text] {
background-color: #FCD05D;
border-radius: 3px;
}
.search input[type=submit] {
background-color: #595657;
color: #FCD05D;
border: 2px solid #595657;
border-radius: 3px;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: -0;
}
.index li {
margin-top: -20px;
font-size: 14px;
display: inline-flex;
word-spacing: 1px;
}
The extra space is coming from the ul where your links are. Since the width is auto, the list section has a greater width than your search section so the search section takes on that width.
You can set padding: 0 to the ul list to reduce some of the space. It has a natural padding to the left. This will still leave some space on the right because of the length of your list. You can set width to the search area to prevent the list from wrapping. Or you could make the search section float left but you will need to adjust padding to make it look symmetrical
Here is an example
https://jsfiddle.net/jb7j6ysz/3/
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 12px 5px 12px;
float: left;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: 0;
padding: 0;
}
I used float for the new fiddle and added padding 0 to the ul. Also adjusted the padding on .search
The index div is in the way. Update your css with this
.index{
position: absolute;
display:block;
left: 40%;
}
The extra space is coming because of your Ul items. Add this in your css
ul{
padding-left:0px;
}
I think your problem is to do with the width of the .index div. Both it and your search bar are contained within the same .directory div. Because both are block-level elements with their width set to the default auto, they take on the width of their parent, which in this case is set by the largest child, the .index div.
By setting the search bar to display: inline-block;, it will only take up as much width as it needs.
.search {
...
display: inline-block;
}
Additionally, the ul used for the .index div has padding-left by default, which you may want to set otherwise.
It's taken me a ridiculous amount of work to get this menu bar looking clean, which is a problem in and of itself. However, I think it's finally coming together. The problem I'm having now is three-fold.
Two questions:
When this is viewed full screen, the menu bar looks great, but as you close in the screen the "run" button drops to the bottom. What is causing this?
How come if I keep closing the window, the middle .toggle list is stacking on top of the "CodePlayer" logo? What do I need to do to make it so that when the window shrinks, the divs get to the point where they'd begin to overlap and stop?
Why is there a tiny bit of gap between the border-right and bottom-border in the middle section of my menu? I've tried 0px padding and it isn't working.
http://jsfiddle.net/ow5zq9fL/
/*-----------UNIVERSAL------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
/*-----------MENU BAR------------*/
#menuBar {
height: 40px;
background-color: gray;
max-width: 100%;
}
/*------LOGO, TOGGLES, BUTTON-----*/
#logo,
#buttonDiv,
#toggles {
vertical-align: middle;
display: inline-block;
width: 33%;
height: 18px;
}
/*-----------LOGO------------*/
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
position: relative;
top: 12px;
left: 12px;
/* background-color: blue;
*/
}
/*-----------TOGGLES------------*/
.toggles {
text-align: center;
border: 1px solid black;
height: 20px;
position: relative;
top: -9px;
width: 300px;
left: 20px;
}
.toggles li {
list-style: none;
display: inline-block;
border-right: 1px solid black;
}
/*----------TOGGLES LIST----------*/
#resultList {
border-right: none;
}
/*-------------BUTTON------------*/
#buttonDiv {
text-align: right;
position: relative;
top: 8px;
right: 12px;
vertical-align: middle;
}
/*-----------BUTTON------------*/
#htmlList {
padding-right: 20px;
margin-left: -20px;
}
#cssList {
padding: 0 25px;
}
#jsList {
padding: 0 25px;
}
#resultList {
padding: 0 20px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<div id="toggles">
<ul class="toggles">
<li id="htmlList">HTML</li>
<li id="cssList">CSS</li>
<li id="jsList">JS</li>
<li id="resultList">Result</li>
</ul>
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
Try this. I added a wrapper and applied everything from #buttonDiv to .wrapper. Then I altered it so that it was centered.
New Code:
.wrapper {
text-align: right;
position: relative;
bottom: 12px;
right: 12px;
vertical-align: middle;
}
and
<div class="wrapper">
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
Add float left
#logo, #buttonDiv, #toggles {
...
float: left;
}
http://jsfiddle.net/ow5zq9fL/4/
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
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.
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?