I have a nav bar for my website that when initially loaded in chrome looks like this:
| | | |
| Home | News | Solutions | etc...
| | | |
Now for some reason if I load this page and then proceed to refresh the page in chrome (without changing anything) it ends up breaking and looking like this:
| | | | |
| HomeNewsSoultionEtc...
| | | | |
The links which are contained using the < a > attribute no longer expand the < li > they are contained in. I'm assuming its a calculations error on chrome's part because I've tested this in firefox, IE, and safari and it works perfectly.
My code is below:
<div class="row">
<div class="col-md-4 logo_box">
<p><img src="..."></p>
</div>
<div class="col-md-8 nav_box">
<ul>
<li onclick="location.href='...';" class="mainlink"><a class="ml_text" href="...">Home</a></li>
<li onclick="location.href='...';" class="mainlink"><a class="ml_text" href="...">News</a></li>
<!-- etc... -->
</ul>
</div>
</div>
CSS:
.nav_box
{
height: auto;
width: 80%;
margin: 0%;
margin-top: auto;
float: right;
}
.nav_box li
{
width: auto;
}
.nav_box ul
{
list-style-type: none;
margin: 0%;
padding: 0%;
width: 100%;
text-align: center;
}
.mainlink:hover
{
background-color: #b3babf;
}
Clear your Browsing data. You're fighting between cached css and your own.
Related
Disclaimer: I'm not sure how to address this issue please be kind and suggest another title I'll edit
Situation
I have a responsive design mobile / desktop with blocks:
Mobile
| block1 |
| block2 |
| clientInfos |
| equipmentInfos |
| history |
Desktop
| clientInfos | block1 |
| equipmentInfos | block2 |
| - | history |
Problem
The thing is I dont what to setup this as a grid / table because this page as multiple states where height are heavly dynamics.
Some samples of possible renders:
| clientInfos | block1 |
| clientInfos | block2 |
| clientInfos | history |
| clientInfos | - |
| clientInfos | - |
| equipmentInfos | - |
| clientInfos | block1 |
| equipmentInfos | block1 |
| - | block1 |
| - | block2 |
| - | history |
My main issue is : clientInfos and equipmentInfos are in the middle of the list in mobile design. So, I can wrap them in a single div. But not other items.
Note, my devs are mobile first.
Best try so far
My best try is to wrap clientInfos and equipmentInfos then use a grid-template:
function addSpace (e) {
e.target.append(document.createElement("br"))
}
.content {
display: flex;
flex-direction: column;
gap: 22px;
}
/* media screen to 1px to show my issue */
#media screen and (min-width: 1px) {
.content {
display: grid;
grid-template-areas:
"clientAndEquipment block1"
"clientAndEquipment block2"
"clientAndEquipment history";
}
}
.block1 { grid-area: block1 }
.block2 { grid-area: block2 }
.clientAndEquipment {
/* To keep the parent flow */
display: flex;
flex-direction: column;
gap: 22px;
grid-area: clientAndEquipment
}
.history { grid-area: history }
.block { background: pink; padding: 5px; }
<div class="content">
<div class="block1 block">BLOCK1</div>
<div class="block2 block">BLOCK2</div>
<div class="clientAndEquipment">
<div class="client block" onclick="addSpace(event)">CLIENT click here to add spaces</div>
<div class="equipment block">EQUIPMENT</div>
</div>
<div class="history block">HISTORY</div>
</div>
The problem with this approach is the case when client is to big, it result to other block expanding as 33% height each. It's not ideal.
Note: I tried to had an extra "clientAndEquipment -" to the template-grid-areas but it add an extra blank line due to gap: 22px which I wanna keep.
Question
Did you see a better integration of this design according to constraints mention ?
Note: js related answers are not better imo.
I found a solution using plain old float property re-ordering my div.
workflow
Put all div that "could" go left on top of the flow (in the .content).
<div class="wrapper">
<div class="clientInfo left"></div>
<div class="equipmentInfo left"></div>
<div class="block1 main"></div>
<div class="block2 main"></div>
<div class="history main"></div>
</div>
mobile
Display wrapper as flex then apply an order on each item.
.wrapper { display: flex; flex-direction: column; }
.clientInfo { order: 3; }
.equipmentInfo { order: 4; }
.block1 { order: 1; }
.block2 { order: 2; }
.history { order: 5; }
desktop
Display wrapper as block then:
// all media query desktop ...
.wrapper {
--sidebar-width: 400px;
--sidebar-gap: 22px;
display: block;
}
.left {
float: left;
width: var(--sidebar-width);
margin-right: var(--sidebar-gap);
clear: both; /* <-- set the lefties as columns */
}
.main {
margin-left: calc(var(--sidebar-width) + var(--sidebar-gap));
}
And Voila!
I have a web page that sequentially adds various sizes of fixed width panels (flex: none) from left to right as the user drills down. When the panels reach (or will overreach) the end of the page I want the first panel (and subsequent panels) to 'scroll' to the left (overflow hidden is acceptable, partial content visible is ok)
Originally aligned left as follows when panel ONE then TWO, etc is added
=============================================================
= =
= ----------- ----------- ----------- ----------- =
= | | | | | | | | =
= | ONE | | TWO | | THREE | | FOUR | =
= | | | | | | | | =
= ----------- ----------- ----------- ----------- =
= =
==============================================================
Then when FIVE is added it will overreach the end of the page so panel ONE is scrolled out of view (overflow hidden is ok)
=============================================================
= =
=-- ----------- ----------- ----------- ----------- =
= | | | | | | | | | =
= | | TWO | | THREE | | FOUR | | FIVE | =
= | | | | | | | | | =
=-- ----------- ----------- ----------- ----------- =
= =
=============================================================
Conversely, when panel FIVE (or any other) is removed, then ONE should go back into view.
So far I have this:
<div class="container-fluid">
<div class="panel-container">
<div class="panel">
1 of 4
</div>
<div class="panel">
2 of 4
</div>
<div class="panel">
3 of 4
</div>
</div>
</div>
.panel-container {
justify-content: flex-end;
margin-top: 1rem;
width: 100%;
display: flex;
width: fit-content;
}
.panel {
border: solid 1px #6c757d;
padding: 10px;
flex: none;
width:300px;
}
I've also tried this:
.panel-container {
margin-top: 1rem;
justify-content: flex-end;
width: auto;
right: inherit;
display: inline-flex;
}
My jsFiddle
My css only works when I don't set the width of the last panel, but then the width expands to fit the remaining space which is not what I want. Prefer a css solution using flex box, but if that's not possible then anything workable would be appreciated
any help would be appreciated!
oh, of course it was so simple in the end (after a bike ride to clear the mind).
margin-right: auto; on the last child. I applied it to all children in case there was some other content there (for example loading spinners, etc to prevent the right margin collapsing)
.panel-container {
display: flex;
justify-content: flex-end;
}
.panel {
flex: 0 0 300px;
border: solid 1px #6c757d;
padding: 10px;
}
.panel-container > :last-child {
margin-right: auto;
}
updated jsfiddle
The only way to do it, tha I know of, is to use JavaScript's .scrollLeft:
https://codepen.io/agakesik/pen/WNrEQdP
document.getElementsByClassName('panel-container').scrollLeft = 9999999;
There's too much in your code. Simplify it.
.panel-container {
display: flex;
justify-content: flex-end;
}
.panel {
flex: 0 0 300px;
border: solid 1px #6c757d;
padding: 10px;
}
<div class="container-fluid">
<div class="panel-container">
<div class="panel">1 of 4</div>
<div class="panel">2 of 4</div>
<div class="panel">3 of 4</div>
</div>
</div>
revised fiddle
I am having a hard time with css. I have a content that content class a image and a text. I would like to align the text to the right side of the screen but I do not want to limit the image to the width of the content. I would like to allow the image go outside.
I tried to play with positions and "fixed" allow me to move the image outside of the content by the content height changes de-coupling the image.
<div class="content2">
<img id="cloudimg" src=".\Cloud.jpg">
<p>Cloud Computing</p>
</div>
and in my css
.parallax-wrapper-cloud {
width: 460px;
height:180vh;
position: absolute;
right:0;
padding-top:20vh;
box-sizing: border-box;
transform-style: preserve-3d;
}
.parallax-wrapper-cloud::before {
content:"";
width: 100vh;
height: 100vh;
top:0;
right:0;
background-color: #ffddfbff;
!background-image: url("./bkg4.jpg");
!background-repeat: no-repeat;
!background-position: left;
position: absolute;
z-index: 2;
transform:translateZ(-1px) scale(2);
}
.content2 {
margin: 0 auto;
color: #black;
padding: 50px;
width: 100;
background: #ee0d0d;
}
this is what I see (right side the image is truncated):
----------------------
| |
| --------------- |
| | half | |
| | image | |
| | | |
| --------------- |
| Cloud Computing |
| |
----------------------
this is what I would like to see (image full displayed and partially outside):
----------------------
| |
--------------- |
| full | |
| image | |
| | |
--------------- |
| Cloud Computing |
| |
----------------------
as described above
.content2 {
margin: 0 auto;
color: #black;
padding: 50px;
width: 300px;
background: #ee0d0d;
text-align: center;
}
#cloudimg {
height: 100%;
width: 100%;
left: 40%;
transform: translate(-40%);
}
<div class="content2">
<img id="cloudimg" src="https://i1.wp.com/amergin.net.au/wp-content/uploads/2017/03/image-placeholder.jpg?ssl=1">
<p>Cloud Computing</p>
</div>
If you are just trying to move the image a bit to the left without messing up the general flow of your site, you might want to use transform: translateX(-100px);. The -100px should be replaced by the amount of pixels (or cm/in/pt/pc/em/...) you want the image to be moved.
What this does is that it takes the object and just moves it, without affecting the document flow. That means that the other object will position themselfs as if the object wasn't moved at all, because this transformation happens after everything is positioned.
If you want to read more, I recommend reading this article on w3school or to look at the translate specification here on the MDN web docs.
Note that you can also use a percentage like transform: translateX(-50%);, but the percentage is relative to the object itself, so -50% will move an 1000px wide object 500px to the left.
In your case, I would recommend something like
#cloudimg {
transform: translateX(-20%);
}
I have a calendar and I am trying to add events to it. Each event has a style and will have a link associated with it. It seems to be doing OK when there is only one event per day, but the issue comes when I am trying to add 2 events inside a single day. I have played around with absolute and relative position but it doesn't seem to be working. I would like it to look like this:
example Image
but it actuallty looks like this: actual html
Here is my Code:
CSS
.calendarDay {
position: relative;
clear: none;
width: 14.2851%;
height: 142px;
background-image: url(images/calendarDayBG.png);
background-repeat: no-repeat;
background-size: cover;
font-family: "Stag Sans book", "Arial";
font-size: 45pt;
vertical-align: top;
color: #4d4f53;
overflow: hidden;
top: 40px;
text-align: left;
}
.calendarDay h1 {
font-family: "Stag Sans light", "Arial";
font-size: 45pt;
text-overflow:clip;
vertical-align: top;
}
/* event styles */
surgicalCare {
display: inline;
alignment-baseline:baseline;
background-color: #d75f17;
position: absolute;
}
surgicalCareStacked {
display: inline;
background-color: #d75f17;
position: absolute;
}
strategicaccounts {
display: block;
alignment-baseline:baseline;
background-color: #5e249e;
}
HTML
<li class="fluid calendarDay zeroMargin_desktop">17<a href="EAST/msn.html"><div class="fluid surgicalCareStacked">
<p>E.A.S.T.</p>
</div></a>
<a href="EAST/sponsorship_EAST.html"><div class="fluid surgicalCare">
<p>E.A.S.T.</p>
</div></a></li>
I was thinking that I may need to use different styles: one for multiple events in a day "stacked," and one with a single event...but I could be totally wrong!
Thanks!!
Your images are not available for some reason. If I understand your question correctly, this is what you are looking for:
______________________
| Parent div |
| __________________ |
| | Child div 1 | |
| | | |
| |__________________| |
| __________________ |
| | Child div 2 | |
| | | |
| |__________________| |
|______________________|
Something like this would work:
HTML
<div id="parent">
<div id="child1">
<!-- Stuff here -->
</div>
<div id="child2">
<!-- Stuff here -->
</div>
</div>
CSS
#div1 {
width: 250px; // Or whatever width you need
}
This works because divs are block elements by default, so they span the whole width of their parent element, and force other elements down.
The basic question is: How can a be shrink-to-fit over an element while itself containing other elements?
The goal is to have a (centered) menu over an (centered) image, which´s width and height shall relate to the images dimensions.
All of it being responsive, meaning no absolute sizes!
Here´s the sample code:
<div id="menu">
<img src="picture.jpg" />
<div id="left">
test1
</div>
<div id="right">
test2
</div>
</div>
#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}
#menu img{
height: 90%;
position:relative;
}
#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}
#clear{
clear: both;
}
#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}
and this is what it´s supposed to look like:
____________________________________
| |
| ------------------------------ |
| | | |
| | p i c t u r e | |
| | | |
| | | |
| | | |
| | | |
| | left <button> right | |
| | | |
| ------------------------------ |
| |
------------------------------------
The height/width ratio of the picture is always the same. It´s total size depends on the users window though.
I just can´t get the "menu" div to wrap around the and the "left" and "right" divs be positionable at the same time.
Is this even possible? I´m not even talking about browser compatibiliy yet...
See if this works: http://jsfiddle.net/sdvnh/1/
Changes:
#menu {
display: block;
}
#menu img{
height: 90%;
width: 90%;
}