When I use it instead puts the div the the top and center
HTML
<div align="center">
<div style="max-width:800px">
<div>
<div>
<div style="CLEAR: none; BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid" class="Header" align="center">
<div class="Banner">
<div style="max-width:100%">
<div>
<div>
<div align="top" align="left">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Default.aspx">ROBLOX.com</a></div>
<div align="center" style="max-width:300px">
</div>
<div align="right"><span class="BannerText">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Login/New.aspx">Sign Up</a></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.Header
{
font-size: 14px;
}
.Banner
{
PADDING: 8px;
}
.BannerText
{
font-weight: bold;
color: white;
}
a.BannerText:link, a.BannerText:visited, a.BannerText:active
{
text-decoration: none;
COLOR: white;
}
a.BannerText:hover
{
text-decoration: underline;
COLOR: white;
}
I tried editing it and googling it but I found nothing. This is old HTML code I found on the wayback machine https://web.archive.org/web/20060528010436/http://www.roblox.com:80/ I find the old header interesting and would like to use it for my projects. Even If I update it to HTML5 code, I don't know if using a table instead of a header tag will hurt site optimization/seo
The align property is deprecated. Use the CSS top and left properties, along with a position: fixed attribute. Read more on CSS positioning here.
<div align="center">
<div style="max-width:800px">
<div>
<div>
<div style="CLEAR: none; BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid" class="Header" align="center">
<div class="Banner">
<div style="max-width:100%">
<div>
<div>
<div style="position:fixed;top:0;left:0;">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Default.aspx">ROBLOX.com</a></div>
<div align="center" style="max-width:300px">
</div>
<div align="right"><span class="BannerText">
<a class="BannerText" href="https://web.archive.org/web/20060528010436/http://www.roblox.com:80/Login/New.aspx">Sign Up</a></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
It hurt me physically to use the inline CSS style attribute. I would've used a class, but something tells me you're looking for a quick fix. Please take some basic html and css tutorials.
Related
I have the following piece of code where an icon and text are displayed
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
I want to change the color of the text "Relaxar-te" after visiting this section. That means, once I returned to this page, the color of the text changed. The CSS of "title-text" is
.title-text {
line-height: 68px;
}
If tried to insert
.title-text:visited {
color: blue;
}
Unfortunately, this doesn't work. I saw many forums where they are using this way, however, it doesn't work for me or I'm missing something.
:visited only works for links. So what you need is
.title-text {
line-height: 68px;
}
a.w-inline-block:visited .title-text {
color: blue;
}
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
You can target the text in this manner:
a:visited .title-text{
color: pink;
}
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
:visisted only works on the a tag. .title-text is pointed to a div
you could change your code like this to fix it:
.custom-link:visited {
color:blue;
}
<div class="group-block last">
<a class="w-inline-block custom-link" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
I want to apply one for all hover color change effect on the icon, text and button(top to bottom). At the moment hover is working separately either text and icon or button is changing color.
here is the code and also a fiddle
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>
Title text
</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover {
color: white;
}
.button a {
color: #000;
}
.button a:hover {
color: white;
}
EDIT:
Although some of the answers worked on jsfiddle, none of them worked so far on live site.. I am pasting updated HTML code structure from it as the one above was only a sample. Maybe that will help sorting this issue out. Thanks!
<div class="et_pb_column et_pb_column_1_3 col-1-left et_pb_column_93 cboxElement">
<div class="et_pb_blurb et_pb_module et_pb_bg_layout_light et_pb_text_align_center mp_m_blurb_pulse fins-color-aqua et_pb_blurb_50 et_pb_blurb_position_top">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image">
<span class="et-pb-icon et-waypoint et_pb_animation_off et-animated" style="color: #28375c;">?</span>
</div>
<div class="et_pb_blurb_container">
<h4>Title</h4>
<h5>Subhead</h5>
</div>
</div>
</div>
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_button_26 et_pb_module et_pb_bg_layout_dark" href="#">Find Out More</a>
</div>
</div>
Please Try this,
.col-1-left:hover * {
color: white;
}
I did a code snippet for you. Please try it and confirm it is what you need.
The thing is that you need to add the hover effect to the parent, i.e. .col-1-left in order to be able to change the color to its children elements.
.col-1-left {
width: 100%;
background: #555;
padding: 10px;
margin: 0;
color: red;
}
.col-1-left:hover, .col-1-left:hover .button a {
color: white;
}
.button a {
color:#000;
}
<div class="col-1-left">
<div class="content">
<div class="icon">
<img src="#" />
</div>
<div class="text">
<h4>Title text</h4>
</div>
</div>
<div class="button">
Read More
</div>
</div>
I am trying to align all three images so they are centered in the row, evenly.
Here is a fiddle of the markup, http://jsfiddle.net/bkmorse/btCRk
<div class="container"
<div class="row" style="border:1px solid red;">
<div class="span12">
share on facebook
share on twitter
send an email
</div>
</div>
</div>
a.share-icon {
height:64px;
display: inline-block;
width:64px;
text-decoration: none;
text-indent: -10000px;
font-size: 0px;
line-height: 0px;
}
a.share-icon.facebook {
background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat;
}
a.share-icon.twitter {
background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat;
}
a.share-icon.email {
background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat;
}
I've tried text-align:center; I've tried pull-left/right. I am not having any luck. Any help is appreciated.
Thanks!
Or, you can use the text-center class..
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="span12 text-center">
share on facebook
share on twitter
send an email
</div>
</div>
</div>
Demo: http://bootply.com/70873
text-align:center won't work for centering block elements, only inline elements. Considering you're using Twitter Bootstrap, here's 2 ways you can do this:
Option 1 - use span4s then display the links as blocks with fixed width and margin:0 auto
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="span4">
share on facebook
</div>
<div class="span4">
share on twitter
</div>
<div class="span4">
send an email
</div>
</div>
</div>
a.share-icon {
height:64px;
display: block;
width:64px;
margin: 0 auto;
text-decoration: none;
text-indent: -10000px;
font-size: 0px;
line-height: 0px; }
a.share-icon.facebook { background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat; }
a.share-icon.twitter { background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat; }
a.share-icon.email { background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat; }
Option 2 - put the images inside the links, then have them all display inline and use text-align:center
<div class="container">
<div class="row" style="border:1px solid red; text-align:center;">
<div class="span12">
<a href="" class="share-icon facebook" title="Share on facebook">
<img src="http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg" alt="" />
</a>
<a href="" class="share-icon twitter" title="Share on twitter">
<img src="http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg" alt="" />
</a>
<a href="" class="share-icon email" title="Share in an email">
<img src="http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg" alt="" />
</a>
</div>
</div>
</div>
UPDATE: I apologize, I was not as clear as I should be, attached is the final result I want and I am trying to accomplish this in the 320px width view (mobile), thanks.
Right now, I have 3 divs Content1, Content2, Content3
I want to add a simple stylized rule to separate the content in each. Here is the code that I am working with.
HTML
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
I want to add a Horizontal Rule inbetween Content1 and Content2 and between Content2 and Content3.
I have included an image so you can see exactly what I mean.
Thanks!
Don't use <hr> for this, as it's chiefly a semantic element rather than presentational. A bottom border is ideal for this. E.g. http://codepen.io/pageaffairs/pen/pjbkA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {width: 500px; padding-bottom: 10px; }
#Content1, #Content2 {border-bottom: 3px solid #4588ba; margin-bottom:10px;}
div p {background: #4588ba; line-height: 150px; font-size: 2em; font-family: sans-serif; color: white; margin: 0; padding-left: 30px;}
</style>
</head>
<body>
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
</body>
</html>
You can use an hr tag to separate your div elements
<div id="Content1">
<p><strong>Content1</strong></p>
</div>
<hr />
<div id="Content2">
<p><strong>Content2</strong></p>
</div>
<hr />
<div id="Content3">
<p><strong>Content3</strong></p>
</div>
Demo
You can reset the default 3d style of an hr tag using solid border
hr {
margin: 20px 0;
border: 1px solid #f00;
}
if you don't want to use hr tag. you can bound every div with another div and decorate it. Like this:
See demo at : jsfiddle
<div id="Content1" class="divOutside">
<div class="divInside">
<strong>Content1</strong>
</div>
</div>
<div id="Content2" class="divOutside">
<div class="divInside">
<strong>Content2</strong>
</div>
</div>
<div id="Content3" class="divOutside last">
<div class="divInside">
<strong>Content3</strong>
</div>
</div>
And the Css:
.divOutside {
border-bottom:2px blue solid;
width:200px;
padding-bottom:5px;
padding-top:5px;
}
.divInside {
width:200px;
height:80px;
color:#fff;
background-color:blue;
}
.last {
border-bottom:0;
}
Try like this
demo
HTML
<div id="Content1" class="content">
<p><strong>Content1</strong></p>
</div>
<div class="break"></div>
<div id="Content2" class="content">
<p><strong>Content2</strong></p>
</div>
<div class="break"></div>
<div id="Content3" class="content">
<p><strong>Content3</strong></p>
</div>
CSS
.content {
padding:20px;
background:#3E87BC;
font-size: 24px;
margin-bottom:10px;
font-family: Arial;
color: #FFF;
}
.break {
background: #3E87BC;
height: 2px;
margin: 5px 0 10px 0;
width: 100%;
}
<div id="Content1" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content1</strong></p>
</div>
<div id="Content4" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content2" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content2</strong></p>
</div>
<div id="Content5" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content3" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content3</strong></p>
</div>
<div id="Content6" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
I am trying to split the page into two sections. One left area and right will be the content page. I have the following html but looks like it is not working. Any ideas, what I am not doing right?
<div id="wuiMainArea">
<div id="wuiMainContent">
<div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
</div>
</div>
Like this
<div id="wuiMainArea" style="border: 1px solid;">
<div id="wuiMainContent" style="border: 1px solid;">
<div id="wuiLeftArea" style="border: 1px solid;float: left;">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav" style="border: 1px solid; float: left;">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
#wuiMainArea, #wuiMainContent{
margin: 0 auto;
width: 960px;
}
#wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
width: 478px;
display: inline-block;
float: left;
}
It'll be better to use CSS styling HTML.
Define the widths to fit your needs. Also I recommend using classes instead of ids when appling same styles to multiple elements.