There is a code block like this;
<div class="wrapper">
<div class="title">Title Text</div>
<div class="content">
<div class="block">Block text1</div>
<div class="block">Block text2</div>
</div><!--Content End-->
</div>
I change css overflow attr of content class like "overflow:scroll;" . But when I change this feature, overflow attribute of all div element changing. I want to fixed title class ,that don't scroll. How can I do this?
Try with:
div.content { overflow: auto;}
make sure your css is
div.content { overflow:scroll; }
Related
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
I have a DOM like this:
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more container nesting possible -->
</div>
</div>
The CSS is
.container .visual {
margin-left:20px;
}
.container .container .visual {
margin-left:40px;
}
.container .container .container .visual {
margin-left:60px;
}
which has to be done for every depth level and is of course silly.
Here's a jsfiddle (Updated: more structure, more lines of text)
Is there a simpler solution that maintains the tree-like HTML and has the same effect?
I know this is not a very elegant solution:
.container{
padding:20px 0 0 20px;
}
.nomove {
position:absolute;
left:10px;
}
DEMO
This code works fine:
<html>
<head>
<style type="text/css">
.container {
margin-left: 20px;
}
.nomove {
position:absolute;
left: 0px;
width: 100px;
}
.dummie {
color:transparent;
width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="visual">indent indicator</div>
<div class="nomove">text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned</div>
<div class='container'>
<div class='visual'>indent indicator</div>
<div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
</div>
</div>
</body>
</html>
The .nomove div is moved with position:absolute and left:0px to the left side. The dummie div makes a gap between two divs, because position:absolute has no height.
PS: Sorry for my english ;)
EDIT:
Now the dummie and the nomove div have the same text, the same width, but the dummie is transparent.
You could remove some of the container classes and simply rely on three visual classes.
HTML
<div>
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more nested containers possible -->
</div>
</div>
</div>
CSS
.visual1 {
margin-left:20px;
}
.visual2 {
margin-left:40px;
}
.visual3 {
margin-left:60px;
}
You can do it like this: http://jsfiddle.net/TMAXa/3/
Which is taking on from what #KevinBowersox said. but you dont need to use as much HTML code if you have an increment on the CSS.
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I have a site that has the following basic structure. This site should have a background that is white, with an image that apears once, but instead it just inherits the colour from the html{ } declaration in CSS. All elements below the element that should have the background are transparent, and even though the background is being added (checked in Firebug), it seems that this is below the background defined in html{ }.
This has only happened since I removed the declaration overflow: none; from #content-container, where as before that it worked. I need to remove this however, as changes that are occuring to the site require the nav menu to have dropdowns, so the container below has to allow overflow.
Is there a specific CSS reason why this is happening? Or anything else I need to provide for someone to be able to help? Thanks.
<div id="main-container">
<div id="header-container">
<div id="header-top">
{Code}
</div>
<div id="header-middle">
{Code}
</div>
<div id="header-nav">
{Code}
</div>
</div>
<div id="content-container">
<div id="content-left" class="index">
{Code}
</div>
<div id="content-right">
{Code}
</div>
</div>
<div id="footer-container">
{Code}
</div>
</div>
I'm guessing that #content-left and #content-right elements are floated? In which case the overflow: none on the #content-container was causing the element to self-clear. Without this, the element will not have a height because all the elements within it are floated, and therefore the containers' height cannot be calculated.
If you must use overflow: visible, the workaround is to place a div at the end of the containing element with clear: both set on it:
<div id="content-container">
<div id="content-left" class="index">
{Code}
</div>
<div id="content-right">
{Code}
</div>
<div class="clear"></div>
</div>
.clear { clear: both; }
Let's say I have a this markup:
<div id="container">
<div id="header">content</div>
<div id="left-column">content</div>
<div id="right-column">content</div>
<div id="footer">content</div>
</div>
The #container is centered and fixed at 1000px, #header and #footer are 1000px, and #content-left and #content-right are floated left, at 500px each.
How do I extend the header and footer background colors the full length of the browser window if the container is fixed?
First, change a little your html structure. While you're there, why not using html5 for header and footer elements.
Html
<header>
<div class="container">
content
</div>
</header>
<div class="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<footer>
<div class="container">
content
</div>
</footer>
Css
Than, in the Css, set the header and footer width to 100% and make them de color you want. In this example red. Than use a class .container that will make the content wherever you put it (header, main section, footer) display in the middle of the screen, but without any background color.
header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}
Hope this help :)
The header and footer divs need to be outside the container div.
Apply the background colour to a wrapper around the header/footer.
html
<div id="header-wrapper">
<div id="header">content</div>
</div>
<div id="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<div id="footer-wrapper">
<div id="footer">content</div>
</div>
css
#header-wrapper{width:100%;height:xxx;background:#3399ff}
#header,#footer{width:1000px;margin:0 auto}
The accepted answer is really a bad way to accomplish this. HTML is used for semantic meaning of the content. Removing your header from your container is not semantic! Here's a much better way of doing this that still preserves the semantic content: http://css-tricks.com/full-browser-width-bars/.