I'm having some trouble with a header in a webpage. It has several pages, and in one of them there are several big pictures. In that particular page I have observed that the header div moves a few pixels to the left, which is very obnoxious when changing between pages.
I know that the problem disappears when I remove the first picture (id="problem1"), or one of the divs with two pictures ((id="problem2" and "problem3")), but I can't figure out what's happening.
I'm using this css code to produce two colums:
.contenedor { overflow: auto; }
.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}
And this one for the header:
#header {
height: 100px;
background: #0072b8;
font-family: Arial;
font-size: 16px;
color: white;
}
This is the header that magically changes its possition:
<div id="header">
<img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;">
</div>
And this is the code that defines one of the divs that have two colums:
<div class="contenedor">
<div class="div1">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
<div class="div2">
<img src="http://placekitten.com/300/305" width="300px" height="305px"/>
</div>
</div>
You can see the rest of the code and its result here:
JSFiddle
What puzzles me the most is that if I leave just 2 of the problematic elements, the div position is the right one, the same one that in all the other pages that doesn't have these pictures, but when I add the third one it moves.
This is happening because you have a scroll bar on some pages but not on others and your DIV elements are set to 'auto' so they expand the available browser space (which as im sure you know changes when the browser is resized, or in this case when the presence of a scroll bar changes the available space).
To fix this, it would be easiest to just design the page with
html {
overflow-y:scroll;
}
This will make sure that a scroll bar is on the page at all times and the page size won't change over it.
I believe the problem is that you have a scroll bar on the problem pages. Your content is longer then the height of the browser window. When your content is higher than the window a scroll bar is added to the page. This is unavoidable.
Related
I'm trying to make a dashboard frame (in Bootstrap 5, but I don't think it makes any difference) that works like in these two pictures:
This is basically my current situation:
<html>
<body>
<div class="pretoolbar">pretoolbar (non-essential information, to be hidden when scrolling)
</div>
<div class="sticky-toolbar"> sticky toolbar</div>
<div class="container-fluid">
<div class="sidebar col-3">
[tall sidebar content]
</div>
<main class="col-9">
[also tall content]
</main>
</div>
<body>
</html>
CSS:
.pretoolbar{
background-color: #555;
color:white;
height:32px;
}
.sticky-toolbar{
background-color: black;
color:white;
height:56px;
position:sticky;
top:0;
}
.sidebar{
background-color: white;
position: sticky;
top: 56px;
overflow: hidden auto;
max-height: calc(100vh - 56px);
height: 100%;
}
I'm trying several approaches but it doesn't seem working. What I'm trying is of course position: sticky on the main sticky toolbar and on the sidebar. But due to the different available vertical space (scrolled-top vs scrolled-middle), after declaring a height for the sidebar (calc(100vh - 56px), 56px is the height of the toolbar) it results in the bottom part of the sidebar and its scrollbar to fall out of the viewport bottom. I'm considering flexbox, position:fixed, position:absolute... cannot find a way to get it through.
I also discovered a strange behavior (in Chrome at least) when you place a position:sticky inside a position:fixed
My goal would be to avoid JavaScript, I basically need a sidebar that changes its height after the sticky-state of the toolbar and sticky searchbox. (Or, to say it in other words, the top-edge of the sidebar should behave like position:sticky while the bottom-edge should behave like position:fixed;bottom:0).
Can you think of a way of achieving this without using JavaScript?
Please let me know if I am understanding your situation. First I would suggest getting rid off of the *pre-toolbar bar. Otherwise, the desired behavior is impossible without js. And since you mentioned the information there is not essential, you can put it anywhere.
However, if you still want it to be on top, then sticky of position fixed the toolbar and the sidebar. Do not use calc() It is better to use height 100vh and put it behind the toolbar so it seems to be shorter. Then, place a pre-toolbar on top (z-index) of your toolbar and animated it to disappear after some seconds.
Here is a codepen https://codepen.io/oscontrerasn/pen/WNpxJwV
I have the following css for a ribbon that I have hanging in a certain part of my website http://www.tonypalazzo.com .
.ribbon {
float:left;
padding:5px 0 0 0;
margin:0;
width:217px;
position:absolute;
left: 965px;
top: 67px;
z-index: 999999;
}
It appears in different horizontal positions when viewed in different sized monitors or even when I zoom in and out in Chrome (and a completely random spot in the design view of Dreamweaver). It maintains proper vertical (top) positioning, but looks like it always wants to stay 965px away from the left. This makes it appear in a completely different spot when viewed in different resolutions.
With "relative" position it won't overlay the other div boxes I need it to overlay. Any help on how I can get this div to sit in the foreground of (overlay) other div's while maintaining the same left/top values relative to where my social media icons sit (see website)?
I've read other posts about this telling me to put it in my "parent" div. I believe it sits within that if my "block_header" is the parent. Here is a quick summary of the html (ignore the .'s I put them there just to make sure the code shows:
<div class="main">
<div class="header">
<div class="block_header">
<div class="logo"></div>
<div class="social"></div>
<div class="ribbon">
<img src="images/portf.png" onmouseover="this.src='images/portf1.png'" onmouseout="this.src='images/portf.png'"/>
</div>
</div>
</div>
</div>
Thank you!
Your ribbon is staying 965 pixels from the left edge of the screen, just like it's supposed to. If you want it to be positioned relative to it's parent, add the style position: relative to the parent. In this instance, you should add it to .block_header, then reposition the ribbon.
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)