Slider image and background repeat? - html

I have a slider that for some reason is half obeying margin 0?
Also, is there anyway I can make the top bar background not have such a large white border around it? I'm trying to make it start right underneath the browser url bar but it seems to leave a fairly large gap?
http://ispiked.net/tests

Add position: relative to the div with class="oneByOne1". That should fix the slider.
As for the top bar, add margin: 0; to both the body element and the p element inside .topbar - afterwards you might want to add something like padding-top: 15px to that same p element.

Also, is there anyway I can make the top bar background not have such
a large white border around it?
tried CSS like
html, body { margin: 0px; padding: 0px; }
to reset the layout at the beginning?

Related

Body content eaten by navigation bar

I have looked for other answers on SO that should answer the question, but I'm having a hard time finding relevant help.
On my webpage, I have two nav bars, one each for the top and bottom. My problem is that my "body" is getting eaten up by the two nav bars. I would prefer to have the content scale to the edges of each nav bar rather than extending into them.
The sample code can be seen in this fiddle: http://jsfiddle.net/qLjcao3p/
Thanks for all help.
The reason your content is displaying under the header and footer is because the header and footer have fixed positions. These elements space is not taken into consideration when rendering your page. So the content will be generated as if the nav are not there.
Adding margins as suggested will solve the problem by giving extra white space that will allow you to scroll from beginning to end for your content.
Are you using jQuery mobile?
Adding some margin or padding on the body will help. If that is what you were looking for.
// em or rem values recommended
body {
margin:60px 0 40px 0;
}
You have only to add margin to body like:
body{
margin : 60px 0; // 60px for top and bottom side and 0 for left and right side
}
Try this example
Add a padding to bottom and top of your container:
#bodyContent {
padding:60px 0;
}
60px looked fine. That is really the hight of your Nav.

Header overlaps other text / images

I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/

Twitter bootstrap background behind the navbar

I have a navbar with a navbar-wrapper class which makes it floating at the top center of the browser. I'd like to have a rectangle zone behind it filled with blue color. How should I do it?
Consider this page http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
I'd like to add a blue filled area before body and behind the navbar.
UPDATE
I have managed to do something similar to what I wanted by adding an empty jumbotron at the beginning of the body and by setting
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
}
The problem is that it has rounded corner and the two top corners leave an annoying white space as you can see http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
Any idea on how to work around it?
UPDATE
It was easy
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
border-radius:0px;
}
assuming your navbar-wrapper class is 'navbar-wrapper'
.navbar-wrapper {
background-color: blue;
}
or, if like the example you link to
.navbar {
background-color: blue;
}
The basic idea for this might be using z-index. You said, before the body and behind the navbar.
Try this:
body {
// write body font, font-size, color etc
}
Then you can use z-index to make the navbar float over it (But remember, each element always floats over the body, so you don't need this; but still if you want to use it)
.navbar {
z-index: 2; // 2 to make sure, that others stay under it always
background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}
After using this, the navbar will have a rectangular div floating behind.
Note: This will be the background for whole of the div, not for just a small portion of it.

Placing image above div pushes content in other places

I'm trying to place an image above the top bar of a div on my website on the left side of where the navigation bar is. My Attempt
It should look Like this
And I would like it to look Like this
I've tried multiple things such as placing the div for the image in different spots in the code, and changing css elements for the div, but everything seems to push the other content images out of place on the website
add this ...
.photo {
position: relative;
top: 4px;
}
and change the margin on #container to...
#container {
margin-top: -1px;
}
Your css isn't in very good shape, but, using your methods here's how to do it:
remove the margin-top from #container
add vertical-align: top to the img inside #photo
change the top in #extraDiv1 to 246px
change the top in .horizontal to 218px
I guess that should do it.

Messed up absolute positioned image on my page

On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}