this is my first time asking a question so please forgive me if I'm not asking the right questions. I'm having a problem with my website and I'm pretty sure it's somewhere in the divs and containers. I'm trying to keep the navigation at the top and I want to put some content underneath. The problem is the content isn't showing up. Also, I made a "spacer" id to push the text down where I wanted it. I'm not really sure how to align the text at the bottom without it. If anyone could help with that also, I would appreciate it.
I don't know which parts I should post so if it's any easier, I can just post the links to the page and the .css.
The page is:
http://www.preferredcaskets.com/Untitled.html
The CSS is:
http://preferredcaskets.com/nav.css
Again, forgive me if I'm not asking the right questions. It's late and I'm a little confused at the moment.
Thank you.
You've put your background in an <img> tag, and given it position:fixed, which automatically places it on top of your other content. Quick fix: add 'style="z-index:-1;" to the <img> tag. A Better way is to add it as a background to your body (and also more semantically correct, since the background is not part of your content).
css:
body{
background-image: url("images/bg.jpg");
}
Try display inline in spacer
#spacer {
height:110px;
width:auto;
display:inline;
}
JSFiddle - http://jsfiddle.net/a4enG/
Related
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
I know it aint short but I fresh in css and I can't solve those questiones for about 2 weeks now...
I can't move my .headline-box to the bottom of the image. I'v tried to change my display and play with, block, flex, grid and changing it to row/column justify/align but nothing. I'v ried to change position to bottom: 0 an squat...
Can any one pls tell how to fix it? And you this solution?
Why nothing that I'v done worked?
And why when I gave position: relative to this class, it went after the image, Down side..?
And besides that, I can really use help to make my code more simple...
I post link but this the url:
Codepen
Thank you all :)
I moved your .headline-box to the bottom as you wished. The problem was caused by a few things, the most important one being that your header/container-fluid/row did not have a height, and because your body did not have a height either, doing this would give no result anyway.
I did the following things:
body & html now has a height of 100% (always do this!)
header also has a height of 100%.
removed the image from your html and applied it as a background-image on your header.
your .headline-box now has bottom: 0, which now puts it at the bottom.
I cleaned up your code significantly and left out the following unnecessary items:
the extra <section> for just one h3.
<div id="main img-div"> did not have an ending tag.
was also unnecessary because you already neatly put your content in a header and section(s).
Here is the updated Codepen.
If you have any further questions, please let me know :)
I'm a beginner with HTML and CSS, and I'm making a site for a friend. On this page http://mypersonalcredo.com/categories.php I can't get that last "Coming Soon" photo to shift up into the row above. I'm sure it's a simple fix, but I just can't seem to figure it out. Any help would be great and thank you!
Very easy fix: replace float:left; with display:inline-block; on your category class.
You may want to use vertical-align:top; as well to align the upper sides of all pictures.
Just remove the <br> after the "Wear What You Believe In!" text. inside .catdesc related to the t-shirt div.
It should fix it.
To see what is causing the issue you can open the developer console and then inspect the "Wear What You Believe In!" text . Remove the <br> element selecting it and pressing the DELETE button.
It works if you add:
clear: left;
to the ones that are stuck on the right and they will go to the far left underneath. I added it to that div for the "Cards". Check out the screenshot below:
It also may help for you to read more about using clears and floats.
Check out this article: https://css-tricks.com/all-about-floats/
This is because your image with the shirt is to large with the extra text undeneath and is making the floating elements push each other down. See image for example. To fix you will have to make it take up equal amount of space as the other category elements
i'm trying my hands on coding a skin for blogspot.com i basically got everything else done except for one issue which is a part of my design.
Beside the title of the blog, i've design it such that there will be an image floating right next to the title of the blog. That would be easy if i were to use add in a tag into the widget section, but if i were to share this among people (where they will also have different blog name which result in different length) so the image will move according to the title's length. I'm having problem with this.
I've no idea how i should attempt on this as i can't use php on blogspot =/
To better understand what i said, here's an example of what i meant
http://i558.photobucket.com/albums/ss23/crayscrays/randomfonthelp.jpg
Since it's applied as a background image, you can set the value as "right", to make it go to the right side of the element.
Say, for example, this is your markup:
<h1>This is a blog post</h1>
Your CSS would look something like this:
h1 {
background: transparent url(myimage.jpg) no-repeat right center;
padding-right: [widthOfImage]px;
}
That would align the image to the right side of the text.
As you can see from the picture i want my float: right, div box that contains this video to like "be there" and not floating there, i mean i want the hr line and commentsystem(the whiteblack boxes you see) under the video, i suck at explaining but if you dont follow please comment..
heres my css
#sctryclip{
float: right;
border: 2px solid #FF3399;
display: inline-block;
}
Try placing a
<div style="clear:both"></div>
box beneath your video box (before your "<hr />")
or maybe try this:
<hr style="clear:both" />
Before I start trying to answer this, I better me make sure that I understand what you are trying to do. You want both the hr and all of the comments to appear directly underneath the video. How wide do you want the left/right columns to be?
Set the containing div to
overflow: hidden;
If I understand you correctly, you want the "hr" to be under your video, just like a division in your layout?
If so, the problem most likely isn't at your "hr" css! It seems to me that your writing your "hr" out of place, and because of that you aren't able to place it where you wish. I believe this because your picture shows the "hr" before the video and floated to the right, leaning to the video.
Another thought, if your using some kind of container with absolute/relative position... that can mix up your results :)
Never the less, a link or your code for that area would help solving that problem, a picture lets imagination grow ;)