I'm having difficult making my social icons horizontal. I thought floating them left would do the trick or making the element an inline-block. I'm stuck so any help is appreciated. Thank you!
<!-- Social network icons -->
<div id="social">
<ul class="soclist">
<li><a class="youtube" href="img/youtube-logo.png" target="_blank" title="youtube"></a></li>
<li><a class="twitter" href="img/twitter-logo.png" target="_blank" title="twitter"></a></li>
</ul>
</div>
CSS:
/* Social Sidebar */
ul.soclist li {
display: inline-block
}
#social {
position: fixed;
top: 2px;
right: 73px;
width: 43px;
display: block;
}
a.youtube {
width: 48px;
height: 48px;
background: url(../img/youtube-logo.png) no-repeat;
display: block;
}
a.twitter {
width: 48px;
height: 48px;
background: url(../img/twitter-logo.png) no-repeat;
display: block;
}
Remove the "width: 43px;" from #social.
Try to remove the display:block from a:
a.youtube {
width: 48px;
height: 48px;
background: url(../img/youtube-logo.png) no-repeat;
/*display:block;*/
}
a.twitter {
width: 48px;
height: 48px;
background: url(../img/twitter-logo.png) no-repeat;
/*display:block;*/
}
here is an example inlining your links (without images )
Related
In normal (not responsive yet) my website running good, but after I set responsive to (width: 1336px) for my web it's display screen like this although I've set width for this is 100%
/* Here is my CSS *style.css* */
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
width: 100%;
}
/* style for header section */
h1 {
line-height: 65px;
font-size: 48px;
}
.header-container {
background-image: linear-gradient( 0deg, rgba(35, 39, 49, -0.18), rgba(35, 39, 49, 1.82)), url("images/bg-image.jpeg");
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 743px;
left: -1px;
top: 0px;
}
.nav-bar {
position: absolute;
width: 1700px;
height: 135px;
left: 69px;
top: 17px;
filter: brightness(100%);
}
.header-logo {
float: left;
}
.nav-content {
list-style-type: none;
}
.menu-section {
width: 50%;
float: right;
margin-top: 34px;
}
.menu-item {
float: left;
display: block;
margin-right: 70px;
}
/* nav menu */
.nav-content li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.nav-content li a:hover {
color: #00B9F7;
}
/* header title */
.header-title {
color: #fff;
text-align: center;
margin: auto;
width: 30%;
padding: 10px;
margin-top: 10%;
}
/* header video */
.header-video {
margin-left: 30%;
width: fit-content;
}
<!-- here is my HTML code *index.html* -->
<header class="header-container">
<div class="header-content">
<div class="nav-bar">
<div class="header-logo">
<a href="#">
<img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
</a>
</div>
<div class="menu-section">
<div class="menu-btn-group">
<div class="menu-toggle"></div>
<div class="menu-close"></div>
</div>
<div class="navigation navbar-collapse ">
<nav role="navigation">
<ul class="nav-content">
<li class="menu-item"><a class="active-item" href="#">Home</a></li>
<li class="menu-item">Blog</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
<li class="menu-item">Login</li>
<li class="menu-item">Sign up</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header-title">
<h1>SHARE YOUR HOLIDDAY DREAM</h1>
</div>
<div class="header-video">
<img class="video-img" src="images/video-img.png">
</div>
</div>
</header>
Can anyone help me, please? your answer is my happiness, thank you so much
This is happening because in your code you have set background width to 100% that is working fine but when you are using resposive design the background image not filling the screen.
Because the background image is filling the 100% width of your responsive container but the blank space that you are seeing in right side is because of nav-bar, you have set its width fixed to 1700px.
To resolve this make your nav-bar responsive so that it can also set its width according to container.
You can use
.nav-bar {
position: absolute;
width: 100%;
height: 135px;
left: 69px;
top: 17px;
filter: brightness(100%);
}
width: 100% make your nav-bar responsive too.
Can you try using img: { width: 100vw };?
In css, verify the margins and padding.
Working on an Angular application for a small business and for the life of me cannot solve while Google Maps keeps overlapping the fixed position navbar on the mobile site. When I scroll down, the map overlaps the navbar which is not what I want. I want it to disappear behind it. I've tried setting the z-index on both elements, but nothing works.
Here is the html for the location.component.html
<div class="md-6-col" >
<div #gmap style="width: 100%;height: 450px;"></div>
</div>
Here is the html for the navbar.component.html
<nav class='navbar'>
<div class='navbar__logo'></div>
<ul class='navbar__list'>
<li class='navbar__item'>
<a class='navbar__link' routerLink='/home' routerLinkActive='navbar__link--active'>
<i class='navbar__icon navbar__icon--home'></i>
<p class='navbar__linktext'>Home</p>
</a>
</li>
<li class='navbar__item'>
<a class='navbar__link' routerLink='/location' routerLinkActive='navbar__link--active'>
<i class="navbar__icon navbar__icon--location"></i>
<p class='navbar__linktext'>Location</p>
</a>
</li>
<li class='navbar__item'>
<a class='navbar__link' routerLink='/contact' routerLinkActive='navbar__link--active'>
<i class="navbar__icon navbar__icon--location"></i>
<p class='navbar__linktext'>Contact</p>
</a>
</li>
</ul>
</nav>
Here is the css for navbar.component.css
.navbar {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
background-color: #4F4F4F;
}
/*
.navbar__logo {
display: inline-block;
background-image: url('/assets/mobile_logo_150x150.png');
height: 150px;
width: 150px;
}
*/
.navbar__list {
height: 100%;
margin: 0;
padding: 0;
}
.navbar__item {
align-items: center;
display: inline-flex;
height: 100%;
vertical-align: middle;
width: 33%;
}
.navbar__link {
color: #ffffff;
height: 100%;
text-decoration-line: none;
width: 100%;
}
.navbar__link--active {
font-weight: 900;
background-color: #363636;
}
.navbar__icon {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display:block;
height: 30px;
width: 100%;
}
.navbar__icon--home {
background-image: url('/assets/home-icon.png');
}
.navbar__icon--location {
background-image: url('/assets/location-icon.png');
}
.navbar__linktext {
margin: 0;
}
#media screen and (min-width: 480px) {
.navbar {
text-align: right;
}
}
Where did you apply position: absolute for map?
Make sure you apply position: absolute property to map and position: relative to parent of map to make the z-index working.
Alright, I am trying to make it so all of these items are centered into their own spaces. Attached is the current state as well as what it should look like...
HTML:
<div class="fhNav" id="nav">
<div class="homeBtn">
</div>
<div class="forumsBtn">
</div>
<div class="applyBtn">
</div>
<div class="mttBtn">
</div>
<div class="shopBtn">
</div>
<div class="supportBtn">
</div>
</div>
CSS:
.fhNav {
width: 893px;
height: 90px;
background: url(../images/navBack.png);
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-right: 10px;
padding-bottom: 40px;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.homeBtn{
width: 169px;
height: 67px;
position: relative;
margin-left: 12px;
background: url("../images/navbtn/homebtn.png") no-repeat;
background-repeat: no-repeat;
margin-bottom: 22px;
margin-top: 24px;
}
.homeBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.homeBtn a:hover{
background: url(../images/navbtn/homebtnhover.png);
background-repeat: no-repeat;
}
.forumsBtn{
width: 150px;
height: 67px;
position: relative;
margin-left: -6px;
margin-right: 13px;
background: url("../images/navbtn/forumsbtn.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 24px;
}
.forumsBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.forumsBtn a:hover{
background: url(../images/navbtn/forumsbtnhover.png);
background-repeat: no-repeat;
}
.applyBtn{
width: 137px;
height: 67px;
position: relative;
margin-left: 5px;
margin-right: auto;
background: url("../images/navbtn/applybutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 24px;
}
.applyBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.applyBtn a:hover{
background: url(../images/navbtn/applybuttonhover.png);
background-repeat: no-repeat;
}
.mttBtn{
width: 195px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/mttbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.mttBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mttBtn a:hover{
background: url(../images/navbtn/mttbuttonhover.png);
background-repeat: no-repeat;
}
.shopBtn{
width: 180px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/shopbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.shopBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.shopBtn a:hover{
background: url(../images/navbtn/shopbuttonhover.png);
background-repeat: no-repeat;
}
.supportBtn{
width: 180px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/supportbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.supportBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.supportBtn a:hover{
background: url(../images/navbtn/supportbuttonhover.png);
background-repeat: no-repeat;
}
current
It should look (somewhat like) this...except obviously with the other tabs in it.
Edit: I have been messing with this for a few hours and I just can't figure it out...
I know this doesn't exactly answer your question but I think you'll find this approach simpler :)
View the snippet in Full Page, the little snippet container isn't big enough.
Instead of using background images for the buttons, I would suggest just nesting an <img ...> tag in your links. Why?
Because then the container, (in this case the li) will grow to match the image perfectly. Now you don't have to set the width and height of each button, they will grow according to the image size.
To enable the different image to show up on hover, I would use the css selector :hover to change the opacity of the image to and from 0 and 1. Additionally, the hover image should be positioned to absolute so it can appear in the same place as the non-hover image.
You'll have to mess with the css a little more but I would recommend this approach over setting the width and height of your button individually.
Best of luck
Edit:
Could you possibly explain it a little bit more though, as I would like to learn, not just take spoons? :)
Sure,
The first thing I'm doing with this HTML structure is nesting a ul with li tags inside of a nav element. The nav tag doesn't do anything that a div doesn't--it just has a better semantic name. The same thing goes for the ul and li tags. I'm just using those because your links represent a an <unorderedl>ist with some <listi>tems.
the next item to address is the styling applied to the nav element. In particular, I apply three css properties:
display: flex;: this sets the display mode to flexbox.
align-items: center;: this make the flexbox vertically center the elements inside
justify-content: center;: this makes the flexbox horizontally center the elements inside. I would recommend css-tricks flexbox tutorial because flexbox is great layout tool.
All in all, this just center's the nav.
the next set styles apply to any ul inside of a nav element. This works by using the element element selector out of the many possible css selectors. The style of styles:
list-style-type: none; removes the bullet points
background: url(...); sets the background image. we want to use a background image for this element because the background element should grow or shrink with the element. This is also what background-size: cover; does
padding: 11px; and margin: 0; sets the padding and margin. See the difference between the two here.
the set of css is simple, it adds a margin of 1px to the right of an li inside of ul inside of a nav. Your image seems to have a 1 px border, so I added this margin to match though I would recommend remove the white spaces in your background because changes in the order of your navigation will break the background image
the next set of styles apply to nav ul a which are the anchor tags inside of a ul inside of navs. The position is set to relative here so that you can use position: absolute the elements inside it.. This is a big "ah-ha" moment for users first learning css.
up next is the nav__img--hover and nav__image--normal style. The nav__image--hover uses absolute positioning to position it absolutely to the parent element. Notice that the nav__image--normal doesn't use absolute positioning. We want at just one of the elements positioned normally but we want the other to be positioned absolutely.
last but not least there is the :hover selectors that simply change the opacity of the elements to and from 0 and 1 making them completely visible and hidden. You might also be able to use the visibility instead but opacity works fine.
Anyway, that's it. Hope it works for you!
nav {
display: flex;
align-items: center;
justify-content: center;
}
nav ul {
display: flex;
list-style-type: none;
margin: 0;
background: url(https://www.factionhouse.org/images/navBack.png);
background-size: cover;
padding: 11px;
}
nav ul li {
margin-right: 1px;
}
nav ul a {
display: flex;
position: relative;
}
.nav__img--hover {
top: 0;
left: 0;
position: absolute;
opacity: 0;
}
.nav__img--hover:hover {
opacity: 1;
}
.nav__img--normal:hover {
opacity: 0;
}
<nav>
<ul>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/homebtn.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/homebtnhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/forumsbtn.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/forumsbtnhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/applybutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/applybuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/mttbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/mttbuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/shopbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/shopbuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/supportbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/supportbuttonhover.png">
</a>
</li>
</ul>
</nav>
try using % to make it easier to determine because its out of 100.
margin-left: 6%;
also padding only pushes the elements inside towards the center
or put them all into a div and in the parent div use
float: left;
to push the images aligned from left to right
Hopefully this should help out. I've given all your buttons a common class, so you can add in styles that will apply to all of them. You can apply a common background to all of them that way. And I've given them all a percentage width so they should fit their parent div.
I'd also reconsider baking the text into the image and putting it directly into the HTML instead - easier to edit.
HTML:
<div class="fhNav" id="nav">
<div class="btn homeBtn">
Home
</div>
<div class="btn forumsBtn">
Forums
</div>
<div class="btn applyBtn">
Apply
</div>
<div class="btn mttBtn">
Meet the Team
</div>
<div class="btn shopBtn">
Shop
</div>
<div class="btn supportBtn">
Support
</div>
</div>
CSS will then look like this:
.fhNav {
width: 893px;
height: 90px;
background: crimson;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
text-align: center;
}
.btn {
width: auto;
height: 100%;
border: 1px solid red;
position: relative;
width: 17%;
vertical-align: text-top;
}
.btn a {
display: block;
color: #FFFFFF;
font-family: Helvetica;
text-decoration: none;
position: relative;
/* The top position and the transforms will ensure the a tag is vertically centred in it's parent div */
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
I've made a Pen where you can see it working:
https://codepen.io/anon/pen/wdzvRZ
Hopefully that helps you a little bit. :)
try using the % like 100% in the margin
If you are using bootstrap, you can use directly class "container".
I am new to this so please excuse me.
I am working on my first website coding and, I am having so much difficulties with centering my button. I want to place the button on the middle of the window.
I will attach the code below:
/* Hide Scroll */
html, body {
overflow:hidden;
}
/* Home Page - Background Image */
body {
background: url(Image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* Mains */
#Mains-Logo {
margin-top: 42px;
margin-left: 80px;
}
#Mains-Basket {
float: right;
margin-top: 48px;
margin-right: 96px;
}
#Mains-SP {
text-align: center;
margin-top: 785px;
margin-left:810px;
}
/* Button */
.Button-SN {
text-align: center;
min-height: 100%;
min-width: auto;
}
.SN {
border: 5px solid #fcfcfc;
padding: 8px 25px;
margin: auto;
}
<body>
<img id="Mains-Logo" src="Logo.png">
<img id="Mains-Basket" src="Basket.png">
<!-- THIS RIGHT HERE -->
<div class="Button-SN">
<a class="SN" href="#">SHOP NOW</a>
</div>
<!-- END -->
</body>
<footer>
<img id="Mains-SP" src="SP.png">
</footer>
This question has already been answered in stack overflow, here are some useful links to solve your problem.
align text in middle/center of page and button on bottom/center
How to center a button within a div?
trying to align html button at the center of the my page
How to center html element in browser window?
Remove the wrapper .Button-SN.
Add:
.SN{
position:absolute;
display: inline-block;
top:50%;
left:50%;
width:150px;
border: 5px solid #fcfcfc;
line-height: 40px;
margin-top:-20px;
margin-left:-75px;
}
Use clear:both to clear floated direction.
.Button-SN {
clear: both;
min-height: 100%;
min-width: auto;
text-align: center;
}
Try adding this to your button CSS:
display: flex;
justify-content: center; /*centers items on the line (the x-axis by default)*/
align-items: center; /*centers items on the cross-axis (y by default)*/
position:absolute;
Let me know how you get on!
Thanks
Method #01:
Wrap both images in a div and set layout of parent with overflow: hidden.
/* Hide Scroll */
html, body {
overflow:hidden;
}
/* Home Page - Background Image */
body {
background: url(Image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* Mains */
.image-holder {
overflow: hidden;
}
#Mains-Logo {
margin-top: 42px;
margin-left: 80px;
}
#Mains-Basket {
float: right;
margin-top: 48px;
margin-right: 96px;
}
#Mains-SP {
text-align: center;
margin-top: 785px;
margin-left:810px;
}
/* Button */
.Button-SN {
text-align: center;
min-height: 100%;
min-width: auto;
}
.SN {
border: 5px solid #fcfcfc;
display: inline-block;
vertical-align: top;
padding: 8px 25px;
margin: auto;
}
<body>
<div class="image-holder">
<img id="Mains-Logo" src="Logo.png">
<img id="Mains-Basket" src="Basket.png">
</div>
<!-- THIS RIGHT HERE -->
<div class="Button-SN">
<a class="SN" href="#">SHOP NOW</a>
</div>
<!-- END -->
</body>
<footer>
<img id="Mains-SP" src="SP.png">
</footer>
Method #02:
Add clear: both to the styles of .Button-SN.
/* Hide Scroll */
html, body {
overflow:hidden;
}
/* Home Page - Background Image */
body {
background: url(Image-2.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
/* Mains */
#Mains-Logo {
margin-top: 42px;
margin-left: 80px;
}
#Mains-Basket {
float: right;
margin-top: 48px;
margin-right: 96px;
}
#Mains-SP {
text-align: center;
margin-top: 785px;
margin-left:810px;
}
/* Button */
.Button-SN {
text-align: center;
min-height: 100%;
min-width: auto;
clear: both;
}
.SN {
border: 5px solid #fcfcfc;
display: inline-block;
vertical-align: top;
padding: 8px 25px;
margin: auto;
}
<body>
<img id="Mains-Logo" src="Logo.png">
<img id="Mains-Basket" src="Basket.png">
<!-- THIS RIGHT HERE -->
<div class="Button-SN">
<a class="SN" href="#">SHOP NOW</a>
</div>
<!-- END -->
</body>
<footer>
<img id="Mains-SP" src="SP.png">
</footer>
Try
.Button-SN {
text-align: center;
margin: 0 auto;
}
You can try this:
vertical-align:middle;
My footer seems as though it has some type of imaginary (Unwanted padding in the top of the footer div... If you need an example of what I mean just visit my site) padding to it. If you view my sample link you will see what I am referring to.
<div id="footer">
<div id="Social">
<img src="img/Follow.png" width="339" height="21" alt="Follow on Social" style="position: relative; display:block;" />
<ul>
<li class="Twitter">Twitter</li>
<li class="Facebook">Facebook</li>
<li class="Youtube">Youtube</li>
<li class="Linkdin">Linkdin</li>
</ul>
</div> <!-- Social -->
<div style="clear:both"></div>
</div> <!-- footer -->
My CSS:
#footer {
background-image:url(img/FooterBG.png);
height: 92px;
position: relative;
z-index: 10;
padding: 0 35px;
left: 0px;
top: 82px;
}
#Social {
float: left;
width: 339px;
}
/* Social Links */
.Twitter a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Twitter.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 42px;
height: 27px;
}
.Twitter a:hover {
background-position-y: 27px;
}
.Facebook a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Facebook.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 18px;
height: 31px;
}
.Facebook a:hover {
background-position-y: 31px;
}
.Youtube a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/YouTube.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 29px;
height: 30px;
}
.Youtube a:hover {
background-position-y: 30px;
}
.Linkdin a {
background-image: url(http://www.nerissagrigsby.com/wp- content/themes/twentytwelve/img/LinkedIn.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 28px;
height: 29px;
}
.Linkdin a:hover {
background-position-y: 29px;
}
#Social ul li {
display: inline-block;
margin-right: 24px;
}
#Social ul {
margin: 12px 0 0 0;
padding: 0;
}
How can I remove this padding?
Get rid of top: 82px;
#footer {
background-image:url(img/FooterBG.png);
height: 92px;
position: relative;
z-index: 10;
padding: 0 35px;
left: 0px;
/* top: 82px; */
}
You could try using a css reset
You could also try using:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Just in case it's an internet explorer problem.
#Herbert Peters I didn't got why that imaginary boundary is there. But, if you remove
<div style="clear:both"></div>
then it will not be there.
Just put margin/padding to 0 or a negative value (try -1 and then increase until its gone) for the wanted direction