I know that this has been addressed in many places, but the template I modified was a bit quirky and I believe that I know what is causing the problem. I just don't know what to do to fix it.
The template sets the left and right borders to 200px. I think what it needed to do was make 2 more columns instead of a border that size. I want the partial grey lines on the sides of the page to go all the way down but they don't. I know it's because the content doesn't go all the way down, but for the life of me I can't figure out what to do with this. Should I just start this all over from scratch?
I apologize ahead of time for the page quality it just has random information in it to hold places.
link to page
Site
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
}
#banner {
text-align: right;
background-color: #E39A2D;
padding: 0px;
margin: 0px;
color: #ffffff;
}
/ here is where it goes a little wrong*/
#outer{
border-left: solid 200px #E39A2D;
border-right: solid 200px #E39A2D;
background-color: #ffffff;
height:100%;
}
#inner{margin:0; width:100%; height:100%; }
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
border-left:2px solid #564b47;
height:inherit;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
border-right:2px solid #564b47;
height:inherit;
}
#content{
position: relative;
margin: 0px;
height:150%;
}
I'm not looking to make it full page length that I know how to do. I'm just looking to extend the lines all the way down the left and right sides.
Thanks ahead of time.
The borders you want to edit are the ones from the #outer div:
#outer{
border-left: solid 200px #564B47;
border-right: solid 200px #564B47;
}
Anyway your code seems a bit weird, using borders for layout is not the right way to go and it will give you problems. Check this out: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Related
I want to know how I can manage something like this in css.
I mean the M, in my case this is a picture of a letter, which have to go over a border.
I try it on tipeeestream on a event list, and I've tried some things, but doesn't work. The problem is, that I don't get a good resource about their css style and I have to get a informations about the browser about their css sytle.
Can someone help me out please?
Edit: This is my css code in their editor
.event .left {
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: black;
}
.left {
position:relative;
width: 50px;
}
.left:after {
content: "";
position:absolute;
overflow:visible;
width: 100px;
height: 100px;
display: block;
}
.event .middle, .event .right {
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: black;
}
.event.middle-event .middle, .event.middle-event .left, .event.middle-event .right{
background: transparent;
border-style: none;
}
.event.last-event .middle, .event.last-event .left, .event.last-event .right{
background: transparent;
}
You can try with absolute and relative positioning for each of the elements, the background, the M, and the "eanwhile".
http://codepen.io/ruchiccio/pen/zBoGXY
<div id="background">
<div id="m">M</div>
<div id="title">eanwhile</div>
</div>
#background {width:500px; height:100px; background-color: yellow; border:4px solid black; position:relative;}
#m {font-size:220px; position:absolute; top:-80px;}
#title {font-size:70px; position:absolute; top:10px; left:180px;}
As the commenters mentioned, please include the code that you have tried so far next time.
Using CSS, the easiest way to do this is set the element with the border (I've chosen the class .box) to have position:relative;. Then put the image in the box, and set its position as: position:absolute;. After this, you can move the image around freely, relative to the .box. Here is an example: http://jsbin.com/dimonilife/edit?html,css,output
You can set overflow: visible to the element containing the image and then give the image negative margin top.
eg:
<div style="overflow: visible;">
<img src="..." style="margin-top: -40px" />
...
</div>
I have styled them using inline styles only for demo purposes, the styles should be applied using classes if you want to follow best practice.
I would like to achieve a look using bootstrap like this:
If you see the lines that say Top Hit, Artists and Genres I was hoping that I could put it on the top line of a panel like this:
I would like to put the text like "Top Hit" on the top of the panel.
Thanks, couldn't figure this out and hope you guys might know :-)
You will have to make use of negative margin to achieve this.
Say you have the HTML as:
<div>
<h1>Artists</h1>
</div>
Then you need CSS as:
div{
height:100px;
width:100px;
border:2px solid black;
margin-top:10px;
text-align: center;
}
h1{
width:50px;
margin-top:-10px;
margin-left:auto;
margin-right: auto;
background:white;
}
Explanation:
Inside the div, align the text in the center. Give negative value of margin-top of h1 to place on the top of border-line of div. Now give some width and margin-left and margin-right as auto, this will center the heading.
See the fiddle: "http://jsfiddle.net/kboutd9q/1/"
See the screenshot as:
You can try like this-
*{margin:0;padding:0;}
div {
border: 2px solid #ccc;
height: 200px;
margin: 10px auto;
position: relative;
width: 300px;
}
h3 {
background: #fff none repeat scroll 0 0;
height: auto;
left: 20px;
padding: 3px 5px;
position: absolute;
top: -15px;
}
<div>
<h3>Test</h3>
</div>
I have couple of rectangle boxes aligning in 1 column straight and each boxes has a content in it. Previously I have this below:
.frmPhases
{
width:800px;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
It displays just fine but with 1 flaw, its width isn't consistent. So every new boxes come in, I have to set its width manually base on its content's maximum width. (This requires id, which would make my CSS code REALLY long)
Now I improved the code to this:
.frmPhases
{
width:auto;
display:inline-block;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50p
margin-left: auto;
margin-right: auto;
}
Now it has consistent width, but the rectangle boxes isn't centralized. The only way to centralize it if I would to manually key in the margin-left, which looks fine but on different resolution it does not. Any idea how to centralize it?
I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.
i am making a website, where the scroll bar is not showing in any browser.....in firefox i can use down key to move downwards in chrome it worst...i am showing my codes below and i used div tag for division of page..
any suggestion:
globalheader-->at top of page;
globalnav-->should be at left hand side with fixed position no effect of scrolling.
globalcontent-->at the middle of page, here i show all data and results.
globalright-->at the right hand side of page-
css code:
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; height: 101%;}
body{ padding:0px; margin:0px; }
#globalheader{width:930px; height:28px;background:#fff; z-index:1; position:absolute;
margin: 15px 200px 0px 200px; padding: 1px; float:left; border:0px solid; }
#globalnav { float:left; margin:120px 0px 0px 0px; padding:0px; background:#FFF; z-index:2;
position:fixed; left:0px; overflow:visible; width:150px; height:auto; border:0px solid #ababab;}
#globalright{ margin-top:50px; height:auto; width:205px; position: absolute; left:1055px;
right:0px; top:50px; border:#cdcdcd 0px solid; }
#globalcontent{ margin:50px 105px 20px 215px; border:#aaa 1px solid; height:900px;
float:left; width:761px; border-top:none;}
For #globalcontent's style use, min-height:900px;, instead of height:900px;
Also, 100%, not 101% for html's height.
More importantly, consider using a standard, tried-and-proven layout, like "The Perfect 3 Column Liquid Layout" (et cetera) instead of reinventing the wheel unnecessarily.