Why does this span have a bigger height than it's parent - html

I'm doing a progression throught the site bar and I'm having a problem. There are four span elements that represents the sections of the frontpage, when you click on one of them it scroll to that section position. The problem is for some reason, the span element are taller than the div cointaining it, and for that, I can't align it vertically. It ain't a problem until you try to use the website on smaller resolutions, in wich, the span elements overflows the div.
Here is what I'm talking about
See that the right attribute is because of a script that positioned the span according to the section position.
And here is where the problem became obvious
Here is the HTML :
<header id="masthead" class="site-header" role="banner" style="position: relative; top: auto;">
<div class="container-fluid">
<div class="row">
<div id="progressDiv">
<span id="progBar">
</span>
<div id="SectionsPos">
<a href="/#features">
<span id="novedPos" class="sectPos"> Novedades </span>
</a>
<a href="/#about">
<span id="redesPos" class="sectPos tooBig"> Redes Sociales </span>
</a>
<a href="#ProductosPrinc">
<span id="prodPos" class="sectPos"> Productos </span>
<a href="#Contacto">
<span id="contPos" class="sectPos"> Contacto </span>
</a>
</div>
</div>
</div>
</div>
And here is the CSS :
#progressDiv {
display: block;
border: solid 1px;
border-color: #d9b25f;
position: relative;
width: 100%;
height: 10vh;
}
#progBar {
height: inherit;
display: block;
width: 0%;
background: #d9b25f;
max-width: 100%;
}
#SectionsPos{
display: block;
position: absolute;
width: 100%;
top: 50%;
height: 10vh;
margin-top: -5vh;
}
.sectPos {
font-weight: 900;
color: white!important;
position: absolute;
}
Excuse my English, it is not my native language, if there is something that it's not completely clear please let me know and I'll try to explain myself better

I kind of solved it but it is not an actual solution but a way to a avoid the problem, i changed de vh for pixels units, aparently you cant do what i wanted to do using vh units

Related

adding margin-left creates horizontal scroll bar to white space

I'm writing the CSS for my site. I have text that I am putting on top of my background image. My HTML and CSS is below:
HTML
<header class="site-header">
<div class="site-header__menu-icon">
<div class="site-header__menu-icon__middle"></div>
</div>
<div class="site-header__menu-content">
<div class="site-header__btn-container">
Request A Demo
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li>Home</li>
<li>Services</li>
<li>Why Us</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="section">
<picture>
<img src="assets\images\pepper.jpg">
</picture>
<div>
<div class="section__text-content">
<h1 class="section__title">Company</h1>
<h3 class="section__sub-title">Company Slogan</h3>
<div class="btn-container">
<a class="btn" href="#">Talk To A Specialist</a>
<a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
</div>
</div>
</div>
</div>
CSS
.section {
position: relative;
max-width: 100%;
&__text-content {
position: absolute;
top: 30%;
width: 100%;
margin-left:
}
&__title {
font-size: 7rem;
font-weight: 300;
color: #ffffff;
margin-bottom: 0;
}
&__sub-title {
font-size: 2.5rem;
font-weight: 300;
margin-top: 3%;
margin-bottom: 2%;
color: #ffffff;
}
}
The problem arises when I try to add a margin-left to the .section class in my CSS, because then a blank which space to the right of my screen appears with a horizontal scroll bar in direct proportion to the amount of margin I specified to move to the left.
I know that I could use a simple "background-image" for my css, but I'd prefer to do it this way for responsive imaging (it's how I learned to do it and I'm on a bit of a time crunch).
Any suggestions?
FIXED
My problem was I was writing my margin in relative terms by doing:
.section__text-content {
position: absolute;
margin-left: 10%
}
Which is wrong, because the &__text-content is set to position: absolute
Percentage is relative position, with an absolutely positioned image you need absolute margins (i.e. pixels)

How to remove resizing content when overflow when is hover?

I have problem with overflow in on my website. When mouse is not over the left menu, it look OK, but when I move mouse over the menu and :hover is active, content (menu is a content) is a little smaller. I don't want this effect when :hover is active, menu is a little smaller.
Effect that I want is like on Youtube. If you are logged into your account, and if you pressed menu icon next to Youtube logo, you will get scroll menu. When mouse is not over the menu, nothing happens. But when you move your mouse over the menu, overflow is visible and this not change content size.
In brief:
I have this:
when overflow is active, content is smaller
What I want is this:
when overflow is active, content is NOT smaller
How can I do it ?
Thanks :)
My understanding, though it maybe flawed is that you have to already have the space that the scroll bar will populate there. You didn't give us any code so I had to fabricate it, but this is what I came up with
https://jsfiddle.net/link2twenty/bxz60j4r/
HTML:
<div class="sidebar">
<div class="container">
<div class="profile">
<img src="http://moss-side.yoursquaremile.co.uk/img/default-profile-pic.png" />
</div>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<div class="spacer">
<hr>
</div>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<hr>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<hr>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<hr>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
</div>
</div>
CSS:
.sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 400px;
overflow: hidden;
padding-right: 17px;
}
.sidebar:hover {
padding-right: 20px;
overflow-y: auto;
}
.sidebar .container {
width: 400px;
background: #8cc34b;
margin-bottom: -25px;
}
.card {
opacity: .7;
width: 100%;
height: 120px;
background: #8cc34b;
}
.card span {
position: relative;
float: right;
padding-right: 50px;
top: 50%;
}
hr {
margin-left: 120px;
margin-right: 20px;
border-color: darkgreen;
opacity: .7;
}
You can try the following:
.scrollable {
border: 1px solid black;
width: 100px; /* specify the width you like here */
overfow: hidden;
}
.scrollable:hover {
overfow-y: scroll;
}
nav {
border: 1px solid grey;
width: 80px; /* specify the width which is calculated as widthOfScrollable - widthOfScrollbar */
}
.item1, .item2 {
height: 10px;
width: 100%;
}
.item1 { background: red }
.item2 { background: blue }
<div class="scrollable">
<nav>
<li class="item1"></li>
<li class="item2"></li>
</nav>
</div>
Borders and colors are used to show the blocks.
Here you preserve some space for the scrollbar on the right side. Problem here is to preserve exactly the scrollbar size for the current user / browser / OS. They all could have differences in scrollbar width value, so there are two ways for you to go:
Use this function from here Getting scroll bar width using JavaScript to calculate the proper size of the scrollbar
Make the scrollbar margin big enough to cover any case on any operating system

Spread four images inside div [responsive]

I have a div called Buttons with 100% width inside a floating sidebar. The sidebar has 30% width.
Inside the div Buttons I have four links with background-images. I want to center the four links inside the div, but they must spread (all have the same margin, but the left one should be completely left and the right one completely right). But: it should also work inside my Responsive website. So if I resize my window, they must also be centered. That is why I can't set margins in pixels.
Please help me!
Sorry for my English.
[EDIT: My code]:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
<a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
<a id="rss" href="rss.php" title="RSS" target="_blank"></a>
<a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
</div>
</div>
CSS:
#sidebar{
float:right;
width:30%;
text-align:center;
}
#buttons{
width:100%;
}
#twitter,#facebook,#rss,#youtube{
height:40px;
display: inline-block;
margin-top:20px;
}
#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}
Seeing your code would definitely help, but I'm guessing you're looking for something like this:
--edit--
Okay so it looks like we need to position these buttons absolutely, so try:
#buttons {
position: relative;
min-height: 40px;
}
#buttons > a {
position: absolute;
width: 40px;
height: 40px;
}
a#twitter { background: red; left: 0px; }
a#facebook { background: orange; left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}
Aaand fiddle: http://jsfiddle.net/ttjAW/9/
You might need to adjust the left percentages because the buttons have fixed widths (its hard to do this using fixed and variable width elements...) I then applied a negative margin of half of the buttons width to centre them.
Does this do what you needed?
Use text-align: justify on your #buttons element to center the button elements perfectly and allow them to expand responsively within the space.
Add text-align: justify on your #buttons element
Add a #buttons:after pseudo element with 100% width to force the buttons to fill the entire sidebar
Here's a working example on JSbin.
And here's the code for your situation:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="#">1</a>
<a id="facebook" href="#">2</a>
<a id="rss" href="#">3</a>
<a id="youtube" href="#">4</a>
</div>
</div>
CSS:
#buttons {
text-align: justify;
width: 100%;
}
#buttons:after {
content: '';
display: inline-block;
width: 100%;
}
#buttons a {
display: inline-block;
height: 40px;
width: 40px;
}
This method is more fully documented here: http://www.barrelny.com/blog/text-align-justify-and-rwd/

making a div appear on bottom of another div

i have this div used as an information container on my page, i want to make a read more button on the bottom of the first div but cant do it, i tried position:relative and every other method i know to accomplish this but couldn't make it. any suggestion
<div class="main_banner" style="margin-left:46px;">
<center><b><h3 style="color:purple;padding-top:2px;margin-bottom:0">header1</h3></b></center>
<center><img src="images/pic1.png" width="275px" height="103px" /></center>
<p class="index_services_p">some text</p>
<br>
<a style="padding-top:2px;float:left;padding-left:10px;" href="#" style="float:left">
<img src="images/read-more.png" width="172px" height="32px" />
</a>
<div>
any suggestions will be appritiated.
the goal here is to make the always appear on the bottom of the main_banner DIV
The code doesn't make sense to the question you're asking.
However you can align an element to the bottom of another element by placing the parent relative and the child absolute:
HTML
<div>
Lorem ipsum
read more
</div>
CSS
div {
background: lightgreen;
width: 200px;
height: 200px;
position: relative;
}
div a {
display: block;
background: lightblue;
position: absolute;
bottom: 0;
right: 0;
}
DEMO.
The HTML..
<div class="main-banner">
BLAH..
<a class="read-more" href="#"></a>
</div>
The CSS...
.main-banner{
position: relative;
//other styles.
}
.read-more{
position: absolute;
top: 0px;
right: 0px;
left: 10px;
bottom: 10px;
}

Positioning <img> element

I have tried multiple things but not position <img> at desired position. It is always stuck between two spans. Tried to img out of the child div and add it to the parent div. But no luck. I want to position it below my spans and with padding-top:20px;.This image is a 200x38px image. Here is my code:
HTML
<div class="col1-step2">
<div class="heading-step2">
<span class="heading-step2">Hello signed User.</span>
<span class="heading-step2 textblue">How are you doing.</span>
<img class="user-bar" src="<?php echo site_url('img/bar.png'); ?>">
</div>
</div>
CSS
.col1-step2 {
float: left;
width: 40%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
div.heading-step2 {
top: 6%;
position: relative;
}
.heading-step2 {
font-size: 24px;
color: #f7f7f7;
}
.heading-step2 .textblue {
color: #55c7fa;
font-weight: bold;
display: block;
}
img.user-bar {
position: absolute;
padding-top: 25%;
}
You have a mix of relative and absolute positioning. By removing the absolute positioning on the image and restructuring the HTML you can get different element ordering:
http://jsfiddle.net/HhbQB/1/
<div class="col1-step2">
<div class="heading-step2">
<span class="heading-step2">Hello signed User.</span>
<img class="user-bar" src="http://placehold.it/200x100" />
<span class="heading-step2 textblue">How are you doing.</span>
</div>
</div>
Updated fiddle in response to your comment: http://jsfiddle.net/HhbQB/2/
You can give relative or absolute position to your divs, if you want help then try giving location where you want the div to be.