I finally fixed a problem with fading, then ran into another. To keep my tabs on the screen and not cut the top halves, I moved them down a bit: this caused the page content to show above the part where the page content fades below the tabs. Any ideas anybody?
I've already tried adding <br /> tags before the tabs. Here is the code for the test website: it's a jsfiddle! In the jsfiddle, the top halves of the tabs are cut off.
Just add padding to the top of the navigation and increase the height.
.top-nav{
background-color:#181818;
height:55px;
padding-top:20px;
}
I honestly can't remember what other CSS I changed but it was tiny things here n there. This was the gist of it though:
No html { margin... } but this was changed:
.top-nav {
padding: 8px;
}
.nav-container {
background-color:#181818;
height:35px;
position:fixed;
width:100%;
}
Just use the whole CSS because I'm pretty sure that wasn't the only thing I fixed.
Oh yeah and, I don't know what .menu-fade even does, but it sure doesn't seem useful. Removing it doesn't change the layout at all.
Example
PS - seeing <br><br/></br><br /> or any combination thereof makes my foot itch.
Related
hoping you can help. It's been a long time since I've coded without frameworks and such so I am purposely using vanilla html and css as a refresher.
I have begun building a quick website prototype, and I cannot for the life of me figure out why there is whitespace underneath the navbar element and my background section, despite creating css rules specifically for a full viewport background. I want the background section to start directly after the navbar.
Note: In testing, it appears the styling issue is tied to the html and body element rules. I could set the color to match with my background section, but somehow I feel that might cause other problems later..or at least it feels like cheating. Is there another possible solution? Most importantly, WHY is this happening given the css rules I have set? Everything appears to be in order, and inspecting elements has not helped, unless I have overlooked something important.
I can get everything else functioning fine, but I prefer to build in chunks, so the example below will look messy.
Apologies for any sloppiness in my coding. I am primarily a graphic designer.
html, body {
margin:0px;
padding:0px;
border:0px;
background-color:white;
}
Full Codepen here:http://codepen.io/J_Davis/pen/RGLVPv
Thanks!
You can also set the margin-top of class bigBG to -20px;
like this:
.bigBG {
background:#FF5733;
min-height:100vh;
margin-top:-20px;
padding:0px;
}
Happy coding!
Add to your wrapper this props:
display: flex;
flex-direction: column;
It should look like this:
#wrapper {
display: flex;
flex-direction: column;
margin:0px;
padding:0px;
border:0px;
}
Here you have it working
Happy new year!!!
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
I need some expert advice on this as its driving me crazy!!
I have checked through everything and even removed all CSS but I can’t stop this from happening!
In the footer of this website - www.thedevelopists.co.uk, the links are moving downwards about 1px on hover. The crazy thing is though that they don’t bounce back up when you leave, they remain 1px down. Also, to see this error/bug, you have to be scrolled right to the bottom of the page??
If somebody could figure this out I will be so happy!!
P.S This is affected the most in Firefox. In Chrome it behaves a little differently, rather than moving slightly the curser hand flickers like crazy.
It's quit simple. Just put below code in your css.
footer li {
display: inline-block;
width: 100%;
}
This is happen because your li is not clear. There for it happen. Cheers!!!
Try this code as you feel footer Links Jittering/Moving on Hover is due to transition effect
If do not need that
footer a { transition: none; }
As demonstrated here, I've built a fixed menu using unordered lists and a lot of css. I've also included a button with a custom class that redirects back to the frontpage and made it a litter bigger using font-size: 130%. By using line-height: 0; I was able to force all buttons to be the same height. Unfortunately, somehow an extra pixel of height is added to the menu and the big button sticks to the top, while the rest of the buttons stick to the bottom. Apart from seriously triggering OCD, it looks plain ugly when hovering, so I'd like to fix it. I am at a dead end and cannot solve this by myself, so I would like to ask anyone to help me out.
Thanks in advance!
li.menu-titel {
font-size: 130%;
font-weight: lighter;
overflow:hidden;
line-height: 0;
}
Simple format all your li with display:inline-block (instead of inline),
or remove the vertical-align:top;.
I have a tile on my website that flips over when i hover over it. On the back of the first i attempted putting a button. The button hangs off of the bottom and im not quite sure how i can get it below the paragraph i have on the back of the tile. Also, i can't get the header of the tile centered. I tried using
text-align:center;
but that doesn't seem to work.
Here's the code i'm writing up. So if you run it and hover over the first black tile you'll see the text 'eternally rustled'. That's the problematic tile. Any help would be appreciated. Thanks.
I think I have your fix! Using what you gave us I just added two things to the "btile" portion of the CSS so it looks like the one below:
#btile {
width:350px;
text-align:center;
}
and to fix your header problem, I simply added width to the code below:
.webname {
width: 350px;//I added this
font:800 17px/17px"open sans";
color:#333;
text-transform:uppercase;
text-align:center;
border-top:1px dashed #888;
z-index:50;
position:absolute;
text-align:center;
}
Where does the width come from? It's the size of your picture! Just make sure the div width is the same size of the picture and you're set. Here is a JsFiddle that can show you exactly what I did! Let me know if it doesn't work! :)