Change relative to absolute via media query [closed] - css

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 months ago.
Improve this question
Is it possible to have a page that opens with 6 box items as nav menu, but when one is clicked to go to that area on the page, the nav becomes a standard fixed nav bar at the top of the page? Using only CSS (no JS).
I am a VERY junior coder.
I have been unable to find this to be possible thus far.

Everytime a link or a tab in the nav is clicked,a new webpage is reloaded. New webpage means a new html file and create a new css file to link with it according to the design u want there, yes doing position absolute and top 0; will solve the problem there to stick the navbar position at top.
I hope this helps, please feel free to ask me further !!

you can use id and callback(#) that id as a link
<div class="navbar">
<ul> page 1 </ul>
<ul> page 3 </ul>
</div>
<h2 id="page1">this is page 1</h2>
<h2 id="page3">this is page 3</h2>

Related

JustCode logo How does it work? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to sharpen my skills by remaking some award winning websites.
With this one in particular
https://justcoded.com/
I don't get how the "JustCoded" text on logo on the top left is no where to be found to change. I spent an hour going through the css, js and html. Still don't see where it is.
Any help on how it's done would be sincerely appreciated.
If you look at the ::before where the text, "JustCoded" is, you'll see that the class that affects it has a content: portion. The content replaces the inside of the a tag with the icomoon font item. Normally icomoon just consists of icons that act as fonts, but instead they made their whole logo be an icon, and are inserting the icon in that area.
.header .logo:before{
font: 48px/1 icomoon;
content: '\e90a';
}

Divs placed in line with bootstrap WP [closed]

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 7 years ago.
Improve this question
This is the link
http://avocat2.dac-proiect.ro/
This is a WP theme made by me
I want to put two div sites in line with bootstrap.
I tried to implement this example on my website but unfortunately are placed one above the other.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=h
You need to do something special?
Why does not it work?
Thanks in advance!
You want a two column layout correct?
Try this
<div class="container">
<div class="col-md-8">
Blog content go here
</div>
<div class="col-md-3">
Side panel go here
</div>
</div>

my div are positioning different in different browser [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Am making changes on a home page. i have background images and links to the image as buttons.
However when creating divs for each image i found out that the best way was to add div for each image as that will allow me to position the images side by side. i was told to use a class, however with class i would not able to put images side by side.:
this is my finished page as you can see the 7 images on the middle of the screen.
however if you open this in Firefox it comes out all messy :/
what is the best solution for this to have it positioned like the link i provided. but in all browsers. is divs the best way?
This is my js fiddle with the code: http://jsfiddle.net/uJhvk/
e.g
<div id="testimage">
<div id="a1">Awards</div>
</div>
any help will be grateful.
http://jsfiddle.net/ahallicks/uJhvk/1/
I've added floats to #testimage2-6 and margins to the last two to space them out
float: left;clear: both;
on #testimage2 to make it sit on a new line

What is intended browser behaviour in overlaying content on top of scrollbar? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.

Adding a <div> block messes up the rest of the page [closed]

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 am editing a forum layout consisting of a left-side wide area and a right-side narrow sidebar. The left-side area also has content blocks attached at the bottom. I am trying to add additional blocks to the sidebar, but that messes up the bottom content blocks on the left side.
This is the code I'm adding:
<div class="rt-block>
<div class="module-surround">
<div style="background-color:#FFFFFF;">
My content
</div></div></div>
I am simply cloning existing elements already present in the sidebar and adding an extra box, and it's breaking the left side. Any idea what I'm doing wrong?
You aren't closing the quotes on <div class="rt-block>

Resources