so i have a question...
Im making a website and i encountered a problem. I made my website in the resolution 1920*1080p and obviosly when i change to a different size all the elements get moved around. what i want to do is make it so no elements get moved everything is were i want it to be, and if your on your phone youd need to scroll not only down and up but left and right, i'll post my code.
http://pastebin.com/5vzrHq2b
Just set
body {
width:1920px;
height:1080px;
}
I also totally advise you against doing this, it makes websites extremely annoying. You should code the wesbsite to be manageable on all displays.
Put those elements into divisions. and when defining the division class make the position option "absolute".
you can define a division class as follows.
.division1{
position: absolute;
height: .......;
width: ........;
.
.
.
}
and use it as follows
<div class = division1>
//Everything that you want to make unmovabl1e
</div>
Related
I'm trying to make a Timetable for a festival in HTML and CSS. A lot of work has been done, but I can't figure this one out. So I made a Timetable using lists 'UL' 'LI' in HTML, with styling in a CSS document.
At the moment it looks like this.
Look at the screenshot here.
Because it is a very huge timetable, there is a horizontal scroll. What I'm trying to figure out is how to let the text of the stage name, for example, 'Har & Mar' to scroll with the page, so it stays on the left when you scroll to the left or right. Because that ain't the case at the moment ;P
I tried everything to fix this problem, but I don't know how to get this done. Please send help! My code is down here:
<iframe width="100%" height="300" src="//jsfiddle.net/CasperBoon/ayjsuLxe/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
Best regards,
Casper Boon
If you have any method of selecting which name will be floating, then you can achieve it by applying position: fixed; property to that name's container. According to your code, it should look something like this (for 'Har & Mar'):
CSS
li.stage-0 > .stage-name {
position: fixed !important;
left: 0;
}
I suppose you will want to have all names fixed on the left when scrolling, so it could look like this:
CSS
li > .stage-name {
position: fixed !important;
left: 0;
}
With only css will be really hard.
But using jq or js this become very easy.
Here is how you could do it
I Assumed that show-right-shadow is the scrollable element
$(".show-right-shadow").scroll(function(e){
var left = this.scrollLeft;
$(".stage-name").css(// make all the divs [stage-name] follow the scroll
{
position:"absolute", // use absolute and not fixed, so u dont mess upp the design
left:this.scrollLeft, // follow the scroll
"z-index":9999, // make it at top of all other elements
})
});
I would like to know all the different types of div classes. I have a small amount of understanding of divs.
Here's an example of how I would use a div and then customise the content in the div using CSS.
div .header {
font-family: "Bebas";
font-size: 25;
font-color: #00FF00;
float: right;
position: relative;
right: 120px;
bottom: 1095px;
}
So, if you're not following my question(s), what I want to know is;
A. Does that code look alright?
B. How many div classes are there, and what are they called?
and C. Could someone give me a brief explanation as to what they are and more specifically, how to use them.
I'm mostly self-taught, in case you wondered.
To answer your question you can have as many div as you want. and you assign class or id to identify each div. just be aware id are unique, you can not assign the same id to more than one elements.
and your css format is right, but I am not sure why you declare right/bottom those will only render when your position is absolute with out float.
I would suggest you go through some tutorial at http://www.codecademy.com. it's free. and don't required any sign up, unless you want to save your progress.
As previously said, you can set as many div classes as you'd like, they're not preset. I would also recommend doing the Codecademy tutorials.
Looking at your code, you're telling the div to float: right; - fine. Then you use position: relative; followed by right: and bottom: values. Either float or position, no need to do both.
The way you've written the rule is probably not how you mean it. It's currently looking for this -
<div>
<div class="header">
<p>Content</p>
</div>
</div>
An element with the class header that's inside a div.
You should remove the space so your rule becomes -
div.header {
enter code here
}
Yes, the code you wrote looks fine. I don't know what you intended to do with this code, so going by just the syntax it looks fine.
Coming to your sub-question B and C,
div is block level element with almost no specific task or objective. They are general purpose elements used for most tasks. Block level elements act as containers and div is the most basic type of container we get.
We can use div to store other elements, design web document and proper indention of text and images and what not.
Let's answer your questions one by one:
A - Your code looks fine ( depending on your needs ).
B - You can use as many div classes as you like.
C - Simply you can use div classes to describe it's content like: div.header , div.body , div.footer and so on.
But i recommend to use the new HTML5 semantic tags instead, it is easy, clear and more powerful with search engine optimization.
For more clarification, kindly check the following link www.itibooks.com/html/html5-semantics .
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).