I'm about to start a website from scratch.
I already run into my first problems.
Where do I start with the positioning of the elements?
body? html?
I started with ...
* { border: 1px solid white;}
to help me orientate, but the problem was that the border right and bottom where larger than my screen, so scrollbars appeared.
Why? I mean I could hide them via overflow: hidden, but why doesn't the border fit to my screen?
The other thing is, what element is the "first one" that should be positioned? html? body?
My thought is after the first one is positioned as I want a can position all the others within that one.
Without knowing your content i can't say why it's larger than your screen mostly because the content is too large that is the reason. However for positioning always use body tag if not the first div tag inside your body(it completely depends upon on your design)
You learn about basic html and css tutorial.
first you know what's your screen resolution and then fix your body width using css.
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
I’m currently trying to wrap my head around solving this layout with Ionic and CSS:
This is the result I achieve even after spending quite some time with it:
I've recreated the basic setup on the home page: here
The layout consists of a navbar, a fullscreen image and text-content below that. The gradient is constructed using a ::after attribute in CSS as I don't want to hard embedd the gradient in the image file with Photoshop and the likes. I had to construct the fullscreen image using a ‚position:absolute‘ attribute:
.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }
because for reasons beyond my knowledge, not using ‚position:absolute’ results in the image not being displayed in fullscreen but being 2 or 3 pixels smaller than the total width and thus leaving a slim border of background color around the image:
Once I do use the ‚position:absolute’ attribute however my layout becomes a complete mess because the text content is being placed all over the image content.
This is where I'm struggling to come up with a solution that tidly places the text content below the fullscreen image. Using padding is, to my understanding, not possible as quick fix as I need the layout to be independent from the image content:
if I use padding based on the height of portrait sized images, the content gets too much offset when for landscape sized images and vice versa. I could try to target landscape and portrait images using different .css classes for each and setting and matching padding, I do however feel that using padding is not the best solution.
Can someone point me to my error or a robust, content-independent solution here that keeps Image and text content tidly in order while maintaining the layout?
According to your example, the border around the image is happening because of the padding attribute in the ion-content tag, here:
If you remove that padding the image will have no space around.
By the way, the position:absolute; did the trick, because it makes the image get out of the page flow, and so, it acted as a child of the body, which doesn't have any padding/margin around.
Edited
Also, you need to remove the position:absolute from your image and add padding:0; to the tag above it, as it is adding a little space around from padding.
And from what I understood, the image and text will behave as you wished.
I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/