<div class="carousel-item-top">
<img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
<div class="carousel-item-top-hover">
<div class="buttons">
<a class="button btn" href="#">view larger</a>
<a class="button btn" href="#">more details</a>
</div>
</div>
</div>
This is the html for this piece of code. The text in the button btn classes i want centered, but for some reason it doesn't respond to text-align: center
.carousel-item-top {
position: relative;
}
.carousel-item-top-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #219fd1;
opacity: 0;
}
.carousel-item-top-hover .buttons {
width: 100%;
top: 45%;
position: absolute;
text-align: center;
left: 0;
}
.carousel-item-top-hover .buttons .button {
border-radius: 3px;
background-color: rgba(0,0,0,0.85);
padding: 6px 5px;
text-align: center;
text-transform: capitalize;
font-family: 'Roboto', Arial, sans-serif;
font-weight: 700;
color: #ffffff;
display: inline-block;
margin: 4px;
}
.carousel-item-top-hover .buttons .button:hover {
text-decoration: none;
}
And this is the css concerning the rebel element and its relevant neoighbors. Anyone has any ideea as to why it doesn't work?
A-ha! It seems it had a text-indent from somewhere, so i set it as none in the button class.
Related
I don't have that much experience in HTML/CSS. As it says in the title, I have a problem with the input (where it says "What do you think about ?"). I left click on input field so I can write something inside it but when I click the submit logo it is not clickable. And the other problem is with Create account. It is not recognized as a link. The other links work but this one doesn't. It is also not clickable. After I added more CSS code those problems appeared.
Can someone help me with this problem?
P.S : This is a project for a non-programmer friend.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
bottom: 95px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
There's a lot of problems with the code. Try avoiding fixed values like px for things. Keep your website responsive - you can use flex or something for maintaining a responsive layout.
It is easier to see the problem when you inspect it using Firefox's(or any other browsers) inspecting tool.
You can fix the problems you stated by implementing suggestions told by us here but they may break something else since we don't know the whole code.
Firstly, you can see that the header element is above the search bar and hence the search bar is unfocusable. You can either change the z-index of the header element to -1 or something or you can set the search bar's z-index to a bigger value.
The Create Account link has the same problem as well. In this case,the element with the viewCart class is overlapping the link. What you need to do is in it's style change the padding-left property to margin-left and it will stop overlapping.
Again, try to keep things simple by using a more dynamic way so that elements are positioned and sized automatically instead of you having to specify the sizes yourself.
First of all, the button always have a default cursor, if you want to change the cursor to the pointer on hovering you must add this: button:hover {cursor: pointer}
Second of all, you're using positions wrongly and don't understand them. Read about positions here.
I deleted all of the position relatives and top & bottom.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
margin-left: 265px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
height: 48px;
width: 48px;
font-size: 21px;
}
/* EDITED HERE */
#searchbarBtn:hover {
cursor: pointer
}
#loginBtn {
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
both are incorrectly positioned, they are pushing to the top and some element is overlapping over them.
I recreated your code by positioning them slightly lower using position: relative; top : 100px and then input box was accepting clicks and create link was working.
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
position: relative;
top: 100px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}```
Please check the changes in #loginBtn and #input
How can I center my webpage only with html & css? I tried it with margin: auto, margin: 0 auto and also margin-left: auto & margin-right: auto. Nothing seems to work from the things I've read on the internet. I'll show you my code. I want that everything is centered. Every Div. And compatible with mobile Applications.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
}
.social {
float: left;
text-align: center;
margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px;
}
.social #spotifylogo {
position: relative;
bottom: -7px;
}
.social #fblogo {
position: relative;
bottom: 1px;
left: -1px;
}
.social #twitterlogo {
position: relative;
bottom: 1px;
left: 6px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
float: left;
position: relative;
right: -495px;
margin-top: 25px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
position: relative;
right: -225px;
bottom: -100px;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
if you want center items you can use 'flex-box'
something like this
html
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
and css
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
for this to work just warp the items with flex box (display: flex) you just put it on your title (h1)
this code is from this article :
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
also there is much more you can do with flex box
can also read abut flex box at w3s
https://www.w3schools.com/css/css3_flexbox.asp
I made several tweaks but mainly removed all the flexbox information - this was the biggest change across the CSS edits. Hope this helps!
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
text-align: center;
}
.social {
text-align: center;
margin-bottom: 20px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
display: block;
max-width: 100%;
height: auto;
}
#headpic-image {
display: block;
margin: auto;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img id="headpic-image" src="headpic.jpg" width="900" height="500">
</div>
Do not use properties such as top,bottom,left,right to align items unless necessary. It's impossible to get a sensible layout in this way. You do not need to use position: "relative" for each item. A lot of your codes are wrong. I took these parts to comment lines for you to see. You can use flexbox for some structures to center items. Often marginx "auto" will work for inline-block or block-sized elements.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
/* margin-top: 50px; */
font-size: 40px;
font-weight: bold;
}
.social {
/* float: left; */
text-align: center;
display: flex;
justify-content: center;
/* margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px; */
}
.social #spotifylogo {
/* position: relative;
bottom: -7px; */
}
.social #fblogo {
/* position: relative; */
/* bottom: 1px;
left: -1px; */
}
.social #twitterlogo {
/* position: relative; */
/* bottom: 1px;
left: 6px; */
}
.nav {
text-align: center;
color: black;
font-size: 14px;
display: flex;
justify-content: center;
/* float: left;
position: relative;
right: -495px;
margin-top: 25px; */
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
text-align: center;
/* position: relative; */
/* right: -225px;
bottom: -100px; */
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
add this in your CSS
div_id(div that you want to change) {
margin: 0 auto;
}
I would like to place a vertical line between each image, I have tried several things but without success.
Here is an idea of the final result. There is a vertical gray line between the two images.
How to create the vertical line?
.background-contact{
background-color: white;
width: 100%;
height: 190px;
position: absolute;
}
.logo5{
padding-top: -70px;
padding-left: 38px;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
margin-top: -32px;
padding-left: 20px;
position: relative;
text-transform: uppercase;
font-weight: bold;
}
.text-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 14px;
top: 22%;
left: -12%;
position: relative;
transform: translateX(-50%);
}
.logo6{
padding-top: 35px;
left: -80%;
}
<div class="background-contact">
<img class="logo5" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
<span class="title-contact-1">Telephone</span>
<span class="text-contact-1">Just For VIP Member</span>
<img class="logo6" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
<span class="title-contact-1">E-mail Us</span>
<span class="text-contact-1">admin#superbtc.biz</span>
</div>
I didn't do the pixel perfect but something like this:
.background-contact{
background-color: white;
width: 100%;
position: absolute;
display: flex;
}
.background-contact__block {
padding-bottom: 20px;
}
.background-contact__block + .background-contact__block {
margin-left: 50px;
padding-left: 20px;
border-left: 1px solid #ccc;
}
.title-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 22px;
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}
.text-contact-1{
font-family: 'Questrial', sans-serif;
font-size: 14px;
display: block;
}
.logo{
display: inline-block;
vertical-align: middle;
}
.background-contact__name {
padding-bottom: 30px;
}
<div class="background-contact">
<div class="background-contact__block">
<div class="background-contact__name">
<img class="logo" src="https://i.ibb.co/0YyTszS/title-icon1.png" >
<span class="title-contact-1">Telephone</span>
</div>
<span class="text-contact-1">Just For VIP Member</span>
</div>
<div class="background-contact__block">
<div class="background-contact__name">
<img class="logo" src="https://i.ibb.co/026Fs1B/title-icon2.png" >
<span class="title-contact-1">E-mail Us</span>
</div>
<span class="text-contact-1">admin#superbtc.biz</span>
</div>
</div>
to create a border you can use
border: (width) (style) (color);
This will make a border all around the element, to select one side you can use
border-left:
border-right:
border-top:
border-bottom:
But here your css is very strange, I recommend you to use the less as possible absolute positioning.
Here a better way do write that :
.contact-item {
width: 200px;
display: inline-block;
}
.contact-item img,
.contact-item h1 {
display: inline-block;
}
.border-left {
border-left: 2px solid #ddd;
padding-left: 1rem;
}
<div id="background-contact">
<div class="contact-item">
<img src="https://i.ibb.co/0YyTszS/title-icon1.png">
<h1>Telephone</h1>
<p>text<p>
</div>
<div class="contact-item border-left">
<img src="https://i.ibb.co/026Fs1B/title-icon2.png">
<h1>Email Us</h1>
<p>text</p>
</div>
</div>
you can also use :
element::last-child {
border-left: .. .. ..;
}
I need to add centered horizontal line behind the link, so when I change size of the screen this line stays centered behind the link and moves with it. Also I need this line to be on the full width of screen.
On first image is what I have right now:
On the second image is what I need, as yo can see there thin gray line centered behind "V" link:
My html code of this link:
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<a class="v-explore-button" href="#about"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a>
<p class="explore-text">Explore</p>
</div>
</div>
My Sass:
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
color: #ffffff;
}
.explore-container {
position: absolute;
top: 147%;
left: 38%;
.v-explore-button {
text-decoration: none;
color: #ffffff;
background-color: #2ecc71;
padding: 15px 20px;
border-radius: 100%;
}
.explore-text {
margin-top: 20px;
color: #ffffff;
}
}
How about to use ::before inline block pseudoelement for button class in pair with transform:translateY(50% of the button width);and 100% width?
body{
background-color: black;
}
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
color: #ffffff;
}
.explore-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.v-explore-button {
display: flex;
align-items: center;
position: relative;
text-decoration: none;
color: #ffffff;
background-color: #2ecc71;
padding: 15px 20px;
border-radius: 100%;
}
.explore-text {
margin-top: 20px;
color: #ffffff;
}
.explore-container:before {
content: "";
position: absolute;
top: 1em;
left: 0;
width: 100%;
height: .15em;
background-color: #00bade;
}
.inner-wrap{
margin-right: 38%;
}
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<div class="inner-wrap">
<a class="v-explore-button" href="#about"><i class="fa fa-angle-
down fa-lg" aria-hidden="true"></i></a>
<p class="explore-text">Explore</p>
</div>
</div>
</div>
My recommendation would be to use a pseudo-element such as before:
See example for the solution. Let me know if this helps.
You can use the translate property to align elements inside a
container in the middle as demonstrated below without needing to
calculate the approximate % value to align it.
Instead of giving left:38% to your explore-container, set its width to 100% and align the elements using text-align:center as shown below.
I hope this helps.
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
}
.explore-container {
position: absolute;
top: 147%;
margin:0 auto;
width:100%;
text-align:center;
}
.v-explore{
position:relative;
background:yellow;
}
.v-explore-button {
text-decoration: none;
background-color: #2ecc71;
color:#ffffff;
padding: 15px 20px;
border-radius: 100px;
position:absolute;
top:50%;
transform: translate(-50%, -50%);
}
.explore-text {
margin-top: 20px;
}
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<div class="v-explore">
<a class="v-explore-button" href="#about">v</a>
<hr>
</div>
<p class="explore-text">Explore</p>
</div>
</div>
I cant get my text to align right:
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
Here is the other pertinent css:
#logo
{
position: absolute;
top: 15%;
margin-left: 1em;
}
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
#header_container
{
background: #7fc041;
height: 7.4em;
left: 0;
right: 0;
position: fixed;
width: 100%;
top: 0;
}
#header_text
{
margin-left: 9.75em;
font-size: 2em;
color: White;
font-style: italic;
}
and the html/server controls:
<div id="header_container">
<div id="header">
<div id="headerBar">
<img src="images/logo.png" id="logo"/>
<span id="header_text">Scrum Reports</span>
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" />
</div>
</div>
</div>
Well I'm no asp.net expert, but I see you using #login_status with text-align: right and CssClass="login_status", which seems to me like it would output
<div class="login_status">
Thus you should either change #login_status to .login_status, or have it set the id rather than the class because the styles seem to be fine.
http://jsfiddle.net/ExplosionPIlls/mzUTW/