I'm sorry if this question has already been asked elsewhere.
However, I've got a page I'm building in Leadpages that is due in a couple of hours. It's got these half circles...
This is the code structure for a half circle...
The HTML is just a straight up plain image.
The CSS is as following:
.ring-right {
position: absolute;
right: 0;
width: 240px;
top: 2115px;
}
The issue is it’s really hard to get them to look really good on all screen sizes. They change position quite a bit even with a just a tiny browser resize. Which as a result can quickly overlap text over go in a position that does not look natural.
As the width of elements, like the blue block in this photo for example, change, that leaves circle landing in a weird spot. Sometimes overlapping the text.
For example, this would look better at the top...
Is their a better way to code these in, to better change with the screen sizes? At this moment, I would have to basically make a change as to how far from the top each ring is, with media queries at the moment. Except, that would result in needing to use dozens of media queries. Like one every few pixels practically.
Set that white element with blue squiggles as position: relative; if you haven't already, and then set the circles to be children or pseudo-elements (::before and ::after) and keep their position absolute.
An absolute child (:before & :after are treated like children as well) will have its position based off of its closest relative ancestor.
Without having all of the markup, it's a bit tough to see what all is going on. But using the relative position of the element you want to manipulate will result in FAR fewer media queries, if any.
Take a quick peek at this pen I whipped up and drag the window size around: https://codepen.io/xhynk/full/zYxmENp, and here's the pen link itself if you want to fork it/mess with it: https://codepen.io/xhynk/pen/zYxmENp
Related
I'm having a frustrating time with HTML and CSS.
Basically, I'm trying to make a website with a layout like
Problem is, the div on the left has a massive margin, which displaces the canvas and makes happen.
I've tried all kinds of solutions of which here are some, with the problems they caused:
Setting the div's display to inline block. This made the div dissapear entirely for some reason, and made it's contents appear to the right of the canvas. (At least it moved the canvas up). I have to point out that the contents weren't actually visible. Ctrl+Shift+I said they were there`.
Changing the div to an inline component (span). Made no difference.
I tried margin: 0px;. This didn't change it at all. margin-left and margin-right to auto just centred the div and didn't move the canvas.
I tried setting manual width/height values for the div. No difference.
There are some solutions that I think are likely to work, but I am reluctant to try them.
I could make a table and add the elements into it, but I heard this is bad practice and would like to avoid it.
I could maually set the positions, but I fear that they might change across devices and resolutions.
I'm at a bit of a loss what to do. I am a beginner at HTML and layouting in general, so please excuse me if it's something really obvious I'm missing.
Thanks for any help.
It's not really "shrinking" you're after. But since I don't know what you're calling your divs and canvas, I'll give you the general solution.
-> https://www.w3schools.com/css/css_float.asp
So basically try adding this:
div, canvas {
float: left;
}
Assuming your div and canvas is a <div></div> and <canvas></canvas>, and that you haven't added a position: fixed; or position: absolute; to any of them.
I'm trying to build a website and am experiencing problems with the position of a div 'tile'.
This is the site I'm working on :
https://dl.dropboxusercontent.com/u/103417607/1/index.html
I'm fairly new to the CSS and responsive programming world.
Problem I have is the 'date' tile on the right, when resizing the window, for some reason, this tile creeps up underneath the 'log on' tile. I just don't see what I'm doing wrong as I don't have this with the other tiles.
You can test it for yourself bij slowly dragging the right side of the browser window to the left (making the width smaller). The date tile will slowly creep up, while the other tiles (screenstar and latest news) stay nicely put. I don't understand this, as my css code is the same.
This is my CSS file :
https://dl.dropboxusercontent.com/u/103417607/1/css/style.css
Any help would be greatly appreciated, this is giving me headaches.
(I did check de JQUERY mosaic stuff, but I don't know if that is what I'm lookign for)
Thanks,
Maarten
The div in question has the following CSS:
#datequote_position_front {
float: right;
margin-top: -610px;
}
Which tells us that the top edge of the <div> is 610px lower than where it would normally be in the document flow.
We can safely assume the vertical position of the <div> is directly influenced by which other <div>s appear above it in the document flow.
The reason why the <div> is floating upward is because, as you reduce the width of the viewport, your horizontal menu disappears.
I haven't checked but I would guess the <div> is rising by a number of pixels exactly equivalent to the height of the horizontal menu.
Your solution to prevent the vertical position of the <div> from changing is, therefore, to use another method to position the <div> - ie. one that isn't relative to other elements in the document flow.
For instance:
#datequote_position_front {
position: absolute;
top: 610px;
right: 6px;
}
This will mean that the <div> will always be absolutely positioned 610 pixels below the top edge of its parent and 6 pixels to the left of the right edge of its parent.
N.B.
Two points:
1) I haven't tested these styles in a browser so you may need to adjust the top and right co-ordinates of the <div> correctly according to your design.
2) You'll (probably) need to insert a media query, if you want to change the declared absolute position of the <div> at narrower viewport widths.
I was able to solve the issue thanks to these tips :
http://www.htmlforums.com/css/t-positioning-divs-in-mosaic-style-160801.html#post854724
Cheers.
Maarten
When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2. How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css
If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.
If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.
Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.
What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.
There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.
... phew, hope that makes sense, let me know if now.
I just had a quick look at your style, what I saw is technically very ugly.
You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space.
I would say you have the wrong concept of styling / structuring the page.
Try to use "position:absolute" very rare!
Give a height to the .devices class:
.devices {height: 520px;}
I have got three divs on a page, all floating side by side. With the css scale method, I'm scaling the middlemost div to 0.5. This works well.
The only problem is that scaling the div won't effect the position of the other divs. Seems like the scaled div still has an invisible container with the original scale. The desired result is that after scaling, the margins stay the same.
I added an example: http://jsfiddle.net/yxYdd/3/ (In real, the middlemost div is filled with lots of other elements)
Is there a neat way, without messing with margins etc., so that scaling will effect the positioning of other divs?
That's just how CSS 2D transforms work by design, unfortunately.
What you really want to do is avoid using CSS transforms for this example, and instead use another, simpler implementation.
I've done this for you here: http://jsfiddle.net/yxYdd/4/
The only change you really need is:
.scaleDiv{
width:75px;
}
Which does produce the effect you wanted. Isn't that funny? :)
I want to achieve the effect described in the following question, but using CSS.
I remember seeing somewhere that this now can be done with HTML5, but now can't find the property name.
Stretching an UIImage while preserving the corners
You'll have to use 3 different images.
First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.
Once you've got your images. Create one HTML image element:
<img src="img-middle.jpg" />
In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don't want stretched.
img:before {
contents: '';
background: url('img-left.jpg');
height: 50px;
width: 20px;
position: absolute;
left: -20px;
}
img:after {
content: '';
background: url('img-right.jpg');
height: 50px;
width: 40px;
position: absolute;
right: -40px;
}
Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It's also cool since it's only one element, so the CSS stays pretty clean except for the requirement of the empty content:''; property.
So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they're technically not part of the original element, they're just appended.
ETA: As for the method described in the objective-C related post, there's no CSS property that breaks apart images like that unless it's in some obscure webkit nightly build that I've never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you'd only have two image file requests, as you want to keep those low to speed up page load time.
you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3 transition applied to the width property in order to achieve this effect.
i've set up a working demo on jsFiddle to illustrate how it's done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).
check out the HTML5 rocks playground, you'll find some fascinating snippets demonstrating the power of CSS3 and HTML5 (naturally) and can use it as a quick reference as well.
Did you mean CSS3?
I think border-image is pretty much what you're looking for. It lets you take a single image and transform it into the border of an element.
It's kinda hard to work with, so Mozilla made a wonderful WYSIWYG editor:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator