My page has a fixed header.
When a user does not pass form validation on form submission I display a list of errors above the form each with a link to the form element that produced the error.
However when I click the link to the anchor the element is hidden by the fixed header.
I have seen a number of css solutions that use pseudo class :before to fix this problem, however this cannot be applied to an input element.
Is there an alternative css based solution or am I forced to create a JS work around?
Thanks in advance
The container that has all the error messages you can set the padding-top equal to the height of your header. Then it will off-set the list. You will have to play around with the px to get it to look properly. It's not a perfect solution but it's an easy one.
Here's a quick example as you don't have any of your code provided:
HTML
<div id="header">
Fixed Header
</div>
<div id="error">
<ul>
<li>Error One</li>
<li>Error Two</li>
<li>Error Three</li>
</ul>
</div>
CSS
#header {
background-color: #ccc;
position: fixed;
height: 50px;
width: 100%;
}
#error {
padding-top: 50px;
}
Here it is in jsfiddle form. Hopefully I understood the problem correctly.
Related
I want to make horizontal list of divs that is clickable.
I got something like this:
<div id="header">
<ul id="list">
<li id="column1">
<div></div>
</li>
<li id="column2">
<div></div>
</li>
</ul>
</div>
Styles:
#header
{
height: 200px;
width:500px;
}
a{
display: block;
width: 100%;
height: 100%;
}
The problem is,an "a" element not in the same place as list, and I want the list to be cliackable.
If you want anything to be clickable on your page use javascript event listeners not anchor tags.
When you want an element to be clickable just add an event listener to click action on your client code and define the behaviour of your object.
Use anchor tags only if your object's behaviour is to link to another place.
This will make your code cleaner and easier to read, it will also be easier to place every object where you want it to be.
I created a box in css and put text inside of the box. I would like it to be a list. However, when I try to use it messes up the formatting of the entire page. I also tried the solution here: CSS list-style-type not working, but that didn't work either. My original code is below. My question is, is it the list- style or the box that I created that might be giving me the problem?
<p class = "total" style= "background-color: #C6C29E;opacity:.9;height:2000px;width:500px;float:left;color:black;text-shadow: 4px 0px #aaa;list-style-type:circle;">
<li>Text</li><br>
<li>Text<br></li>
</p>
Thanks
To create a list, you have to wrap your li items in either a ul or a ol:
<ul class="total" style="list-style-type:circle;">
<li>Text</li>
<li>Text</li>
</ul>
I agree with Joseph. It's a bad idea wrapping a <p> tag around an <li> element and using <br> tags this way. You should use CSS to style the content rather than using the <br> tags to do it for you.
If you're wanting to just add list items into its own self expanding box does this help at all or is this not quite what you mean?
<ul class="my-list">
<li>text</li>
<li>text</li>
</ul>
ul.my-list {
background: red;
padding: 20px;
float: left;
}
So I read the solutions regarding making the spacing go away when using inline-block as opposed to floats: display: inline-block extra margin and http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
So if you're using haml and want to put the closing tag on the same line as the next opening tag, is there is a solution besides switching to ERB?
(and no, I don't want to mess with a css property of the parent container and have to override that in all the child elements).
This breaks (has spacing between the anchors).
So is it true that in spite of the recommendations to do such layouts using inline-block as opposed to floats, it seems that floats are still the way to go, especially when using haml?
CSS
nav a {
display: inline-block;
padding: 5px;
background: red;
}
HTML
<nav>
One
Two
Three
</nav>
Workaround (css-tricks one):
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
another one:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_
(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Here's a codepen to experiment: http://cdpn.io/Bjblr
And this worked:
Here's the html if the anchor text is on the same line (same result, but harder to read source html:
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:
<ul class="ImageSet">
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
</ul>
In my CSS, I'm using the following rules:
.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }
This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?
EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.
Try removing float:left as display:inline should suffice
When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.