I have the following code:
<div id="sub-title-div">
Hello world
</div>
#sub-title-div {
background: #FFE640;
position: relative;
top: 0px;
left: 30px;
width: 901px;
height: 137px;
line-height: 13px;
}
I found that if I remove the 'Hello World', the #sub-title-div will shrink and become invisible. Is there an easy method that I can do this more elegantly?
Thank you
If you don't need to support IE6, you can use the min-height property.
#sub-title-div {
min-height: 137px;
}
put when you want to remove text, then div will maintain its height
Use
min-width:901px;
min-height:137px;
if you want to have the DIV have the same dimensions even without content.
It could be your doctype? It doesn't dissapear for me. See the sample page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#sub-title-div {
background: #FFE640;
position: relative;
top: 0px;
left: 30px;
width: 901px;
height: 137px;
line-height: 13px;
}
</style>
</head>
<body>
<div id="sub-title-div">
</div>
</body>
</html>
Use a pseudo-element. This is similar to #iTake's answer, adding an , but it keeps the extra space out of your layout and text selections.
<h1 class="no-shrink"></h1>
.no-shrink::after {
content: '\200B'; /* zero width space */
}
Related
How do I use margin or padding for pseudo element :before to give enough space between image and number
Look here in this link for screenshot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<ul>
<li>city</li>
<li>email</li>
<li>adress</li>
<li>0202020202</li>
</ul>
</div>
</body>
</html>
the code is here
Thanks a lot in advance for your help
Another solution is to show the pic as a background. Then you can positioning easily your icon.
ul li:nth-child(4)::before {
content: '';
background: transparent url(image.png) no-repeat right top;
background-size: contain;
position: absolute;
width: 25px;
height: 30px;
left: -30px;
top: 0;
}
Here in your code
Based on your desired prnscrn
You need to play around with the margin-left of the :before pseudo selector and put bottom on 0. With the below CSS it should result correctly:
Here's a working fiddle.
CSS
li:nth-child(4)::before {
content: url('https://image.prntscr.com/image/RsidxDk_QzytthM_zz4H8Q.png');
position: absolute;
margin-left: -2.7em;
bottom: 0;
zoom: 0.8;
}
Use zoom in this instance to reduce the size and use for margin-left the unit em so it will take the font-size of the element. (Be also aware that there are a lot of errors in your provided CSS).
So I am experimenting with pure css layouts, and immediately I have become stuck. I have the following html and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<link type="text/css" href="site.css" rel="stylesheet" >
</head>
<body>
<div id="header">
My Site
<div id="search-area">
<form>
<input type="text" id="search-box" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div id="sidebar">
Account Name <br>
Edit My Account
</div>
</body>
</html>
#header {
background-color: #151B54;
height: 30px;
width: 100%;
}
#logo {
position: relative;
left: 10px;
color: white;
font-size: x-large;
font-weight: bold;
text-decoration: none;
float: left;
margin-top: 3px;
}
#search-area {
position: absolute;
left: 200px;
margin-top: 3px;
}
#sidebar {
float: left;
width: 100px;
border-right: double;
}
When I view this in Chrome I get the rendering that I was expecting:
However, in IE I get the following:
Notice how there is a massive blank area to the left of the sidebar. Why is that showing in IE?
I get the same problem in Safari and for the same reason: you're not clearing your floats in #header and #header isn't quite tall enough to contain all of its floated children.
If you increase the height of the header to 31px, you should (but maybe not) get the desired layout. A better approach is you add overflow: hidden as a clear fix, that will make all of the children of #header fully contained with #header and that will stop them from interfering with the layout of the next piece:
#header {
background-color: #151B54;
height: 30px;
width: 100%;
overflow: hidden;
}
Live example: http://jsfiddle.net/ambiguous/EUmyN/
A rule of thumb with floated elements is to always make sure they're cleared either with overflow: hidden on their container or, if necessary, with an explicit <div style="clear: both;"></div> at the bottom of the container.
Also, while we're here, you rarely need width: 100% on a block element such as a <div>. If you're positioning it or floating then maybe you'll need something like that but not for a plain <div>; block elements are full width by default.
Try clearing your online cache. Oftentimes the css file is cached and using an older version causing this type of behavior.
May not be the problem, but the first action you should take when trying to troubleshoot unexpected results on style.
I'd like to create a div that has the same width as the text's length inside it.
I can do it without problem when the div is inside a DOM element that has enough width to fit the text in.
But when I put my text holder div inside another div that is not wide enough the text will be fractioned into lines even if I set the text holder div's max height and the container div's overflow to visible.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body{
background: #c0c0c0;
}
#wrapper{
margin: auto;
width: 200px;
height: 300px;
border: 1px solid yellow;
overflow: visible;
}
.text{
display: inline;
min-width: 200px;
max-height: 19px;
line-height: 19px;
font-size: 19px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</div>
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</body>
</html>
Here's a picture of that:
http://i36.tinypic.com/331ix53.png
I'd like the text inside the "wrapper" DOM element to be in ONE line like the text outside it (and of course to be overflowed)
You can do this by adding the CSS white-space property to your .text class:
.text{
white-space: nowrap;
/* other css declarations */
}
In action here.
IE6: when I place a partially transparent image in a div, the radio buttons in that div that overlap the non-transparent pixels of the image become unclickable. Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
div
{
position: relative;
width: 500px;
height: 300px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
}
</style>
</head>
<body>
<div>
<input type="radio" value="1" name="1"/>
</div>
</body>
</html>
If you test the code, you can also try moving the button from (60, 40) to (40, 40) where the image is transparent, and voilà - the clicking is back in business again.
This bug might, or might not, be related to the IE6 links transparency bug, but I'm not knowledgable enough to grasp any resemblence.
Have I done something wrong? Or how can I circumvent? Is there some other option apart from removing the _filter:progid?
Haven't found any real solution to the problem, so use one of the following workarounds:
make image 100 % transparent where the radio button is (keep good margin, it's shape is probably not "round" but square or rectangular),
remove the image entirely,
combination of the above. :)
Have you tried setting the z-index of the radio button to higher than that of the transparent div?
div
{
position: relative;
width: 500px;
height: 300px;
z-index: 1;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
z-index: 999;
}
I have a container div. Width: 80%, margin-left: 10% and margin-right 10%. The problem is, the container is displaying to the left in all the browsers I check. If I change the value of margin-left to 20%, it looks ok.
I will supply code if necessary but is there anything obviously wrong here? Isn't 80 with a margin of 10 on each side correct to center a div?
GF
I tried your setup, and it works just fine.
You should check the spelling and syntax of your CSS, there is probably some error that keeps it from working. In Firefox you can open up the error console and reload your page, and it will tell you about any CSS errors.
You can also use margin-left: auto; margin-right: auto; to center the element.
Here is the code of the page that I used to test the CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<style type="text/css">
div { width: 80%; margin-left: 10%; margin-right: 10%; background: #ccc; }
</style>
</head>
<body>
<div>asdf</div>
</body>
</html>
has the parent element of the div a specified witdh?
Try
width: 100%;
for the parent Element
try set theese:
<html>
<head>
<style>
.container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
Testing page
</div>
</body>
</html>