Centering in <div> Using AlloyUI - css

I'm having some trouble getting a few buttons and images to center in a div. Please see the below image:
Now as you can see, the buttons and images etc are not getting centered (might be worth mentioning that these things are inside a form tag). Then ofcourse I have some test text that does get centered..
My HTML has the following structure:
<div class="navigationButtons">
<form>
</form>
<p>Some tect that gets centered...</p>
</div>
And my CSS:
.navigationButtons{
text-align: center;
}
Any idea why this would happen?

I am not able to test it on your code but this should work.
.navigationButtons {
width:auto;
margin:0 auto;
text-align:center;
}
or you could just align the form
.navigationButtons form {
width:auto;
margin:0 auto;
}

It works for me. See this example.
Make sure no other CSS rules override the ones you have. Also, please post here all of the HTML code as it might be significant.

Related

Should i use anything other than float?

I want two add two forms one on left and one on right of the page
and then what i write should be displayed below them.But the problem is it is being shown between the two forms.
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
CSS
.login{
float:left;
}
.signup{
float:right;
}
The use of floated element is highly discouraged since there are a lot of other better alternatives that can be used instead.
Best alternatives are
display: inline-block;
CSS
.login{
display:inline-block;
}
.signup{
display:inline-block;
}
Flexbox
If you still want to use floated elements you can use a clearfix. Clearfix is a way an element automatically clears its child elements. For more information read How to use clearfix
Mention the Width property width:50%; it will work
.login{
float:left;
width:50%;
}
.signup{
float:right;
width:50%;
}
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
Adding style clear:both to your paragraph will help.
.clear
{
clear:both;
}
<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>

CSS position (tabbless) and removing (hiding) empty DIVS

I'm having some trouble getting this done 'right'...
its a two parter. :)
1.) is getting the layout to look like how I need it (without resorting to tables!), but for some reason I can get the divs and nested divs to 'act right'... (surely its my error/mis-understanding)
I am trying to get a layout like so, using only DIVS and display..etc..
http://dmstudios.net/misc/layout.jpg
I have attempted it myself (so you dont think Im just looking for a handout) :)..
but some things like the vertical alignment of the custom div container isnt working..etc
Here is my JSFiddle attempt: http://jsfiddle.net/yeKxU/1/
JSFiddle Code:
<div class="container">
<div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
<div class="custom">
<div class="president">item1</div>
<div class="mission">item2</div>
<div class="active">item3</div>
</div>
<div class="url">www.nike.com</div>
<div class="freetext">random text</div>
</div>
CSS:
* {
border: 1px dashed blue;
padding:0;
margin:0;
}
div{
display: inline-block;
border:2px solid;
border-radius:2px;
border-color:#FF0000;
}
.container{
width:450px;
padding:0;
margin:0;
}
.logo{
padding:0;
margin:0;
}
.custom{
vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/ /*needs to auto stretch to fit the rest of the space after image*/
}
.custom div{
display:block;
background-color:#EEEEEE;
}
.url{
width:100%;
}
.freetext{
width:100%;
}
Couple notes: the '3' fields to the right of the image div, will have varying data in them.. (meaning I am not clear if they will need to wrap or not...hopefully not a problem)
The second portion of the question, is about implementing some dynamic capabilities. (jQuery I imagine should work)..
2.) Knowing the general (perfect scenario) layout I am trying to achieve above...
I need to also code things in a way.. that is certain parts of the data are MISSING, then that 'cell' (div) is removed/hidden (or something)
*(I am building this using PHP printed to screen, to spit out the HTML/DIVS..etc and using variables to populate the content of the DIV/image..etc)
So for example..
if the IMAGE was not there (variable is empty).. Id like the the CUSTOM div that has 3 child divs in it 1 for each of the text fields) to expand all thew way to the LEFT.. as the logo/image DIV will have nothing (or be removed/hidden since its empty)
Same goes for the text fields in the CUSTOM DIV container.. if one of those fields are BLANK... its should NOT just have a blank/empty placeholder... it should be removed/hidden.. and the rest of the data butted up to the TOP (under any other fields that may be present)
I've seen examples (sorta) where you have some DIV blocks on the stage.. click on one.. it removes it.. the other DIVS move over...etc... (sorta the same thing, except I cant manually click things to remove them)..
So maybe some jQuery to go through the 'DIVS' see if its empty and then remove itself?
-or-
would just having some sort of layout that is fluid/liquid work? be better? so I dont really need to check if its empty.. if nothing is IN the cell/DIV.. then the other just adjust their WIDTH/POSITION to make-up for it?
Let me know what you guys think? JSFiddle examples are appreciated!
Thanks!
to get the layout in question one you do like this...
#divA {float:left;}
#divB {float:left;}
before divC you can put an empty div (id="empty") like this...
#empty {clear:both;}
this should fix the design, assuming you have your width seth on the divs...
for question 2 i suggest you create the divs dynamically, when you create your content on page... if you want examples, just let me know...
There are a lot of properties you can set on your divs, one is max-width... one risk of not setting any value on width on your divs is that if your total width get wider than your holding container your divB will stack up under divA... and i think you dont want that to happen... :) you can do some experiments with min-width and max-width on your divs to get the behavior you want because i guess you have some values on your pic to play with...
divA {
float:left;
max-width:50px;
}
divB {
float:left;
min-width:400px;
}
as example, you have to find your values, trial and error-way i guess...
there is also a lot of guides on internet if you search on css and positioning... happy hunting!

html/css buttons that scroll down to different div sections on a webpage

Can someone help me I'm searching for css/html code example:
I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.
If I click this button(middle) my page would automatically scroll down from the top
of my page to the div #middle section.
same for the other buttons refered to div id='top', and div id='bottom'
Thanks in forward! I really couldnt find any solution on the internet.
Is there a way to keep my buttonlist on a fixed position so it stays on screen while
moving through sections?
try this:
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
For something really basic use this:
Go To Middle
Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.
There is a much easier way to get the smooth scroll effect without javascript.
In your CSS just target the entire html tag and give it scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
<html>
Click Here to Smoothly Scroll Down
<div id="down">
<h1>You are down!</h1>
</div>
</html
The "scroll-behavior" is telling the page how it should scroll and is so much easier than using javascript. Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code.
HTML
Top
Middle
Bottom
<div id="top">Top</div>
<div id="middle">Middle</div>
<div id="bottom">Bottom</div>
CSS
#top,#middle,#bottom{
height: 600px;
width: 300px;
background: green;
}
Example http://jsfiddle.net/x4wDk/
Try this:
Scroll to top
If you want smooth scrolling:
html {
scroll-behavior: smooth;
}

Background image only being displayed once

I have a strange problem that I can't get my head around:
I have a header div and I would like to display a background image to be repeated horizontally:
The HTML:
<div id="headerwrapper">
<div id="header">
<p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
</div>
</div>
Here is the CSS:
* {
margin:0;
padding:0;
}
#headerwrapper {
margin:0 auto;
width:630px;
}
#header {
width:630px;
background-image:url(../images/headermiddleback.jpg);
background-repeat:repeat-x;
}
When I look at it in the browser, I can see only 1 instance of the background-image being displayed above the text. But it is not repeating.
Any idea what I am doing wrong here?
You might want to use repeat-y instead of repeat-x
#header {
width:630px;
background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
background-repeat:repeat-y;
}
Here is your example on jsFiddle, seems to be working.
http://jsfiddle.net/MgvLT/1/
Perhaps you have some other CSS that's getting into the way or maybe your background image has lots of empty space. Please post your example on jsFiddle.
Perhaps you need to clear your browsers cache?
For example, here's a SO Post showing how to do it for Chrome.

boxes adding up to 100% of the browser

I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext

Resources