<header>
<div id="topIcon">
Two imgs
</div>
<div id="topSearch">
input, button, input
</div>
<div id="topIcon">
1 img
</div>
</header>
Two icon images / search bar / icon image are lined up in the header like this way.
How do I make sure that the images are fixed in px, and the search bar takes up all the rest of the seats?
The top header of the 11th Street mobile page is almost the desired result.
html5 css
I'm also a beginner, so I don't know if it'll be a big help, but I want to help you as much as I know.
to put it simply a. For logos, menu buttons, and shopping cart buttons, set them as appropriate px for fixation.
b. The width of the search bar has to be increased or decreased to fit different screen sizes, so of course this is the case Fixed px is not available.
b-1. We need to set the width to %.
b-2. But the image logo on the same line...The lamp is a fixed px, and there's no point in using % of the search bar. - Because when you say 30px 30px 80px (width), you have to calculate that 90px will take up 20 percent of the screen. In other words, if you mix it like this, there's no difference from just fixing it with px.
b-3, so the search bar and the rest of the rest seem to be on the same line, but you actually have to play separately.
- Referred to the 11th Street mobile page-
b-4. Make the position of the header relatively, and for the left #topIcon, make the position absolute, left: 0, top: roughly know~(about 5px?) so that it sticks to the left side of the parent header. And the right #topIcon needs to stick to the right, so position: absolute, right: 0, top: roughly~ (5px?) Like this.
b-5. Set the search bar to position: relative, and if you give a margin px of the width px of the left and right #topicon that is already fixed, the search bar cosplay giving up the space on both sides in the center because of the two side images.
c. If you do it like this, the search bar will have to yield xpx on the right and left, xpx on the right, xpx on the left, xpx on the right, xpx on the right, whatever the size of the screen is.
I haven't tested it, but this is the big idea. Please keep that in mind The important thing is that the author seems to lack some information about layout. "Please refer to ko.learnlayout.com/''~
ps. As I tried to explain the painting in words, the explanation became difficult.
© 2024 OneMinuteCode. All rights reserved.