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 7 years ago.
Improve this question
I have a problem here with my website. If you can go to my website and click on the cog button on the left side, there are two images.
If you click on the first image, i set it to change .xe-clearfix css style to background-color:white, and for the 2nd image, i set it to change .xe-clearfix css style to background-color:transparent as well.
but as you can see, the menu and the image slider overlap with each other,
so basically what im trying to achieve here is to make the menu on the top of the slider 'push' the slider down, so that none is overlapping when i click on the first image.
(and remove that class when click on the 2nd image of course)
and since I can't copy paste the whole website here, i will simply leave my website's address.
and bare in mind that I use wordpress like CMS called XE,
and the source code might be 'mess' to some people.
but people often say that my webhosting company (cafe24) gets blocked by the ublock or adblock, I assure you that the website is completely safe and there is no harm whatsoever (you will need to disable your chrome's extension for that matter)
Thank you very much.
The others are right that your question is off-topic without a code snippet, but I'll throw some info up since you're new.
Your header/menu element (.header_wrap xe-clearfix menu_type_1) is positioned absolutely. That means it has no affect on other elements on the page.
The element containing the slider (.camera_wrap camera_white_skin) would need to be pushed down the height of the header (about 100px) using margin or other styling. This will not be a dynamic solution as it would need to be recalculated if the header height changes.
Bottom line: This layout would need substantial revision to do what you describe. It might be better to start with a different template that has a fixed, separate header bar.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a problem whenever the website changes its size in any way, whether it be the size of the browser or if inspecting the code in the web browser, any change to the size of the page makes it look really really bad. I only started learning to code last week and I picked up the challenge "social proof section" on frontendmentor.io to practice my HTML and CSS. If anyone could take a look at it and tell me what is causing it I would be very grateful! also, its quite embarrassing posting this here as I'm a total nooby and with having only started learning a week ago, my code is obviously very very bad
website link: https://blakebutlin95.github.io/Social-Proof-Section-Challenge/
Github link: https://github.com/BlakeButlin95/Social-Proof-Section-Challenge/tree/master/css
also sorry about one of the empty codes in the css file, I didnt even realise it existed until a minute ago
You are using absolute positioning ,it is positioned absolutely with reference to the closest parent that has a position relative value , If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.
The problem isn't the resizing of the page. The problem is that you have used absolute sizes. That means when I open the page it looks even worse because I have a different screen size. You have to create different sections and the implement the objects in there.
This is how it would look on a smaller pc.
Here a sketch how to build it properly.
Try to use for horizontal sizing only % and for vertical sizing px.
Use for the boxes the <div> tag.
Sometimes you have to set it to display: inline-block; so that multiple div's will fit on one line.
It is also important to not set a height because it depends always on the device how much space the text will need. Try to use instead more padding.
Update:
A more modern approach would be with flex-box or grid.
It is cause you're using the absolute sizes, this will give problems for different screen sizes. Try looking up flex box and apply it here.
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 7 years ago.
Improve this question
I've just edit one page, and in my local computer its get perfect. I made the things in such way that the navigation menu still in a position in with it got a good look in contrast to the background image (transparent navigation background, with black characters over a part of the background menu where it is white). It's looking like this in my local machine:
But when I send it to remote servers, it get ugly, in unless two different ways, as follow:
This first, ugly, and;
This 2dn, even more ugly.
What could be happening?
First off - The second host is using an extra element, probably for tracking, or alike, which causes your style for div-elements, to apply to that aswell. You should use specific id's or classes for your elements, instead of just "div". Especially with "background"-properties.
You could solve this by adding following:
--some code--
<body><div><header></header>
--rest of the code
To
--some code--
<body><div id="container"><header></header>
--rest of the code
And changing in style.css: div {....to div#container {....
In my browser, the first link looks like your image, as it should, aswell.
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 8 years ago.
Improve this question
see the background Grid , on this site hxxp://www.solarpowergetics.com/ It is a Magento website ,How can I get that image or is that CSS
That's CSS. Looking at the source, it's an image that is repeating. Each div has a partially transparent background that would make the lattice appear to be fading towards the center.
Try Right-Click and Inspect element in the future and navigate to the body or html element. Usually your answer will be there
A background will always be applied via CSS (well or inline HTML styling). Best thing to do is to open up the developer toolbar (Ctrl + I for Windows or Alt + Cmd + I for OS X) and look for the html or body tag in the HTML. Click on either and it'll bring up the CSS. Then you just need to look for the background property and that will either provide you with a colour like...
background: #ffffff;
Or if an image is used, it'll probably look something like...
background: url(myimage.png);
There are many different variations depending on what they want the background to look like. If an image is used, right click or control click to open it in a new tab. Browsers like Chome will make the image link and active url so you can actually visit it and see the real image.
Hope this helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
When I want to move anything (text, images, etc.) in CSS, I find myself using margin-top with ridiculous values like 1000 or even higher. Sometimes I set the position to fixed and I can move the object vertically, but not horizontally.
I guess what I'm trying to say is what is the best way to move things around in CSS? Set the position to fixed? Use "top" instead of "margin-top?" When to use padding. When to use display. etc.
I'm asking this because 1. I'm new to website design and 2. the practice site that I'm making keeps getting messed up (ex. things go behind other things, the site only works in full scree (half screen totally breaks it))
You're question is way too broad. There are so many factors that come into play, it would be impossible to answer. It's kind of like coming onto a car forum and asking "How do I rebuild this car? Every time I unbolt a part of the car, it breaks." There is a lot you have to learn before you can dive in and start creating a site, just like there is a lot you have to learn about cars before you can start rebuilding them. You have to understand how CSS and HTML layout works.
I recommend you start with a basic course, a great one that's recommended often is CodeAcademy, you can try it here: http://www.codecademy.com/tracks/web
By the way, you do not want to use position and/or margin to layout your page. That would be a nightmare to maintain. You have to use a combination of many different elements and properties to properly layout a page. In the beginning it will be very confusing, but if you stick with it, you will learn it.
ok........
1st you need to learn html flow. You can position a lot of elements naturally using div and spans. Css should be used to modify width/ height etc for the majority of elements in this way. You should stick to natural flow as much as possible. Fixed position elements will remain fixed even when scrolling (unless inside div & some css...) so thats not really a solution for every element on your page.
Make a little effort to learn yourself and you will have it, unless you have a specific example of something you cant do, you should focus on tutorials of which there are plenty of.
Concentrate on html 1st and then start css tutorials such as width, dimensions of single elements, then classes of elements (elements with the same style).
Btw just to repeat myself..........position: relative; to keep in the flow, this trys to fit elements in a top to bottom and a little bit horizontal when you ask for it (span/ float: left/right;) enjoy!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My initial searching indicates that for security reasons I might not be able to do this, but I'll ask anyway. How can I get the color of any specified pixel on a web page?
To be more specific, this is my own web page which contains background-color, images, css-modified-elements. I need to know the color of a specific pixel on the fully rendered web page. The info can't be from a screen-grab, because I want to modify my fully rendered page.
Ouch !!!
Did someone really “minus 1” me for asking genuine question?
Tough crowd!
To be more specific:
I want to add a user-moveable canvas element to the web page that visually alters the part of the web page that the canvas is hovering over. Think of the canvas element as a magnifying glass that the user can move across the web page. But the actual effect I want the canvas element to produce is a color-filter (hence the need for the underlying colors).
Can't be done w/ script+tricks. Maybe via a plugin
If you can set up a server-side browser to render pages for you - that might work.
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en
Ok a few more details here....
With Chrome plug in you can load up your page, and use the little dropper tool to select a segment of the page that you are interested in finding out the color. It's straight forward, but to your "Edit" its sort of screen scraping. Not sure if you can or can't use chrome.
If you can't use a plug-in, do you have the ability to select the html element via right click?
You could use the html2canvas library to rerender your webpage to a canvas whenever your DOM updates, then grab the pixel information from the canvas.
However, it sounds like what you're trying to achieve might be possible to do with css filters. Here's a demo of what css filters can do.
You would need to render two layers with the same HTML, where the top layer has the filter applied to it and is cropped to cover only the desired area.