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!!!
Related
I'm trying to override a CSS attribute that is preventing me from centering a chart I have in a div.
I've seen lots of posts on these but not with importing a chart.
The chart I'm trying to center is from the google visualization API, but I should be able to solve this with just HTML and CSS.
Because the chart comes from Google, there is some code that I need to override, specifically a div that has position: relative
In the inspector, I can uncheck position: relative and the chart centers.
Problem is, I didn't write that code and when I try to override it like this:
#electricalLineChart div div{
position: static!important
}
It still favors the original position.
Here's the css:
#electricalLineChart{
width: 80%;
margin: auto;
}
Here's the html:
<div style="overflow-x:auto;">
<table class="container">
<tbody id="electrical-tables">
<tr id="odd-cells">
<td><div id="electricalLineChart"></div></td>
</tr>
</tbody>
</table>
</div>
I CANNOT use align= "center" in the HTML because it ruins the functionality of my chart.
I think you have other issues since setting a width and margin auto shouldn't be impacted by having position: relative on an element.
But, you probably need to increase the CSS selector specificity to override the incoming CSS. I would inspect the element with dev tools an copy the FULL CSS selector it displays. Then you need to ADD a tag to the hierarchy. Usually, you can do this by adding an ID to the body.
#electricalLineChart div div{
position: static!important
}
should become something like
#mySite #electricalLineChart div div{
position: static !important;
}
This makes your rule MORE SPECIFIC than the incoming CSS so yours will win.
Also make sure you have a space between the value and the ! as well as a ; at the end.
So stopped trying to override stuff because it wasn't working and literally just tried
#electricalLineChart{
display: flex;
justify-content: center;
}
And it works now.
Sometimes I just hate CSS.
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
edit: added a link to jsfiddle, http://jsfiddle.net/h280xb6p/
Im currently practicing responsive design. Whenever the browser window gets below 400px the structure of the content change.
I have this menu that I use the structure of <a>. What I need help with is to change the html code from <a> to <option> whenever someone with a max-width of 400px or lower enter the site.
I know it's possible to change the appearance, like CSS rules with media query, but is it possible to substitute html code with another html code?
Subject: #menu
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
section#menu {
}
}
To answer your question: It's for sure possible to subtitue html code with some other html, this i something you want to do with Javascript/jQuery. You CANT do this with CSS.
To solve your problem you should make 2 elements, one normal menu and one select element. Then show and hide them depending on screen size, take a look at this fiddle http://jsfiddle.net/77khhzpx/
#media (max-width:400px){
section#box1, section#box2{
float: none;
width:100%;
}
#menu {
display:none;
}
#mobile-menu{
display:block;
}
}
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.
Take this code:
#wh_wrapper #slider .scrollButtons.left {
width: 100px;
}
the width of 100px is being applied only to:
#wh_wrapper -> #slider -> scollButtons left
If I do this:
.left {
width: 50px;
}
all the
.left
classes has now a width of 50px, including the one from before.
Now, I completely understand how to avoid this error (setting specific classes, putting .left before #wh_wrapper #slider .scrollButtons.left etc..) what I'm asking is if there is a way to specify properties that cannot be overwritten by "global" properties.
I hope I was able to explain myself.
Thanks
EDIT:
I now understand !important :-)
But look at this other example:
#wh_wrapper #slider .scrollButtons.left {
width: 100px !important;
}
.left {
width: 50px;
}
Now #wh_wrapper #slider .scrollButtons.left will still be 100px, but what about:
.left {
width: 50px;
border: 1px solid #000;
}
since I haven't decalred a border before I can't put an important on it, still the #wh_wrapper #slider .scrollButtons.left will now have a border property.
Any way areound this?
Yes, put !important behind them:
.class{
height:100px !important;
width: ...etc
}
Watch out though: Internet Explorer 6 and previous versions simply ignore !important, while IE 7 supports them. More info on this can be found here or here.
!important is something to consider, butyou should try to avoid it. Most of the times it can be avoided by building a better html/css tree or adding a class (try to keep them generic though ;)).
#EDIT: You should always put the most generic selectors on top, and the build down to the more specific ones. for example: put a img{} selector on top to provide a global specifier for all your images, then you go down more and more specific.
wrapper img{}
wrapper container img{}
wrapper container div.something img{}
and so on. Don't try to overdo the classes and ID's, the more generic your html/css is the better. containers and wrappers are often overused and unnescessary. Try to write good semantic html and keep html and css seperated. Don't use css when you should us HTML (and vice versa)
Often it is better to create your whole html file, and when everything looks good, provide css for the finishing touch.
Tried !important?
I tested your code in Opera, Chrome, FF and IE and all prefer the first line over the second one, no matter what the order of the rules is. In the sample you pasted there's a space missing in ".scrollButtons.left" - if I use that code then it (of course) always matches the second rule. Are you sure this isn't the problem?