Basically I wanted the Sign in link to be on the right and my logo to be where it is. I'm still a newbie at CSS and I've tried all that I could think of in terms of the code. Here's the HTML:
<!--header-->
<div id="header">
IMG
Sign into CGC!
</div>
And here is the CSS:
#div header{
font-family; sans-serif;
}
#div a signIn{
float: right;
}
Any advice would be appreciated.
Your selectors are incorrect:
div#header{
font-family; sans-serif;
}
div#header a#signIn{
float: right;
}
Since you've assigned an ID you can just use:
#signIn{
float: right;
}
Your code specifies a 'signIn' element, that is a child of an anchor element, that is a child of an element with the ID 'div'. Hope that's clear.
Same goes for the header
#header{
font-family; sans-serif;
}
Use this code:
Fiddle:
CSS:
div#header{
font-family; sans-serif;
}
div a#signIn{
float: right;
}
Related
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
I am trying to create a mock up of a PSD file and i'm having trouble getting some tags at the bottom of a blog post to behave.
Here is a link to the image;
http://imageshack.com/a/img923/5718/rfVFqe.png
(I'm not allowed to post real images yet)
Here is my css code so far for it;
.comment { content:url(comment.png) ; height:auto; width:auto; }
and then in the html;
<div class="comment"><p>comments</p></div>
the text does not appear at all however. I'm not sure if I can make it work this way?
Thanks all.
I did a similar thing for a footer of a page recently, but I had to use img and p tags.
<div class="comment">
<img src="svg/phone.svg" alt="Phone">
<p>800-888-0123</p>
<img src="svg/email.svg" alt="Email">
<p>billy#billsplumbing.ca</p>
</div>
That was my markup, and my CSS looked something like:
div.comment *{
display:inline-block;
margin:0 .2rem;
}
div.comment p{
margin-right:1rem;
}
div.comment img{
height:25px;
width: 25px;
}
I don't know if this is quite what you're looking for, but this is how I did basically what you are showing.
Why not use background: url(comment.png) instead? And then add some padding-left to the div.
Code:
.comment{
background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
padding-left: 30px;
height: 24px;
float: left;
margin-right: 10px;
}
.comment p{
margin: 0
}
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
I have a header and I would like to create a back to homepage link from it. Is it a mistake if I do this?
<a href="index.php?menuid=1" title="Go back to the homepage.">
<header>
<h1>Title of the page</h1>
</header>
</a>
If it's better to create link from the <h1> then how to expand the link to the size of the header? Because the link on it looks like this:
If you want the entire header to be a link, that is the correct way to do it (at least in modern HTML5 browsers). If you want your <h1> to be the full width of <header> then add
h1 {
width: 100%
}
to your CSS (though you should add an id or class to the h1 and select through that, better than a general h1).
Adding my answer for what is worth (also updated you fiddle)
header{
display:block;
height:210px;
width:560px;
text-align:left;
background-color:#eb4172;
border: 20px solid transparent;
}
h1 {
background-color:#00aaff;
width:100%;
height:100%;
display:block;
}
h1 a{
width: 100%;
display: block;
height: 100%;
}
I had this code and it worked good. The footer information was at the bottom of my screen in the middle:
div#footercenter p { font-size: 0.9em; }
<div id="footercenter">
<p>© XXXX </p>
</div>
I wanted to change it to this:
div#footercenter {}
div#footer-message { font-size: 0.9em; color: #EEEEEE; display: inline;}
div#footer-copyright { font-size: 0.9em; color: #EEEEEE; display: inline; }
<div id="footercenter">
<div id="footer-copyright">xxx</div>|
<div id="footer-message">yyy</div>
</div>
Now my text is to the left and not in the center. Does anyone have any idea how I can make it go back to the center?
Dave
You mean like this? : http://jsfiddle.net/jomanlk/DHA9A/
You just need to add text-align to center
div#footercenter {text-align: center}
Should be as simple as this:
#footercenter {
text-align:center;
}
But you may need to do this as well if you have other styles interfering:
#footercenter div {
float:none;
display:inline; /* or inline-block */
}
A <div> is a block element that should be used for defining collections of elements rather than explicitly for text content. There's nothing wrong with your markup but you have set your divs to then have a display:inline which means they only occupy the width of their content. The divs will also bunch up to the left by default.
The better approach would have been to contain the text within 2 span elements and then simply set the text-align property of the parent div to center.
See the following;
div#footercenter { font-size: 0.9em; color: #EEEEEE; text-align:center; }
<div id="footercenter">
<span>xxx</span>|
<span>yyy</span>
</div>
Try
div#footercenter {
text-align:center;
}
<div id="footercenter">
<span id="footer-copyright">xxx</span>|
<span id="footer-message">yyy</span>
</div>
Rewrite your footercenter class as
div#footercenter {text-align:center;}
Set the width for the div you wanna apply the text-align property to and then assign text-align : center.