I am working on this site: http://www.problemio.com and the blue bar image is spilling about 5px over to the bottom beyond the border of that div.
Any idea why that is happening?
Thanks!
Your #layout div is inside your .nav_bar div. Place the layout div after and outside of the nav_bar div and it should look more correct.
Because the background iamge is on the .nav_bar.
Try putting the background image on .nav instead, also remove the width.
.nav_bar .nav {
background: url('http://www.problemio.com/img/ui/problemiomainbluebar.png');
height: 40px;
margin: 0 auto;
position: relative;
z-index: 20;
}
.nav_bar {
background-repeat: repeat-x;
border-bottom: 1px solid #462C1F;
border-top: 1px solid #462C1F;
margin-top: 5px;
}
Because you're putting the background image on the outer container (.nav_bar). It should probably be on the .nav element instead.
Need something else Boss?
.nav_bar .nav {
height: 50px;
}
Related
I have some stupid problem but it bothers me quite a lot. I already tried some things but nothing works so maybe someone of you will have a soultion.
I have a centered picture inside div and as you can see on the picture the border of the image on the right side overlapping a little bit the padding of the div. I tried different things but I canno't "push" the image to the left.
Both img and div width have to be set as 300px.
Overlapping border
and heres some code for img and div
img {
width: 300px;
height: auto;
border: 2px solid rgba(115,186,155,.5);
border-style: dotted;
border-radius:8px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#first {
border: 1px solid rgba(115,186,155);
padding:15px;
width: 300px;
}
I'm trying to get the white background behind the title to remain at the width of the text, not run all the way to the right of the screen, as it's doing now:
http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/
It should look like this: http://www.jmakhotels.com/images/title-tag.jpg ... but I can't figure out how to set the width so that it's dynamic for the different title lengths. This should be simple, but it's driving me insane! That .header-title element should simply be the width of the text + 10x padding on the left and right.
Here's the CSS for the blue div (which will be an image bgd), and the title element:
.main-header {
background-color: #009cff;
width: 100%;
height: 300px;
}
.header-title {
margin: -58px 0 0 18px;
padding:10px;
background-color: rgba(255,255,255,.8);
width:auto;
}
Thanks so much to anyone who can help me figure this out.
Setting display:table on the .header-title rule will fix the issue (without messing the margins).
Your .header-title (h2) is a block element, it should be a inline-block element to grab the width of the element itself.
However, your header-title can be placed inside the main-header instead of below the element.
A quick fix would be to move the .header-title element from below the .main-header div to the inside:
<div class="main-header">
<h2 class="header-title">This will be the title</div>
</div>
You want the header title to stick to the bottom of the main header, you can do this by giving it an absolute position. First we need to give the main header a relative position:
.main-header {
position: relative;
}
Now we can position header-title to the bottom of the main-header element:
h2.header-title {
position: absolute;
bottom: 0; <- stick to the bottom of main-header
left: 1em;
}
You can remove the margin from the header-title class in your CSS, because you're already telling header-title to stick to the bottom of main-header.
Change .header-title to display:inline-block then add margin-bottom: -36px; to .main-header
So:
.main-header {
background-color: #009cff;
height: 300px;
margin-bottom: -36px;
width: 100%;
}
.header-title {
background-color: rgba(255, 255, 255, 0.8);
display: inline-block;
margin: -58px 0 0 18px;
padding: 10px;
}
Also don't need width:auto
Try adding the style display: inline-block;
I am assuming .header-title is being used on a div that surrounds the title. You also shouldn't need width: auto;
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
This is what I'm trying to achieve, and have come pretty close:
This is my CSS:
li {
float: left;
position: relative;
padding-left: 55px;
background: url(../../images/separator.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 87px;
}
a {
font-size: 15px;
line-height: 67px;
}
I'm almost there, but there are a few problems. The only way I came up with to have the menu items vertically in the middle of the separators was to use line-height. But now of course when hovering over the links the hover is the height of the line-height, and I don't want that.
Also: is there a way to have the menu items go "inside" the separator images, like in the picture? The separator image is a transparent png. If not I'll just decrease the padding on the menu items to try and get them closer.
First method:
Give the link a height, position it 50% from the top, half the height back to top:
a {
font-size: 15px;
height:30px;
display:block;
position:relative;
top:50%;
margin-top:-15px;
}
Demo
http://jsbin.com/ovaqix/1/edit
Second Solution
Make the a element display:table-cell and same height as li, then use vertical-align:
a {
display:table-cell;
height:87px;
vertical-align:middle;
}
Demo
http://jsbin.com/ovaqix/2/edit
Table-cell doesnt work in IE7
Have you tried changing stating a height in a:hover ?
To have the menu items go inside the separators, I think that you need to create after and before pseudo elements, with the border hack to generate triangular shapes. Something in he line of:
a:before {
border-top: 38px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid black;
}
If you provide more details, I can be more specific.
I'm trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I'm missing something, there doesn't seem to be an easy way of doing this! The closest I've come to what I want is:
<style type="text/css">
#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.
Any suggestions gratefully received - this is driving me mad!
In your #wrapper2:
bottom: -4px;
Will make it move 4 pixels downwards to overlap the other line.
(Tested in Safari, works)
Try removing both the padding-bottom and margin-bottom on both wrappers (set to 0), then add it back in on the inner one only until it looks right.
OK, I had a go, and this works for me. I had to put position relative on both wrappers, which then allows you to push the inner wrapper down a couple of pixels from it's original location.
<html>
<head><title>test</title></head>
<body>
<style type="text/css">
#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
</body>
</html>