I'm trying to make it so when one div becomes smaller in height the other moves up with it.
Here's a fiddle.
So if I was to make #top (which has absolute positioning) have a height of 400px instead of 600px, how to I ensure the relatively-positioned div below it moves up to 420px from the top, from it's original position of 620px?
Basically, it's to respond to the browser. If the browser is made smaller, #top will scale, so the div below needs to move with it.
UPDATE
HTML:
<!DOCTYPE HTML>
<html lang="en-UK">
<head>
<link href="Stylesheet.css" rel ="stylesheet" type="text/css">
<title>Hello World</title>
</head>
<body>
<div id="top"></div>
<div id ="logo"></div>
<div class="container">A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work."[4] "Wiki" (pronounced [ˈwiti] or [ˈviti]) is a Hawaiian word meaning "fast" or "quick".[5]A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work</div>
</body>
</html>
CSS:
body{
background-color: red;
width: 100%;
}
div#top{
position: relative;
display: block;
width:100%;
height: 600px;
top:0;
left:0;
background-color: black;
border-bottom: 3px solid white;
margin-bottom: 20px;
}
div#logo{
position:absolute;
color: green;
left: 50%;
margin-top: 20px;
margin-bottom: 30px;
}
.container{
position: relative;
margin: 0 auto;
margin-top: 20px;
width: 920px;
}
Padding issue
Assuming you need to keep #top as position: absolute, there is no CSS-only way of doing this. Since #top is absolute, it is no longer part of the document flow, and #container can no longer relate to it. You can either
A. Use javascript to watch the window.resize event or whichever resizing event you're referring to, then perform math to change the top property for #container
or
B. Change #top to position: relative and remove the top CSS property from #container
or
C. Use percentage-based values for #top's height and #container's top property.
Related
I try to redo the markup of a one pager incorporating html5 elements. The key element of the page is a graph with logarithmic curves per country on the left and on the right the view controls to alter what and how things are displayed in the graph on the left. My initial thought was:
<main>
<article></article>
<aside></aside>
</main>
main wrapping the key content of the page - the graph and its view controls. I chose article for the graph cuz it is a self contained composition and the aside for the view controls cuz its content is indirectly related to the main content. The choice of the aside is due to the lack of some sort of dedicated element for a view control in html5 (at least I am not aware of any proper).
Problem with this solution is that Wave Tools pointed out that wrapping an aside inside the main element isn't recommended best practice and should be avoided if possible. My second choice then was:
<div>
<main></main>
<aside></aside>
</div>
Then I got the objection and feedback that aside is only suited for additional related information and not in the context of view controls. So I am a bit out of ideas what would be the cleanest and semantic proper way to markup that setup? Maybe that way?
<main>
<article></article>
<div></div>
</main>
From a purely HTML perspective (i.e. not including WAI-ARIA) you are over complicating this problem for yourself.
The controls are related so an <aside> is not appropriate. Changing a control changes the graph.
In this case all you need is <section> elements.
However although the HTML may be simple, the WAI-ARIA and associated focus management etc. is a little bit more involved. I have added a decent amount of information below to get you started but it is by no means a complete example.
Rough example of appropriate HTML and WAI-ARIA
/*styling is just for demonstration, it is not relevant to the functionality*/
section.left{
width: 58%;
float: left;
padding: 1%;
}
section.right{
width: 38%;
float: left;
padding: 1%;
}
#graph{
width: 100%;
min-height: 25vw;
background-color: #666;
outline: 2px solid red;
}
label, input{
display: block;
padding: 0.5rem;
}
section{
outline: 1px solid #333;
}
<main>
<!--without seeing your actual page it is hard to know whether you should use role="figure" so you will need to research that yourself.-->
<!--it should also be noted that if your site supports IE8 you should use `aria-label="heading 2 title"` instead of `aria-labelledby`.-->
<section class="left" role="figure" aria-labelledby="graph-title">
<h2 id="graph-title">Graph of country information</h2>
<div id="graph"></div>
</section>
<!--toolbar is the best fit for explaining what the controls are. You should also use `aria-controls="IDofElement"` to associate it to your graph (you will need to double check this in a screen reader as it is intended for use on textareas but I don't see why it won't work for an accessible graph / chart.).-->
<section class="right" role="toolbar" aria-controls="graph" aria-labelledby="controls-section" aria-orientation="vertical">
<h2 id="controls-section">Graph Controls</h2>
<label for="input1">graph x value</label>
<input id="input1"/>
<label for="input2">graph y value</label>
<input id="input2"/>
</section>
</main>
Explanation of example
You will notice that the HTML itself is very simple.
Just two regions with appropriate headings.
This will make it pretty accessible by itself as the headings indicate clearly what each section is for.
However we can add some WAI-ARIA attributes to improve things in screen readers that support them.
First we label the sections.
This is useful as some screen reader users prefer to navigate / explore a page via sections.
Other users prefer to explore a page via headings (majority of users actually).
By using aria-labelledby and pointing to the heading we cover both of these bases. (for maximum backwards compatibility you should actually use aria-label="same text as the heading" and role="contentinfo" on a region for it to work on IE8 and below but I only support to IE9 and up).
Next we add appropriate WAI-ARIA roles to each section. I have assumed the figure role is appropriate for the graph. but you will have to decide that based on your use case.
For the controls for the graph we give that section the role of "toolbar". We then make it clear that the controls in that section are related to the graph with aria-controls.
Now yet again I cannot see your graph so it may be (and is quite likely) more appropriate to use aria-owns on your toolbar.
Finally we add aria-orientation="vertical" as that is a attribute that is applicable to role="toolbar" when controls are stacked.
Please note that you will probably have to add focus management etc. yourself. See the W3C toolbar example for ideas on how to implement this.
He guys, right now im working on a conversion-page that is supposed to be included on websites of our partners. We're given a certain space inside their websites to promote our product. The space we're offered is of course supposed to be styled with html and css. And this is where it gets a little complicated. Is there a smart way to prevent our stuff inside their html-structures to be formated by their css?
Sure, I could check all affecting formations and just overwrite them with our own css-formations, but this is pretty dirty and not very reliable in terms of possible changes in the future.
How would you handle this? Might iFrame be a valid solution?
Thanks
Without an iframe you can use a special application of the universal reset concept.
/* cssreset.com */
#your_company_div * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.5em;
text-decoration: none;
vertical-align: baseline;
/* and perhaps some more... */
background: white;
color: black;
}
You may want to explicitly define the font/family as well, unless you just want to use theirs to make it fit in better.
The idea here is basically that it shouldn't matter anymore what the parent website has defined for CSS styling, your content should look the same basically no matter what, because the * trumps all.
Note that there is the same sorts of downside with using a universal reset, in that you nuke inheritance and will have to do define margins and padding if you want a non-zero value.
This shouldn't be that big of a downside for you as you are not so much designing a whole web site, and thus for a little extra work up front it won't matter how they change their site, your block will stay mostly the same.
If you use Iframe then can invoke your page as external in your partners website with your own stand alone style. Else give a hierarchy style to the div and its child elements
I used the css custom manager to change the min-height for my WordPress site. The site has way too much blank space at the bottom.
When I changed the min-height it is only applied to the home page.
How do I get it to change for the rest of the pages?
I was told that I would have to make a child theme in order to get the manager to apply it to all pages.
Doing so is not possible for me.Is there any other suggestions?
campwhiskers is the site (somehow the blog page is okay too?)
This is what I put into the manager to get the page to change:
#main .content, #main .last-content
{
min-height:auto;
padding-top:50px;
position:relative;
clear:both;
}
#main .last-content
{
min-height:auto!important;
}
If you mean "much blank space at the bottom", the copyright section then
In style.css, at line 122 - copyright {
margin-bottom: 70px;
modify margin-bottom:
to lower value like 10px;
Your height on the other pages is being controlled by this property, which is on line 117 of your CSS:
#main .content, #main .last-content {
min-height: 1700px;
padding-top: 50px;
position: relative;
clear: both;
}
There is another instance of this on line 59, which is where the confusion is.
Just delete this part of the CSS on line 177:
min-height: 1700px;
Here's a visual
Here is another screenshot. This one shows the css files your theme is using. You need to track down this file on your Bluehost server and delete the min-height part. I can't tell you how to find it though b/c I can't see your server. It's likely in the themes folder. If you paid for this theme, you can maybe get the author to guide you (or not). I think if you dig around, you'll find it though.
The element has 0px dimensions and is absolutely positioned by -10000px. I've seen similar hidden divs on other sites, and they're always called near the top of the source code and contain no other elements.
It is used for Screen readers to read out for blind people.Generally there are certain W3C's rules specified for others tag also like alt="" so that the blind or vision impaired people can access the web through screen readers.Blind users for example, cannot position a cursor visually and so use the keyboard in conjunction with a screen reader to access the different elements of a Web page. People with severe physical disabilities rely on simple switching devices, which mirror the function of the keyboard tab key, to move around the page.In most of the standard sites you might have seen the <h1 class="logo"><strong>Site Name</strong></h1> tags for that they have defined CSS like this:
.header .logo strong {
font-size: 0;
height: 0;
left: -999em;
line-height: 0;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: -999em;
width: 0;
}
So that it can be easily accessible to the screen readers.
You can read out more information by browsing these links:-
http://www.webbie.org.uk/webbie.htm
http://www-03.ibm.com/able/guidelines/web/webcss.html
http://www.w3.org/TR/WCAG10-TECHS/#Techniques
http://www.unleashwebaccess.com/2011/02/help-blind-users-read-your-blog-help-everyone/
Hope this info will some how help you to come over your curiosity..:)
Whenever you see an element concealed by a weird position rather than display: none, it's likely being used to store the results of an asynchronous call for later use.
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/