I'm trying to make a border for the top of a div element. The border is a 1px thick solid line, and it is to make a noticeable division between the footer and the website content. However, I don't want the border to span the whole width of the footer. I'd instead like it to be shorter (by maybe 10 pixels or so on each side) and centered. How should I do this? Does it require me to use an image?
You mean something like this: http://jsfiddle.net/8ZSSc/
Or, if you always wanted exactly 10px short of each side regardless of page size:
http://jsfiddle.net/8ZSSc/2/
Just use the <hr /> tag to make a horizontal line, and set the width for that.
I guess you are looking for something like this:
<div style="width: 95%; border-top: 1px solid; margin: auto;"></div>
Add another div above the footer, add a top border, and use padding to make it narrower:
.footer-line {
border-top: ...
margin-right: 10px;
margin-left: 10px;
}
You could have another very skinny div, just above the footer.
Related
I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
On this page (http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=2), I'm trying to get on the right side, to have the button for "join group" to
Have the same botder width as the div above it
Leave at least a little white space before the ad that comes right below it
I am trying to do something like this:
<div style="width: 285px; float: right; border: 1px solid; padding: 5px;">
But adding the padding just made the div wider, and didn't make any space to the bottom.
Any idea what I can do? Thanks!
Do margin-bottom instead of padding-bottom
For some reason, when I implement the border-left: 10px solid #FF0000 css style for my left column, and the border-right: 10px solid #FF0000 for my right column, for some reason, it throws everything off...
Anyone know why?
Subtract 20px from elements width.
"throws everything off" is a little vague, but here is a stab at it. Have you specified a width for the container of your bordered content? Maybe your 10px borders cause your content to be too wide.
If this isn't the problem, please post some more specific info.
Probably because the border is added to the width of you element. For example if you have a 100px div with a 10px border that will make your element 120px total.
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>