I'm pretty new to using HTML and CSS and have been building a website for my band. I've uploaded the first version of the site to the net and have been experiencing problems with the text on the "Bio" page when viewing in resolutions lower than 1440x900. Originally the whole site looked weird at lower resolutions but since I added a wrapper it stopped that for everything except the text on the bio page.
When I was creating the site I used the <pre> tag to add the text and I wonder if this is part of my problem? does anyone know how I can rectify this problem? The text is supposed to go to the right of the images.
The website is www.wealmostwere.com
Any tips or hints are most appreciated :)
Many thanks!!
Jay
just add
position: relative;
width: 100%;
to #biotext
This will solve your problem..
When you give an element a width of 100% in CSS, you’re makeing this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width..
Related
The HTML page I'm working on works okay-ish when I zoom out, but when I zoom in, the paragraphs on the site don't stay within their area, they become lines of words reading up and down instead of left to right and the pictures become too large. If anyone has any idea how to fix this, I would love to know.
Here is the link to my page: tamaricampbell.com (Some of the words are still not Lipsum because I'm still working out the wording, thanks) Hope this helps with understanding what I mean.
because your website lack responsive concept
you need to use media query to adjust your content and element as you need
this can work if you mean that font size is getting to big
:root {
font-size: 1vw;
}
i have completed the basic template for my site. Although i have one problem. When you make the browser to small everything starts to scrunch together. The pictures get smaller and smaller until you cant see them anymore. The text starts to all go into one line. I am not sure why this is happening. My guess is that by changing the position it should work, so that is what i did. When i did change the positioning everything on my site went crazy. Is there anyway to group everything in a site and make it all static together? I am stuck at this point so any advice would be great. Basically i would like to know how to group together my site at the center while keeping the whole thing together.
I would assume that giving you a link to my site would be more effective than a fiddle.
mytesttestwebsite.com
But here is a jsfiddleanyways
http://jsfiddle.net/4yeb5x6g/
This is the code to one of the images that shrink when you make the site smaller.
.image10 {
z-index: 5;
margin-top: 738px;
margin-left: 478px;
position: absolute;
}
I would personally not start messing with the z-index property.
From the small css code you put here isn't enough to gauge the problem. I would suggest that you enclose everything into a div with a set width
<<'div id='container' style='width:800px'>>
place website in this space
'<<'/div>>'
sorry ignore the ' i don't know how to display code yet!
Good luck,
Boom!
Based on what you said, I feel that it is safe to assume you have used things like width="50%" or height="100%" or whatever.
Make sure you are using set heights, such as width="87px" or height="168px"
I have just looked at your code and yes, you need to define a wide for the entire site, so as I said before. You must put everything in a div tag and specify a width for it in CSS or the html
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
I've had a tough time trying to figure out what the issue with my CSS/HTML is, a new set of eyes taking a look would be greatly appreciated! I'm trying to get the content area to scale to the entire height of the page but it doesn't seem to be working in the example I've posted below. I've set both body and html to height: 100%; to no avail. Any ideas?
jsFiddle: http://jsfiddle.net/zVuyp/
(note that the CSS is an external resource linked to the left)
The page is not meant to scale to size so within the jsFiddle window it looks a bit odd, but the issue should still be clear enough. Cheers
Add height:auto to body and it should work.
Here is the site I am currently supporting http://www.2k.ua/restaurants/catalog/
If you scroll down to the bottom of the page you will see the SEO text right before the footer.
The site owners are asking me change the position of the SEO text in the html code, to put in right after the opening tag but not changing its position in the layout (by this I mean it must stay where it is now in the layout but not in the html code).
Could someone explain me please if it is possible? Something like position: absolute or fixed I dont think will resolve the problem.
Thanks in advance.