On my Drupal 7 website, I'm having three blocks in an environment, called 'Topbar links', with the following layout: http://jsfiddle.net/Jeroen94/54L57/1/.
Mind that the first and third block are Nice Menus. I don't provide all the code, because most of it isn't relevant, but the layout should be maintained. The three blocks are displayed at the right, but now, I'd like to display 'Nice Menu 1' to the left and keep 'My Profile' and 'Nice Menu 2' to the right. I thought
.menu-1 {
left: 0;
}
would do the trick, but that doesn't work, because I couldn't overwrite the right. Maybe right: ...px could do the trick for 'Nice Menu 1', but I don't find that a nice solution, because the width from 'Topbar links' can still change in the future, causing a layout break.
How can I solve this?
I'd go about this using float, like this
.topbar-links {
position: absolute;
right: 0;
top: 0;
vertical-align: top;
width: 100%;
}
.topbar-links div {
float:right;
clear:right;
}
#block-1 {
float:left;
}
http://jsfiddle.net/Y7mwW/
The problem is that you are positioning the parent div to the right and not setting a width - the children of the div can only be positioned within the constants of the parent div
You can also use the :first-child selector to select the first and this will eliminate the need for a separate class.
Try
<div class="topbar-links">
<div id="block-1">Some content</div>
<div id="block-2">Some content</div>
<div id="block-3">Some content</div>
</div>
.topbar-links {
position: absolute;
right: 0;
top: 0;
vertical-align: top;
width: 100%;
}
.topbar-links div {
float: right;
}
.topbar-links div:first-child {
float: left;
}
JSFiddle http://jsfiddle.net/JC9ac/
Another solution to stop the switching around of elements that you mentioned jsfiddle.net/JC9ac/2
Update your css with following code:
.topbar-links{
text-align: right;
}
.block-1{
float: left;
}
If you need to view blocks inline add
#block-1,
#block-2,
#block-3{
display: inline;
}
fiddle
Related
I'm not very good at CSS, I guess that will we easy to one of you.
Look at image below, i'm trying to center my text but center it with the div parent's width, as if there was no button, but I don't know how to proceed.
<div class="parent" style="width:500px;">
<div class="container" style="width:400px;"> My text here </div>
<button style="width:100px;">My Button</button>
</div>
I tried :
.parent { text-align: center; }
but that center the text with the .container width (so at 200px) but i'm looking for a way to center it a 250px here (.parent width)
I think about doing that with a padding-left but that's not a "clean" method in my case because button is not always displayed.
If someone knows how can I do that please :)
image:
One option would be to use absolute positioning on the button!
.parent {
position: relative; // position the button within the parent div
}
button {
position: absolute;
right: 0;
top: 0; // or whatever, position it where you want it
}
.container {
padding-right: 100px; // so the text doesn't overlap with the button
padding-left: 100px; // so the text is balanced
text-align: center;
}
EDIT:
And when the button isn't needed, you could use a conditional on the parent --
.container--with-button {
padding-right: 100px;
padding-left: 100px;
}
.container--without-button {
padding: 0;
}
If I understand you right then all you'll need to do is add a text-align property to your div.
.div { text-align: center }
I made a quick example that matches your diagram here, hope it helps.
https://jsbin.com/qubeqezama/7/edit?html,css
From what I see you only need to add display: block; to the .parent element. That way they'll be both displayed as a block and then all the text will be centered. ;)
I have 3 divs in a parent div which looks like this:
<div id="maincontent>
<div class="left"></div>
<div class="mainbody"></div>
<div class="right"></div>
</div>
The website is 1000px wide.
What I need is to keep the .mainbody div at a minimum of 570px, but have it expand if one of the other 2 divs is removed from the page, which are each given 215px width.
All 3 divs are also floated left.
I tried using min-width and max-width on .mainbody but it doesn't really work. Any other ideas?
My current CSS:
#maincontent {
width: 100%;
overflow: hidden;
}
.left, .right, .mainbody {
float: left;
}
.left, .right {
width: 215px;
}
.mainbody {
width: 570px;
}
CSS Only Solution 1
This assumes the question was accurate in stating "if one of the other 2 divs is removed from the page."
See this fiddle which uses the following code, the key part of which is the :first-child and :last-child change based off your html structure change that you mention. When the left is deleted, the mainbody becomes the first-child and when the right is deleted the mainbody becomes the last-child, so you reset the width if such occurs.
Key CSS
.mainbody {
width: 570px;
float: left;
}
.mainbody:first-child,
.mainbody:last-child {
width: 785px;
}
.left,
.right {
width: 215px;
float: left;
}
CSS Only Solution 2
This accounts for the div remaining, but having no content and being zero width (which is apparently what the situation actually is).
There is a CSS only solution (see this fiddle), but it requires one to restructure the HTML order of the elements and to adjust how they are floated.
Needed HTML Structure (mainbody is last)
<div id="maincontent1">
<div class="left"></div>
<div class="right"></div>
<div class="mainbody"></div>
</div>
Key CSS
.mainbody {
min-width: 570px;
overflow: hidden; /* this triggers expansion between left/right */
}
.left {
width: 215px; /* this is assumed to be zero if no content in div */
float: left;
}
.right {
width: 215px; /* this is assumed to be zero if no content in div */
float: right;
}
Just ad and event to the function. .click(), .ready() etc
if($('.right').is(':visible') == false){
$('.mainbody').width(785+'px');
}
else{ }
or use .size() / .length()
I have a parent container div and 2 sub ones in it, one to the left of the parent and one in the horizontal middle. how can I do that using css? suppose the html code is like this:
<div id="ParentContainer">
<div id="SubContainerToLeft"></div>
<div id="SubContainerInHorMiddle"></div>
</div>
Here you go: :)
http://jsfiddle.net/bzUSY/
Try this.
#ParentContainer {
height: 100px;
width: 500px;
}
#SubContainerToLeft {
float: left;
width: 50%;
}
#SubContainerInHorMiddel {
margin: auto;
width: 50%;
}
And then just play with margin and padding as much as you like. You know what margin and padding is, right?
I am trying to apply a background image hover effect on each row in my css table but need it to appear to the left of the containing element.
View image http://www.weiserwebworld.com/images/view.gif
Any ideas?
JS:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
CSS:
#container {
width: 660px;
margin: 20px auto;
}
div .table {
display: table;
border: 1px red solid;
}
div .table-row {
display: table-row;
}
div .table-cell {
display: table-cell;
width: 145px;
padding: 10px;
vertical-align: top;
}
.highlight {
cursor: pointer;
background-image: url('click-to-view.png');
background-position: 0 center;
background-repeat: no-repeat;
}
HTML:
<div id="container">
<div class="table">
<div class="table-row">
<div class="table-cell">Ralph Kramden</div>
<div class="table-cell">Truck Driver</div>
<div class="table-cell">8/17/2010</div>
<div class="table-cell">N/A</div>
</div>
<div class="table-row">
<div class="table-cell">Ralph Kramden</div>
<div class="table-cell">Truck Driver</div>
<div class="table-cell">8/17/2010</div>
<div class="table-cell">N/A</div>
</div>
</div>
</div>
First, throw away this:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
It is an abomination.
Then change the CSS selector .highlight to .table-row:hover. As you clearly don't care about IE6 (where :hover only worked on a elements), there's nothing wrong with using :hover.
Now to the rest of the problem.
The technique that I would use for this is the before or after pseudo-element. Something like this:
.table-row {
position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */
}
.table-row:hover:after {
position: absolute;
left: -80px; /* Adjust as desired */
content: url(click-to-view.png); /* This makes it an image */
}
There's plenty of tweaking that can be done with this, but that's the general idea. No demo on jsfiddle as I can't be bothered doing the table structure or getting an image for it.
You can do this in pure CSS.
This is quick and dirty, you'll have to tweak it to how you want, but the general idea is:
If you give your row an id () you can add a CSS styles like this:
.overlay {
display: none;
position: absolute;
left: -30px; //makes it appear left of box, even though it's technically "in" box.
}
#table-row1:hover .overlay {
display; block; //Causes div to appear.
}
Now, simply add with the image you want, that will appear as you roll over the row.
Note that the class=overlay div MUST be placed INSIDE of the id=table-row1 div or the hover-appear will not work!
I would also recommend redoing this using tags with the same :hover approach, as your current method of divs with table properties could get unwieldy very fast.
You need to put your image in a DIV, then position the DIV relative to the row. Backgrounds cannot go outside the boundary of their container.
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)