This is a followup to this post (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling).
Here's the illustrated requirement (/www.creativesplash.net/images/2.gif). Here's what I've achieved so far.
On browser resize 2 things should happen:
The tabs should shift to below (already achieved)
The preferences should take up 100% width + a border should be applied separating itself from the tabs! This is where I need your help (either a pure css solution or a javascript solution)!!
EDIT: A prototype solution would be great!
Thanks in advance for your help!
Vasanth
JavaScript? Pshaw, I think we can manage that in simple CSS, don't you?
Here's a proof of concept. It relies on hiding the second border behind the tab content when it fits on one line. Finishing off the styling and making sure it lines up with your particular choice of fonts is left as an exercise for someone less lazy.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<title> tabs test </title>
<style type="text/css">
#nav { border-bottom: 1px solid silver; }
#prefs { float: right; padding: 0.7em 0; }
#tabs { float: left; padding: 0.5em 0; white-space: nowrap; }
#tabs a {
display:-moz-inline-stack; display:inline-block;
margin-right: 0.7em; padding: 0.3em 0;
width: 7em; text-align: center; background: silver;
}
#tabs a.selected {
position: relative; z-index: 2;
background: white; border-width: 1px; border-style: solid; border-color: black black white;
}
#content { clear: right; border-top: 1px solid silver; }
#content .wrap {
clear: left; position: relative; z-index: 1; top: -0.6em;
background: white; border: solid black 1px;
padding: 1em;
}
</style>
</head><body>
<div id="nav">
Sample links |
blah
</div>
<div id="prefs">
Preference 1 | Preference 2
</div>
<div id="tabs">
Active Tab
Tab 1
Tab 2
Tab 3
</div>
<div id="content"><div class="wrap">
Lorem ipsum dolor sit amet blah blah blah.
</div></div>
</body></html>
This uses inline-blocks to stop the tabs wrapping when they don't fit on the screen on their own. You might or might not want that, I don't know. If not, change that line to a simple float.
I don´t know about css only, but in javascript you can get the width of the two ul's, compare it to the width of the parent and if bigger, add a new style to your preferences ul, setting it to 100% width and adding the bottom border.
Quick jQuery / javascript solution (not tested...):
$(document).ready(function() {
$('.ArticleTabs').foreach(function(){
if ( ($(this).find('.Preferences').width() + $(this).find('.tabs').width()) > $(this).width() ) {
$(this).find('.tabs').addClass('underlined_class');
}
});
});
You will need to add jQuery before this part of javascript. For example from Google (if you don´t host it yourself):
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
The border issue is because there is a background on the UL. When the LIs wrap, you get the background wrapping as well.
It seems that you want something like this.
#Features_Row{
border-bottom:1px solid #D2E0C0;
padding-bottom:3px;
}
Related
My front-end skills are poor, so does my English expression. Sorry ahead.
I have these several divs (some colors and margins are added as some kind of visual assistance):
<html>
<header>
<style>
.outer-container {
margin: 2px;
padding: 2px;
border: 1px deeppink dashed;
}
.inner-container {
margin: 2px;
padding: 2px;
border: 1px deeppink dotted;
display: flex;
flex-direction: row;
align-items: center;
}
.content0 {
background-color: black;
color: white;
border: 1px red solid;
white-space: nowrap;
}
.content1 {
max-width: 500px;
background-color: black;
color: white;
flex-grow: 1;
border: 1px red solid;
white-space: nowrap;
}
</style>
</header>
<body>
<div class="outer-container" style="width: 100%" align="center">
<div class="inner-container">
<div class="content0">Placeholder</div>
<div class="content1">Placeholder</div>
</div>
</div>
</body>
</html>
Here are my expected behaviors:
The outer-container has some kind of "externally appointed" width (width: 100% in this example, but not limited to this circumstance).
The content0 is expected to have a minimum width for displaying its content. The content1 is expected to expand horizontally and occupy its "container"'s space, at most 500px.
The inner-container is expected to expand and occupy its "container"'s space, while considering the maximum width of its children. In this example, I expected it to expand until content1 reaches its max-width. Then, inner-container is aligned to the center of outer-container.
Fig1: when outer-container is narrow, inner-container simply fills the outer-container.
Fig2: when outer-container gets wider, inner-container expands until its children stop expanding, and then inner-container gets to the center of outer-container. This picture was made by mspaint, not really I know how to implement it with HTML/CSS.
However, I bumped into troubles when trying to implement the third item. I've tried many combinations and searched over again. But for each attemption , either inner-container is not expanded at all, or inner-container expands and eats up outer-container. Is it possible to implement this with HTML and CSS (and JavaScript if really needed)? And if so, how?
The closest I could get is https://jsfiddle.net/ne9phs5y/.
The content0 and content1 behave as expected but unfortunately inner-container fills the entire outer-container which might or might not be a problem. The most important part was setting flex-basis of content1 to 500px.
In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.
I have an issue with some CSS shrinkwrapping. First the (very simple) code...
<!doctype html>
<html lang="en-US">
<head>
<title>Device Activation</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: white;
font-family: "Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
//border: 1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
//display: inline-block;
padding: 0px 10px;
//text-align: justify;
//-moz-border-radius: 40px;
}
</style>
</head>
<body>
<h1>Boogy-woogy</h1>
<div id="start" class="toggleable">
<p>Test</p>
</div>
<script type="text/javascript">
function makeVisible() {
// Not here yet, but that's okay...right?
}
</script>
</body>
</html>
The issue: When you remove the comments from border: 1px solid; the div top and bottom margins will increase significantly.
I have done some research and I understand that this issue relates to collapsing-margins, but I have tried several fixes and nothing seems to effect my end result.
Any help would be greatly appreciated.
i think what you mean is because the p has got default margins and padding. add
p {
margin:0px;
padding:0px;
}
to the css
Maybe your code sample is just a typo.
If not, then please note that with JavaScript comments, you have the options of:
// This is a javascript comment
/* This is a javascript comment as well... */
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments
If you want to make a CSS comment,
you cannot use the // this is a comment snyntax.
You need to use the /* this is a comment */ syntax.
http://www.w3.org/TR/CSS21/syndata.html#comments
Now, when I hide the border: 1px solid line, I do not see the top or bottom margin changing. But I think what was happening with the improper syntax you used in the code in your question, the div was resorting to display: block because the inline-block rule was not being applied. Because inline-block was not being applied, the div stretched to its full width.
http://jsfiddle.net/2f59k/
body {
background: white;
font-family:"Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
/* border: 1px solid;*/
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
display: inline-block;
padding: 0px 10px;
text-align: justify;
-moz-border-radius: 40px;
}
Again, if nothing else is gleaned from this answer,
this is not a CSS comment:
// border: 1px solid;
This is a CSS comment:
/* border: 1px solid; */
UPDATE
This issue has nothing to do with border radius, borders, etc. Your problem, if understood solely as the amount of space above and below the text, yet inside the grey background, is that the margin surrounding the text.
This increase is significant, but not nearly as significant as the change in the width when the div goes between block and inline-block.
Setting the margin of the inner paragraph to margin: 0 resolves the issue.
http://jsfiddle.net/74eTg/
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");
I like how Facebook keeps that toolbar on the bottom of the page.
Does that require cross-browser ninja skills?
Their JavaScript/CSS files are huge so I am having a hard time narrowing down the implementation (for learning purposes).
You can achieve the effect with CSS.
Here's a basic example. No, it doesn't require cross-browser ninja skillz. =)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>
The best is to install Firebug and see how they did it. When I see interesting things on the web, Firebug is the best way to analyze it's HTML structure, attached CSS and you can even directly modify the CSS/HTML structure to see how it changes. Everything you see on a website can be simply read. Remember, the source (HTML, CSS, JavaScript) gets delivered with it :)
That solution doesn't work well for pages that have content extending beyond the bottom of the browser window.
Try something like this instead:
<div style="display: block;
position: fixed;
text-align: center;
z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>