CSS font-size wrecking placement - html

I have two elements that are fairly unrelated, the .menu, and the .content_selection_button. The only thing that ties them together is that they are both inside <li> elements in the same <ul>, other than that they share nothing. Yet, for some reason when I change the font-size of a .content_selection_button it affects the vertical placement of the menu. I had a similar problem here. Why is font-size ruining my placement, and how can I stop it?
JSFIDDLE
Font Size 10
Font Size 25
Menu CSS
.menu {
display: inline-block;
background-color:lightblue;
margin: 1px;
padding: 2px;
box-sizing: border-box;
border-radius:5px;
}
Content Selection Button CSS
.content_selection_button{
font-size: 10px;
box-sizing: border-box;
border-radius:5px;
}
HTML
<ul class="t_inject_container">
<li class="t_inject_row">
<ul class="menu">
<li id="LI_4">
<button class="add_button t_intect_button">
+
</button>
</li>
<li>
<button class="minimize_button t_intect_button">
m
</button>
</li>
</ul>
</li>
<li>
<ul class="content_selection_container">
<li>
<form name="search_form" class="search_form">
<input type="text" name="search_input" class="search_bar" />
<input type="submit" value="🔍" class="search_button" name="search_button" />
</form>
</li>
<li id="LI_14">
<button class="content_selection_button">
My Timeline
</button>
</li>
<li>
<button class="content_selection_button">
relevent
</button>
</li>
<li>
<button class="content_selection_button">
mentions
</button>
</li>
</ul>
</li>
</ul>

I hinted that playing with bottom vertical alignment of the inline-block elements could fix the alignment issues. This could be avoided by simplyfing the UI by reworking the mark-up and CSS.
[ELEMENT] {
vertical-align: text-bottom;
}

You've main parent element's with height 150px with LI inside 25% height. so that comes around 37.5px. The height wont increase due to the increase in font size, but it will affect the calculated line height, the line-height will increase pushing the text below a central axis of the button.

Related

why psudeo after element's width is not relative to its parents width?

I am trying to add a underline like symbol below the active link for that purpose i am used ::after element and set it's width to 100% to get its parent element's width but the psudo element is way much bigger when width is 100%;
my html code is 👇
<header class="main-header">
<a class="category-name">
<span> Sneakers </span>
</a>
<nav class="main-nav">
<ul class="main-nav-list">
<li class="m">
<a class="main-nav-link" href="#how">Collections</a>
</li>
<li><a class="main-nav-link" href="#meals">Men</a></li>
<li>
<a class="main-nav-link" href="#testimonials">Women</a>
</li>
<li><a class="main-nav-link" href="#pricing">About</a></li>
<li><a class="main-nav-link nav-cta" href="#cta">Contact</a></li>
</ul>
</nav>
<ul class="my__ac-list">
<li class="nav--cart_icon" id="cartBtn">
<a href="#" class="cart-icon"
><img src="./images/icon-cart.svg" alt="cart icon" srcset=""
/></a>
<p class="cart--strip">3</p>
</li>
<li>
<a href="#">
<img
class="profile-thumbnail"
src="./images/image-avatar.png"
alt="image-avatar"
srcset=""
/>
</a>
</li>
</ul>
</header>
my css code is bit lengthier i couldnot format correctly so i have created code containg my html and css
codepen link = https://codepen.io/sinan-m/pen/abKQaxp
i want to add a underline below the active navigation link like in design
my design image https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/active-states-basket-filled.jpg
.main-nav-list li.m for this selector you need to add position: relative. Beacause right now the after pseudoelement is not positioned relative to the li element.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Because you didn't set position:relative on the li, he after element takes the width of the window browser. That's why when set to 100%, it's so wide.
Result
Solution
.main-nav-list li.m {
border-bottom: 5px solid tomato;
}
I edited the rule for the .main-nav-list li.m selector in the code pen.
To get it more spaced out, then add some padding. e.g.
.main-nav-list li.m {
border-bottom: 5px solid tomato;
padding-bottom: 1ex;
}
You also need to change
.main-nav-list {
…
align-items: top;
…
}
To keep the alignment good. And remove the yellow.

Control space between in-line list

Trying to create a navigation menu at the top of the page, but the images are spaced too far away from each other and then they wrap. How do I bring them closer together?
CSS:
.weddingMenuIcon{
width:30%;
}
HTML:
<ul class="list-inline">
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
<li>
<img src="~/images/home.svg" class="img-responsive weddingMenuIcon" />
</li>
</ul>
If I were building this as a centered navigation I would apply inline: block to the list items and then use a margin to define the spacing between them.
See this jsFiddle
.list-inline li {
display: inline-block;
margin: 0 40px; /* Items have 40px spacing between */
}
The fix was simply changing the width from using percentage to using fixed pixel width.

CSS: how to make two sections at the same line?

I'm trying to make these wo sections at the same line where the <ul> section at right and the <span> section, but, I can't find how.
PS: I use here bootstrap.
<ul class="pagination pagination-sm">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
<span>
<span class="glyphicon glyphicon-plus"></span><span style="margin-left:10px;margin-right:6px;">Nouveau</span> |
<span style="margin-left:5px;"><span class="glyphicon glyphicon-arrow-up"></span><span style="margin-left:10px;"></span></span>|
<span style="margin-left: 5px;"><span class="glyphicon glyphicon-arrow-down"></span><span style="margin-left:10px;"></span></span>
</span>
Any suggestion, please ?
Thanks a lot !
Something like this would work:
EXAMPLE HERE
.pagination.pagination-sm + span {
vertical-align:top;
display:inline-block;
margin:25px 0 25px 10px;
}
Make the adjacent span element inline-block, align it to the top and add margins to match the .pagination element. This assumes that the markup will remain the same.
Try adding divisions around the two parts, and floating the two divisions next to each other. Here's a jsfiddle. See the CSS to see how to float.
<div class="cont-1">
... pagination code ...
</div>
<div class="cont-2">
... span and anchor codes ...
</div>
At the end of the code, make sure to clear your floats.
<div class="clear"></div>

twitter bootstrap vertical tab left border height

I want the vertical border of the vertical tab to run on the whole page instead of finishing off where the tabs end.
however since I have given border-right on the tab it ends
with the last tab that is trending. Giving border-right to the content makes sure the height of the border is right but it spoils the spacing between tab and content.
HTML :-
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs'>
<li class='active'>
All
</li>
<li>
New
</li>
<li>
Featured
</li>
<li>
Ending Soon
</li>
<li>
Trending
</li>
</ul>
</div>
This is not default Bootstrap behavior so you will have to modify the css a little. For this to work, the vertical tab <ul> and all of its parents should have the property height: 100%.
For html and body I would apply the styling directly but for the <div> and <ul> I would use custom class so as not to modify the Bootstrap classes to maintain expected behavior for eventual future use in other layouts.
Here is a demo.
The css to add:
html{
height: 100%;
}
body{
height: 100%;
}
.tabbable.tabs-left.full-height{
height: 100%;
}
.nav.nav-tabs.full-height{
height: 100%;
}
The html to modify:
<body>
<div class='tabbable tabs-left full-height'>
<ul class='nav nav-tabs full-height'>
...........

Fixed position div with 'top' relative to parent div

The basic bootstrap template here has a fixed bar at the top. I want to place a div directly underneath it.
Here's the HTML of that bar (copied straight from the page's source so there are CSS class references):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project name
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" placeholder="Email" class="span2">
<input type="password" placeholder="Password" class="span2">
<button class="btn" type="submit">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here's my attempt at a div to go underneath it:
<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>
It almost works but the problem with this is the 'top:40px;'. When you resize the screen, the fixed bar at the top changes height.
How do I make it so that it always sits directly underneath the bar regardless of the bar's height? Bonus points for how to center it horizontally without using <center>
Edit: for the horizontal centering thing, i tried wrapping my div in a div with 100% width and then adding 'margin:0 auto' to it, but that doesn't work with fixed position
Edit2: here is the jsfiddle. line 38 of the html is my attempt, everything above that is the nav bar div.
If you're already using jQuery you could use something like this:
Working Example
Full screen example
x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
$('.new').css({
top: t,
left: c
});
});
$(document).ready(x);
$(window).resize(x);
Note: updated examples with media queries to better show the effect of the script.
Of course you can do this with CSS alone, but you will need to use a media query like so:
CSS only working example
.new {
position:fixed;
margin: 0 auto;
top: 51px;
left:0;
right:0;
background-color:#CF4342;
color:#fff;
z-index:5000;
width:50px;
}
#media (max-width: 979px) {
.new {
top: 61px;
}
}
Notice that the css only solution will "break" if you narrow the screen too far. The jQuery solution won't have that problem.
Try to add this line in your css or edit the class in the bootstrap css file. Make sure your css file is under the bootstrap css file incase you choose to add it in your own. Does it make sense?
.navbar-fixed-top {
margin-bottom: 0 !important;
}
Bootstrap says the following in it's documentation:
Add .navbar-fixed-top and remember to account for the hidden area
underneath it by adding at least 40px padding to the <body>. Be sure
to add this after the core Bootstrap CSS and before the optional
responsive CSS.
So that is what i would try...
I updated your fiddle to demonstrate http://jsfiddle.net/Pevara/MgcDU/5403/
I did the following:
- Moved your 'hello inside the container with the hero unit
- Removed the positioning on the 'hello'
- Removed the 10px margin you set on the .container
- Added the following to your css, as suggested by Bootstrap
body {
padding-top: 40px;
}