i wanna make a floating menu kind of like facebook with css with no animation just straight up attached to the top all the time, i have this div
<div id="topmenu">
<ul class="topmenu_buttons">
<li class="home">Home</li>
<li class="Change_Location">loaction</li>
<li class="Help_Topmenu">help</li>
</ul>
</div>
and i have my css file already made but empty but i would like a quick explanation on how to arrange these three links in css as a list with a small normal font in a list fashion one on top of the other all inside a black div the links located to the left but a few pixels to the right from the left and also
if its possible to apply the floating css effect (((postion:fixed ))))on the div so it applies to everything on it, if not possible then how to apply it also for the links
also how to make it look like kind of like facebook but black and slighter bigger thicker i been trying with my css notes but it never works for me i dont know what im doing wrong
thank you i basically want the css code for a external file not inline style
That should do everything you want to do:
#topmenu{
position:fixed;
top:0;
background:#000;
width:100%;
height:50px;
}
#menu {
postion:fixed;
top:0;
background:#3B5998; same color as fb has
width:100%;
height:46px;
left:0;
z-index:2; //give this so, your header or menu will not get under content!
}
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!
At the get-go, here's the fiddle.
I want a <ul> in which each <li> has a <p> and then an icon floating on the rhs. The paragraph may take 1-4 lines, and I want the icon to sit nicely in the middle of the line no matter what. The double wrapping <p> is necessary, trust me :)
The width of the <p> has to be 100% less whatever space is necessary for the icon. Basically, I want the icon to sit halfway up the space left by the right-margin of the <p>.
The solution here uses background-image, but that's no good for me because the image has to serve as a draggable handle for mobile devices. (I'm using this approach to modify a jQuery sortable desktop site for touch screen.)
The fiddle uses a placeholder <img> because of the demands of jsfiddle, but I'll actually use an <a> with an image off a sprite.
I want to avoid having a negative top margin, because the margin will move into the preceding line and could mess up the dragging (i.e., you could inadvertently drag the wrong line).
Thanks.
Based on this answer by bfrohs,
DEMO here
HTML
<ul>
<li class="absoluteCenterWrapper">
<p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
<img class="icon" src="http://placekitten.com/g/20/20">
</li>
</ul>
CSS
.text {
margin-right:35px;
}
.absoluteCenterWrapper {
position:relative;
}
.icon {
margin:auto;
position:absolute;
max-height:100%;
max-width:100%;
top:0;
bottom:0;
right:0;
}
Change the position of the li element to be absolute and that of the img also absolute. Consider adding this code instead of using your css.
.icon{
margin:40% 5%;
float:right;position:absolute;
}
See this fiddle.
http://jsfiddle.net/NXWPE/47/
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 :)
I'm not sure if I'm using the correct terminology to describe what I'm looking for but it's the best I could come up with.
Essentially I have a list of items that I'm currently displaying in DIVs. I'm using the jQuery UI plug-ins and hooking up styles to toggle when the user hovers over each item. Now I'd like to have a small toolbar-like set of buttons appear in the upper-right corner of each item when the mouse hovers over that item. When the mouse moves up or down to the next item, the toolbar "moves" to that item. Of course, it doesn't really move - I'm assuming that I'm toggling the visibility of a toolbar associated with each item.
The latter point is due to a couple of factors including that the buttons are encoded with the id value for each list item so the command knows which item to work against.
What I need to know is how to create the HTML and CSS so that I can have a DIV with contents that are unaffected by the display of the toolbar. And the markup and style settings to get the toolbar to appear in the upper-right corner of each item, above the existing content.
UPDATE
I basically have a <DIV> wrapper that contains another <DIV> with text and another <DIV> that contains a set of image buttons (images wrapped in anchors). What I need is the HTML and CSS so that the <DIV> (or whatever other element is required to make it work) containing the buttons appears to float in the top-right corner of the parent <DIV> as shown in the picture below:
I can then use jQuery to show and hide the buttons when the item is hovered.
If you ONLY need the HTML/CSS you could do something like this:
CSS
/* this contain both your injected JS and your current content */
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;}
.highlight * {margin:0; padding:0;}
/* you will place your action buttons here, they seem to be: delete, promote, demote */
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; }
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;}
/* add the styles per each button, they will all look the same for now */
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;}
HTML
<div class="highlight">
<ul class="nav">
<li><a>DELETE</a></li>
<li><a>PROMOTE</a></li>
<li><a>DEMOTE</a></li>
</ul>
<p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p>
</div>
EDIT: Updated with the code I posted at http://jsfiddle.net/edCD3/
Good luck,
Leo
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