I am working on designing HTML page by looking at the image I have. It should exactly match with what I have in my image (in the link). I have got almost everything designed as that image but few things I am not able to make it work. Here is my image link and I have to design HTML page exactly as it is.
And here is my jsfiddle which I have designed by looking at the image.
It looks like I am having problem with absolute width because of which all my divs are getting messed up.
I can see white space between company-bio div and mission-statements div which I am not able to remove somehow? And I don't understand why it is even coming.
Also northmanwild div is going out of alignment as well.
There is a lot of white space below copy-rights div at the end and that is also not matching with my image.
Also somehow all the alignments of my div looks ok on my browser on my laptop but when I made jsfiddle, it looks weird and it goes haywire. It doesn't matches with what I have in my image link. So maybe what I have won't work with multiple browsers or multiple resolution.
Here is my css for company-bio:
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
What is wrong I am doing because of which my html is getting messed up here? What I am supposed to do to solve this absolute width problem so that my html works fine anywhere without alignment getting messed up.
Note: I still need to work on left navigation text which I haven't done that yet. As of now I am trying to fix all the alignment issues which I am having because of absolute width I believe is happening.
Related
So I'm working on a silly to do list app using mostly materialize and jquery.
Here is my codepen:
http://codepen.io/centraleft/pen/adWvPp
Basically the user enters text, my javascript takes that text and makes a new list element with a button inside of it. I want the button to always be on the far right of the list item regardless of the text inside the list element, so I float the button to the right however I run into a problem where I have an ugly little black sliver at the bottom of my list! Use the app once and you will see.
Is there another way to accomplish what I'm trying to do? Or a way to get rid of that black sliver with CSS?
Here is my current CSS for the button:
.orange {
bottom: 7px;
float: right;
height: 35px;
width: 35px;
}
The problem is your button is bleeding outside of your list. Set your lis to have a max height and overflow: hidden. See my fork.
The additions (CSS):
.collection-item {
height: 42px;
overflow: hidden;
}
Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/
For some reason on this page using a mega drop down there is a giant white space below the all the content enabling you to scroll past the footer. Can you please help me figure out what is going on?
I'm quite certain it has to do with the mega drop down because when you hover over it the white space disappears. (menu item 'coop and career' is mega)
http://www.georgiancollege.ca/student-success/
Strangely, these two pages also use it and don't have the issue (some other styles are messed up on these two, but that doesn't affect it as I had them on the same theme/styles as the broken page and they still didn't have it - they're on broken styles currently so another dev can look into something else)
http://www.georgiancollege.ca/athletics/ (fitness center menu item)
http://www.georgiancollege.ca/sdvadev/ (programs menu item)
Thanks.
EDIT: also when you inspect the element the white space gets proportionally larger compared to the size of the inspector toolbar - if that helps.
try to set#menu-item-197 {overflow:hidden}
or simply #pagenav li {overflow:hidden}
It might be because of the relative positioning. For instance, a div block naturally structered at the bottom is forcefully placed at the top. In this case, the space of the div block will always be preserved thus leaving behind white spaces!!!
It is because in custom.css you had:
#wrapper {
min-height: 100%;
position: relative;
}
remove min-height: 100%, and it works well.
P.S.
I'll change footer to be without absolute positioning, because it makes horizontal bar to appear under the browser window, like this:
#footer {
bottom: 0;
height: 60px;
width: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 1%;
text-align: center;
}
I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.
I've got this link
Without the class attribute and a little bit of text, the link works fine, but when I add the class to apply the background image and position the button, the link stops working. It gives no errors in the firefox console either. Any ideas? Heres my css rule for this:
a.newButton
{
margin: 5px;
position:relative;
left: 310px;
top: -32px;
display:block;
height: 32px;
width: 32px;
background-image: url(Images/add-icon.png);
}
This is in an ASP.NET MVC2 application, I am using the latest version of jquery (1.4.1) and this link is placed inside of a jQuery tab container, inside of a dialog.
Nick Craver had it right when he suggested the negative positioning value was moving the image outside of the clickable area. I used margin-top: -32 instead to move it back to where it was. The link is now clickable. Thanks to everyone for their suggestions.
Did you already try a high z-index for a.newButton ?
Maybe there is something in front of the Button.