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.
Related
It's very simple. I just need to put two lines of text on either side of an image which is centered on my landing page. I don't know how to make it responsive except for using position: absolute. How can I do this without having to use position: absolute.
I tried using flexbox but it seems like it won't let me adjust the position of my text freely as the items are literally adjacent to each other.
Here's the code employing flexbox:
<div class="overall">
<div class="hi">
<p>OH <br>GOSH <br> HI!</p>
</div>
<div class="human-container">
<img src="img/landing page human.svg" onmouseover="this.src='img/landing page human 2.svg'"
onmouseout="this.src='img/landing page human.svg'">
</div>
<div class="my-name">
<p>MY<br> NAME<br> IS <span class="Ray">Ray</span></p>
</div>
</div>
I would go simply by following these steps:
- Add "float: left;" to the following classes: ".overall", ".hi", ".human-container" and ".my-name".
- Add an id(#) to the img and give-it a float:left; and a width:100%; too.
- Give to class ".hi" a width: 5%;
- Give to class "human-container" a width:90%;
- Give to class "my-name" a width:5%.
This should do it.
:D
Problem I've never run into. Searched without resolution but might not know the right search terms to use. So if already answered I beg pardon.
I had this html. (Kinda long so simplified)
<div class="movieabovewrap">
<div class="movieabove">
LINK TEXT
</div>
And I wanted the link to cover all of the movieabove div so I moved the link outside of it as in.....
<div class="movieabovewrap">
<a href="LINK">
<div class="movieabove">
LINK TEXT
</div>
</a>
(it seems to be cutting off the last end div on both)
Anyways when I moved the link outside the div all the sudden I get this vertical whitespace of about 10px above and below the divs which I assume is attached somehow to the a href element. Assuming as I can't get anything to show up when I inspect the elements. Is there someway to remove this vertical whitespace with css? It kinda trashes my design. :( Any help would be mucho appreciated.
Short answer: Using <span> instead of <div> inside <a> should do the trick for you.
Explanation: The a tag renders a text element, if you want it's children to also act as text elements they must have display: inline.
div elements have display: block by default.
span elements have display: inline by default.
Add display: block to the link, either inline or via css:
<div class="movieabovewrap">
<a href="LINK" style="display: inline-block;">
<div class="movieabove">
LINK TEXT
</div>
</a>
</div
or
.movieabovewrap > a {
display: inline-block;
}
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'.
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same line, e.g. to form something like:
----- Alpha - Beta - Gamma -----
This is what I have so far:
JSfiddle
Here, I have the demo working fine BUT it requires a background to work, this isn't a good solution since my background on my site is not a static single color (it's a fixed picture which doesn't move when you scroll).
JSfiddle
So what I need to do is basically fix the first version to work like the second version but without using a background.
I thought of doing something like:
<div class="content">
<div class="line"></div>
<div class="line-text">Some</div>
<div class="line-gap"></div>
<div class="line-text">Text</div>
<div class="line-gap"></div>
<div class="line-text">In a Line</div>
<div class="line"></div>
</div>
Where .line would be an auto width (to fill the left and right sides) and .line-gap would just be say 10px to show the line between the text.
EDIT/UPDATE
Here is another demo, but I would prefer something that is more automatic rather than trying to set the position absolutely because it is for a responsive fluid design...
JSfiddle
If you don't want to use a background, you could do a little trick using the :before and :after properties.
Here's the example jsFiddle, you can change the content/properties to whatever you like and it does what you've asked.
Example below.
HTML:
<ul>
<li class="sub-menu-item" >Example</li>
<li class="sub-menu-item" >Example</li>
</ul>
CSS:
li.sub-menu-item:before, li.sub-menu-item:after {
content: "\2014 \2014"
}
li {
display:inline-block;
}