I have recently created a website for our school and it was great. However, when I tested it to another laptop, the contents of my website was a mess like they are not in their exact places. Some example of my code:
#headText {
color: #1f8e1c;
position: absolute;
margin-left: 20%;
margin-top: 1%;
}
#label_desc {
color: #1f8e1c;
position: absolute;
margin-left: 20%;
margin-top: 1%;
}
This makes the "headText" and "label_desc" in the center of my site, but when I tested it to another laptop, the headtext and label_desc seems to appear on different places.
On the other hand, when I zoom in my website (on my laptop), the contents still moves and it disarranged itself unlike most websites when you zoom in, the contents gets bigger and still stays in their proper places.
Can you please help me? I really need it so badly.
UPDATE
Thanks to hakre, what I meant was screen-size, not resolution.
UPDATE 2
To summarize my problem -> http://postimg.org/image/r1hs6i3kb/
You are setting a left margin:
margin-left: 20%;
Each browser will do this left margin, there-fore not centering the element but aligning it to the left.
Instead set left and right margin to auto and a width (suggestable) smaller than 100% to show the effect:
<div id="parent">
<div id="child">
center-me :)
</div>
</div>
#parent {}
#child {
width: 40%;
margin: 1% auto 0;
}
Demo: http://jsfiddle.net/hRsLr/
This is independent to resolution. Resolution is about how many pixels there are per the square centimeter. Why you most likely mean is screen-size which is related, but different. More precisely, you mean the size available in the browsers view-port, that is the area where the website is rendered into.
Related
I want to prevent page-reflow, caused by image loading on a web page.
Page reflow occurs when images load after the page's text content has already rendered. There's a 'jerk' caused by the said page-reflow. It makes for awful user experience.
My requirements are:
(i) All images be fully responsive
(ii) Have a max-width of 450px (while maintaining aspect-ratio)
(iii) Be center-aligned within their containers
There can be several images on the page. All have different aspect ratios (but scaled to the same width - i.e. 450px). I know their dimensions beforehand.
Currently my code is simply:
.container {
text-align:center;
overflow:hidden;
background:whitesmoke;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.container img {
width:100%;
max-width:450px;
vertical-align: top;
}
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
This fulfils all my requirements - except it can't prevent page reflow. How do I tweak this to get my desired result?
Traditional solutions to prevent such page-reflow go something like this:
HTML
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: calc(100%/(450/562));/* example width=450px height=562px*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This works fine. But it doesn't impose a max-width like I need it to. The image fills the entire container - as large as that container is (e.g. the full width of the screen on a laptop).
To tweak it, I tried adding max-width:450px;max-height:562px in .container img. That corrected the image's dimensions. But it gave the container extra padding at the bottom:
That's a shame. What I really wanted was for it to look like below:
Note that the gray colouration above is the background container, which simply disappears on smaller resolutions:
What's the best way for me to achieve my requirements? An illustrative example would be great.
Note: adding max-width: 450px;max-height: 561px; in .container doesn't solve the problem either.
So I have an image (or a div that will contain the image) that I would like to use as a banner for portfolio.
I would like this image to be the full width of the page (not height). However, this image is nested inside a div that contains all the information for each of my portfolio projects, and will not allow me to stretch outside of the container.
However, the current state of how I set margins and containers within my portfolio is a little messy, so examples online have been hard to follow.
The following are nested in the following order:
The ID that contains all of the projects
#contentContainer2 {
width: 100%;
background-color: #FFFFFF;
margin-right: 0;
margin-left: 0;
padding-bottom: 6em;
}
The ID that pushes the content/sets spacing:
#marginSetter2 {
width: 63em;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 0;
}
The ID that contains the individual project (and where the div that I want to extend to full width lives):
#projectDescription1 {
padding-top: 1em;
}
If you would like to take a closer look at the code, please DM me and I will be happy to send you the link to the live version of my portfolio.
I apologize if stuff is a little messy; I started to build this portfolio when I was first starting to get out of my comfort zone with html/css/javascript, so I was not as experienced, and haven't gotten around to making large scale fixes.
Cheers,
Alejandro
/* Actual banner image */
width: 100%;
position: absolute;
left: 0%;
You can probably do this by using position-absolute. However, from a design standpoint, I would consider refactoring your containers a bit. Consider wrapping your container with margins in a new div along with this image instead of trying to shoehorn the image into a container it doesn't belong in.
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I have recently Discovered that it is incredibly difficult to mix fluid and fixed layout, So when I finally figured out a solution to a problem Ive been having for quiet a while now, i couldn't resist but to share it with the community that has helped me so much in the past.
i wanted the following look:
by dynamic space i mean it should be very much like when one applies a "margin:0 auto;" CSS rule to a containing div, the white space left and right of the element is the "Dynamic Space" in the example.
I had 6 Requirements:
had to be responsive.
the container had to have a max width of 960px and always needed to be centered.
had to work on IE8 and up.
The Dynamic space on the left had to have a different height, and contain a different color.
The Dynamic Space on the right had to be the same height has the container but a different color.
Has to work with Twitter Bootstrap.
At this point I struggled for 3 days, i tried everything from css table-cells to using bootstrap columns (neither worked out).
I also realized that the only way to have the div in the "same" position on huge screen sizes was to make it 50%.
So at this point i had the Following:
JSFIDDLE DEMO
which was pretty good, only problem was that the red stuck out underneath the container element.
So that My Wonderful Not At All Mathematical brain kicked in and thought:
if my containing element will always be 960px and i need my div on the left to be 50% to stay in the same position, what if i simply took 960/2 = 480px and simply applied margin:-480px.
which worked brilliantly.. until you scale your screen down to about 768px, so add a media query that changes it to margin-left:-370px;.
And it Finally Worked! Here's the Final Code:
JSFIDDLE DEMO
AND HTML:
<div class="" style="background: #000099; position: relative">
<div class="left">l</div>
<div class="container" style="background: #002500">contain</div>
</div>
AND FINALLY CSS:
.container {
max-width: 960px;
z-index: 1;
position: relative;
padding:0;
}
.left {
position: absolute;
left: 0;
width: 50%;
z-index: 1;
background: red;
height: 50px;
margin-left:-480px;
}
#media (min-width: 768px) {
.left {
margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/
}
}
#media (min-width: 992px) {
.left {
margin-left:-480px;
}
}
I Hope this Helps Someone, Sorry that its so long just wanted to explain the logic as clearly as possible.
What I want is to show "Loading..." as a simple text while page is loading and I want the text to be centered both - horizontally and vertically. I go through a lot of examples and now I have some sort of solution which seems to work, but I have some doubts that the effect will be the same all the time and that my code is even close to a good CSS.
What I have is a index.php page where right after the <body> tag I have this:
<body>
<div id="loading-standard-user">
<p id="loading-standard-user-text">Loading...</p>
</div>
Later on I have a function that take care for hiding the text when page is loaded, but what concern's me is the styling of the <div> and <p> tags.
Here is my CSS:
#loading-standard-user {
width: 100%;
}
#loading-standard-user-text {
position: fixed;
width: 100%;
text-align: center;
font-size: 40px;
font-family: arial;
top: 50%;
margin-top: -40px;
}
I'm pretty sure that I have some unnecessary code and at the same time I miss something, one thing that I wonder is that my font-size: 40px which would have to mean that if I want my code to be vertically centered later on my margin-top should have value equal to half the size of my font, but visually it looks centered when margin-top is with the size of the font.
Anyways any thoughts on the styling and where are my mistakes and how could I do it right?
Thanks
Leron
Your CSS code seems to do almost exactly what you want. The only problem with it that I can find is that your margin-top should be -50% of the height. Your div height is 40px (which is the font size), so your margin-top should be -20px to center it exactly.
In more detail: top: 50% sets the top of the text halfway the container. Then margin-top: -20px moves it up 20px to center it.
Edit:
If you want to use em, like suggested by #mgibsonbr, try the following CSS:
#loading-standard-user {
position: fixed;
width: 100%;
height:40px;
top: 50%;
margin-top: -2em;
}
#loading-standard-user-text {
width: 100%;
text-align: center;
font-size: 4em;
font-family: arial;
}
The #loading-standard-user seems unnecessary, your exampled worked fine (on Firefox and Chrome at least) with just the second rule. (the fact you're using position: fixed on the inner div makes where you place the outer irrelevant)
For the top and margin-top issue, it might look like it's centered, but that does not mean it actually is:
And if you're worried about resizing the text later, I'd suggest using em instead of px for setting your sizes, this way they will be automatically adjusted when the user resized the browser text. 1 em is the height of the uppercase "M", while 1 ex is the height of the lowercase "x".
(Unfortunatly, in practice I couldn't make it work with em while with px it worked just fine. Maybe I'm missing something?)