HTML - My content becomes messed up when I zoom in/out - javascript

http://pastebin.com/1Yz1aF1S HTML/CSS
HTML code is in home.html
CSS code is in stylesheet.css
Whenever I zoom in our out my content moves around rather awkwardly and breaks my page a bit. Was wondering how i could fix this issue and work to avoid this issue in the future? Images of the site can be found here!
http://imgur.com/a/MbZkk
Still new to HTML and only just started learning it properly in University but I've been immensely enjoying it and am thinking about pursuing it as a career!

The page "breaking" looks to be the result of using float left and float right elements next to each other. If their is insufficient room, your right hand panel breaks to the next line but is still floated right.
You can achieve a non responsive layout that keeps both panels next to each other and locates the right hand panel flush with the right margin if there is room, but produces horizontal scroll bars if not, you can use table layout. A demonstration without using <TABLE> tags:
CSS
#panels
{ border: thin solid green; /* to see */
min-width: 100%;
display:table;
}
#leftPanel
{ border: thin solid red; /* to see */
min-width: 40em;
display: table-cell;
}
#rightPanelContainer
{ display: table-cell;
text-align: right; /* right justify */
}
#rightPanel
{ display:inline-block; /* allow panel to be justified */
border: thin solid blue; /* to see */
min-width: 20em;
text-align: left;
}
HTML
<div id="panels">
<div id="leftPanel">
Left Panel
</div>
<div id="rightPanelContainer">
<div id="rightPanel">
Right Panel
</div>
</div>
</div>

Related

creation of a hidden navbar which is only visible at a defined size

I am currently in training and to carry out a common thread project, I would like to stand out from my comrades who use a responsive navbar which displays a burger menu with a "hidden" menu which is displayed as a footer after reducing the window. (which only appears from a specific dimension)
For example the website https://www.parcasterix.fr/
I've been racking my brains for 3 days and I haven't found
Thank you
Start with the basics, make a container and use a nice natural HTML markup.
Naturally, elements are in display:block, this makes them following the page size. You can make them display:inline-block, so they stay on the same line, but will always follow the flow, and show their content.
No need to go complicated, at least on the beginning. But even after.
.container {
resize: both;
overflow: auto;
width: 80%;
height: 140px;
}
div {
border: 1px black solid;
display: inline-block;
padding: 10px; /* Just to make it nicer */
}
<div class="container">
<!-- Insert your content here and try to resize with the handle on the
bottom right corner -->
<div>Some content</div>
<div>And some more. Hey did you notice?</div>
<div>Elements are just following the flow!</div>
</div>
This is a simplified version, but assuming I've understood you correctly, you can do this simply with a CSS #media query. Hide the footer normally, show it when the screen size is small enough:
/* footer is hidden by default */
footer {
display: none;
}
#media(max-width:400px) {
footer {
display: block;
}
}
Once the screen width is over 400px, the footer will be hidden

Adjusting container div using JS

I am currently struggling with a site and I have no idea where to start on this bit of code.
I have a container div, .overflow-block1, which has 4 image divs in them, .block-container. These are automatically pulled in via php and JS and there are 54 image blocks in this container.
Currently I am using JS to add a class to the .overflow-block which increases its width to 25750px to fit all the image blocks next to each other in a single row.
The problem with this is that as content gets added they now need more width so I have to manually add more width, but content will be added regularly and I do not wish to spend the rest of my life changing the width of this block every time content is added.
Can anyone point me in the right direction to use JS to automatically set the container width to fit all the image blocks?
Thank you
As I've written on a comment, here is a solution only with CSS.
#parent {
overflow-x: hidden;
width: 190px;
}
#container {
white-space: nowrap;
border: 1px solid #f0f;
width: 190px;
overflow-x: visible;
}
#container>div {
background: #ccc;
width: 50px;
height: 50px;
display: inline-block;
/* for IE6/7, remove if you don't need to support those browsers */
*display: inline;
zoom: 1
}
<div id="parent">
<div id="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eee</div>
<div>fff</div>
</div>
</div>

div position absolute... overflow-y:auto and then vertical scrollbar covers some of the content

I have a div with absolute position
inside some other divs.
http://jsfiddle.net/d8GYk/
<div style="position: absolute;
display: block;
outline: 0px;
margin: 0px;
padding: 0px;
top: 0;
text-align: left;
font-size: 11px;
font-family: arial;
cursor: default;
border: 1px solid rgb(170, 170, 170);
overflow-x: hidden; white-space: pre;
overflow-y: auto;
left: 0px;
height: 132px;"><div>a a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>
As you can see the first div is not completely visible
That's because the vertical scroll bar covers it.
If I set overflow-y:scroll. The problem goes away.
However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)
Can somebody suggest how to resolve this problem ?
if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:
<div class="container">
<div class="entries">
<div>ab a</div>
<div>ab</div>
...
</div>
</div>
and css:
.container {
height: 100px;
overflow-y: auto;
}
.entries div {
white-space: pre;
}
Demonstrator: http://jsfiddle.net/gFrbM
That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.
Du you really need "white-space: pre;"?
If you remove this part i think it is going to work
Use a margin-right for each div inside the container:
.container div{margin:0 20px 0 0}
http://jsfiddle.net/Karzin/d8GYk/2/
Add this to css
{padding-right: 20px;}
Reason: The border of the scroll is covering your div text. you need to give some space for the same.
http://jsfiddle.net/d8GYk/3/

Pure CSS equal height columns with border-bottom on hover?

I was hoping you could help me find a solution to a problem I'm having after trying out Matthew James Taylor's equal height columns using pure css.
I'm trying to add a border-bottom to a column when hovered over by the user (see image: 1). The problem I'm having is that as these DIV's are nested the borders seem to stack on top of eachother (see image: 3). I'm trying to have all the borders on an even level as the effect I'm going for would have them overlap with the gray line
Furthermore, the grey horizontal line in the image would stretch to 100% width of the page and would be on an even level with the black border-bottom. When not hovering over any of the titles (hi there!, contact, twitter) I'd like the columns with content to slide up until only the titles are visible, this would be the only thing I'd like to use Javascript. Perhaps all of this isn't possible using just CSS, or maybe there's a better way of doing it?
**
It looks like this would be solved far more easily with display: table than the CSS trickery you are currently using.
http://jsfiddle.net/rrPKA/
#container { display: table; }
.row { display: table-row; }
.row > div {
display: table-cell;
width: 100px;
border-bottom: 1px solid lightgray;
padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }

issue with js dropdown sub menu items positioning

I'm a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I've tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can't seem to find it.
You can check the source code from a live demo of the page here.
Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you're trying to do - I'll ** the css changes I've made:
.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}
.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}
.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}
This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.

Categories

Resources