I have text and want to give the text a left and right border which vertically extends over the entire webpage. This is my html
<div id="vLine">
<h1>text</h1>
</div>
and this is my css
#vLine {
height: 100%;
width: 50px;
border-left: 3px solid black;
border-right: 3px solid black;
Now, even though I set my height to 100%, it still like a tiny 2px gap between the top of the line and the top of the webpage, it stretch over the entire page and connect till the top of the page. Why is this gap there? I am using the chromium browser, and i'm guessing this gap will vary depending on browsers but how do I get rid of this gap completely regardless of the browser?
Hm okay so what I tried way,
#vLine {
margin: -10px;
}
and it worked, turns out that gap which looked like just 2px was 10px but yea, it fixed it.
Related
I am trying to stick my pop up to top and make it a bit smaller to fit the screen.
Here is my landing page URL - yogavoga.com/2weekdiet
Any help will be appreciated.
.modal-content {
margin: 5px auto;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
width: 90%;
}
I'm not sure if this solves your question in full, because your sample code is a bit short and it doesn't show the element itself. I tried visiting your website, but can't find the element. So it is very difficult for us to say what you actually want.
margin is the space around your div element, in this case your modal. With your code you say your browser to put your element at the top, (0 margin at the top), and do the rest automatically. It does that and will center your element based on the width of your element.
You can scale your element with width. Make it smaller by reducing the percentage.
.modal-content {
margin: 0 auto; // 0 from top, left, bottom and right auto.
background-color: #fefefe;
border: 1px solid #888;
border-width: 3px;
width: 60%; // Width of your element.
}
TIP: remove the margin and padding presets from your body to have your element at the absolute browser border.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
I have a <div> element and I have added 15px margins for the border.
Please have a look at the html & css codes.
HTML
<div id="test">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, mazim nemore postulant qui ut,</p>
</div>
CSS
#test{
width:800px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;**
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}
So according to my css stylesheet margins are set to 15px. (I could have used shorthand notation margin:15px). When this is run in the browser only top and left margins are set to 15px and obviously there are more than 15px margins from bottom and right. Why does this happen even when we have defined margins for right and bottom?
Is not it necessary to define margins for all the sides?
By default, your div sits at the top left of the viewport—or 15px from it, because of the margin on the top and on the left.
If you had another div to the right of this div and one below it, you'd see that the margin was 15px on all sides. At the moment, there is open space to the right and underneath the div, so the margin means nothing. It's like putting a margin on the Earth: it won't push it any further away from outer space. :-)
I'm not too sure what you are trying to achieve. But, here are a few questions? If the div is displaying block why do you need to set the width and right margin at the same time? What are these ** for? Basically if you remove those ** and the width you should be fine. Here's the resulting css...
#test{
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}
And here is a JS Fiddler which is hopefully what you are trying to achieve
Your element is exactly where it should be when all margins are set like that. You might just be mixing up the terminology a bit, let me clarify.
(I apologize for the casual English, but I find this helps explain complex concepts better.)
Margins do not resize the element to fit the area around them. Nor do they resize the window. Rather, they let elements keep their default height/width and place a buffer around them, telling other elements "you can come this close but no closer!" Even the window obeys... it puts 15px distance between the top-left walls and the element. The other two sides (the bottom and right side) are clearly further away though, so this margin does not affect them at all.
If your goal is to have the element stretch out to fill the window, with a 15px buffer on all sides, then this CSS uses the method you need:
#test{
position: absolute;
left: 15px;
top: 15px;
right: 15px;
bottom: 15px;
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}
If you want the window itself to size down to the element's size (plus the 15px buffer), you will need some Javascript coding instead, as CSS does not currently have that capability. Numerous tutorials exist on the internet if that's what you need.
From what I can tell, your element is exactly where it should be with margin:15px; all around. The "extra" space you are seeing is the rest of the body filling the browser window. I threw together a JS Fiddle using a second copy of your div and colors so you can see exactly what is going on.
The first <div> and the second both have 15px margins all the way around. This results in a 30px gap between them. If we were to define them both as display:inline-block; you would see a similar 30px gap between them horizontally.
Remember, the CSS box model uses margins to define the area directly outside the border of your element.
I am making a Tumblr theme and I'm having to get creative to make my pages look the way I want them too.
One issue I'm running into is that I want a green border and a max width of 150 on any images on individual pages, but the template for individual pages is used for text posts on the index page, so my index page images are being set to have borders and a max width of 150px, which is not right.
Luckily there is a code on tumblr that lets me execute certain code of someone is looking at the index page. So is there any way I can make a second div that negates the border and size rules in the first div? Here is my code:
.text img{ //for individual pages
max-width:150px;
padding: 3px;
margin: 0 5px 3px 0;
border: 3px solid #52B472;
}
.notpage img{ //for index page
max-width: 500px;
border: none;
margin: 0px;
padding: 0px;
}
HTML:
<div class="text">
<div class="notpage">
In a perfect world, there would be no borders or max width on images in this div.
</div>
</div>
Sadly, the CSS from the 'text' div carries into the 'notpage' div. So does anyone know of any way I can negate the first div's CSS in the nested div?
Try changing
.notpage img{ //for index page
to
.text .notpage img{ //for index page
If that doesn't work, try this:
max-width: 500px !important;
border: none !important;
It's not very good practice, though.
Okay this page
http://www.cg-hq.com/?s=test
you will see my test board that the border line is not all the way down. I adjusted for height certain size but if content is not that long it does not go down all the way
http://www.cg-hq.com/
Here you will see it is fine as i added width 600px. But if you go to first link it is broken cause it is longer.
Please help me as i am going crazy. I tried to set height to 100 percent and also set min height. I put it back to original for someone to help.
The page that is correct only has a div#r_sidebar on the right. The test page has both the div#l_sidebar and div#r_sidebar stacked below. You'll need to sync up some of the #l_sidebar styles to match #r_sidebar if you want these to stack and look like one div.
In your styles.css file on line 257 add this:
#l_sidebar {
border-left: 1px solid #E2DDDE;
border-right: 1px solid #E2DDDE;
float: right;
font: 11px/18px Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0 19px 20px;
width: 294px;
}