Horizontal Site Issues - html

I am creating a horizontal scrolling site that will dynamically resize itself when i add the javascript to it later. However i started setting up the HTML and the code seems to cause a issue when i put another div inside of the div that makes up my dynamic code.
Also, would someone with more experience like to explain the drawbacks of using such a code if there are any?
#main_cont {
height : 500px;
white-space : nowrap;
overflow-x: scroll;
width: auto;
}
.ads {
display : inline-block;
height : 100%;
}
Is there a way for me to adjust the code below so that i can put divs and potentially images inside of it. I don't want to use a Javascript fix for this. thank you in advance.
http://jsfiddle.net/YVyFA/

You're just missing vertical-align: top; for your panels
.wlds {
vertical-align: top;
}
Updated fiddle
Also you don't need javascript to resize your layout, use a fluid layout by setting height and width in percentage values

I found a link that might be able to explain how to make a website that requires horizontal scrolling. Try this tutorial by CSS-Tricks. Hope this helped. Have a good day.

Well, the quickest and dirtiest solution to this is to give the #main-cont div a specific width and make the .wlds divs floated. So add the following CSS rules:
#main-cont {
width: 783px;
}
.wlds {
float: left;
}
JSFiddle.

Related

How can I get text-overflow to work in container with dynamic width?

I have a help box component that can contain text and in its natural state is collapsed. Text overflow is hidden using text-overflow: ellipsis; When clicking on it, it expands and displays the whole text.
I cannot get it to work in a dynamically sized container. It works fine otherwise.
Please see the following JSFiddle where the code is reduced to its essentials:
https://jsfiddle.net/gmbt76or/
The first helpbox is displayed correctly and is not wider than the display area. The second helpbox is inside the dynamically sized container and is not restricted in its width at all.
Can you please answer me what I have to do to get the second help box to behave like the first one? Naturally I cannot use any fixed widths.
Thank you very much in advance!
Adding min-width probably solves the problem:
.ui-g {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
min-width: 0px; /* add ths */
}
.ui-g-12 {
width: 100%;
float: left;
box-sizing: border-box;
min-width:0px; /* add this */
}
Only two lines to add to your OP code.
https://jsfiddle.net/9aq34rt7/
Resize the browser window see it adjusts. Hope this solves the issue in actual code.
found a nice article explaining the issue: https://newbedev.com/css-text-overflow-ellipsis-not-working
While viewing your code in JSfiddle, I just modified your .ui-g-12 class css
.ui-g-12 { width: 100%; }
to
.ui-g-12 { width: calc(100vw - 47px); }.
I hope it will fullfill your expectation.
Code: JSFiddle
Thanks.

Making a fixed div scroll horizontally

I do not have any example for this however it's really not needed for this question. Is it possible to make a div scrollable left and right but not up and down? I understand that a relative layout does both, and a fixed doesn't move at all.
Requirement must be done through HTML and CSS only.
Try using this, the only issue is that it doesn't work with all browsers:
div {
position: sticky;
}
Maybe this is a bit too short (but can't answer without more information or markup, or JSFIDDLE to apply)
CSS
div {
overflow-x: scroll;
overflow-y: hidden;
}

Vertically aligning content to middle when outer containers are height: 100%

So I am vertically aligning content to middle with ghost element method:
html {height: 100% } body {min-width: 100% }
.block {
text-align: center;
height: 600px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
It's a straightforward method, I get the content in the middle but I really dont want any fixed heights, I want it to be dynamical. Though I added height: 600px in code sample, because it gets it to seemingly work but not dynamically.
When I add a fixed height I get what is on the left side of the picture but I also want it to be like right side when the viewport height is smaller so it would cut the top and bottom empty spaces, which can't be done with fixed height.
So any other methods or solutions that work good are appreciated!
Also IE8 support would be also nice.
Update: https://jsfiddle.net/duthzvyo/
Make it so when you squish the viewport height that no scrollbar happens the grey box so to speak squishes as well.
If you want to use purely CSS (i.e. not scripting the width dynamically with JavaScript in your current setup) then I'd recommend using the newer flex-box model, which is a lot more powerful.
See some tutorials on flex-box.
Other solutions (potentially advanced because they require JavaScript coding, but easier in concept if you know how to code in JavaScript) include Famo.us and (work in progress) infamous.
Also check out the following, based on Cassowary Constraint Solvers:
https://gridstylesheets.org/
https://github.com/IjzerenHein/autolayout.js
These last two libraries make it really really easy to center elements (among other things) within dynamic layouts, where you define your layout rules in a declarative manner similar to CSS, but they're much better than traditional CSS in my humble opinion.
I'd recommend checking those tools out. :)

Can't Center an Image

I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/

CSS problem - gaps between divs

I have designed a layout and i find some gaps in the stacking of divs over each other.
can some one help me http://uniquedl.com/3closets/about.html
and
You need this in style.css:
img { display: block }
and you need to change the height on .introduction .intro-message to 384px, to match the height of the image on the left.
Doing this solves both problems.
As an alternative to img { display: block }, you could instead do: img { vertical-align:bottom }. This also fixes.
See this answer for a good explanation of what's going on here.
#Alohci explains it very nicely.
You have a <div class="clear"></div> in both instances there. I would say that the page is behaving as expected.
Edit: If you use Google Chrome to view this page, you can right click on an area and choose "inspect element". It will provide a window that will display the code as it's rendered by the browser, and on the right there will be another properties window that displays the css being assigned to the elements you're looking at.
in their div .introduction you have an image larger than the div itself, this must be the problem, including the other divs
First gap: your class .introduction is having height of 384px where else class .intro-message (which is a child of .introduction) is having a height of 390px.
Hi for your website :http://uniquedl.com/3closets/about.html just make the style like
.introduction {
height: 384px;
overflow: hidden;
position: relative;
}
Then it will work