I'm pretty comfortable with basic html/css, but I've been really tripped up by a problem in a tumblr theme I'm working on. The text in my sidebar can't be selected, and the links do not work. I've read about people having problems where they put a div inside of a span tag, or because of a position:absolute, but I don't think that either of those are the issue. You can view the very unfinished site here.
Edit: including the relevant code
<header id="masthead">
<div id="header">
{block:IfMastheadPortrait}
<img src="{PortraitURL-128}"/>
{/block:IfMastheadPortrait}
<div id="big">{Title}</div>
<div id="goto">About //
Contact</div>
{block:Description}
<p>{Description}</p>
{block:Description}
</div>
<!--Navigation-->
<nav>
<div id="linx">
<span style="background-color: #007A5E">Design</span>
<br />
<span style="background-color: #007A5E">Drawing & Painting</span>
<br />
<span style="background-color: #007A5E"> Photography</span>
<br />
<span style="background-color: #007A5E">Mixed Media</span>
</div>
<br />
</nav>
</header>
And the CSS
#big {
color: {color:Masthead links};
font-size: 40px;
font-family: 'Codystar', sans-serif;
text-align: center;
}
#masthead {
background: {color:Masthead background} url('{image:Masthead}');
opacity: 0.7;
padding: 2%;
color: {color:Masthead text};
font-size:10.5px;
width: 180px;
height: 100%;
position: fixed;
float:left;
xmargin: {text:Post margin};
}
#masthead a {
color: {color:Masthead links};
}
nav li {
display: inline;
}
#linx {
text-align:center;
font-size:15px;
line-height:1.5;
font-family: {font:body} ;
color: #007A5E;
}
#linx a {
color:#000;
}
#goto {
text-align:center;
line-height:3;
}
#goto a {
color:#00A37D;
}
Give the sidebar a z-index so it sits on top of #content:
#masthead {
z-index: 1;
}
Just a heads up, xmargin isn't a thing. :D
Related
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I can't seem to figure out why my style attributes aren't having an effect on my divs. The only one that seems to work is the body tag.
It's for a course I'm currently doing. I feel like I've tried everything but can't get it to work. I'm pretty sure it's something minor that I'm missing but it is really frustrating me.
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
float: left;
}
PageBanner {
margin: 0;
width: 100%;
float: none;
width: 50px;
}
NavBar {
background: #FD0C10;
}
Header {
text-align: center;
margin-bottom: 20px;
}
Subheading {
text-align: center;
}
Content {}
Footer {}
body>
<div wrapper="Mainwrapper">
<div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner"></div>
<div class="Navbar">
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="Header">
<h1>The Club Site</h1>
</div>
<div class="SubHeading">
<h2>Members Prices</h2>
</div>
<div class="Content">
</div>
<div class="Footer">
</div>
</div>
<!--Mainwrapper-->
</body>
Have the css class definition like .PageBanner which will work like you expected PageBanner refers to a tag with name PageBanner. And #PageBanner refers to an element which has id PageBanner
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
float: left;
background: color: red;
}
.PageBanner {
margin: 0;
width: 100%;
float: none;
width: 50px;
background:red;
}
.NavBar {
background: #FD0C10;
}
.Header {
text-align: center;
margin-bottom: 20px;
}
.Subheading {
text-align: center;
}
.Content {}
.Footer {}
<div wrapper="Mainwrapper">
<div class="PageBanner"><img src="../images/banner.jpg" alt="PageBanner">
</div>
<div class="Navbar">
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="Header">
<h1>The Club Site</h1>
</div>
<div class="SubHeading">
<h2>Members Prices</h2>
</div>
<div class="Content">
</div>
<div class="Footer">
</div>
</div>
<!--Mainwrapper-->
You need to put a CSS Selector
to make your style work.
Selector Example Example description
.class .Header Selects all elements with class="Header"
<div class="Header">
#id #firstname Selects the element with id="firstname"
<input id="firstname">
Please do read this link for more info about CSS Selector Reference.
https://www.w3schools.com/cssref/css_selectors.asp
The answer has been given. But make sure to pay close attention to how you write your CSS because this case you were trying to define a class but was missing the dot .class but also you can do ids which are defined #class. You had a good approach you were just missing the signifying selector.
Here is my website.
http://www.gtaresources.net/
The css makes anchor elements have certain css properties and i just want it for like a navigation bar. just the login button and when i add a menu. But for now you can see that green behind the image at the top right. It's not supposed to go behind every anchor i just want it for certain ones and i can't or don't know how to do inline css for only the menu with the a:visited and a:hover and stuff. What's the solution? I just need to make some of the css only work for a certain elements or elements.
I made notes of where the css that is interferring begins and ends.
Here my source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}
ul { <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
a:hover, a:active {
background-color: #7A991A;
} <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["admin"];
var pwArray = ["password"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}
}
</script>
</head>
<body>
<ul background="/victoria/cutiepie2.jpg" hidden>
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
<img src="/victoria/logo.jpg" width="250" height="75" class="logo">
<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text- decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>
<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>
<p id="p">Username: <input type="text" name="username">
Password: <input type="password" name="pword">
<input type="button" value="log in" onclick= "validate()"></p>
</form>
<center><h1 style="color: #003300;">GTA Resources</h1></center>
<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg"
width="1000" height="500"></center>
<br><br>
<p id="para">
Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics
on anything Gta related. And just have a good time. Enjoi!!:)
</p>
<center>Click here for help</center>
<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>
</body>
<!--MTD(c) 2014-->
</html>
The clean method to do this would be using CSS classes. In your HTML, add a class to the css elements that should have the green background.
HTML:
my link
CSS:
a.green-on-hover:hover {
background-color : green;
}
Note: The class name, is just like a variable-name can be anything, even 'hyphens' are allowed in the class-name. I gave 'green-on-hover' you can call it anything you want.
Found this very simple tutorial to help you with classes:
http://www.tizag.com/cssT/class.php
Hope that helped. Let me know if you have questions.
One Suggestion: Try to make your question, more generic next time.
You background the anchor with green and you put inside the image on it and you see the result of yours.
try this
html:
<a href="/index.html">
<img width="250" height="75" class="logo" src="/victoria/logo.jpg">
<span></span>
</a>
css:
a,a:link, a:visited {
color: #ffffff;
position:relative;
display: block;
font-weight: bold;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a span{
position:absolute;
width:100%;
height:100%;
background-color:#98bf21;
z-index:2;
left:0;
top:0;
}
a img{
position:relative;
z-index:0;
}
Having problems displaying two images and one h1 tag on the same line. I want to align one image to the left and the last two elements on the right. Any tips on how to do that?
HTML
<div class="header">
<img src="meny_knapp2.png" class="meny" alt="meny link">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo">
<h1 class="lsb"> Læringssenteret </h1>
</div>
CSS
.header {
height:120px;
width:100%;
background-color:#ff7f1f;
color:white;
font-size:20px;
display: table;
vertical-align:middle;
}
.meny {
height: 25px;
margin-left:0.5em;
line-height:120px;
}
.lsb {
font-size:24px;
letter-spacing:0.09em;
font-weight:lighter;
display:inline;
}
.hioa {
height: 60px;
float:right;
margin-right:1em;
}
.header * {
float: right;
}
.header img:first-child {
float: left;
}
.hioa {
height: 60px;
margin-right:1em;
}
please adjust css in class
<div class="header">
<div style="float:left;width:30%">
<img src="meny_knapp2.png" class="meny" alt="meny link" width="50"/>
</div>
<div style="float:right;width:70%">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo" style="float:left;width:100px"/>
<h1 class="lsb" style="float:left;width:50%"> Læringssenteret </h1>
</div>
</div>
Okay, I've seen loads of information about this, but none of the suggested fixes worked for me, or perhaps I just didn't properly understand, so if someone could break this down elementary for me that'd be great, or point me to another link that does. I have a series of divs to make my header, a main container with the logo inside floating left, and then another container floating right, that works all fine, but the internal "menu" container contains two divs in it, one supposed to be at the top, the other at the bottom... to visualize it, its login or register links at the top, and a series of menu links at the bottom. The problem is the ones that are supposed to be at the bottom are actually going to the top, right under the register and login links. If that didn't give you a visual picture, then here is the actual header http://www.sunnahspace.com/pages/header.php i've tried loads of stuff, maybe I've just been trying it wrong though. i've tried the whole, position absolute stuff and honestly i don't even know what that means, but I get the feeling I'm headed in the right direction. Thanks in advance for anyone's help!
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
add the following to your styles
#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}