I am building a navigation in angular which loads subpoints that are indented (I hope it's the right word).
So main nav-points will be on the very left of the navigation bar, sub nav-points will have a margin-left to have them indented a little bit. Futhermore, sub-sub nav-points will have a higher margin to have them indented further.
Now on it's own, this works just fine.
My issue is that I also need to display buttons on the very right side of the navigation bar that are not indented.
Since the navigation is loaded recursively and the buttons are for the individual navigation points, I can not place them in the parent.
Currently, html/css wise, this looks somewhat like this:
Parent - html
<div class="nav">
<items [items]="items" [subNavToggle]="false"></items>
</div>
<div class="content">
<content></content>
</div>
Parent - css
.nav {
float: left;
width: 245px;
align-items: stretch;
padding-left: 14px;
}
item/navpoint - hmtl
<div class="item" [class.subnav]="subNavToggle">
<div class="link"><a [routerLink]="[item.path]">{{ item.label }}</a></div>
<div class="edit-button"><img [src]="icon" /></div>
<div class="children indented">
<items [items]="items.children" [subNavToggle]="true"><items>
</div>
item/navpoint css
.item.subnav {
font-size: 100%;
width: 100%;
}
.indented{
margin-left: 10px;
}
.item {
font-size: 105%;
margin-top: 8px;
height: 20px;
width: 231px;
word-wrap: break-word;
display: flex;
text-align: center;
border-bottom: 1px solid #e0dede;
}
.link {
width: 80%;
display: flex;
height: 20px;
}
.edit-button {
float: right;
width: 24px;
text-align: right;
padding-left: 12px;
height: 24px;
}
Now due to the div around the recursive call inside the items having the indented class, the further down the sub-navigation I go, the further indented it gets.
The issue are the buttons, with further indention(?) they are pushed further off to the right. I'd want them to be the same distance from the right border of the navigation-box.
The html structure aspect of the buttons being inside the items can sadly not be changed.
My goal now is the decrease the width of the sub-items with each further recursive step to somehow align the buttons properly. sadly toying with the width property has not given me the results I hoped for.
As with the code above, the whole thing looks like this:
now, how can I get all the buttons properly aligned?
Try adding position relative on .item class.
.item {
position:relative;
}
Then use absolute to align the icon.
.edit-button {
position:absolute;
right:0; or right:10px;
}
Hope that helps.
Related
I'm trying to align a textbox inside a <div> - using the class .textbox
CSS Code
.sec1 {
padding-left: 20px;
padding-right: 20px;
display: relative;
}
.textbox {
display: absolute;
top: 10px;
background-color: white;
border-radius: 10px;
}
.subcars {
display: inline-flex;
}
.selectcar {
width: 80%;
}
HTML Code
<div class="subcars">
<div class="sec1">
<button class="bot"><img class="selectcar" src="Images/caradd2.png" alt="selectcar"></button>
<br><input name="cars1" class="textbox"></input>
</div>
</div>
The results so far is (I'm using pesticide to clarify the elements):
As it is possible to see, the text box is not centered inside the <div>, how can I fix it?
As #m4n0 mentioned in the comments, relative and absolute are not invalid values for display attribute. So, you don't need them in your code.
And to center the textbox, you can add margin-left property with a value accordingly under .textbox css.
For a web application, I'm to position an animated emoji along with some text in a div. These elements are to remain separated in a fully responsive way. Behold:
I'm using flex to accomplish this. That ensures that even if the screen size becomes extremely small, separation is still kept by stacking these one on top of the other.
To accomplish it, the whole outer div is wrapped in:
.act{
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
Next, the animated image inside the div is wrapped in:
.anim {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim > img {
width: 100%;
height: auto;
max-width: 50px;
}
Lastly, the text along with the image is wrapped in:
.txt {
flex: 1 1 180px;
text-align: center;
}
Did you notice the tear drops on the emoji? Those are separate from the image, and are to be animated in html5.
I can't figure out how to ensure those tear drops stay precisely around the eyes of the emoji. I have tried using a z-index alongwith position:absolute (e.g. see the following):
<div class="anim">
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 110px;"></div>
<div class="tear" style="z-index:2;position:absolute;margin-top: 30px;margin-left: 84px;"></div>
<img src="sad.png">
</div>
This isn't responsive at all.
Moreover, If I try usingposition:relative, that makes it impossible to overlap the tear shape over the emoji, regardless of what z-index I set.
Please help me fix this situation. Ideally, I want to stick to using flex because otherwise, it's perfect for my needs.
Note: Answers to a similar SO question don't help since I've already included what they're suggesting.
To accomplish that you need a wrapper around the image and text, that take the size of the image.
Here is a sample code, where I added an extra wrapper, image, around the anim, and then made the anim display as inline block.
Here the image wrapper become the flex item instead, and will allow the anim to behave and be sized as the image, and create the boundaries you need to be able to place the eyes at a fixed position on top the image.
Stack snippet
.act {
display: flex;
flex-wrap: wrap;
background-color: #E1F5FE;
padding: 10px;
border-radius: 10px;
align-items: center;
}
.image {
flex: 1 1;
min-width: 64px;
text-align: center;
}
.anim {
display: inline-block;
position: relative;
}
.anim>img {
width: 100%;
max-width: 50px;
}
.txt {
flex: 1 1 180px;
text-align: center;
}
.tear {
position:absolute;
top: 10px;
left: 30px;
width: 10px;
height: 10px;
background: blue;
}
.tear:first-child {
left: 10px;"
}
<div class="act">
<div class="image">
<div class="anim">
<div class="tear"></div>
<div class="tear"></div>
<img src="http://placehold.it/150">
</div>
</div>
<div class="txt">
Some text
</div>
</div>
I have this html:
<div class="container">
<div id="sidebar">
<ul>Create Offer</ul>
<ul>Accept Offer</ul>
<ul>Pending</ul>
<ul>Completed</ul>
<ul>Balance</ul>
<ul>Support</ul>
</div>
<div id="items">
Text
</div>
</div>
this is the css:
.container {
margin: 0 auto;
background-color: white;
border: 1px solid black;
width: 1000px;
}
#sidebar {
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
.container #items {
width: 82%;
float: right;
background-color: red;
}
output: http://puu.sh/l719c/52f182e1d2.png
why wont the items div show within the container in the white space next to the sidebar?
thanks.
When you float an element, it moves to the side and lets content that follows it move up beside it.
That means the content that follows items (if there was any) would be next to it.
You've done nothing to let items move up beside sidebar.
You need to float sidebar left and not items right.
Also beware of horizontal margins/padding making the total width of the elements add up to more than 100%.
Also note that floated elements do not restrict the height of their container unless you do something about it.
I'd generally look to flexbox for aligning blocks on a row, rather than floats.
You have just missed one line. The float for the sidebar must be set so that other elements can use the empty space. Change your css for #sidebar as follows.
#sidebar {
float: left;
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
I'm assuming you want your sidebar set to float:left;. So you can position the "items" right next to the "sidebar" div.
I'm really struggling to get this navigation-menu with a image that splits the navigation to work. Responsive is a big plus. I don not believe the current code is on the the right way to go, so please be open minded of how to approach this problem.
HTML
<div id="nav">
<ul class="nav-left">
<li>1</li>
<li>2</li>
</ul>
<div class="nav-logo"></div>
<ul class="nav-right">
<li>3</li>
<li>4</li>
</ul>
</div>
CSS
#nav {
width: 400px;
background: #f5f5f5;
border: 1px solid grey;
text-align: center;
}
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
vertical-align:bottom;
}
.nav-left {
background: red;
}
.nav-right {
background: red;
}
.nav-right, .nav-left {
width: 100px;
line-height: 30px;
padding: 0;
}
.nav-logo {
background: yellow;
width: 30px;
height: 100px;
margin-left: 10px;
margin-right: 10px;
}
ul {
margin: 0;
text-align: justify;
list-style: none;
}
li {
display: inline;
width: 100%;
}
Update 05.05.14
Updated it with my current code as requested.
I have gone ahead and made a slightly responsive header for you: JSfiddle (Note: random coffeeshop logo borrowed from google image search... man I should go get a coffee)
The idea is to use the html5 nav element to contain your links, each with a width:20% so it resizes with the width of the screen.
The image is positioned with background:url('...') no=repeat center; to avoid sizing problems. It's in a separate div to allow you to stripe the <nav> element. This is possible with pure css.
As you want to position the links vertically they are nested in divs, and space for the image is made using an empty div with the same width:20%; property as the link containers.
The design breaks once you get close to small mobile device widths (as the links cover the image). For this you can use #media queries.
I hope this gives you a starting point, but design is very subjective and there are many different ways to do it.
It may be worth while to style your page with Bootstrap and inspect their CSS to see what's happening.
Can you please add your css and html codes into your qustion then I can help you with a best solution. Also if you want then email me your codes, I will send you the best solution.
Orherwise just add a class .navfix on the main navigation container div or ul. then add the style property z-index:9999999 for the class .navfix into your stylesheet. Also if you have use any other div for the background then you have to add same thing for the nav background container but here z-index property should be negative or lower then other one.
sample :
.navfix {
z-index:9999999;
}
for background container (if you have)
then
.navfix {
z-index:9999999;
}
.backgrounContainerClassName {
z-index:-1;
}
I have a menu bar the is centered on the screen. To the left I have a element as well as one to the right. These have background images that tie the menu bar to the rest of the graphical layout.
The problem is that there are white spaces between the tags. Here is the CSS:
#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}
#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}
#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}
The images themselves are 140px x 21px (w x h).
I can't float them because the menu won't center. I can't use
font-size: 0px;
on the parent container because it won't display the menu items, and setting the menu-items to
font-size: 1em;
afterwards doesn't fix the issue.
Anyone have a solution that will work in all browsers and doesn't rely upon JS?
NOTE: The borders of the two elements are for layout purposes only and won't be in the final code.
How exactly are the items in the menu generated? In the div that contains the menu are you using an unordered list?
If you are then one possible solution would be to add the left and right images to the :first-child and :last-child elements of the list using css. You would no longer need the two extra div elements and so could just concentrate on the single menu container.
There are four ways which i know & which you can use to remove the whit space.
1) as you said give font-size:0; to your parent DIV & define the font-size:15px; to your child divs.
2)You have to write your mark up in a single line like this:
<div class="parent">
<div>1</div><div>2</div><div>3</div>
<div>
Instead of this
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3) Not that good solution but some time effective. Give margin-letf:-5px in your div. Like this:
div + div{margin-left:-5px}
4) At last you can use float instead of inline-block;
set background color to check your div width and height and you can use margin-left: with negative value to stand your div perfectly.