Is there any way to align element (div in our case) to bottom of flex?
Fiddle here: http://jsfiddle.net/djeQv/1/
#images div {
position:relative;
bottom: 0px;
margin-top: -10px;
padding-top: 10px;
cursor: default;
}
This usual way didn't worked this time.
Why not position the text absolute? Something like this:
#images div {
position:absolute;
bottom: 0;
text-align: center;
width: 100%;
}
Since this takes the text out of the flow of the document, you will need to add some padding to the bottom of your link to prevent the text from overlapping the image.
I updated your fiddle to demonstrate: http://jsfiddle.net/djeQv/2/
Related
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
I have a type of navigation that is contained within a 'pill' of sorts.
I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.
I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.
Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/
How can I set this div element's width based on the amount of navigation items in the list?
Simply add display: table
DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/
.tabset-container {
margin: 0 auto;
position: relative;
top: 25px;
z-index: 1;
background: transparent;
text-align: center;
display:table;
}
Also add overflow: hidden to the tabs so then your rounded corners still show
.tabset {
overflow:hidden;
}
I was going in jQuery direction - fiddle (get the width and pass it trough .css())
+ display: inline-block on .tabset
I've been trying to figure out how to get my links working in layered divs
I have a big div containing two other divs:
main div with content and
a navigation div for my menu
The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:
.navigate {
width: 1020px;
height: 300px;
position: absolute;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
top: 190px;
z-index: -1;
border: 1px solid red;}
and
.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */
z-index: 0;
border: 1px solid green; }
it's like the navigation div is behind something :$
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
I've tried to fix it with
body {
position: relative;
z-index: 0; }
read somewhere that it should fix the problem - but not for me
Any ideas how to fix it?
Thanks in advance
Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;
Got it working!
Just added:
position: relative;
to the .main-div
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work
but..
if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind
use negative margin for the div you want to over lay for example
.overlay-div{margin-top:-20px;}
In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.
I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.
I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
Maybe a negative margin?
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
margin: -90px auto 0;
}
http://jsfiddle.net/NmUfT/
Relative positioning could fix this for you:
nav {
position: relative;
top: -20px;
}
place the div inside the header div.
nav {
position: relative;
bottom: -30px;
}
A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.