This question already has answers here:
How to select a text node with CSS
(6 answers)
Closed 8 years ago.
In the following HTML is it possible to affect "First Text", eg, giving it a margin, or a width, without affecting the second and third elements.
<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
margin and width never have the value inherit by default, but the size of a container is going to influence the rendering of its children (simply because of where word wrapping will occur).
Don't mix up your code with container and content elements. This way you won't be able to do it like you're willing to, like APAD1 said.
Instead, use container elements and for each content element a new child node. That way, you can access single child elements with the first-child selector.
This works for me:
<div id="highlight">
<div id="first">First Text</div>
<div id="second">Second Text</div>
<div id="third">Third Text</div>
</div>
CSS:
div#highlight div:first-child{margin:10px;color:red}
Working example here: http://jsfiddle.net/B5Ej9/
Update: TL;DR: It isn't possible to do so with the given HTML without any ugly hack!
If there is no chance to change the HTML, you will need some kind of hack to workaround, as (like Quentin) answered, all the child objects automatically inherit width and margin from parent objects in DOM. The following example might work for some indentation on the left margin of the div, but I know: It's an ugly workaround that should just clarify what I mean (and why you might consider getting the HTML to be changed). Here you go, with your original HTML:
<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
And the workaround CSS:
div#first { margin: 20px; color: red; background: grey;}
div#first *:not(:root) { margin-left: -20px; color: blue}
That way, you will add a margin to the first div and inherit it to all the childs (second and third), but everything that is not inside the root will be set to a negative margin on the left. But have a look at the background (http://jsfiddle.net/vag58/), you will notice that the background of all child elements is still inherited and you're never ever gonna change that.
If 'second' and 'third' absolutely need to be children of 'first', then you may use an external style sheet for 'first' and inline style for 'second' and 'third'.
Related
This question already has answers here:
Nesting <p> won't work while nesting <div> will?
(2 answers)
Closed 1 year ago.
If I have this
.outer {
font-size: 2em;
}
<div class="outer">
Some Outer Div Text
<div class="inner">
Some Inner Div Text
</div>
</div>
Both texts are 32px (16px *2)
However with this HTML:
<p class="outer">
Some Outer Div Text
<p class="inner">
Some Inner Div Text
</p>
</p>
The outer text is 32px, while the inner text is 16px.
How come the paragraph tag doesn't respect the parent's font-size like the div tag? I thought they would both work the same since they are both block elements?
Here's a JSFiddle in case I'm not clear: https://jsfiddle.net/scottfwalter/2Lrd6tzm/
Simple answer is you can't nest p tags, if you open the console and inspect you will see the 2 p tags are siblings instead of parent/child, therefore there is no inheritance.
See this answer for more details Nesting <p> won't work while nesting <div> will?
That's because browsers have their's own predefined styles for basic typography. So for example chrome sets font-size: 16px for <p> but says nothing about <div>.
That's why we use normilize.css or reset.css to avoid such missmatching.
Try setting * {font-size: 16px;} - this should do the trick
This question already has answers here:
Background color doesn't work after float
(3 answers)
Closed 9 years ago.
Explanation of code:
I'm creating a bar with three links. I made the bar, and tried to space out the links using the float, text-align, and width. (I'm trying to get the center link centered and the other two equidistant from it, and equidistant from the sides.) However, when I originally did it with 3 divs (the divs other than the "I" divs), the background color disappeared. So I messed with it and realized the float on the third link's div was causing the problem. So I added another div(the final div), and that worked with a little text. However, since I had to put text in it, it threw off my spacing. So I made a div on the other side(the first one) to balance it out. It still throws off my spacing without float however!
Question(s):
Why does having the floatproperty on the final div in a line cause the background color to disappear?
<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
<div style="color:#3C3C3C;float:left;">
I
</div>
<div style="margin-left:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="width:50%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="margin-right:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="color:#3C3C3C;float:right;">
I
</div>
</div>
You have to clear floating by adding for example another div below your final div:
<div style="clear:both;"></div>
Add overflow: auto to your outer <div>:
<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
The problem is that because you are floating elements within another element that isn't floated causes the wrapping element to be rendered as if it is empty.
To fix this, you can add some widths and a float:left; on the wrapping div
Check out this jsbin example which seems to be what you are looking for.
Basically your first div should be like;
<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">
Then you just need to change the widths, and remove any margins or padding.
p.s. You really should consider moving away from inline styles and use an external stylesheet with Id's and class names.
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
I'd like to insert a blank line in my HTML code but I'd like to change the size of this blank line to see if it fits with the rest of the page.
Does someone know how to do this ?
The nicest way would be to put a bottom margin on the element you want some spacing after. The other solutions posted are not semantic and your markup will end up to be a giant mess of spacer elements without content.
CSS is the right way for presentation.
For example if you have two paragraphs, and want some spacing after the first one:
<p style="margin-bottom: 20px;">Blabla</p>
<p>Blabla 2</p>
This is just an illustration, your best bet would be using id / class and a separate stylesheet.
The only other semantic solution I can think of is a <HR> element, but it is a quite problematic one if you want to style it cross-browser (see details on the link).
You could use something like:
<p style="height: 200px"></p>
How about using the line-height css property?
Like this:
<span style="line-height: 50px;"> </span>
You could insert a div and change the height with css?
<div class="spacer"> </div>
CSS:
.spacer {
height: 100px;
}
But a better solution would be to put a bottom margin on the element preceding the space you want.
<div class="some_content">
The stuff before the space
</div>
<!-- space here -->
CSS
.some_content {
margin-bottom: 100px
}
Would give you a 100px space below the content.
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.