I want to place an image under each h2 (some kind of design line). When I use h2:after, the image will show, but after resize the window the image doesn't resize width so it breaks website. Can you help me? Image has 730px x 20px resolution.
What I want:
http://i60.tinypic.com/14buc0z.png
Problem with resize, content image has still width 100% = 730px:
http://i62.tinypic.com/2eywa44.png
My code:
h2 {
padding: 0;
margin: 0;
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: white;
}
h2:after {
content: url(images/separator.png) center;
display: block;
}
Use background instead of pseudo element is a better choice to me.
h2 {
background: url("images/separator.png") center bottom no-repeat;
padding-bottom: 20px;
}
Like above, but you'll need adjust the values until it looks nice.
You can try to use background of the H2 itself:
h2 {
background: url(images/separator.png) center bottom no-repeat;
}
Or to use <hr /> element instead and set its background with image you want.
Related
I am trying to put an image at the top of the page, just below the navbar. Whether I use margin or padding CSS styles, the picture always stays at the bottom. If I try to use padding-bottom, it simply crops the picture by that number of pixels(it crops because I used "object-fit: cover;", otherwise it would stretch the image).
Here is the CSS code I used for the image in question:
#image {
bottom: 100px;
height:500px;
width:100%;
object-fit: cover;
}
Here are the CSS styles for the navbar:
.navcontainer {
height: 100vh;
width:100%;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
background-color:cadetblue;
margin-bottom: 0;
}
A peculiar thing I noticed is that the image is always one scroll away from the top of the page. Whether I am viewing the webpage on a laptop or a phone, I have to scroll exactly once to see the image.
I am unable to find the root cause of this problem.
I am trying to make my webpage look similar to this:
Picture is directly below the navbar
You can see the image is touching the navbar, and there is no gap between the navbar and the image.
EDIT:
Here is some other code that may be useful:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navcontainer {
height: 100vh;
width:100%;
}
(.navcontainer is a div surrounding the navbar)
Below is the CSS styles for the navbar links:
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
font-weight: bold;
transition: ease-in-out 0.3s;
padding: 10px;
}
Any help is appreciated!
Thank you,
Kunj Parikh
The problem is that you are using the CSS property "bottom" to position the image, which sets the distance of the element from the bottom of the parent container. Instead, you should use "top" to position the image from the top of the parent container. You should also remove the "margin-bottom: 0" from the navbar CSS as it is unnecessary.
Try this:
#image {
top: 0;
height:500px;
width:100%;
object-fit: cover;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
background-color:cadetblue;
}
I noticed the styling for my .navcontainer class surrounding the navbar said the height of the navbar to be 100vh. I noticed that the .navcontainer class is unnecessary, and deleted the element and the styling, fixing my webpage.
There's a small gap between all my content on my website and the end of the browser window, and I can't figure out why it's there. This is what my CSS code looks like for my Hero Image.
And this is my HTML for that image, as well as for a banner underneath the image with which I have the same separation problem.
.container {
position: relative;
text-align: center;
color: white;
}
.full-width-banner {
position: auto;
background-color: #466995;
padding: 200px;
top: 20px;
text-align: center;
height: 100px;
text-height: 40px;
width: 73%;
overflow: none;
color: white;
font-family: 'Oswald', sands serif;
font-size: 20px
}
<div class="full-width-banner">
<h2> “Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.” </h2>
<p>Barack Obama<p>
</div>
This is a picture of what that creates, an empty gap between the image and the end of the browser page on the left side. The picture is supposed to completely cover its portion of the browser with no border on either side.
I don't know why this is happening or how to fix it.
By default your browser will add a few px of margin or/and padding to your body, just make sure to cleanse that at the beginning of your CSS like so:
body {
margin: 0;
padding: 0;
}
img {
display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">
I am trying to align 3 images horizontally & responsively so the images become vertical when a user visits the website on a mobile device.
I am having a few problems since the alignment does not work properly & for some reason my "border-radius" property is not applying.
Here is my JSFiddle: http://jsfiddle.net/hxL7d0e1/
CSS:
#portfolio{
background-color: : white;
padding-bottom: 50px;
}
#portfolio h1{
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2{
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project img{
padding: 50px;
width: 25%;
float: left;
border-radius: 12px;
}
Ok here it is. The stacking is a simple issue to solve. In this case I've used inline-block display to have the containers in a row, and a media query to change their width to 100% on screen sizes less than 700px.
.project {
display:inline-block;
width: 33.33%;
margin-right:-4px;
}
#media only screen and (max-width:700px) {
.project {
width:100%;
}
}
For the border-radius problem, you were using example images with whitespace inside them, which was throwing off the visuals. Check this updated fiddle with everything working properly:
http://jsfiddle.net/hxL7d0e1/2/
Using the firefox debugger i was able to see that your image has alot of white space around it. The blue rectangle is inside another bigger white rectangle. Could you use an image without that white space. See link to your image below;
https://upload.wikimedia.org/wikipedia/commons/c/cc/Rectangle_.png
You could change the background of your whole page to something like red and you'll see what am talking about.
What would be the easiest way to center align an inline-block element?
Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.
See code below or see on jsFiddle.
The current HTML:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
margin: 0 auto;
background: rgba(51,51,51,1);
font-family: 'Open Sans', sans-serif;
}
div {
width: 100%;
height: auto;
margin: 15% 0;
text-align: center;
h2 {
margin: 0 auto;
padding: 10px;
text-align: center;
float: left;
clear: left;
display: inline-block;
&:first-child {
color: black;
background: rgba(255,255,255,1);
}
&:last-child {
color: white;
background: rgba(117,80,161,1);
}
}
}
Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.
Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?
Ok I now use an image to do it, but I want to do it via CSS(no absolut or relative positioning, I'm looking to make it responsive).
Example here: http://teothemes.com/wp/services/. The heading is 'Services', right above the 3 content areas...I'd like to achieve the same effect with only CSS. I tried some things but it didn't work.
Thank you.
Here's how I'd do it -> http://tinkerbin.com/QN9efWHd
CSS3 background-image
span with background covering the background image.
the HTML...
<p>
<span>Services or Something</span>
</p>
... for the CSS...
p {
background: linear-gradient (to bottom, rgba(145,37,37,0) 49%,
rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
rgba(145,37,37,0) 54%);
text-align: center;
}
span {
display: inline-block;
padding: 0 10px;
background: #fff;
}
Here's my go at it... Only thing is the spans have a set width.
HTML
<div id="hr">
<span></span>
asdf
<span></span>
</div>
CSS
#hr span {
width:200px;
border-bottom:1px solid #ccc;
display: inline-block;
margin-bottom:5px;
}
DEMO
Using one floated span with a border:
<div class="heading">
<span></span>
<h3>Heading<h3>
</div>
.heading {
width: 100%;
text-align: center;
line-height: 100%;
}
.heading span {
float: left;
margin: 20px 0 -8px;
border: 1px solid;
width: 100%;
}
.heading h3 {
display: inline;
padding: 0px 0px 0 20px;
width: auto;
margin: auto;
}
The negative base margin on the span may need to be adjusted for different heading sizes. , The background colour of the heading should match the background of the overall container.
JS Fiddle demo
I was looking at a bunch of solutions to this issue, and I really wanted something simple. Why not just use the :before and :after to embed some content into the heading you want to have a horizontal-rule/line in. In my CSS below I chose an EM DASH (unicode \2014) for the heading's horizontal line. When making a larger horizontal line, and depending on your font, you need to take away letter spacing from multiple EM DASHes. Lastly you can add some padding to the head & tail of the EM DASH so that it doesn't press up against your heading text.
Here's some CSS, heading-1 is very simple, heading-2 has a longer line (see in action https://jsfiddle.net/pyxkh3jz/):
h1:before, h1:after {
content:"\2014";
}
h2:before, h2:after {
/* two dashes */
content:"\2014\2014";
/* depending on your font adjust this */
letter-spacing: -6px;
}
/* add some padding so heading text isn't touching lines */
h2:before {
padding-right: 15px;
}
h2:after {
padding-left: 15px;
}
Haven't checked browser compatibility here; but this isn't radical CSS so it should work for some or most of you. The lines and their length fit my use case.
This idea can probably be improved upon by other keeners...have at it!