How to push an image to the right and raise it to the top 300?


image of a girl i can’t click it to the right and raise the top by 300px how do i do that ?

You wouldn’t do it like that as 300px is a magic number (remember those from the last thread :)). It will only ever be correct once (probably) but will be wrong if you change content or a user zooms text only. You would need a different approach so that the image is at the position it needs to be without needing magic numbers. This could be as part of a flex or grid layout or indeed floated if you want wrapping text. However all would require different html than present. Also I would need to know what those 6 tree images are doing and where they sit in the flow of the document.

Therefore I can’t really give a straight answer until I understand what the layout should look like?

There are also 2 other issues that would need to be resolved first.

  1. Your points div is a collection of about 50 divs all used to produce a series of 4px dots. This is not a viable approach and probably should be a background image created with a linear gradient, svg or similar.

  2. The consequence of your points div is that you then position:absolute your menu_one_inner from the top of the page.

.

menu_one_inner {
    position: absolute;
    top: 280px;
    max-width: 723px;
}

top:280px is another magic number that is unlikely to be right for anyone but for you, on your screen at your text size. Should text wrap to another line or should there be more content that expected that 280px will never work for a responsive site. What’s worse is that any further content outside of that menu_one_inner is also going to have to be absolutely placed using magic numbers. This is not a viable approach. You need elements to follow each other logically without absolute positioning and the n adapt to all screen sizes easily.

If you have a screenshot of the finished article or a rough sketch then we can set about creating some logic and structure to avoid all the above issues?

Here is what I think you are trying to do with that girl image. It may be wide of the mark but should be a starting point for discussion.

I have also incorporated your points into a linear gradient background image to avoid polluting the html.

Of course I have questions, there are some entries that I see first of all, I still do not understand the creation of points, how did you get them, I copied your code, I do not have them, now the question is how to make the element visible in the picture?

at the moment I can’t make the circle visible on the img_video photo, and I also can’t lower the dots on the left, which

I’m not sure what you are trying to do exactly but it looks like you are trying to put a blue background and dotted border behind a rounded image. For that to happen the image would need to be a transparent png or you won’t see the blue background.

You would be better off making that in your paint package and adding it to the image by default. Then you can export it a tenth of the file size of a transparent png. If you don’t want to do that then please post the image you are using to see if it’s possible.

You can’t do it with the approach you are currently taking as already mentioned as you are using disparate unconnected elements positioned by magic numbers. I don’t know how many times I can say it but this approach is not viable. Indeed you seem to have done the opposite of what I suggest. :slight_smile:

It won’t work in a responsive layout. You have to get the structure right as in the example I gave.

They are created as a linear gradient and used as a background to the element. No extra elements are required and can be reused as required. My demo clearly shows their use and should be easy for you to deconstruct as a learning exercise.

I’ll say it once more. If you are using large numbers to position things where you want them then that is the wrong approach in 99% of cases.

I understand what is wrong, but I do not understand how to do it right)

Another question is why if the content has a size of 1000px, and I add content to it, it goes beyond this content, why does this happen?

That’s a good start. It’ll take a bit of practice to get it right and really is a matter of trial and error and learning. Just keep working at it.

Generally content will not go outside its container unless the content itself is wider than the container.

If for example you have a container of 1000px but your image is 1100px then the image will not fit and 100px will stick out of the container. To stop this happening you would make the image fluid and rather than saying width:1100px you could say width:100% or indeed width:1100px combined with max-width:100% (and height:auto to maintain aspect ratio). That will mean the image would be 100px if there is room otherwise it will match the container’s width and shrink as required.

Another reason for content to go outside of a container would be if you positioned it outside the container or you used large margins that push it wider than the space available.

All of these boil down into the methodology I keep describing in that you must control the flow of the document and not force items to be where they don’t want to be. A logical structure and a good layout method will avoid most of these issues as the need to move stuff somewhere else does not happen because it is already where it should be.

I don’t expect you to understand all the nuances straight away but you have to imagine that a web page is not a piece of paper. It does not have a width and its height is unlimited. You don’t put random html in a page and then try and place each piece where you want. You design the page with a good html structure that generally allows the elements to be close to where they should be. Obviously flex and grid allow stuff to be moved and still maintain the flow of the document.

For example your image of the picture of the girl is right down at the bottom of the html but you want it to appear at the top. In my demo I moved it to the top of the html and it needed no positioning or magic numbers. It will not be affected by the height of the content or whether you change all the text unlike your magic margin method.

I’ll be back later with a few more suggestion after seeing the image you posted.:wink:

The question is why doesn’t margin: automatically center the element?

It will automatically center the element depending on the type of element and the display: properties the element possess.

If the element is display:block it will require a width or a max-width otherwise it is 100% wide and there is nothing to centre.

If it is an inline element (or display:inline or inline-block) it will not centre. Widths don’t apply to inline elements and inline blocks are centred via text-align:center on the parent.

If it is a display:table element it will center as they are shrink to fit and have intrinsic content width.

If it is a flex item (child of a flex box)or grid-item (child of a gtid box) then it will center.

If it is an absolutely placed item with a width and here its left and right are defined by co-ordinates larger than its width it will centre with margin:auto.

That’s a few of the scenarios explained.:wink:

I updated the codepen to show what you can do to the image but as I said you need to move it in the html to where it needs to be.

To get it exactly like your design would require transparent images as I already mentioned.

How does z-index work: ;?I need to hide an element, how do I do that?

When you say hide what do you mean exactly?

If you want it removed then display:none will do that.

If you are talking about stacking things on top of each other then that’s what z-index is used for. Only positioned elements can use z-index.

I have two elements, two pairs in the same container, in the position of the first pair: absolute; z-index: ; It worked
The second one doesn’t, I don’t understand.

If the second element has no positioned defined then you will need to add position:relative before the z-index will take effect

I have position: relative in my parent;
and the first pair works in this parent, the second pair does not work, I also tried to create another element with a parent and a child in this parent, but nothing works for the second pair.

Without seeing an example it’s hard to give advice.

As mentioned before only positioned elements can have a z-index. If the parent is positioned then that creates a positioning context for the positioned children. If the parent has a z-index other than auto then that confines the children’s z-index to the parents foreground.

There are rules that need to be followed so without a full overview I can’t give a straight answer:)


on the right, the dots are hidden under the element, but the dots on the bottom left are not,?

As I said above you need the a-index on the dots.

.block_inner_4_four > div{
  position:relative;
  z-index:-1;
}

You would also need a background color on the inner_p2 if you want the dots under the text rubbed out.

However as I said a number of times this is completely the wrong approach and not viable at all. I have given an example in my code pen of how this should be done without needing any stacking indexes or magic numbers.

I am on a mobile at the moment and your page is completely broken and unusable unlike my code pen which displays fine.

I urge you to rethink before it’s too late. .

It’s not entirely clear to me how to do adaptive layout, it seemed to me that I didn’t use magic numbers

You are getting better but you still need to distinguish between content and design. If images are not important to content then they should be background images. That would mean things like your dots should not be in the html mark up if at all possible.

Here’s another quick rejig of your code to place the dots and to make the layout fluid (I haven’t been too careful).

I’ve left as much of your stuff in there as possible so you can see it but in reality I would remove all the fixed pixel height for fonts and use rems instead. The dots are now in the background and stretch automatically with content and have no special html.

I made your images fluid and reduced the layout to a single column for smaller screens. I removed the quote images as they are just eye candy and used css quotes although you could replace with background images in a similar vein.