Thanks for reading and any help will be gladly appreciated.
My problem is that I cannot select text on a webpage that I built. I'm new to programming, and still do not understand the ins and outs of everything. But I'm trying hard to learn.
The entire page is positioned relative, and I have done research and read other posts about the relative positioning being an issue when selecting text. I know I can get around this issue, because the page I modeled mine after is positioned relative, and you can select text just fine on this page.
This is my page: www.the-daily-prophet.com
I'm sure this might be an easy fix, but I cannot figure it out.
Thanks for any help, and I can provide more info if needed.
Your footer is ending up above your main text columns. Removing position: relative; margin-left: 562px; from the footer resolves that problem for me in Chrome, although it may have unintended consequences.
Related
would really appreciate some help please!
I used some lightbox code I found online (like I do for every bit of code I need, the noob I am), but when you open something in the lightbox you can still scroll the page and see some of the content behind. I made the z-index like 9999 or whatever, but that's obviously not the issue.
Would anyone mind having a look and letting me know how to fix? Thanks in advance!
Site: https://runplymouthharbour.co.uk/test#step12 (click image to open in lightbox and you can see content below it showing on top)
You should try to include a code sample in your questions as it makes it easier to answer.
But to answer the question, your z-index fix won't work as your class row__container has z-index: 1 rule, which overrides the z-index you set in the span that displays your image (it does this because the row__container div is a parent of the span).
To fix, remove that z-index: 1 from row__container.
http://jonathan-james.github.io/
Above is a link to my github/pages site I recently launched. Super excited because it's a big jump in the right direction towards becoming a professional developer. I have a bug on my home page I need help resolving.
If you go to the link, you'll see that when you hover over the main content items on the home page, they "jump". That is because on hover their margin is set to 0 which makes this cool effect happen.
For some reason when a user hovers over the third item on the page (Technical support) the icons in the footer become right aligned! I have been trying to figure this out for a couple of hours and frankly I'm not quite sure what's going on. I could really use another set of eyes to help me figure out what is going on here.
I'd be happy to link the page code, but its pretty lengthy so I'll only do this if requested as I assume most developers would rather inspect elements anyway.
This is my first post on Stack Overflow so I appreciate the help and hope to hear back soon! Thank you
Add clear: both; to your footer element.
add overflow: auto; to .wrap
Good luck in front-end development!
While other answers is right. You can also add
position: absolute;
width: 100%;
on footer.
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 my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
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..