I am having some difficulty changing font color decoration ect across the same DIV tag.
What I want to do is make a breadcrumb type navigation on certain pages in my site and I would like to minimize the amount or Div's I use so as to make it easier to maintain.
here is what I have and would like to do.
<div id="product-breadcrumbs">
<div id="breadcrumbs">(Link and color) // (another link and another color)
</div>
</div>
CSS
#product-breadcrumbs {
position: absolute;
left: 0px;
top: 66px;
width: 1024px;
height: 34px;
background-color: #E7E5F2;
}
#breadcrumbs {
position: relative;
padding-top: 7px;
padding-bottom: 7px;
text-align: left;
text-indent: 140px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #09C;
text-decoration: none;
}
Edit: Reread your question (you are right, I did misread it). You could accomplish this by giving classes to your links, no?
<div id="product-breadcrumbs">
<div id="breadcrumbs">
A link
Another link
</div>
</div>
with the following CSS:
#breadcrumbs a.colorOne {
color: black;
}
#breadcrumbs a.colorTwo {
color: blue;
}
Related
I have made a background with the div box, following this triangles tutorial to separate it into two navy blue triangles and one white trapezoid.
I duplicated this div and added child elements with text to go in front of this background. I used position: absolute and the text was in front, but the text was grouped up funny, with the 3 sentences all duplicated and overlapping.
I then tried separating the div-child-text elements into 3 separate classes (.Child-text-01, -02, and -03) and adjusting the top function accordingly. And tada, no longer overlapping but still duplicated.
I tried position: relative for the text, and voila, it wouldn't show up because it is behind the box.
I checked my parses, they were fine as far as I know. I reasoned maybe the box isn't calculating its children because the relative position doesn't do it, I changed the boxes to position: absolute, but it screwed the web page up pretty hard. then I checked the HTML, and fiddled around with the ending parse, no dice, I am wondering what I am missing, I am a new coder and self-taught.
My code is below:
body {
background-color: #1d3c6e;
}
#font-face {
font-family: "cola-font";
src: url("cola-font-medium.ttf");
}
body h1 {
color: white;
font-size: 80px;
font-family: "cola-font";
font-width: 10px;
}
body h2 {
color: white;
font-family: "cola-font";
font-width: 10px
}
body h3 {
color: white;
}
body h4 {
color: white;
}
.Child-text-01 {
color: #212b2a;
font-size: 30px;
font-family: "cola-font";
position: absolute;
top: 2750px;
font-weight: bold;
}
.Child-text-02 {
color: #212b2a;
font-size: 30px;
position: absolute;
top: 2780px;
font-family: "cola-font";
font-weight: bold;
}
.Child-text-03 {
color: #212b2a;
font-size: 30px;
position: absolute;
top: 2810px;
font-family: "cola-font";
font-weight: bold;
}
.Child-text-04 {
color: white;
font-size: 100px;
font-weight: bolder;
font-family: "cola-font"
}
.Child-text-05 {
color: white;
font-size: 30px;
font-weight: bold;
}
.box-one-red {
background-color: #e30b0b;
width: 1200px;
margin: 50px;
border: 10px solid #050000;
position: fixed;
bottom: -50px;
}
.box-two-white-trapeziod {
border-bottom: 2048px solid #fff;
border-left: 512px solid #1d3c6e;
border-right: 512px solid #1d3c6e;
}
.box-two-navy-trapezoid {
border-top: 2048px solid #fff;
border-left: 512px solid #1d3c6e;
border-right: 512px solid #1d3c6e;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="HtmlbrickhouseStyle.css">
<title> Cloth's Generic Website </title>
<meta: charset "UTF-8">
</head>
<body>
<header>
<div class="box-two-white-trapeziod">
<h1> Do You Want to see some of the stuff i made? </h1>
</div>
<div class="box-two-navy-trapezoid parent">
<div class="Cliffsidetest">
<div class="Child-text-01 child"> Number one Cliffsidetest, A TF2 map</div>
<div class="Child-text-02 child">Number two, Various Blender Models i Made Of Various Things,</div>
<div class="Child-text-03 child">Number three, A Mobile Game Currently In The Works</div>
</div>
</div>
So now the three sentences, (.Child-text-01, .Child-text-02, and .Child-text-03) are supposedly stuck behind the box element.
I am trying to change the font-family of my tab and align the text to the center using "font-family" and "text-align" but it isn't working. Here is my code and the image. As you can see the font is not Roboto and the text "Chat" is not aligned properly.
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>
For the font, the font-family declaration works if you try an already-included font, like Arial or Times New Roman. I don't believe Roboto is a default font that you can just include. Have you imported it from somewhere like Google Fonts?
For the text centering: I'm not entirely sure what you mean by "not aligned properly," but it is centered in your example. Both the "Chat" text and the SVG icon are part of the centered element (the <a> tag), so it's those two elements together being centered within the box. (The same distance extends from the "t" to the top and from the edge of the speech bubble to the bottom.) Depending on how you actually want it to be aligned, you may need to target the text or image and align them individually.
The Roboto font is not supported by css and is only available through google. I have added the code to get the font from google and display it in on the tab.
HTML
<style>
div#olark_tab{
position: fixed;
right: 0;
bottom:50%;
z-index:5000;
}
#olark_tab div{
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
#olark_tab a{
/*Edit these to change the look of your tab*/
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius:9px;
border-top-left-radius:9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover{
background-color: white;
}
</style>
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg">
Chat
</a>
</div>
</div>
make your image smaller
div#olark_tab {
position: fixed;
right: 0;
bottom: 50%;
z-index: 5000;
}
#olark_tab div {
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
}
/* changes */
#olark_tab img{
width: 50%;/* or :75%; make it the much you want */
}
/* changes */
#olark_tab a {
/*Edit these to change the look of your tab*/
background-color: #DCDCDC;
color: #1EAFE6;
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 20px;
height: 20px;
padding: 6px;
display: block;
text-decoration: none;
text-align: center;
width: auto;
border-top-right-radius: 9px;
border-top-left-radius: 9px;
border-top-style: none;
border-top-width: 0;
}
#olark_tab a:hover {
background-color: white;
}
<div id="olark_tab">
<div>
<a href="javascript:void(0);" onclick="olark('api.box.expand')">
<img src="icon-chat.svg"> Chat
</a>
</div>
</div>
I am attempting to make a button, with a green background, an image, and text, all which should be clickable to take you to the same destination.
I am unsure how to do this, but at its current point, it works. It looks a bit confusing though, and I'm using the same class twice, which I know you shouldn't do, but I have been unable to find a solution.
The answer I am looking for is to minimize the space between the image and the text, while still getting everything to work as described above. It may have to do with the div tags, but when I change anyhting, none of it works.
.takecoverbutton {
width: 759px;
height: auto;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.takecoverimage {
padding-top: 6px;
}
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
}
<div class="takecoverbutton" align="center">
<a href="takecover.html">
<div class="takecoverbutton" align="center">
<div class="takecoverimage">
<img src="images/takeCoveriCon.jpg">
</div>
<p class="buttonpara">1. Take Cover</p>
</div>
</div>
</a>
</div>
Thanks in advance!
Browser by default adds some margin to the paragraph. you need to remove the margin.
Your .buttonpara is having margin remove margin add this css margin-top:0px;
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
margin-top:0px;
}
SNIPPET
.takecoverbutton {
width: 759px;
height: auto;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.takecoverimage {
padding-top: 6px;
}
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
margin-top:0px;
}
<div class="takecoverbutton" align="center">
<a href="takecover.html">
<div class="takecoverbutton" align="center">
<div class="takecoverimage">
<img src="images/takeCoveriCon.jpg">
</div>
<p class="buttonpara">1. Take Cover</p>
</div>
</a>
</div>
Use
<div></div> instead of <p></p>
.takecoverbutton {
width: 759px;
height: auto;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.takecoverimage {
padding-top: 6px;
}
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
}
<div class="takecoverbutton" align="center">
<a href="takecover.html">
<div class="takecoverbutton" align="center">
<div class="takecoverimage">
<img src="images/takeCoveriCon.jpg">
</div>
<div class="buttonpara">1. Take Cover</div>
</div>
</a>
</div>
That's because you have a margin on your p tags
In your .paratext just set the margin to zero: margin: 0;
That's it - you were nearly there :)
By default the browser adds in some stylings to some elements, including a margin for the p tags. You could either override this, or just use a span instead.
(I've neatened up your code for you, see below)
.take-cover-button {
width: 759px;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.take-cover-image {
margin-top: 6px;
}
.take-cover-text {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
margin: 0;
}
<div class="take-cover-button">
<a href="takecover.html">
<img class="take-cover-image" src="http://placehold.it/100x50">
<p class="take-cover-text">1. Take Cover</p>
</a>
</div>
The changes I implemented were:
Fixed incorrect nesting
Clearer class names
Removed obsolete html attributes (like align)
Removed unnecessary extra div's
Should make your code easier to manage and debug.
For future reference, when your trying to debug something like that - try using the browser developer tools F12. You can use the inspector to view exactly which elements are causing spacing issues, and adjust the padding, margin or any other CSS property strait from your browser.
I have a logo/home button for my webpage which is the abbreviation of my project (the temp letters I use are ABCDEF). I am using Arial for the font (although may change it later). As you can see from the photo of the logo, the letters do not completely align under each other.
I've tried font-kerning: none; which helps but does not completely make it do what I want it to do.
I've made a jsfiddle for this example and here's the link: https://jsfiddle.net/7dfetxto/
Otherwise, here's my code (same as in the jsfiddle):
HTML
<div id="logo">
<a href="#">
<h1>ABC</br>DEF</h1>
</a>
</div>
CSS
#logo{
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1{
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
My goal is to get the letters on the second line to fall directly under their respective letter on the first line.
Thank you.
letter-spacing
Use CSS letter-spacing property.
JSfiddle.
#logo {
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1 {
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
.h1b {
letter-spacing: 3.25px;
}
<div id="logo">
<a href="#">
<h1>ABC<br><span class="h1b">DEF</span></h1>
</a>
</div>
You might find this interesting: kerningjs
There are more possible ways. One is
font-size
By making the font-size of the second line (in this case) bigger, it will grow and reach the two sides of the first line: JSFiddle.
My issue is that when I drag my webpage over from my Macbook 13 inch to my Samsung 24 inch monitor, the text... in this case 'Expertise' changes its position. The text moves up, where as the navigation bar stays in place, adapting successfully to the change of monitor.
I know this is a simple case of design flaw. I mean, I haven't used margins in this webpage. Although I want to be able to have a full screen background that takes up half the top portion of the page, although have the text adapt to the screen size. I'm not talking about making a webpage that works on phones and tablets just yet. Just a webpage that will work on different sized monitors, 13 inch, 25 inch etc... I hope that someone can edit my code so I can see what to do!
I want my website to look good on different sized monitors and am not quite sure what I am doing wrong. I used position: fixed; for the nav bar so that when I scroll down it follows the page, although for the text... 'expertise' I am using top, bottom, right, left etc... to position. I have no idea how to align the text where I want and have it work on different sized monitors. Essentially prevent the text from floating left, up etc... I want the text to resize accordingly, although not fall out of place.
I will post my code below, but would like to thank all of you for your time! I'm sorry if I'm not clear enough with my question as i am not even quite sure what the proper terminology for this is.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="styles.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<div class="logo">
<ul>
<li>AESTHETIC</li>
</ul>
</div> <!--logo-->
<div class="main-nav">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div> <!--main-nav-->
</div> <!--nav-->
</div> <!--header-->
<div class="main-wrapper"> <img src="#" class="scale-image"/>
</div> <!--MAIN IMAGE-->
<div class="main-text">
<h1>We are Aesthetic</h1>
<h2>A Visual Agency From Niagara</h2>
</div>
<div class="content">
<div class="text-2">
<h2>Expertise</h2>
</div>
</div>
<div class="footer"></div>
</div> <!--container-->
</body>
</html>
CSS
* {
margin: 0 auto;
padding: 0;
}
body {
}
.container {
}
.header {
}
.nav .logo {
position: fixed;
top: 22px;
left: 25px;
z-index: 1;
}
.nav .logo ul {
overflow: visible;
list-style-type: none;
}
.nav .logo ul li {
display: inline-block;
}
.nav .logo li a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
.nav .main-nav {
position: fixed;
top: 25px;
right: 10px;
letter-spacing: .2em;
z-index: 1;
}
.nav .main-nav ul {
overflow: visible;
list-style-type: none;
}
.nav .main-nav li {
height: 13px;
padding: 0 17px;
display: inline-block;
}
.nav .main-nav li:last-child {
border-right: none;
}
.nav .main-nav li a {
font-weight: 400;
text-decoration: none;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
.nav .main-nav li a:hover {
background-color: rgba(50, 50, 50, 0.4);
padding: 3px 10px 3px 13px;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}
.main-text {
margin: auto;
height: auto;
position: absolute;
top: 230px;
left: 0;
bottom: 0;
right: 0;
}
.main-text h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
.main-text h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}
.main-wrapper {
position: absolute;
}
.scale-image {
width: 100%;
}
.content {
width: auto;
height: auto;
}
.content .text-2 {
color: #CCC;
margin: auto;
position: relative;
top: 600px;
left: 0;
bottom: 0;
right: 0;
}
.content .text-2 h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
-webkit-font-smoothing: antialiased;
}
I'll also link to codepen so you can see what i'm talking about in regards to the 'expertise' text moving all around.
http://codepen.io/anon/pen/zxVbwb
Thank you!
Okay I didn't change a lot, but just some things that I thought were crucial to give you a jump start on making it responsive (applicable for all / most screen sizes). http://codepen.io/anon/pen/azgMjo
A couple of tips: in your Css you might want to consider starting out with:
html{
height: 100%;
width: 100%;
}
body{
width: 100%;
height: 100%;
}
The code above makes the base of your website instantly responsive for all screen sizes. The trick now is to make everything else in it responsive as well.
Also try to learn HTML5 and use it where ever you can as it's coding to the latest standards for web-development. E.g.:
<div class="nav">...</div> Becomes <nav>...</nav>
<div class="footer">...<div> Becomes <footer>...</footer> etc.
Another things which is advised is to put your jQuery or Javascript scripts (the one you use to link your jQuery / Javascript) right BEFORE the closing tag of the </body>.
And to answer your main question: notice how I gave the parent of the text: position: relative AND the text itself position: absolute;
And I placed the text with a top: 30%;
This places the text 30% from the top of the parent window on all screen sizes! So no matter what what the height of the screen size is, the text is always placed 30% from the top of it's parent.
I could go on, but I think this will help you to get a jump start.
If you find my answer useful, you can give me points for my answer.
Same applies for comments, if you find the useful, you can hover over the comment and click on the arrow that points up (which also gives me a point).
Good luck!