CSS created logo background become unaligned when browser resizes - html

I have recreated a logo using css. It is a fairly simple logo, a series of colored bars with a letter over it. The letter is within a span(to make it white) of an h1 tag. The logo is a ul with the li items acting as the boxes. I used z-index and position absolute to move it behind letter and works fine at my screens full width but becomes unaligned when browser gets smaller. I have tried setting the parent's position to relative but I still have the same problem.
I just realized the image is a bit incorrect. The logo background moves outside of the span/h1 not the parent div. The parent div has the full width of the screen.
Example
.logo-bg-box{
display: inline;
margin: 0;
float: left;
position: absolute;
left: 10.8%;
z-index: -1;
}
<div class="logo">
<ul class="logo-bg-box">
<li class="logo-bg-box1"></li>
<li class="logo-bg-box2"></li>
<li class="logo-bg-box3"></li>
<li class="logo-bg-box4"></li>
<li class="logo-bg-box5"></li>
<li class="logo-bg-box6"></li>
</ul>
<h1 class="logo"><span class="logo">M</span>inimal</h1>
</div>
The parent div has no styling.

Have you tried adding the following CSS?
div.logo {
position: relative;
}

When you use the percentage as a measurment tool, the style would say "make this content have 10.8% of the total window size from the left", so if the window width is 1000px, the position from left would be 10.8% of 1000px, hence would change whenever the window size changes. Use pixels px instead of percentage %, it would work just fine

Related

Is there any way to completely move an element position depending on screen size ? CSS

So I'm trying to learn HTML and CSS for now, and not getting yet into jvS. I'm trying to create a responsive design, and I understand media queries somehow.
Basically, I have a screen-size width nav bar on the desktop with a logo in it. When I get to phone sizes, I want that logo to move on the right bottom corner of the screen and be sticky there.
Do you know that + sign on Twitter when you want to post? I want to do something like that. BUT I want to know if I can just move the element I already created for the navbar, or do I need a completely new element?
This is in HTML
header {
background-color: chartreuse;
margin: 0px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1px 20px;
}
<header>
<img class="logo" src="/Assets/Logo.png" alt="logo">
<nav>
<ul class = "links">
<li>Home</li>
<li>Recipes</li>
<li>About</li>
</ul>
</nav>
<a class="cta" href="#"><button>Youtube</button> </a>
</header>
And I basically need that logo to move on the right bottom of the screen on screen sizes smaller than 500px. I can't find any answers, so if you have any suggestions please help me!
You can achieve this by utilizing position: fixed. This rule assigns fixed positioning on an element, which in other words means no matter how horizontally or vertically big is your page, the element will stay in the same place.
poistion: fixed works almost the same way as position: absolute. You specify the element's positioning, according to the parent relative element. This is the css you're looking for:
#media screen and (max-width: 499px) {
.logo {
position: fixed;
bottom: 10px;
right: 10px;
}
}
Keep in mind that every parent element (every element above the image) cannot have position: relative, because the bottom and right rules will count from the bottom and right section of the relative element. The only tag above the image you can specify position: relative to, is either body or html.
To take an element out of the document flow and fix it at a particular position on the screen, you can use position: fixed and the top/bottom/left/right parameters, and you can put all that into a media query to apply it only below a certain screen size.
I've figured it out. These guys helped me with the position:fixed.
My problem then was that for some reason bottom:0 and right:0 would put my logo on top instead of the bottom. That was because I had another media query on it for earlier when I tried different stuff, and forgot about it.
Thank you for help!

How to prevent excess image link area due to padding

I want to have an image link at the lower left side of my webpage. I am able to get the link to work but the entire space within the padding is also part of the link. So there is pretty much a big 800px by 800px link on my page when I only want the image itself to be a clickable link. Also, the position needs to be absolute because of the way the entire page is set up. Would anybody be able to tell me now to fix this?
<div id="image_link">
<a href="#">
<img id="image_id" src="../path/image">
</a>
</div>
<style>
#image_link {
padding: 800px 0px 0px 800px;
position: absolute;
}
</style>
It's strange that it creates 800x800 pixels link area for you. padding on the div adds space inside the div, but outside the a, so it shouldn't make the a element larger.
But as you're already using position: absolute;, you should really use top, right, bottom and left to control the position. And it's recommended to set it on the img element directly.
#image_id {
position: absolute;
top: 800px;
left: 800px;
}

Already Defined LI size but i want the space between the LI's to stretch full width size of menu?

I want my LI's to automatic adjust the margin to the left and right so it fits the whole menu div.
(a little drawing of what i im trying to explain)
Im at A, i want to go to B.
http://madsthines.dk/files/aid.jpg
<ul>
<li>ListOne</li>
<li>ListTwo</li>
<li>ListThree</li>
<li>ListFour</li>
<li>ListFive</li>
</ul>
Padding: 5px;
width and height are defined by the font size
I want the margin between those LI's to be stretch out to the full size of the div below them.I realised that Firefox, Internet Explorer and Chrome reads margin differently.
E.g. If i define it with 10px margin to the right and left it will fit in Chrome but not in Firefox.
Is there anyway to let the margin define itself by the width of the UL?
Ask away if i didn't make myself clear enough.
Thank you!!
Check out this question. It looks similar to what you are looking to accomplish.
Stretch horizontal ul to fit width of div
If you have a set number of LI then you could set their width by calculating:
100% / NumberOfLI = Width% .
So 5 <LI> would be (100% / 5) = 20%
Of course this might not be an ideal situation if the total pixels of your <LI> are greater than 100% of the <UL>
Edit:
Sorry I forgot to know that the <LI> should be floated
<style>
UL{
position:relative;
width:100%;
}
UL LI{
display: inline;
width: 20%;
position:relative;
float:left;
}
</style>
Your CSS would look something basic like this for 5 <LI> inside of an unordered list.

Make a CSS header with all content vertical aligned

I'm pretty new to CSS and need some help.
I'm currently making a site with one header in the top 100% width with it's content following the 960grid system.
Here's how I've made it so far, HTML and CSS:
<div id="header">
<div id="header-inner">
/logo/
/nav/
/search/
</div>
</div>
and the css:
#header { background: red; }
#header-inner { margin: auto; padding: 25px 0; width: 940px; }
I've used a clear-fix on the header-inner, and everything was working just fine. By inserting the logo as an IMG, it'd make sure that there was 25px space between the top and bottom of the logo, that way "defining" the height of the header.
Even after inserting the navigation as UL/LI elements, it was still working, however later when I added a search input everything messed up. The form tag seemed to give it a invisible border around the input, making it use more height than "needed".
The search input was also larger, so it obviously formed a new height.
I just wanted to know if there's a smart and effective way to make the header instead? Without having to remove the padding from the header-inner and having to define a padding-top and bottom on every single element in the header-inner parent
you can do this by list
<ul>
<li>logo</li>
<li>nav</li>
<li>search</li>
</ul>
you can set the width of li

CSS: Stretch Div to 100% of its parent's height with margin/padding

Currently I'm working on this page (look at Figure1)
I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.
So we divide the background into 3 pieces like this,
<div class="article">
<div class="background-top"></div>
<div class="background-mid"></div>
<div class="background-bot"></div>
<div class="contents">
<!-- contents -->
</div>
</div>
It was nice until we change background image to PNG from JPEG which contains light-blue background-color already.
Before we change image files I could do it with z-index property. (set middle part's height to 100% and put top/bot parts on it)
However, since I change it with PNG It seems wierd because of opacity of PNG.
Bottom line is- I need to do something like this:
But when I set middle part's height to 100% with margin-top/bottom attributes,
This is what I've got(fiddle: http://jsfiddle.net/EaBxP/) :
It should work with IE6 and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.
Thanks in advance.
EDIT: article div's height is implicit so I cannot just set middle part's height.
Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.
div.background-mid {
position: absolute;
top: 20px;
bottom: 20px;
left: 0px;
right: 0px;
background-color: yellow;
}