I am absolutely beginner in HTML and CSS.
What I would like to do is to create a strip in the left hand side of a webpage, similar to this:
https://www.inside.com/all
The strip has a number of clickable icons, and when one slides down the page, the strip and logos stay at the same location.
Is there any way to look at the page source and find out how it is implemented?
If not, I appreciate any help on how to go about this.
The key is using position: fixed; and height: 100%;.
CSS code
.verticalStrip {
position: fixed;
top: 0;
left: 0;
width: 200px;
background-color: grey;
height:100%;
}
.content {
padding-left: 250px;
}
HTML Code
<div class="content"> content of the page....</div>
working demo: http://jsfiddle.net/h85er/
If you're using a modern browser such as Chrome, Firefox, or even newer versions of IE, there's an inspector tool you can use. In chrome, just right click any part of the page you want to see the source for and click Inspect Element.
Otherwise, most browsers will allow you to view the page source. Often, it's a simple right click, or an option somewhere in the toolbar.
That navbar can be easily recreated by using a div element at a fixed position at the left side of the screen position:fixed;left:0;top:0;. Then, a list (ul) can be used for individual navigation elements. Naturally, you'll want to use list-style: none; to remove those ugly bullet points.
EDIT: JSfiddle available here
Related
I have what seems to be a simple issue with a website on iOS (testing on my up to date iPhone 13), but I just can't seem to find a fix that works. Starting to pull my hair out as it seems to be a bug rather than an actual issue with how I'm laying out the page.
The website has a very simple header that is fixed in position, which contains an absolutely positioned menu button on the right hand side. (Edit: just to clarify that the button triggers javascript to open a full height menu div that covers the left side of the window. All this part of the functionality works correctly, it's just that tapping on the button to open this navigation box does nothing until I scroll down)
On desktop using Chrome dev tools everything works fine at all browser sizes.
However, on iOS when loading the page the button is not clickable. If I scroll down slightly suddenly I can use it. Scroll back to the top and I can't use it anymore. This happens even if I remove all other content from the header leaving nothing but the menu button. I've tried everything I can think of but just can't get this button to work when the page hasn't been scrolled.
It seems like an issue of something covering the button, but there is nothing. Even with the header otherwise completely empty I get the same issue, and the content clearly can't be covering it as it visibly scrolls behind the header.
This is the css/html which I believe to be relevant: (#page contains the rest of the document and is padded to clear the fixed header. I have also tried removing the padding and using an extra div to push the content down as well just in case padding on a top level element was messing with things). ui-container is used to limit the width on large screens and simply has width:100% on smaller devices.
#top {
position: fixed;
width: 100%;
z-index: 10;
}
#header {
background-color: #fff;
padding: 20px 0;
}
#mobile-nav-btn {
display: block;
position: absolute;
top: 24px;
right: 20px;
font-size: 22px;
cursor: pointer;
}
#page {
padding-top: 113px;
}
<body>
<div id="top">
<header>
<div class="ui-container">
<a id="mobile-nav-btn"><i class="fas fa-bars"></i></a>
</div>
</header>
</div>
<div id="page">
... content ...
</div>
</body>
Please use:
<button onclick=“window.scrollTo(0, 500)”></button>
Well it looks like it was the menu itself causing the problem as it was hidden using opacity and moved to top: -100% to get it out of the way. Seems that iOS messes around with the document height and this causes problems in some instances.
This may be specific to devices that have a rounded display, or may also affect all iOS devices as I know that the fact the address bar & navigation buttons auto shrink/hide on scroll can also play havoc with positioning.
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
Problem
I'm trying to stretch a ::before element from the very left hand side of the page to the right hand side, even though the element it's attached to is centred and somewhat down the page (and thus does not know what the window size is etc).
Here's a working example of what I want:
http://codepen.io/robcampo/pen/dilCe
Problem with this is that I'm using static values to define the width and left position:
left: -9000px;
width: 99999px;
which isn't ideal. I understand this could be solved if I moved the element to another location on the page, but I need it next to the element it's attached to.
Question
Is there a clean way to make the ::before content span the entire page width without using static values?
Note
There is content above and below this element and it is far down the DOM tree away from the body
I could solve using JS but I want a pure CSS solution
If you remove position: relative from the parent element, you can easily do this.
You can center .title like this instead:
.title {
margin: 0 auto;
}
Then you can adjust the ::before like this:
.title::before {
position: absolute;
left: 0;
width: 100%;
}
Bringing it all together: http://codepen.io/anon/pen/xLKGc
PS: Note that IE8 and before don't support the double-colon (CSS3) notation, so if you need to support IE8, make sure to use a single colon (CSS 2.1), which is supported by other browsers as well, and will probably be for a while.
Hi All,
I am trying to develop a simple HTML page for the test results. I am very new to HTML development so i might sound really dump with this question.
My aim is to use some thing like frameset available in HTML but point it to the internal links (href). Or some thing like a navigation bar that is always present on the Top of the HTML page or Vertical from which I can point to different sections inside HTML Page. I don't want to divide my HTML page into multiple pages. I want to keep it as a single HTML page.
I would appreciate for some help in this regards,
You can use a div with the CSS position: fixed; top: 0 set. This will allow the div to "stick" to the top of the page, regardless of where the document is scrolled.
You can use anchors to navigate to separate parts of the document. For example:
Section 1
<div>
<a name="section1" id="section1"></a>
Whatever section 1 might contain here.
</div>
As for making the navigation persisent (i.e. fixed position), you can use the position: fixed CSS set. See the jsFiddle sampel here > http://jsfiddle.net/PWP2T/
And the code:
div#mynav {
width: 100%;
padding: 10px 0;
background-color: #ff00ff;
position: fixed;
top: 0;
left: 0
}
i want to have a box in the centre of a page and several boxes scattered around, with different sizes, random positions, and no overlap.
I think this is not possible to do with just html and css, and javascript/html DOM is needed.
Have you seen examples of this? Do you have any tip or piece of code that can be helpful? Dont mind if it doesnt solve the whole problem, a solution for one of the sub-problems (eg no overlap) will be useful too!
Thanks
alt text http://img99.imageshack.us/img99/3563/scattered.jpg
If the size is fixed, perfectly centering a div is not hard. The trick is to apply negative margins:
#centered {
width: 400px; height: 200px;
position: absolute; top: 50%; left: 50%;
margin-left: -200px; margin-top: -100px;
}
Now, to position other divs relative to this centered div, you use position: relative.
Example HTML snippit:
<div id="centered">
<div id="other"></div>
</div>
And in addition to the above, the following CSS:
#other {
width: 200px; height: 100px;
position: relative; top: -150px; left: 180px;
}
Add a border or background color to get a better look at the example:
div {
border: 1px solid black;
}
If this is not a static page, and you want to randomize on every page load, you could either use Javascript or some server side scripting to create and style divs dynamically.
I assume you want to randomize on every page load, so that different users see different things. If so, this isn't possible with only HTML and CSS. CSS is designed to be deterministic and reproducible in a consistent way, which is the opposite of what you're going for here.
However, a clever way around this would be to link in a stylesheet from a dynamic page which itself serves random CSS. For example, have something like the following:
<link rel="stylesheet" type="text/css" href="styles.php"/>
where styles.php is a PHP page that generates the random CSS.
As far as your Question goes: No its not possible to do just using HTML and CSS.
I can't be done with just HTML and CSS, your options are:
create a style sheet each time with a server side language like PHP and serve the content precalculated to the browser
use a basic fixed style sheet and modify the DOM via Javascript
as for the non overlap part, you have to do a bit of math/geometry: generate coordinates for vertexes making sure they don't fall in a previously created box (boring but quite easy) and use position: absolute to place them.