HTML/CSS: Keeping Elements Positioned with Window Change - html

I'm very new to CSS and I spend quite a while trying to research how to position elements "in thirds" so that even when the window changes dimensions the elements stay "in thirds". The first picture below is when the browser is fully opened and the second is when it is horizontally contracted. I am looking for this method but I don't know the name of the technique or what to do (like I said I'm really new). I'm aware that the tabs are using what is called "closing doors" but I'm more interested in their positioning.
For example if I wanted three elements spaced out unevenly
to contract as follows, how would I go above achieving this?
instead of:

check this solution. This is flexible and if more menu comes it will accommodate it automatically.
http://jsfiddle.net/geymU/
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Address</li>
<li>Phone</li>
</ul>
</div>​
CSS
#nav{
background:#c1c1c1;
}
#nav ul{
display:table;
width:100%;
}
#nav li{
padding:5px;
display:table-cell;
background:#333;
border:1px solid;
color:#fff;
}​

Without seeing actual code, I would recommend that you declare your horizontal widths, margins and padding with relative units. That would be % or ems, not pixels.
So, in your example,
#element_2 {
margin-left: 45%;
}
#element_3 {
margin-left: 5%;
}
With relative units, you will have to do a little more trial-and-error to get elements to place how you want.

In your pictures it looks like the backgroundimage (i assume it's an image, since it doesnt stretch over the whole button) is only lacking a
background-repeat: repeat-x;
However what I see in your second example can be easily archived if you set the first button to
float: left;
and the remaining buttons to
float: right;
Just don't forget to
clear: both;
after them, incase you don't have any more elements removed from the document flow (which is what float does).

Related

Centering an image link inside of a <td> tag

I've looked at W3Schools and several threads here, and no matter what I do, these image links will not center inside of their elements. I can't just make the smaller, because some of the images further down in the table just barely fit in the their cells. I would like to both center horizontally, and vertically the images and everywhere I look, the following is how it is said to do it (Well. The horizontal. I figured I'd tackle the vertical centering once I got this straightened out.)
margin-left:auto;
margin-right:auto;
width: (some pixellage amount)
For some reason, this is not working in my html/css. Here is one of the links I'm trying to center, and the css codes referencing it.
HTML
<table class = "displayTable"><tr>
<td class = "photodisplaytd chana">
<img src="chanasImages/animeApron.jpg" onmouseover="this.src='chanasImages/animeApronBack.jpg'" onmouseout="this.src='chanasImages/animeApron.jpg'" alt = "Anime styled white apron, front with back image on mouse rollover."/>
</td>
CSS
.chana
{
margin-left: auto;
margin-right:auto;
width:50px;
}
.displayTable
{
alignment: right;
margin-left:auto;
margin-right:auto;
}
.photodisplaytd
{
border:4px solid slategrey;
background-color:#FFFFFF;
}
Here's a jsfiddle where it works with the old style text-align: centre; tech, on the photodisplaytd: http://jsfiddle.net/C6Zux/2/
.photodisplaytd
{
border:4px solid slategrey;
background-color:#FFFFFF;
text-align: center;
}
I also tried to do it with #cincodenada's suggestion but probably made some mistake and failed so far - that declaration is commented out in the css there now.
You have the auto margins on everything except where you need them. margin:auto gives the targeted object automatic margins to center it in its parent.
As a result, you need to apply margin:auto to your links themselves (.chana a, for instance), not to the table cell or table. It's not a property of the table cell (like the old align attributes would be), but of the thing being centered.
Additionally, since a elements are inline elements by default, you have to make them block elements in order to have auto margins. You can do this by adding a display: block to the styles as well.
I put together a quick demo fiddle showing everything working as expected.

Vertically center two overlapping divs

I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.

Centering a fluid absolutely positioned section

So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen

How to horizontally align a ul element to center

I'm not able to align a menu, contained within a ul, to the horizontal center of its container. how to do that?
See a live demo of the menu on jsFiddle.
<li>AboutUs
<ul class="sub">
<li>About Square Innovations</li>
<li>Our Vision</li>
<li>Our Mission</li>
<li>Trainer Profiles</li>
<li>Fun In Our ClassRooms</li>
</ul>
</li>
You can address the ul element as an inline-level element within the page flow, while retaining its block-level characteristics (using the inline-block display value) — after applying this, it can be simply aligned within its container like any inline-level element, using text-align.
To implement this, add the following rules:
#container {
text-align: center;
}
ul {
display: inline-block;
}
Here's the updated demo.
Reference
display on Mozilla Developer Network
Disclaimer: Support for inline-block is somewhat limited nope! it's actually very wide by now, see the compatibility table on caniuse.com.
There is a very neath, fully cross-browser and dynamic 'trick' to achieve this, as long as the menu stays on one line. It is very well explained here: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
The inline-block often suggested for this problem is not very well supported in legacy browsers in my experience. To be honest, I never use it. I always go for the clever method that Matthew James Taylor describes.
Edit:
As requested I will briefly describe the technique.
Your html should look like a normal list of links, with an extra wrapping div around it. Something like this:
<div class="menu-wrapper">
<ul>
<li><a ...>link</a></li>
<li><a ...>link</a></li>
<li><a ...>link</a></li>
</ul>
</div>
Now the rest is css work. The steps are as follows:
Float the wrapper to the left and give it a width of 100% to make it take up the full viewport width
Float both the ul and the li to the left and don't give them any width to make them adjust to their content.
Give the ul a position: relative of left: 50%. This will make it's left edge move to the center of it's parent, and this means the center of the viewport.
Finally you should give your li a position: relative of left: -50%. This will make them move past the left edge of the parent ul and makes the center of the list of li's line up with the left edge of the parent ul. Since we made that edge the center of our viewport in the previous step, the menu is now effectively centered.
As I said before, all credits to Matthew James Taylor, and definitly check out his thorough explanation. The drawings he made make it much easier to understand.
edit
As requested I set up a little fiddle to demonstrate the technique:
http://jsfiddle.net/fDmCQ/
Change the margin on the <ul> to 0 auto and give it a width (~575px or larger).
jsFiddle example
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
width:600px;
list-style: none;
text-align: center;
}

How do I position an element so that it acts like both 'absolutely' & 'relatively' positioned at the same time? - CSS

You can see the implementation here: http://jsfiddle.net/BMWZd/25/
When you click on one of the names in Box#1, you will see the circle in the top left corner of the box move up and down.
How do I stop that? While also, making sure that it shows in the top left corner of each of the boxes on all browser sizes?
So position:absolute will keep it in one place regardless of what happens around it. But it won't put it in the exact same position (relatively) on diff browser sizes.
But position:relative will.
How do I get the best of both worlds?
So position:absolute will keep it in one place regardless of what happens around it. But it won't put it in the exact same position (relatively) on diff browser sizes.
The position should be the same if you where using a reset file. At least in theory.
In my experience, when there are elements that change their size interactively, the best way to avoid "surprises" on the layout is by not using the box model for positioning, and having everything "around the element that changes its size" absolutely positioned.
In your case, I'd make the tds position relative, and everything inside them absolutely positioned:
Make the tds position:relative
Remove the float:left and the margins from css class #sit-in-corner. Position it by making it position-absolute and adding top and left.
Now the circled numbers should be "out of the influence" of the links. You can place the internal tables however you want (margins, etc) inside the td, but I'd also go with position: absolute for them.
EDIT - Noticed that the issue was happening because the td's reacted strangely to the things inside them changing their size.
Solved this mainly by putting a div inside the td, removing the class 'dashed-panel' from the td and put it on the div. Also, made the class 'dashed-panel' be position:relative, and the changes above.
The results can be seen in http://jsfiddle.net/BMWZd/30/
I have to remove all the extraneous stuff, jsfiddle was too slow with so much(?) html.
I know this doesn't directly answer your question, however I think it could be a better solution approach. Please correct me if I'm wrong.
I took a glance at your layout and IMHO it is a bit too complex. I think you would benefit from simplifying it.
Here is a quick example I did. Honestly, I don't know if it fits your needs but maybe it will be useful in some way.
The JS:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('li').click(function(){
$('.circle').removeClass('inactive').addClass('active');
$('li').removeClass('big');
$(this).addClass('big');
});
})
</script>
The styles:
<style>
li{
cursor: pointer;
}
#super-container{
width: 200px;
height: 200px;
background: #F2F2F2;
}
#circle-container{
padding: 10px;
height:50px;
}
.circle{
border: #FF0000;
width: 50px;
height: 50px;
}
.active{
background: #AA0000;
}
.inactive{
background: #330000;
}
.big{
font-size: 2em;
}
</style>
The markup:
<div id="super-container">
<div id="circle-container">
<div class="circle inactive"></div>
</div>
<ul id="the-buttons">
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>