This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>
<div class="front-button">
CUSTOMIZE
DESIGNS
PLANS
ABOUT US
</div>
</body>
if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example
HTML
go to stackoverflow
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>
CSS
a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}
This works for me. The style of the text in the '.front-button a', not in '.front-button'
.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}
link style
More about link styles:
https://www.w3schools.com/css/css_link.asp
How do I change link style in CSS?
Related
I've been trying to customise an icon to show a logo in my header, but I don't know how to set up correctly my css file for this. I'm using Bootstrap, and the logo is stored in my static folder: /static/img/logo.jpg
First of, my code loads the bootstrap css file first, then my custom css file.
Then my html file references this:
...
<div class="page-header" >
<div class="container">
<h1><i class="icon-logo"></i></h1>
...
My css file so far contains this:
...
.page-header {
height: 60px;
margin-top: 0px;
background: red;
color: black;
font-size: 15px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
z-index: 11;
}
.container {
width: 100;
height: 100;
}
.container h1 {
display: inline-block;
position: relative;
top: 0;
color: white;
font-size: 20px;
line-height: 20px;
font-weight: normal;
}
a {
position: center;
color: white;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: underline;
}
...
What should I add to the css file to customise and display the logo?
I don't understand what exactly you wan't to do.
If you want the style the icon, just apply your CSS to that : .page-header .container h1 a i
But I think you wan't to replace the icon, so if you wan't to display your logo, and then style it, you could set your html like that :
<div class="page-header" >
<div class="container">
<h1><a href="https://mywebsite.com"><img src="/static/img/logo.jpg" alt"logo">
</a></h1>
</div>
</div>
And then apply your style to .page-header .container h1 a img
And it should be fine.
When I hover over the div there is a white line on the outside of the div.
I've tried with text-decoration: none;
Any idea how to remove this?
This is the html
<a href="/" style="color:white">
<div class="headerOption">
<p>
Home
</p>
</div>
</a>
SCSS
.headerOption {
border-radius: 5px;
width: 6vw;
height: 2.8vw;
font-size: 0.97vw;
font-weight: 500;
#include normal;
font-family: "Rubik-Medium", sans-serif;
cursor: pointer;
p {
position: relative;
top: 30%;
}
&:active {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
a:hover {
text-decoration: none;
}
You've actually got your CSS in the wrong order I think.
You're setting:
.headerOption a{whatever: somevalue;}
On:
<a>
<div class="headerOption"></div>
</a>
It's looking to style an anchor tag inside the div, but there isn't one.
How can I place my button in the center without any kind of "margin cheat" (for example setting margin-left: 525px;)?
HTML
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
CSS
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
margin-left: 525px;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
I've tried making it sit in the center but it didn't work out so well without me setting margin-left; 525px;, which in my case, centers the button under the text, please help me remove this "margin cheat" and do it in the right way.
The a act like text it means when you give text-align:center; to its parent, it will be placed in center of its parent.
You don't need to give margin to the a element. You can use text-align:center;.
#bannerContainer
{
text-align:center;
}
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
If you set the position of the button to absolute, give it a set width, and add this it should center:
left: 50%; right: 50%;
Have you try this:
<center>Products</center>
I am not sure whether it is helpful to you..
I have adjusted my bottom attribute to display how I want it in Firefox, but the spacing is all warped in Chrome and Safari. Is there a way to sett a different "top" attribute for each browser?
HTML
<a class="tooltip" href="#"> <!-- this tag activates my tool tip -->
<div class="handsevent" > <!-- this div contains everything that activates the tool tip when hovered over-->
<div class="handswrapper">
<div class="handshour" >
<h3>8:00am-noon</h3>
</div>
<div class="handsspeaker">
<h3>Speaker 3</h3>
</div>
</div>
<div class="handstitle">
<p>Description</p>
</div>
</div>
<span class="classic"> <!-- this span contains everything that pops up in the tool tip -->
<h3>Title Bar</h3>
<br />lots of descriptive text
</span>
</a>
CSS
/* HOVER WINDOW */
.tooltip {
color: #000000; outline: none; font-style:bold;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 30px 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Arial, Tahoma, Helvetica, sans-serif;
position: auto; left: 1em; top: 2em; z-index: 99; <!-- the 'top' attribute on this line is where I have been adjusting the display position it affects the position differently in different browsers -->
margin-left: 0; width: 700px; margin-top:-10px;
}
.tooltip:hover img {
border: 0; margin: -30px 0 0 90px;
float: right; position:fixed;
z-index: 99;
}
.tooltip:hover em {
font-family: Arial, Tahoma, Helvetica, sans-serif; font-size:14px; font-weight: bold; color:005DA4;
display: block; padding: -0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #ffffff; border: 1px solid #ffffff; }
I have tried pixels, em, and percentage. None of these have been consistent. Are there browser specific settings I could use?
here is a demo link for reference.
Using a CSS Reset will help to eliminate differences between browsers.
I switch the top attribute in ".tooltip:hover span" to "auto" and that seems to be working.
I've used absolute positioning to place an element at the bottom of an image and it looks great on the Mac but is positioned too high on my PC, even when using the same browser on both computers. Would using percentages, pixels, em, or inches be best when absolutely positioning HTML elements? I'm relatively new to web programming, so any general advice is welcomed. Thanks!
HTML:
<div class = "article">
<div class="title" onclick = "$('.aboutMe').fadeIn(500)">
<p class = "slide"> ABOUT ME </p>
</div>
<header>
<h1> RAMON MIGUEL "RMI" FLORES </h1>
<h2> Welcome to my personal website! </h2>
</header>
<img src = "tahoe2.jpg" alt = "Dorm Trip to Tahoe" title "Lake Tahoe" id = "tahoe">
<div class = "subImages">
<img src = "profile.jpeg" alt = "Profile Picture" id = "profile" onclick = "$('.aboutMe').fadeIn(500)">
<div class="title" id = "socialTitle" onclick = "$('.socialMedia').fadeIn(500)">
<p class = "slide"> SOCIAL MEDIA </p>
</div>
<img src = "basketball.jpeg" alt = "Me Dunking" id = "basketball" onclick = "$('.socialMedia').fadeIn(500)">
<div class="title" id = "contactTitle" onclick = "$('.contactMe').fadeIn(500)">
<p class = "slide"> CONTACT ME </p>
</div>
<img src = "contact.jpeg" alt = "Contact Me" id = "contact" onclick = "$('.contactMe').fadeIn(500)">
</div>
<footer>
<p> © Ramon Flores 2012 </p>
</footer>
</div>
CSS:
body {
background-color: #EDEDF3;
}
.article {
border: 1px solid rgba(255, 204, 204, 0.25);
background-color: #FFF;
width: 80%;
margin: 20px auto;
padding: 0 20px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 25px;
-moz-border-radius: 25px;
}
h1 {
font-size: 65px;
font-family: 'Quicksand', sans-serif;
font-weight: 100;
text-align: center;
color: #333;
text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
letter-spacing: 0;
margin-bottom: 0;
}
h2 {
font-size: 20px;
font-family: 'Raleway', 'Quicksand', sans-serif;
font-weight: lighter;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
text-align: center;
color: black;
letter-spacing: 0;
}
#tahoe {
width: 98.7%;
}
.article img {
border: 5px solid #EDEDF3;
}
#profile, #basketball, #contact {
width: 32%;
height: 4.7in;
border-radius: 25px;
-moz-border-radius: 15px;
}
.subImages {
display: inline;
}
footer {
font-size: 15px;
color: #B28F8F;
text-align: center;
font-family: 'Raleway', sans-serif;
}
footer p:hover {
color: black;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.title {
background-color: #66CCFF;
width: 26%;
color: white;
font-family: 'Quicksand', sans-serif;
text-align: center;
font-size: 30px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-bottom-right-radius: 20px;
-moz-border-bottom-left-radius: 20px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
position: absolute;
top: 1127px;
}
#socialTitle { left: 36.9%; }
#contactTitle { left: 63.3%; }
Sorry if there's a lot of code. I'm fairly new and I'm not sure where the problem may be so I just posted a lot of it. I want to place the ".title" elements at the bottom of each of the 3 images in the ".subImages" class. This works fine on all of the browsers on the Mac but the ".title" elements are placed too high on all of the browsers on the PC. Thank you so much for your help!
It doesn't matter whether you use pixels or inches: if you want an element to be at the bottom, use bottom: 0;
See this fiddle, where the image is inside a container div. The title is positioned over the image, at the bottom of the container. I've used a color and semi-transparency, so you can see the title is actually positioned over the 'image'.
http://jsfiddle.net/GolezTrol/wp3Fd/