CSS Help - element appears, takes up space, moves elements next to it

another approach: for that box that has the varying messages, can the font size be made small enough that it doesn't matter? lol just grasping at straws, I know :)
 
Advertise on BHW
zig-zag said:
Oh that is a shame. If you could should me the actual html structure I could give you the css that would fix it.Also the overflowing is probably due to the main bar being position:fixed and then some margins overflowing
Click to expand...

Well, I don't know if this even has an HTML structure. But the structure I shared it in my opening post. This is the structure:

httt.JPG


That's what I used to find the class and anonid selectors and to figure out what's what and align properly.
 
noellarkin said:
another approach: for that box that has the varying messages, can the font size be made small enough that it doesn't matter? lol just grasping at straws, I know :)
Click to expand...

I thought of that haha :D

It's still gonna move it, no matter how small it still gonna move the elements to the right of it.
 
Scorpion Ghost said:
I thought of that haha :D

It's still gonna move it, no matter how small it still gonna move the elements to the right of it.
Click to expand...
Scorpion Ghost said:
Here, I added a border to the 2 elements that are causing me the problem, just so you guys can see clearly...

View attachment 187292

View attachment 187293

See?
Click to expand...
Its strange how large that search box is. I used to think the order number in boxes was relatively spread out on the page (ie from
1 to 4 would mean dividing the page in 4 parts).
 
zig-zag said:
Really hard to know without seeing all the css and the html. Could be a ton of things making the issue
Click to expand...

Isn't there a way to make an element display like a ghost element? Like, just appear on top of whatever is around it? Without affecting what's around it.
 
Scorpion Ghost said:
Isn't there a way to make an element display like a ghost element? Like, just appear on top of whatever is around it? Without affecting what's around it.
Click to expand...
Yes. Too make it out of the flow of the page you can do
div{
position:fixed;
bottom:0;
left:0;
width:100vw;
z-index:999999
}
 
noellarkin said:
Its strange how large that search box is. I used to think the order number in boxes was relatively spread out on the page (ie from
1 to 4 would mean dividing the page in 4 parts).
Click to expand...

In Palemoon it seems some of these elements are along and others are grouped.

Like, look at my screenshot. Match All, Whole Words, Highlight All and Found Matches are alone.

But the Search Box, Next, Previous and Close button are contained in a box. So for example I couldn't use CSS to move the close button outside of its containment, I can only move it within the box it resides. If that makes sense.

I could be wrong, I'm no expert, but there you go :)
 
zig-zag said:
Yes. Too make it out of the flow of the page you can do
div{
position:fixed;
bottom:0;
left:0;
width:100vw;
z-index:999999
}
Click to expand...

HAHAHAAAA That worked :D

But like, well, I need to play with it but I think we're onto something here. Here is the firstborn freaky accident child :p

frik1.JPG


frik.JPG


See how the box didn't move when I typed something and the "4 of 177 matches" appeared? That's what we need yeah :)
 
zig-zag said:
Cool!
Click to expand...

Yeah very cool, but I still can't get it to look how I want.

The X close button is now stuck there. I tried adding the same code to it with the z-index and that just messes things up badly. I tried adding float:right to it to try and get it to the right side of the elements, but nothing works.
 
@zig-zag man please help me finish this. Look:

finish.JPG


It's perfect now, exactly what I wanted. I just can't get the X close button to move right. I tried position: relative !important; and float: right !important; but this is what I got.

Here is my CSS:

CSS: 
[anonid="findbar-textbox-wrapper"] {
-moz-box-ordinal-group: 4 !important;
margin-left: 10px !important;
border: 1px solid black !important;
position:fixed !important;
bottom:0 !important;
left:400px !important;
width:70vw !important;
z-index:999999 !important;
padding-left:-150px !important;
}

.findbar-closebutton {
-moz-box-ordinal-group: 2 !important;
position: relative !important;
  float: right !important;
}

.findbar-highlight { -moz-box-ordinal-group: 1 !important; }

.findbar-case-sensitive { -moz-box-ordinal-group: 0 !important; }

.findbar-entire-word { -moz-box-ordinal-group: 0 !important; }

.findbar-find-fast.find-status-icon { -moz-box-ordinal-group: 2 !important; display:none !important; }

.findbar-find-fast.found-matches {
-moz-box-ordinal-group: 3 !important;
border: 1px solid black !important;
position:fixed !important;
bottom:0 !important;
left:0 !important;
width:6vw !important;
z-index:999999 !important;
}

.findbar-find-fast.findbar-find-status { display: none !important; }

Any ideas?
 
If I remove position: relative !important; and float: right !important; from ".findbar-closebutton", I get this:

qqqqq.JPG


I just want the X button on the far-right of the box :)
 
I even got it to be to the right:

right.JPG


Using this:

Code: 
.findbar-closebutton {
-moz-box-ordinal-group: 4 !important;
display:block !important;
margin-left: auto !important;
margin-right: 0 !important;
}

But it needs to go lower haha
 
Well, I tried a lot of things. But the X close button just won't align.

65656656565.JPG


Code:

Code: 
[anonid="findbar-textbox-wrapper"] {
-moz-box-ordinal-group: 4 !important;
margin-left: 10px !important;
border: 1px solid black !important;
position:fixed !important;
bottom:0 !important;
left:400px !important;
width:70vw !important;
z-index:999999 !important;
}

.findbar-closebutton {
-moz-box-ordinal-group: 4 !important;
display: block; !important;
margin-left: 350px !important;
}

Any ideas?
 
Okay guys it's done, I figured it out. Good old persistence and experimentation did the trick.

So I got it working, and then I went through my CSS and cleaned it up by removing each line that I thought was not necessary and then checking to see if it affected anything. The code is as clean as possible and functional:

CSS: 
[anonid="findbar-textbox-wrapper"] {
-moz-box-ordinal-group: 4 !important;
bottom:0 !important;
margin-left:410px !important;
width:80vw !important;
position:fixed !important;
}

.findbar-closebutton {
position: relative !important;
float: right !important;
margin-left: 1100px !important;
margin-bottom: -25px !important;
}

.findbar-find-fast.found-matches {
-moz-box-ordinal-group: 3 !important;
}

.findbar-find-fast.findbar-find-status {
-moz-box-ordinal-group: 3 !important;
}

.findbar-highlight {
-moz-box-ordinal-group: 1 !important;
}

.findbar-case-sensitive {
-moz-box-ordinal-group: 0 !important;
}

.findbar-entire-word {
-moz-box-ordinal-group: 0 !important;
}

.findbar-find-fast.find-status-icon {
display:none !important;
}

From bottom to top. The last bit of code hides an unnecessary icon. The 5 pieces on top of it align 5 elements as I want them left to right. The next one puts the closebutton on the right side where I want it. And the first one, well, it just allows the whole thing to work.

Here are the results:

1111.JPG


2222.JPG


333.JPG


The first photo is how it looks when I open the search bar.

The second photo is how it looks when I search for something and find nothing.

The third photo is how it looks when I search for something and find something.

So that's it, we're done here, I got exactly what I wanted. Thanks for the help @noellarkin and @zig-zag :)

 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top