Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am a css newbie. I just draw a basic HTML page with following code:
<html>
<head>
<title>Hey</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-menu"></header>
<div class="container">
<div class="left-side"></div>
<div class="main-content"></div>
</div>
<div class="foot"></div>
</body>
</html>
Here is style.css:
.top-menu{
position: fixed;
top: 0;
left: 70px;
right: 70px;
height: 50px;
background-color: #000000;
}
.container{
margin: 70px 70px 20px 70px;
display: inline-block;
width: 91%;
}
.left-side {
width: 30ex;
min-height: 30ex;
float: left;
background-color: blue;
}
.main-content {
width: 80ex;
float: right;
background-color: red;
min-height: 100ex;
}
.foot {
background-color: green;
height: 5ex;
width: 91%;
margin-left: 10ex;
}
The purpose is straightforward.But the css looks crap.even some problems.I want to ask some questions:
1.The left and right margin of container is 70px, and the same to top-menu, but from chrome page view,why does it not aligned?
2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?
3.If I don't set container's display to 'inline-block', why does the foot part flying to the air? (even I set it to 'block')
4.Could you guys give me a better css style code?
I understand that you prefer to use CSS3 and the latest html standard but the <header> tag has not been adopted by that many browser vendors. I would stray away from using it. IE9 is the first IE to adopt it and there is plenty of users still on IE6/7.
Take <header> out and replace with a normal <div class="header">...</div> and then reference using css .header { }.
To answer #2 - you can not state width: 100%; and then add left/right margins and not expect a horizontal scroll bar. In principle, the container will span beyond 100%.
I am not sure why you are adding display: inline-block; to the container div. Only inline elements should ever have this declaration (i.e. text elemnts). Is there a specific reason why so?
Also, when you are first creating an html template and testing it out, make sure that you always add content into the divs and not simply leave them blank. Adding min-height: ... is not a fool-proof system. I always add in fake text - "hello hello" suffices.
Lastly, add an appropriate html doctype. Perhaps you trimmed it for the question part but is this xhtml or html? This relates further with the use of <header>. Not all doctypes support <header.
2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?
Because, you have margin which makes the total width more than 100%.
Apart from what's been already said, have you tried to use the chrome inspector to tackle theses issues? Just point the mouse on the page, right click and choose Inspect Element. There you can enable/disable some CSS properties and quickly find out what's wrong.
For firefox, the equivalent is http://getfirebug.com/
As for your layout problem: don't worry, this has been a real pain for all of us when we've started. If your point is not to actually learn css, if all you want is to make this to work once and for all and in time, my advice is: use a CSS framework with a grid.
CSS frameworks have usually a neat feature we call "the grid". It will allow you to set a layout like yours in 5 minutes, and stop worrying about how this div floats in this or that browser.
Plus: this depends of the website you want to use, but usually when you use a grid, what you do will by sexy magic look less amateur. (if you have a designer background maybe you already know this)
Take a simple Framework to start. Everyone has its favorite but I can recommend BluePrint to start. And here is a small demonstration of its grid system super powers ;)
Related
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm basically trying to embed an iframe into one of my sites. When i put the iframe on the site it doesn't work on mobile - meaning the responsiveness is lost and its not scaling according please check here
BUT, when i put the same iframe on a PLAIN HTML file, its completely responsive. check here
can you tell me what's wrong here please? I'm thinking some CSS conflict?
Appreciate any help!
When I go to your website, the iframe is not responsive, because the width and height of the iframe are set inline. You need to set these (or alter them) via the CSS to make it responsive.
That the iframe in the plain HTML file is 'responsive' is because it just shows the whole page, because there's no viewport set. (In your main website, this is the viewport: <meta name="viewport" content="width=device-width, initial-scale=1">). It feels responsive, but is not.
So what you need to do:
Remove the inline height and width set on the iframe.
Add code to your CSS to make the iframe responsive. See my small example below on how to do this. Play around with it to fit it your needs (and viewports).
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 50%;
background: lightgrey;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
}
<div class="iframe-container">
<iframe src="http://spreadshirt.com/"></iframe>
</div>
Just add #view=FitH after the pdf URL in your iframe.
Example:
<div class="iframe-container">
<iframe src="http://example.com#view=FitH"></iframe>
</div>
Then use the above CSS as mentioned by Roy. It will fit the pdf as per responsive screen.
Please excuse me if there are any mistakes in the following code or with my question, I don't know much about code but am learning :). Sorry for spaces in links and lack of these things - < - really struggling posting code :)
On my website http:// second to nature .co.uk/en/ I am trying to create background images with ivy down both sides of the website. Is it a prestashop website.
I did manage to achieve this with the following css code, however it would not work in ie 6-8 - because those browsers do not support css3.
background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;
Therefore after some researching, I tried to create the wanted effect with two divs:
<div id="container">
<div id="inner-container">
</div>
</div>
And then use the following css to implement this.
And as you can see if you visit the site, the left image is shown properly, but the right does not show up.
#container {
background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 1000px;
}
#inner-container {
background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
position: fixed;
top: 0px;
right: 0px;
width: 130px;
height: 1000px;
}
Can anyone see where I am going wrong or have a fix? Help would be much appreciated.
Many thanks
You have a typo in your CSS:
url(http://secondtonature.co.uk/img/backgroundright.jpg))
There is a double )) at the end of the URL where there should be only one.
HOWEVER ... your HTML is all messed up, and there's a better way to do this. Firstly, you have a whole bunch of meta tags and other asset links inside your body element, when they should all be up in the head.
A better way to do this would be to wrap two divs around your content (they would be 100% width by default) and place the bg images on each of those.
You could use Modernizr and then us CSS3 border image. Then the border image will show up in IE6, 7 and 8.
A shame that you have IE6 users to worry about. It's such a bad, buggy and unsafe browser.
http://modernizr.com/
I just came across something
#element {
left: 50%;
margin-left: -(elemntwidth/2)px;
}
being (elemntwidth/2) already a number like 30px, for ex.
I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery
$('#element').css(left: (screenwidth - element / 2) + 'px');
More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks
CSS Frameworks have this functionaility baked in.
Checkout: Foundation 3
Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.
Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.
This is a way. For some elements it works, resposive, centered and no jQuery.
HTML
<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>
CSS
.element {
position: relative;
width: 90%;
background: black;
margin: 0 auto 10px;
text-align: center;
color: white;
padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}
Wroking Demo | Final result full screen
AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:
e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...
Try to scroll left and right to see the white left- and right-border...
The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements
It's been a long time when I started up with this unconventionally solution...
use this code snippet:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(height/2);
margin-left: -(width/2);
}
this works even if the parent dimensions change.
The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.
Note that you can use the same approach using percentage based widths to work better with responsive layouts.
You're on the right track.
With css.
Please don't refer me to another link.
EDIT
Make something always at the bottom of viewport no matter how you scroll the bar.
If you're having problems specifically with IE6 - consider using a resets script. It will make your life much, much easier. There are lots of different flavours of reset script out there, so do a bit of research and to find one that you like. Personally, I find that yahoo produce one that's fit for purpose.
The thinking behind using a resets script is:
Each browser applies a set of
default styles and properties,
before any user style sheet is even
loaded.
A lot of the differences between the
way a page renders are due to the
inconsistencies between these
defaults.
If we could find a way to 'flatten
the ground' before we begin
building, life would be easier
A resets script performs that flattening - and IE6 can be dealt with in a much more logical way.
The obligatory link ;)
http://developer.yahoo.com/yui/reset/
Solution
Bearing in mind the use of this resets script, I offer you the following solution.
As you're probably aware, IE6 doesn't support position:fixed.
To solve the problem you can make use of the following snippet:
<style>
html, body {
height: 100%;
overflow: auto;
}
div#fixed-bottom {
position: fixed;
z-index: 2;
bottom: 0;
height: 20px;
width: 100%;
background-color: #eaeaea;
margin-top: -20px;
}
div#content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
* html div#fixed-bottom {
position: absolute;
}
</style>
Which should be applied to a document containing the following elements within it's <body></body>:
<div id="fixed-bottom">
<p>
I'm at the bottom
</p>
</div>
<div id="content">
<p>
Your content here.....
</p>
</div>
This should work because:
IE6 treats height in the same way that most browsers treat max-height. The overflow auto will allow content to flow (with scrollbars) if the content carries on past the height of the browser viewport.
The '*' hack is used for simplity - it makes sure that IE6 applies 'position:absolute;' rather than 'position:fixed'. You should use conditional comments to provide specific CSS for IE6.
Note that this solution will only work when IE6 is set to use 'strict mode'. This can be set explicitly by choosing an appropriate doctype; for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">