I am a stuck on trying to change the size and location on social media links on a test web page. No matter what size I change the height and width to in the CSS the image remains super large.
#footer {
height: 40px;
background-color: #69D2E7;
clear:both;
font-family:Open Sans;
}
#footer a {
display: inline-block;
margin-right: 5px;
}
#footer img a {
width: auto;
height: 10px;
max-height: 10px;
}
<div id=“footer”><img src="facebook.png"></div>
<div id=“footer”> <img src="pinterest.png"></div>
<div id=“footer”> <img src="instagram.png"></div>
<div id=“footer”><img src="linkedin.png"></div>
Its a matter of position, the img tag is actually inside a tag, so the one with
#footer img a{}
should be changed into
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
Hi I have tested this code and its changing height and width of image. Please try this code: #footer a img { height: 30px; width: 35px; }
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
To center the hyperlinks, try this:
#footer {
/* other styles */
text-align: center;
}
If that didn't work, try removing inline-block from a
#footer a {
display: inline-block; /* remove this line, if needed. */
}
Related
I am trying to put a background picture below the header. The picture is supposed to cover all the width and height, but should not cover the header. However, the background picture does not show up. What’s wrong in my code?? Thank you for taking your time My codes are below;
Part of my html is below;
<body>
<header>
<p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
<p class="btn2"><span class="king"><img src="images/king.png"></span><img src="images/B.jpg"></p>
</header>
<div id="wrapper" class="stampwrap">
</div>
</body>
and part of my css is below;
body{
font: 14px/1.6 sans-serif;
color:#313131;
background: #67b2e4;
}
header{
display: block;
overflow: hidden;
height: 80px;
background: #67b2e4;
padding: 2% 4%;
}
.btn1{
float:left;
}
.btn1 .stext {
font-size: 2rem;
font-weight: bold;
padding-left: 20px;
float:right;
margin-top: 20px;
}
.btn2{
float: right;
}
.skypic{
height: 80px;
width: auto;
}
#wrapper{
height: 100%;
width:100%;
background: url(images/zzz.jpg);
}
.stampwrap{
position: relative;
}
You need to define the height of the body element. the wrapper class has no space to be viewed. height:100%; cannot be seen in a parent body element with height:0px; which is the default if not defined.
I'm want to put a picture inside a div, with a specified width an height. However the image is still bigger than the div size:
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<img src="images/Halloween/bat_sm.png" width="130" height="76"/>
</div>
</div> <!-- End Designs -->
<style>
#content .Designs .Thumbnails img {
margin: .3em 0;
min-width: 0;
}
#content .Designs .Thumbnails {
width: 143px;
height: 95px;
margin: auto;
}
</style>
My website for reference: http://mast.salemstate.edu/itc18244/Portfolio/
You have there min-width: 246px in your styles.css in line 44.
You can overwrite that using:
.Thumbnails img {min-width: 0;}
Or better, set min-width to images where you need that, not to all images (you more specific selector than img).
On line 44 of your styles.css file you have:
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
The min-width: 246px; rule is taking precedence. You either need to remove that rule, or override it.
Replace these in your CSS code:-
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
With:-
img {
min-width: 0px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.
I have problem with css. How to add text My option under every image?
Here is jsfiddle DEMO: http://jsfiddle.net/Leq3R/
My css code is here:
.product_des1 {
width: 375px;
float: left;
height: auto;
overflow: hidden;
font-size: 13px;
line-height: 22px;
margin-bottom: 72px;
margin-left: 100px;
}
.product_des1:nth-child(2n+1) {
margin-right: 0;
}
.product_des1 img {
float: left;
margin-right: 10px;
}
.product_des1 span {
color: #44a6e0;
}
#all {
width: 1034px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
If I understand correctly, you need to add the same text under every image. You can achieve this only with css by using the following code:
.product_des1:after {
content: "My option";
display: block;
clear: both;
}
Here's the updated fiddle http://jsfiddle.net/Leq3R/4/
So i'm practically adding some text after the container, witch will be displayed bellow the image.
Like this:
Change:
.product_des1 img {
float: left;
margin-right: 10px;
}
To:
.product_des1 img {
display:block;
}
You can use :before/:after pseudo selector to solve your problem.
I added the following css code to your code.
#all>div:before {
content:"myOption";
position:absolute; /* to show the content on the image */
top:0; /* pinning the content to top of this container */
left:0; /* keeping the content to left at the place of image */
}
#all>div {
position:relative;
}
Working Fiddle
My website container has a width of 95%. I'm trying to create a navigation which spans the full width of my container. It works fine until I add the 'position: fixed;' to the navigation, it then just ignores the container and spills outside the container.
below is my CSS code and a link to a picture.
#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}
.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
position: fixed;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}
Image of problem... http://i.imgur.com/pZEbe.png
Thanks for any help! It's much appreciated!
you are giving position:fixed which makes your navigation to come out of the parent div or element.
Add something like this in your navigation element:
.nav
{
width:95%; /*dont give width as 100% */
margin:0 auto; /* for center alignment purpose */
background-color: fuchsia;
height: 50px;
position: fixed;
}