I've wanted to replace the letter menu (left hand side) that I have in my personal web site for quite a while. I went looking for a decent accordion style menu and found this one that looked like it would be fairly easy to implement and do what I wanted.
Changed things around a bit so that the menu, by itself, looks like this.
Okay, so far so good. Until I try to drop it into my existing development web pages where it only basically resembles the 'stand alone' menu.
I've looked for conflicts in the CSS - but not being good at it, I found none. Can any of you gurus offer some pointers for me.
My apologies for including the links, but that was the best way, I think, to show what's happening.
I see that others have used the same basic menu but can't find anything resembling what I'm seeing.
//al
(edited this to remove two words - grammar!)
Your menu is embedded within:
<div id="container">
<div class="menu-item" id="menu-item-4">
...
Your #container style creates padding space:
#container {
padding: 0 20px 0 10px;
}
Putting it under the nav style like in your example of the menu by itself should solve the problem:
<nav>
<div class="menu-item" id="menu-item-4">
...
I believe on the first site demo, the author used a reset margin and padding to 0 to all elements, using the * selector, like so: * {margin: 0; padding: 0}, I think you're missing that in your css, for the following:
.menu-item ul, .menu-item h4{
margin: 0;
}
AND also your #container has a padding on the left side, I don't know if its something you wanted, but if you want to make it like in the demo site, you could just remove it:
#container{
padding-left: 0;
}
Related
My team developed the portfolio website.
But we are facing with strange issue.
We pasted this issue in the theme support, but it is not yet solved.
While loading this page, it is giving sometimes like this:
and sometimes like this(We want like this):
How to get rid of this??
I'm not very familiar with Wordpress but if you have access to the CSS that controls the template them maybe you can use Firebug or Inspect Element to find out if the upper and lower divs have any class specifications, and then set the margins to zero in the CSS file like this:
I'll pretend Firebug revealed div classes upperdiv and lowerdiv like this:
<div class="upperdiv">photos</div>
<div class="lowerdiv">photos</div>
in the CSS you could try:
.upperdiv {
margin-bottom: 0px;
}
.bottomdiv {
margin-top: 0px;
}
Hope this helps.
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
The fundamental ideas for this idea for a simple web page format are
a) let the user decide what he wants text to look like
b) make the code as short and simple as possible
In his browser settings (if the application allows it), the reader chooses the typeface, size of text, size of headings (H1, H2, etc.), background color and other defaults. So far, the sole line in the external CSS file: body { max-width: 30em; font-family: Sans-Serif }.
But, a very familiar (and practical) convention is a top bar (title/masthead and/or navigation) with no margin-- it bleeds to the edges of the browser/device, filling the space entirely. The problem is that all browsers have a margin by default.
So, how is the no-margin bar achieved-- while letting the browser default margin work for the rest of the HTML page?
The inherit, reset and unset css keywords seem to get close. And, obviously, one thing that repeatedly appears when researching this notion is { margin: 0; padding: 0; }.
What is the solution for a top navigation bar with no margin and a margin in the main content area below it controlled by the browser default?
Is it even possible?
read the body margin and assign negative margin to header:
<div id="header">Some text to test</div>
<script>
var defaultmargin=$("body").css("margin").replace("px","");
$("#header").css("margin",-defaultmargin+"px");
</script>
You can make whatever changes you want with JavaScript (JQuery is my prefered framework).
For web design, man, you really need to look by yourself. Google is your friend !
What you are asking right is the basic and you certainly won't get a complete course here. I can however advise you to look for HTML/CSS MOOC or so (OpenClassrooms might offer free english course, unless you prefer french ?).
You might also like Bootstrap, if you give it some thought : Bootstrap Website
By all means, Happy Easter !
Put the rest of code between <div class = "rest"> </div> and include the following css.
body {
margin: 0, padding:0;
}
.rest {
margin: 5px
}
You could do a css reset by placing the following at the top of your css file:
* {
margin: 0;
padding: 0;
border: 0;
}
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 3 years ago.
In this test page, the element has a strange extra amount of space on the top:
http://dl.dropbox.com/u/3085200/canvasTest/index.html
I tried putting margin, padding, top all to 0 for body, and padding to 0 for html, but none of it helped.
html
{
padding:0px;
}
body
{
margin:0px;
padding:0px;
top:0px;
}
Try this in css:
h1 {
margin-top: 0;
}
This is a common scenario (logo image wrapped in h1 tag):
I believe this is actually caused by the margin on your h1 element.
You <h1> has default margin-top added to it, so it's pushing the <body> down from the top of the window.
body > h1:first-child { margin-top: 0; }
My console is showing a 0.67em top margin on the <h1> surrounding your top element.
Try this...
h1 {
margin: 0;
}
Well, I'm sure the experts will laugh at this. I started using Expression Web 4 and tried to place the header info for my pages into a file header.txt to include on every page. I changed the file type from html to shtml and used this line:
All okay, except for a pesky extra space at the top of the file.
The solution was this:
Tools>Page Editor Options>Authoring
Uncheck .txt under "Add a Byte Order Mark when creating or renaming UTF-8 documents with these file extensions."
I hope this helps someone else as naive as I.
You can try to put a display flex on your body, it worked in my case
Hope it will help someone :)
I recognize that space at the top. This often happens to me too. In my case there is a hidden break (<br/>) somewhere between the <head> and <body>. When you find this break and remove it, the top space will be fixed!
html > h1:first-child { margin-top: 0; }
I know this post is old, but I wanted to share a different solution that worked for me, for anyone that might come across this same post, looking for help, as I have.
Every solution I found seemed to be the result of an error, but I didn't have any errors, that could see. After over an hour of problem solving and piecing apart one of my past designs, I found this solution:
In the CSS for the DIV that you want attached to the top of the browser, add this one simple line:
#ContentContainer{
border: 1px solid transparent;
};
I'm not quite sure why it works or why it's needed, but it made the gap disappear.