I have a webpage full of DOM elements, and I want to take all h3s out of that page and display them inline next to each other at the top of the page. The question is - is that even possible?
<h3>I want</h3>
There are tons of other content between them so...
<h3>These headers</h3>
Keep in mind the're separated by many DOM elements...
<h3>To be displayed</h3>
Luckily no other h3s between them...
<h3>Inline next to</h3>
Thank you for trying to help :)
<h3>Each other </h3>
Here's jsfiddle where I tried to use absolute positioning, but I'm pretty sure it's gonna be hard to take this way (margins):
http://jsfiddle.net/zLbuP/
I need the code to be working at least for IE7 and above and I cannot use any JS/jQuery (it will be rather easy to do with jQuery though). Of course I cannot edit the html itself too.
Any ideas, or impossiblu? ;)
This is very simple to do with jQuery/Javascript?
I just messed around a bit and came up with this: http://jsfiddle.net/zLbuP/19/
The code just gets the content from all the H3's, removes them and creates a new, combined H3.
//When then DOM is ready
jQuery(document).ready(function($) {
//Cache the content of the headings to a variable so it may be removed before creating a new H3
//this allows us to select the new H3 without having to use more complex selectors
var h3text = $('#WhatIHaveNow h3').text();
// remove the old H3's now that we have their content
$('#WhatIHaveNow h3').remove();
// create a new, empty H3 at the top of the parent div
$('#WhatIHaveNow').prepend("<h3></h3>");
//insert our cached content
$('#WhatIHaveNow h3').text(h3text);
});
Unfortunately, you can't avoid using JS. You can set all h3 tags to an absolute position and have them all at the top but you need to use JQuery to set their margin. I have made a small script to set the margin dynamically for each h3 tag, based on the width of the previous sibling:
var margin = 0;
$("#TryMe h3").each(function () {
margin += $(this).prev().width();
$(this).css("margin-left", margin + "px")
margin += 20;
});
You can see a live example here: http://jsfiddle.net/VezCA/2/
You might be able to use nth-child; i.e.
h3 { position:absolute; left: 0px; top: 0px; }
h3:nth-child(1) { margin-top: 15px; }
h3:nth-child(2) { margin-top: 30px; }
IE7 doesn't support nth-child, though, and it's pretty hackish even if you could get it to work how you wanted it. As others have said, it's easy to do in jQuery or plain JS.
Related
TL;DR: Wondering if there's a CSS property that can break content where HTML doesn't naturally:
Baby
Buggy Bumpers
instead of
Baby Buggy
Bumpers
The only way I can think of to do it is to add where you don't want the line to break, but I'm working in WordPress, which strips those.
This is to graphically style a site's name on the home page. The site name is part of the nav, so it's inside an <li>, using grid layout.
Luckily in my case, setting the width with a dimension that is relative to the font size seems to break the way I want at all viewport widths:
.my-brand a {
width: 16ch;
text-align: end;
}
white-space: nowrap and such elements won't work with the "baby buggy bumpers" example because the need is to break after one specific word. Just wondering if there's some way to specify in a way similar to nth-child(2).
Made a Codepen to play with.
If you can't use Javascript and can't add tags in the string like :
<div class='string'>
Baby<span>Buggy Bumpers</span>
</div>
It only remain "hacky" CSS solution. There is one using pseudo-elements :
HTML :
<div class='string'>
Baby
</div>
CSS :
.string{
width: 11ch;
text-align: end;
font-size: 2em;
}
.string::after {
content: "Buggy Bumpers";
color: red;
display:block ;
white-space:nowrap;
}
Live exemple : https://codepen.io/camillewemajin/pen/JjWzWzN
But that's not really clean for many reasons, like SEO...
Say I have 2 html elements, in different parts of a html form: element "first-element" and element "second-element".
"first-element" is a flex item, which varies in position with page resize (the flex wraps).
When I hover the first element, I would like to make "second-element" visible and position it 20px down from "first-element".
I tried:
#first-element:hover #second-element {
display:block;
position:absolute;
left:#first-element.left;
height:#first-element.top+20px;
}
which, obviously didn't work :)
Can you please tell me if such a thing is possible and what is the correct syntax? Or, maybe suggest another approach? Thanks!
You need jQuery or Javascript to do this. It is not possible with only CSS.
See an example here with jQuery
$(document).ready(function{
$('#first-element').hover(function(){
$('#second-element').toggle(200);
})
})
Style the rest of what you want in your css.
#second-element{
position: absolute;
top: 20px;
}
I am trying to get rid of the "Subscribe" header using CSS.
I inspect it and then I use the following code to remove it and it works fine:
#main-outlet.wrap .container .title-wrapper h1 {
display: none;
}
However, it so happens that other elements in my website use this same selector, so it removes them as well. In particular, it removes the titles of the topic discussions on my main page. But I don't know how to fix this because it seems that there isn't a more specific selector for the page with "subscribe" on it in particular. What am I missing?
You need to isolate your <h1> element.
I'm guessing you can't edit the HTML directly, otherwise you'd be able to add a unique class to the element.
You can do still isolate the element computationally via a short script.
There are many approaches, but here are two:
Approach 1
You can achieve the effect you need with two lines of javascript.
Javascript
const mainHeading = document.getElementsByTagName('h1')[0];
mainHeading.style.setProperty('opacity', 0);
Approach 2
Or, a little more sophisticated, with two lines of javascript and one line of CSS.
Javascript
const mainHeading = document.getElementsByTagName('h1')[0];
mainHeading.classList.add('subscribeMainHeading');
CSS
.subscribeMainHeading {
opacity: 0;
}
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I don't get it. I have …
body, html {
height:100%;
margin:0;
padding:0;
}
However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.
In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.
Any idea what could cause that?
You probably have an element with margin-top as one of the first children of body.
Read up on collapsing margins.
Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.
Late to the conversation, but thought this might help some...
If this a WordPress based site, it is likely that WordPress is adding:
html { margin-top: 32px !important; }
It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.
To resolve this, add the following to your theme's functions.php file:
add_filter('show_admin_bar', '__return_false');
I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.
In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:
<body>
";
<!-- rest of stuff here -->
Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.
try
body {
margin: 0;
padding: 0;
}