I am making a menu that is a div with with:100%; and height:45px;
each element inside the menu are divs. My goal is to make it adapt to any screen resolution so I start by placing the first div with a margin-left:2%;but the for the next one I am not sure of what I must use.
I could make the first element in float:left; and use margin like margin-left:10%; but then if we change the screen resolution it's not good anymore. If I don't put anything it goes under the first button. If I use the margin-left in px it won't be good because of the first margin-left:2%; How can I achieve this?
This is what I curently have(you can see that the buttons get under the first one):
Why don't you use display:inline-block; and whatever the margins that are great for you?
Meaning that, the first element can have 2% and the second one as well:
<div id="menu">
<div class="element">1</div>
<div class="element">2</div>
</div>
#menu{
width:100%;
height:45px;
background:#f00;
}
.element{
background:#0f0;
display:inline-block;
margin-left:2%;
}
I think you should provide something like a jsfiddle source when asking these type of questions :)
Related
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!
I'm coding my own scrolling social bar but i'm nut sure about method I'm using. As you can see on the pic above, I had put a wider grey div inside the narrower content div. Then I've set grey's one a css to make it's z-index less than the content z-index. It works ok and following content once I scroll the website but my question is - is this a good method to place a bar like this? Maybe there is an easier solution and better for browsers compatibility, isn't it?
Sincerely,
Matt
You can just have the size of the DIV cut down to less space and than make it postion:fixed so that it moves with the scroll.
Fiddle
HTML
<div id='div1' align='center'>
<span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>
CSS
#div1 {
position:fixed;
top:30px;
left:5px;
background:yellow;
height:60px;
width:50px;
border:4px ridge black;
}
#div2 {
height:800px;
width:200px;
background:orange;
margin-left:60px;
}
#grey {
background:grey;
}
Why don't you position the "like tweet share" div (i guess) relatively to content.
div#content{position:relative;} and div#share{position:absolute;top:...;left:.. }
I am attempting to put together a webpage layout with the following elements:
1. A two column setup with menu on the left and main content on the right.
2. A "function bar" fixed to the top of the right column. Fixed and always visible.
Here are the catches:
I want the two columns to scroll independently of each other if their height pushes past the browser window resolution
The Content Managment System I use adds a fixed pane to the top of the page to show control options
I have crafted an image that gives a visual representation of the layout I am after. I hope it helps this make sense.
Image of layout for reference
Here's where I'm at currently in attempting to create this layout
<div class="CMS-Admin-Bar"></div>
<div class="total-wrapper">
<div class="left-pane">
<div class="menu-pane"></div>
</div>
<div class="right-pane">
<div class="Function-Pane"></div>
<div class="Content-Pane"></div>
</div>
</div>
.CMS-Admin-Bar{
position:fixed;
height:43px;
left:0;
top:0;
width:100%;
z-index:10;
}
.total-wrapper{
position:relative;
}
.left-pane{
position:absolute;
top:0;
bottom:0;
left:0;
height:100%;
width:283px;
z-index:8;
}
.right-pane{
position:fixed;
top:0;
left:283px;
right:0;
bottom:0;
overflow:auto;
}
.Function-Pane{
position:fixed;
z-index:8;
top:0px;
left:283px;
height:43px;
}
With this CSS I have a few problems:
The "CMS-Admin-Bar" covers my "Function-Pane" when an admin is logged in.
The "Function-Pane"'s right 283px is being cut off. I need this fixed div to fit in the screen, while still having a fluid width.
I hope I was descriptive enough. Thanks for your help and time!
Alex
Check out this: http://codepen.io/anon/pen/kEhny UPDATED AGAIN
The "CMS-Admin-Bar" covers my "Function-Pane" when an admin is logged in.
You will need to find the height of the CMS-Admin-Bar and add padding to the parent element (might be the body for this case) or add a top margin to the total-wrapper element.
The "Function-Pane"'s right 283px is being cut off. I need this fixed div to fit in the screen, while still having a fluid width.
It seems like it works in the pen now. Note that this layout really isn't responsive though.
I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
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