I'm attempting to align a section element with a styled aside element. I've tried all combinations of inline, block, and inline-block but I can't seem to get anything to happen. I don't understand why it's not aligning as it should.
Fiddle: http://jsfiddle.net/bmgkB/
Visually, this is the result:
...that I want to get (approximately) here:
HTML excerpt:
<aside class="icon"><p>§</p></aside>
<section role="region" class="aside">
Welcome to the Pyroneous Lair. There is a variety of features here.
</section>
CSS excerpt:
#charset UTF-8;
body
{
background:#000;
color:#FFF;
width:90%;
font:11px tahoma, sans-serif, serif;
margin:auto
}
article,aside,figure,footer,header,hgroup,menu,nav,section
{
display:block
}
header
{
text-align:center
}
hr
{
border:none;
border-top:medium double #333;
color:#FFF;
text-align:center;
padding:0
}
hr:after
{
content:"§";
display:inline-block;
position:relative;
top:-.85em;
font-size:1.5em;
background:#000;
z-index:2;
padding:0 .25em
}
.icon
{
font:45px serif, "Times New Roman", sans-serif;
color:#000;
border-radius:100px;
text-align:center;
width:70px;
height:70px;
background:#A60000
}
.aside
{
margin-left:5%;
display:inline
}
Make both the .aside and the .icon be display:inline-block (and remove the p from inside the icon as it offers nothing..)
Demo at http://jsfiddle.net/gaby/bmgkB/2/
Related
I need this input field to prepend a # before the hex colour code, like so, as well as horizontally center both the div and the span containers:
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
When I try with the following css:
html, body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
border: none;
background-color:#444;
text-align:center;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
I achieve limited success, in that the hash is at the start and the span and input seem to be centered. The problem occurs when I attempt to set the width of the div, and though the width is set, it snaps back to the left.
So, how can I center the div and the span, while also being able to change the div's width?
Here's a fiddle with the code.
Just specify margin: 0 auto for your div.
html body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
width:300px;
border: none;
background-color:#444444;
text-align:center;
margin:0 auto;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
Hope it helps :)
Try this
span,input
{
align:center;
}
Hope it helps :-)
Im trying to align my title, image and paragraph to the left of my news image.
And Im using float left for doing this but its not working,
Im having this:
But Im trying this:
Do you see where might be the problem?
My fiddle with the problem Im having:
http://jsfiddle.net/upH4U/1/
My html:
<div id="news-content">
<h1>News</h1>
<article id="loop-news">
<div class="img_container">
<img src="../image1.jpg" title=""/>
</div>
<h2><a href="#" >Title of the news</a><br /></h2>
<span id="date">Tuesday, May, 2014</span>
<p>
This is my paragraph and I want to align it to left of my image.
see more
</p>
</article>
<article id="loop-news">
<div class="img_container">
<img src="../image1.jpg" title=""/>
</div>
<h2><a href="#" >Title of the news</a><br /></h2>
<span id="date">Tuesday, May, 2014</span>
<p>
This is my paragraph and I want to align it to left of my image.
see more
</p>
</article>
</div>
My css:
#news-content
{
float:left;
width:480px;
background:#f3f3f3;
}
#news-content h1
{
font-size:20px;
font-weight:100;
margin-bottom:10px;
color:gray;
text-align:left;
}
#loop-news
{
width:400px;
margin-bottom:10px;
text-align:center;
}
.img_container
{
width:160px;
height: 165px;
float:left;
cursor: pointer;
border:3px solid #ccc;
}
#loop-news h2 a
{
font-size:20px;
color:#3B5998;
text-decoration:none;
margin:0 auto 0 5px;
font-weight:100;
float:left;
}
#loop-news a
{
font-size:14px;
text-decoration:none;
margin-left:2px;
}
#loop-news #date
{
font-size:13px;
font-weight:normal;
color:#7a7a7a;
}
#loop-news p
{
font-size: 13px;
text-align:justify;
line-height:25px;
word-spacing:-2px;
width:300px;
float:left;
margin-left:5px;
}
quick answer, use clearfix - there are a few options there
CSS
#loop-news
{
width:400px;
/*margin-bottom:10px; moving margin to seperator*/
/*text-align:center;*/
}
#loop-news p
{
font-size: 13px;
/*text-align:justify;
line-height:25px;
word-spacing:-2px;
width:300px;
float:left;*/
margin-left:5px;
}
#loop-news {
overflow:hidden; /*quick clear fix*/
}
.loop-news-content {
overflow:hidden;
}
#loop-news *:first-child { margin-top:0; }
#loop-news *:last-child { margin-bottom:0; }
#loop-news h2 { margin:0; }
.loop-news-meta { margin-top:0; }
Heres the updated fiddle
http://jsfiddle.net/Varinder/HTNk8/2/
Here's a page to show how to align text relative to an image:http://www.w3schools.com/tags/att_img_align.asp
your width is overflow; dont use it or fix it
#loop-news p
{
font-size: 13px;
text-align:justify;
line-height:25px;
word-spacing:-2px;
float:left;
margin-left:5px;
}
float the image to the right like this fiddle
float:right;
You need to clear your float by adding clear:left; to the same class that uses float: left. In your case, you can use the CSS declaration:
#news-content article { clear: left; }
Also, having multiple elements with the same ID can have unexpected results. You should consider using classes instead.
http://jsfiddle.net/suxedung/wH3nX/ [1]
I want all the hover text is white but it did not work!
This is my html code:
<div class="group_title">
Be positive
And you’ll acomplish everything
</div>
This is css code:
.group_title {
width:220px;
height:55px;
text-align:center;
font-size:11px;
color:#999999;
background: #f6f6f6;
}
.group_title a{
display:block;
padding-top: 15px;
text-decoration:none;
font-size:12px;
color: #444444;
font-weight:bold;
text-transform:uppercase;
.group_title:hover {
width:220px;
height:55px;
color:#FFFFFF;
text-align:center;
font-size:11px;
background: #23abf1;
cursor: pointer;
}
.group_title a:hover{
display:block;
padding-top: 15px;
text-decoration:none;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
color:#FFFFFF;
}
I will just answer it now.
So this is the CSS I added. When hovering on the div ALL the text will change to white. Using .group_title:hover a we can select that a and change its color when we hover over its parent.
CSS:
.group_title:hover {
color:#FFFFFF;
text-align:center;
font-size:11px;
background: #23abf1;
cursor: pointer;
}
.group_title:hover a {
color:#FFFFFF;
}
DEMO HERE
Your CSS is malformed.
You are missing a closing bracket } for the .group_title a { section.
I have also updated your CSS in the following example to apply the desired effect: http://jsfiddle.net/wH3nX/10/
.group_title:hover,
.group_title:hover a {
color:#FFFFFF;
background: #23abf1;
cursor: pointer;
}
I have stripped out any erroneous changes and applied the effect to both the <div/> and <a/> elements.
I have changed the css please check and update
http://jsfiddle.net/wH3nX/13/
a:hover {color:red;}
Your .group_title a { ... } is missing the closing bracket. That's because the next CSS sections doesn't work.
Not sure what I am missing, but my HTML is ignoring my CSS style sheet specs for links.
All my other CSS definitions work fine throughout the page.
Any help is greatly appreciated!
My CSS page includes:
.footer {
background:url( );
margin:0;
height:70px;
clear:both;
}
.footer {
margin:0;
padding:10px;
line-height: 175%;
font:normal 11px helvetica, arial, sans-serif;
color:#999;
}
a.footer {
font:normal 11px helvetica, arial, sans-serif;
color:#999;
line-height: 175%;
}
a.footer:link {
outline:none;
text-decoration:none;
}
a.footer:visited {
outline:none;
text-decoration:none;
}
a.footer:hover {
text-decoration:underline;
font-weight:normal;
}
My webpage includes:
<div class="footer">
Page Title 1<br />
Page Title 2
</div>
Change all a.footer to .footer a
a.footer means all <a> with class footer
.footer a means <a> within an element with class footer which is your <div>.
Your CSS should be like this:
.footer a { font:normal 11px helvetica,arial,sans-serif; color:#999; line-height: 175%; }
.footer a:link { outline:none; text-decoration:none; }
.footer a:visited { outline:none; text-decoration:none; }
.footer a:hover { text-decoration:underline; font-weight:normal; }
Here are some tutorials for class selector and descendant selector:
Class Selectors
Descendant Selectors
You'll want to change a.footer into .footer a. Your current css tries to set the style of links which have the class "footer", themselves.
It should be
.footer a
{
//your syles
}
Currently the CSS is being applied to all the links with class footer which is not the case.Your div has that class
Demo
Change all a.footer to .footer a as a.footer is nothing here which mean applying style to awith class footer
hi now used to this
.footer a{
// your css here
}
and used title this formated
helo
My final is to recreate a basic html page with my own css like csszengarden.com.
I made a simple one page deal at http://randallmiller.pcriot.com/72bclass/final72b/index.html.
However a few of my links are not clickable. Here is the css for the site. Any help would be greatly appreciated!
EDIT: I fixed the unclickable part with z-index:1, I think because of the padding on linkblock2. However, now my a:hover to turn them grey is only working for a few.
html{
height:100%;
}
body{
background:#000000;
}
h3{
margin-top:0;
}
h3 span{
color:white;
display:block;
}
.pgtitle1{
word-spacing:10px;
padding-top:25px;
margin-left:125px;
font:1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.pgtitle2{
padding-top:10px;
margin-left:275px;
font:bold .7em "Comic Sans MS", cursive;
letter-spacing:2px;
}
div#linkblock1{
position:absolute;
top:200px;
padding-left:25%;
}
div#linkblock2{
position:absolute;
top:200px;
padding-left:67.5%;
}
div a{
border-bottom:solid 1px white;
text-decoration:none;
text-align:center;
padding:5px;
display:block;
width:90px;
}
div a:hover{
color:rgb(200,200,200);
}
div a:visited{
color:blue;
}
div#fg_img{
height:323px;
background:url(bg.jpg) no-repeat center;
margin-top:50px;
line-height:999;
overflow:hidden;
}
h2{
font-size:.75em;
color:#FFF;
position:absolute;
top:10px;
left:60px;
}
You've covered up some of your links with #fg_img. Set some z-indexes.
Your divs are overlapping each other in many weird ways, the position:absolute on the div with the right links "linkblock2" is overlapping the links on the left.
You should really remove the position:absolute and use float on the divs, and you wouldn't run into that problem.
Not sure if it's an option or not, but check out a CSS Grid system if you can use it on your assignment.