Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div within a tag. The a tag has certain styles like color etc, which are also applied to the div tag. I do not want the styles of a tag to be applied to the div tag. Is there an easy way to do this?
As others mentioned this is how CSS works, child inherits properties of its parents and if you don't want inherited property, you have to manually override.
But, there is small feature, special value auto value - if you use id for valid property eg. width that element won't get inherited value, but default calculated by browser.
http://jsfiddle.net/G3WUw/
HTML
<div class="general">
<div>
Width set to 200px by general rule<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="special1">
Width set to 300px by specific rule<br>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="special2">
Width set to default value calculated by browser<br>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
CSS
.general div {
background: lightgreen;
margin: 5px 0;
width: 200px;
}
.general .special1 {
width: 300px;
}
.general .special2 {
width: auto;
}
This is how CSS (cascading style sheets) work. You would need to do.
a div { color: #f00; }
To override the color you set on the parent <a> tag.
As the <div> tag is within the <a> tag, the CSS styles applied to the <a> tag will be inherited by the <div> tag.
You can simply apply a CSS class to the <div> tag which has the CSS styles that you need. So the class applied to the <div> tag will override the parent <a> tag styles.
Related
I'd like to create a box around some text, with the border stopping at the point of the title. See below for example.
I've found this in an earlier question, but as it's now 10 years old I'm wondering whether it's out of date, or whether there is a better fix.
I've attempted a similar method myself, and am more or less there. I'm curious whether there is a go-to method for achieving this or whether my method is fine.
.welcome-box {
border: 1px solid #e75d14;
padding: 0px 20px;
}
.welcome-box h2 {
margin-top: -18px;
background-color: #fff;
display: inline-block;
padding: 0px 10px;
}
<div class="welcome-box">
<h2>WELCOME</h2>
<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</div>
<fieldset> and <legend> tags do that behavior by default, but the semantics police may be upset if it's used for something other than form controls. Regardless the <fieldset> content categories are more than enough to cover any purpose a <div> is permitted to have.
Demo
* {
margin: 0;
}
legend {
text-align: center;
}
legend h2 {
padding-bottom: 0
}
<fieldset class="welcome-box">
<legend>
<h2>WELCOME</h2>
</legend>
<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum
text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</fieldset>
I am displaying a simple HTML markup in Chrome mobile emulator and I observe that the size of the rendered text gets suddenly very large when text length goes beyond a certain threshold (I observe the same issue on a physical device):
<html>
<body>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</body>
</html>
renders like this:
But
<html>
<body>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</body>
</html>
renders with a larger font:
Why is that so?
Use css to set the font size manually and instead of using a specific number of pixels(pixels is the default) to determine the size use em like this.
body{
font-size: 1.5em;
}
This forces the HTML to keep the text size proportional despite the browser or window size.
You could use inline css as well like this.
<BODY>
<span style="font-size:1.5em;">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</span>
</BODY>
This happens because when the browser determines the font size, based on pixels, it pays no attention to the size of the screen that it is being displayed on. However, when you use em the browser bases the size on how many pixels it has to work with.
This happens because browsers have native CSS sheets that they apply to markup when they display it - that is why many front-end frameworks use a variant of normalize.css.
NOTE: As to why the number of characters changes the size of the font, I do not know, you'd have to refer to that browser's default style sheet. It may also have to do with the fact that your text falls between body tags and not paragraph tags, anchor tags, header tags, etc.
Add following code in <head>. Browser thinks that is desktop version and try to scale it. that why it’s so small:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm trying to align to the left an image with a width which is relative to the page width. There are couple of unfortunate constraints which I cannot change:
the image has a wrapper,
I cannot apply width to the wrapper because class responsible for the width is applied to the image (and I cannot change that too :D),
the solution must be CSS-only.
The structure looks like this:
<p>Lipsum...</p>
<div class="align-left">
<img src="http://lorempixel.com/1000/1000/" class="width50" alt="lipsum" width="1000" height="1000">
</div>
<p>Lipsum...</p>
CSS:
.align-left {
float: left;
background: red;
padding: 10px;
}
.width50 {
width: 50%;
height: auto;
}
See: http://jsfiddle.net/xnt27crz/2/
Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.
More facts:
The closest I got was to float the image, not the div (so it is 0px high), but it was awful and caused other issues.
I think that this can be achieved with flexbox, but I'm looking for IE9+ support.
I'm looking for a "safe" solution because it will be then used by many developers in many scenarios that I cannot predict.
Edit: The real case is much more complicated, hence the constraints. You can see the example here: http://jsfiddle.net/n1kayb2o/3/. Note that the structure inside the editor is different than the input HTML. There's additional wrapper which glues together the figure and the drag handle that it has and some other elements that may be needed (e.g. an overlay).
Tough problem. I had to read the spec to help you out and here is my result.
It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")
Why?
Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width
If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
Lets do the "math" for your case
Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)
min(max(1000, 1990), 1000) = 1000
As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image
Summary
In your case the floated div will get the width equal to the real width of the image.
Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.
This is an example https://jsfiddle.net/n1kayb2o/5/
But if you want it more responsive, that max-width of the container (figure) will not exceed it's container - then it could be much more complicated. Especially if you want your class image30 to have for example 30% of it's container even if image inside it is more wider.
If I understood your question correctly, you can just add all the styles to the image itself.
.align-left .width50 {
float: left;
width: 50%;
height: auto;
padding: 10px;
background: red;
}
.align-left .width50 {
float: left;
width: 50%;
height: auto;
padding: 10px;
background: red;
}
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="align-left">
<img src="http://lorempixel.com/1000/1000/" alt="lipsum" width="1000" height="1000" class="width50">
</div>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
Edit: this doesn't solve issue (after OP clarified the question) as the parent div still collapses. But I'll keep it here, someone might be interested in it in the future.
Can't you just do the width 50% to your align-left div, and then do a 100% on the image? Now the div would be 50% of the page, and left floated, while the image is 100% inside this div?
I really don't know if this is the solution or not because it seems too simple..
And maybe I've misunderstood your answer.
Anyway,
Greetings and good luck!
So I have a web page the content of which I would like to be focused in a center portion with a white background, some 800 pixels wide. The side of the page will be in blue.
The problem is that I don't seem to be able to extend this center div consistently down to the bottom of the page. (The page in question is here.)
<html>
<head>
</head>
<body bgcolor = "#1DAEEC">
<div class = "bodyDiv">
<div class = "accueilBanner">
Logo and navigation items
</div>
<div class = "belowBanner">
<div class = "searchBar">
Search bar content
</div>
<div class = "barredContent">
<div id = "rssNews">
News Feed
</div>
<div id = "descriptif">
Text description here - very long and extends down below the lowest item on the searchBar
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The blue cuts off after the end of the content of the searchBar. I suspect the problem arises from the fact that the searchBar floats left and the barredContent is in absolute position. But there isn't much I can do to tinker the descriptif, since the rssNews floating off to the right and I need to continue having the descriptif wrap around as such :
____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem | RSS NEWS |
| C |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| O |lorem ipsum lorem ipsum lorem ipsum lorem | |
| N |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| T |lorem ipsum lorem ipsum lorem ipsum lorem | |
| E |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| N |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
| T |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
Here's my CSS:
html {
max-width: 800px;
height:100%;
margin: 0 auto;
}
body {
height:100%;
font-family: "Lucida Grande", Tahoma;
font-size: 14px;
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}
.bodyDiv {
min-height:100%;
width:800px;
background-color:#FFFFFF;
margin:0px;
padding: 3px;
}
.accueilBanner {
max-width: 800px;
text-align: center;
position: relative;
}
.belowBanner {
position: relative;
max-width: 800px;
}
.searchBar {
float:left;
width:25%;
font-size: 13px;
}
.barredContent {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 73%;
}
#rssNews {
float:right;
width: 33%;
margin-left: 2%;
margin-bottom: 5px;
font-size: 10px;
}
#descriptif {
text-align:justify;
}
PICTURE:
Is it possible to fix this using only CSS? Or is JavaScript necessary? If so, then what script?
The problem is that .barredContent is absolute positioned.
If you change the style of .barredContent to
.barredContent {
float: right;
width: 73%;
}
it should work as you want.
You can then also remove the height and min-height style properties from your body tag and its first child element.
I hope to have helped you :)
Here is a quick example of how you could achieve this. What you need to do is to add this to your css:
html, body {
width: 100%;
height: 100%;
}
Once you have added this you can now set the height of your divs to 100% so to take the full height of the page.
Here is a FIDDLE show this in practice.
You could more easily solve this problem by putting #rssNews outside and next to .barredContent instead of inside, and adding static width to them, but, if you want a CSS-"hack", this is the only one I know of
.html, .body, .mydiv { height: 100%; }
I'm not sure if it works anymore, but if it does, remember that it used to force the scrollbar to appear because 100% height is more like 102% of what you can actually see in the browser, so you will have to reduce the height to about 98%, if not 97%. It depends on the browser.
Just want to ask a few questions about this example:
What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;
Also, how does one get those vertical dividers? Again as far as I know you use that in a table and only display certain borders by which you get a vertical rule effect.
But what's the best way these days to get this effect? Having html5 and css3 in your toolbox..
Thanks in advance!
Try this
HTML
<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
CSS
.outer {
background: #734e91;
padding: 12px;
}
.wrap {
margin: 0 auto;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #734e91;
display: table-cell;
border-right: solid #a175c4 1px;
}
.sub:last-child {
border: 0px;
}
DEMO UPDATED
jsFiddle demo: http://jsfiddle.net/yDXLp/3/
<style>
footer {
background-color: #eee;
margin: 10px auto;
}
footer h2 {
font-size: 1.5em;
font-weight: bold;
}
footer > div,
footer > .divider {
display: inline-block;
vertical-align: middle;
}
footer > div {
padding: 1%;
text-align: center;
width:30%;
}
footer > .divider {
font-style: normal;
height: 240px;
border: 1px solid #888;
-webkit-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
</style>
<footer>
<div>
<h2>Our Client</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>Pay Rates</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>About US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
</footer>
I recommend using box-sizing: border-box; (an alternative way to the standard css box model).
What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).
The standard box model adds them to the calculated with of 33% (33% + borders + paddings in our case).
HTML markup:
<div class="footer">
<div class="footer-item item1"></div>
<div class="footer-item item2"></div>
<div class="footer-item item3"></div>
</div>
CSS:
.footer {
box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}
.footer-item {
width: 33%;
float: left;
}
.footer-item + .footer-item {
border-left: 1px solid black;
}
Checkout Twitter Bootstrap(http://twitter.github.com/bootstrap/), Gumby Framework(http://gumbyframework.com/)
These frameworks may provide you readymade functionality for the horizontal bar. Else use borders. Set all borders except right as transparent in color
The css3 way of doing columns is using "column-*" family of properties
They are now supported by all major browsers and there should be no problems with them.
Personally I use these styles in my home site and they provide pretty flexible (perhaps with some small shortcomings) layout formatting.
The best way depends on what you want to achieve. How should the columns behave to resizing of the window etc.
If I was doing something like in the picture I would probably use a fixed width so I could have control of the line width for the text.
By using inline-block you can achieve columns that are collapsed and put under each other on a smaller screen (like a phone)
Try to figure aout the desired behavior first.
EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.
Correct me if I'm wrong but I think that the css3 column property is for multiple columns for the same text body.