HTML5 / CSS / RWD - deploy four boxes in a div [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
How to deploy four boxes in a div to be positioned at the edges of the top-left, top-right, bottom-left, bottom-right and when you click the box in the middle to open a window with the text.
Something like this: https://www.dropbox.com/s/3etszqonq9egven/layout.jpg
Help me please

style the div in following way
top-left
<style>margin-top:0;margin-left:0;</style>
top-right
<style> margin-top:0;margin-right:0;</style>
bottom-left
<style>margin-bottom:0;margin-left:0;</style>
bottom-right
<style>margin-bottom:0;margin-right:0;</style>

Related

z-index not working for overlapping elements [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have a scrollable box with text in it, which expands upon hovering over it, with a small amount of text also above it. When I hover over the scrollable text box, It expands, also overlapping the small bit of text above it. I have tried this with z-index, but just cannot get the scrollable text box to overlap.
Here is a StackBlitz of my issue (should be fairly explanatory).
Any help would be much appreciated.
Just add background-color: white to your .eula-text class to make the background of your text non-transparent.

Width and height of parent element not equal to image dimensions [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
A friend ask me to take a look on one issue on his site. In the portfolio section on the website, there is a border around the div and a rollover evect when the images are hovered. However, there is one weird issue, the height of the box containing the image and all data is larger by 5px in height.
The image is square, and all of the parent elements have width and height elements set to 100%, there are no paddings or margins that could have caused this, so I can't seem to find a reason for this.
Could anyone point to a location where is this happening and how to fix it?
A sample code describing this problem can be seen here.
Thanks!
Your code is heavily awful, but putting display: block on the images will fix it.
The reason is that images are inline elements, so you will get some phantom padding to the bottom to account for things like the bottom of g, p, q, etc.

left align image and then span side by side in a table header-th [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to align an image and span text side by side, but it's not happening,
can someone give directions please?
this fiddle has a grid with 3 columns, in second column i need to display an icon first(left aligned in th) and then a text wrapped in a span just after image-side by side of image, currently it's going on bottom of th.
in img tag:write float:left; and increase width of that div to 150px
Try this one:
I have added fiddle:
JsFiddle

CSS rules for fixing header, footer, and center-image [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have three images: one.png, two.png, and three.png. Using CSS, how would I fix one.png to the top-center of the page, three.png to the bottom-center of the page, and two.png to the middle of the page? two.png should be vertically- and horizontally-aligned the entire setup should be consistent when the viewport is resized. Thanks a lot!
For the top and bottom images, you'll want to position:absolute; and add either top:0px or bottom:0px;
The middle one, you'll also want to add position:absolute;. In this case, there's a few other CSS tricks that will help center this vertically.
img.two {
top: 50%;
height:100px;
margin-top: -50px; /* Half the height */
}
See my fiddle here: http://jsfiddle.net/9GFu9/2/

How could I extend <hr> from right to left? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Have created a div and another div stays adjacent to it but I put an hr to right aligned div but want it to expand from right to left.
If you are simply using <hr>, clear your space for a line then it will automatically cover the whole region. Keep your both division inside a division and put <hr> in you main division. It would be better if you show your code.
It will span the whole way through if you put it in the top level div.
You can also add CSS to it to make it stretch nicely, but that's another story.