I'm trying to divide the body of my webpage into different text parts, i.e. rectangles that would be separated and kinda float on the background. A good example would be a following website: http://www.index.hr/.
How can I achieve this?
Thanks in advance!
Stack Overflow is not a code making service, and writing the code from scratch is not encouraged. Have you done any research as to how you would approach this problem? I will not give out the entire code, but I will tell you to research <div> HTML elements and CSS position, float and clear properties.
Related
I have 3 lists I want to position side by side in html5. What is the best way to do this. I have tried using float and text align in css it just wont work for me. I have been looking at the W3schools tutorials and have looked on here but can't find anything related to lists. I can post the code if needed.
http://pastebin.com/gC6KGaFL Here is the code for the webpage its an assignment for college.
Here is the css http://pastebin.com/xrm8QqeS
It is better to put your list in div and position them (divs) inline-block.
Here is the JS fiddle, If I am right.
enter code herehttp://jsfiddle.net/dhustlerz/cpp6n4sa/
I have a question about how to organize my div elements.
I have drawn a picture, where you can see a phone and four texts. Here is what I want: http://i61.tinypic.com/14spc2c.jpg
But when I'm trying to code it, I end up with this: http://i57.tinypic.com/2i0cgzk.png
I have searched all over the web, but I can't find any solution. I'm awere of using "margin" but with any resolution that do not fit mine, it will look weird.
Can anyone help me? :)
Encapsulate the texts in divs and then use float css property.
I'm learning HTML & CSS, and I'm having an issue.
My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner.
I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!
Could you help me, please?
By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.
Thank you in advance for your help,
Adrien.
There are many different ways to handle this with purely CSS.
Firstly Twitter Bootstrap has a nice means of doing this. Link is here
Or you could use the CSS Sticky Footer See here
The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.
I hope this helps.
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
I want to use HTML and display one large image.
On this large image I then wish to display multiple smaller images, all on different places and sizes.
I would prefer doing this using HTML only.
But, if this is not possible, Javascript or something like that is also an option... :-)
If anybody has any idea using PHP, that would also be great.
I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.
Any help would be greatly appreciated.
Kind regards,
Michael
you can use a container div which will contain all the smaller images. You can set background of that particular div.
your html as
<div id="container">
</div>
and css as follows:
div#container{
background-image: url("image.jpg");
background-repeat:no-repeat;
height:100%;
}
Two alternatives:
defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.
use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.
No javascript required for this and php has nothing to do with this.
You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/
The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.
you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.