Hello I have a site where there is some text telling the user about the site. I want to draw a white rectangle behind the text to separate it from the background.
I am able to draw the rectangle, but the rectangle draws over the text.
I am using the below CSS code to draw the rectangle:
#rect1 {
position: absolute;
width: 100px;
height: 100px;
background: #ffffff;
}
Here is the HTML in the main page:
<body>
<div class="container_24">
<header>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div class="banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id="rect1"></div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in
the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
<p>Find Out More</p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We
ask questions like "Why dont we have a robotic Mars colony?" and find an answer or solution. </p>
<p>
</p>
<p> </p>
<p>Find Out More</p>
</div>
<div class="grid_6">
</div>
The
<div id "rect1></div>
is the part that says draw a rectangle in the html code. How can I get it to draw the rectangle behind the text?
You can add
z-index: -1;
to the #rect1:
#rect1{
position: absolute;
width: 100px;
height: 100px;
background: #ffffff;
z-index: -1;
}
Fiddle
(You should probably also adjust the rectangle size to make it look better.)
If you really want to use absolute position, set its z-index to -1.
But I think you might just want to give the div or span that contains the text a different background and border instead of drawing a new div behind it.
<html>
<head>
<style>
#rect1{
position: absolute;
width: 100px;
height: 100px;
background: #eee;
z-index:-1;
}
</style>
</head>
<body>
<div class = "container_24">
<header>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class = selected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div class = "banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id = "rect1"></div>
<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
<p>Find Out More</p>
</div>
<div class ="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We ask questions like "Why dont we have a robotic Mars colony?" and find an answer or solution. </p><p>
</p><p> </p>
<p>Find Out More</p>
</div>
<div class ="grid_6">
</div>
</html>
Thats your code.. Moreover you can use bootstrap classes like well to separate your div text from the other content if you wish to.
I kept the background-color to be #eee so that you can see it. Edit it according to your need.
Related
I have two anchor tags that are not clickable for some reason. One link should open up so clients can send me an email to my email address. The other link should open up a phone or app so clients can contact me via phone.
I cannot figure out why only these two links are not working. I am using a bootstrap template so maybe there is something in this section (jquery?) that is preventing the links from working as they normally would. The icons in the unordered list in the same section don't seem to have this issue.
<section class="ftco-section about-section">
<div class="container">
<div class="row d-flex" data-scrollax-parent="true">
<div class="col-md-4 author-img" style="background-image: url(images/author-1.jpg);" data-scrollax=" properties: { translateY: '-70%'}"></div>
<div class="col-md-2"></div>
<div class="col-md-6 wrap ftco-animate">
<div class="about-desc">
<h1 class="bold-text">About</h1>
<div class="p-5">
<h2 class="mb-5">Hi! I'm Matthew Mullins</h2>
<p>I thrive working on large, commercial, information heavy site designs. I have an emphasis on ease of use & simplicity. My idea of great visual design: when it enhances the user experience, & doesn't get in the way.</p>
<ul class="ftco-footer-social list-unstyled mt-4">
<li><span class="icon-behance"></span></li>
<li><span class="icon-dribbble"></span></li>
<li><span class="icon-instagram"></span></li>
<li><span class="icon-google"></span></li>
</ul>
<p>Email: example#gmail.com</p>
<p>Phone: (442)-224-4005</p>
</div>
</div>
</div>
</div>
</div>
</section>
I was expecting the links to open up to their respective locations. Instead, the text is blue but the mouse does not indicate there is a link underneath.
Posting my comment as an answer:
Seems to be something with the CSS on your links, as it works in the example you gave. Try setting cursor: pointer; on those links, which should show that they are clickable links.
Something in your Bootstrap or other styles must have been overriding the default cursor as pointer on link elements.
I have this logo on the website, which is positioned in the center between the navbar menus.
Here's a picture:
Logo Position
The problem is that the logo moves when I switch to a different monitor or resolution. Am I doing something wrong? How do I make it fixed between different resolutions.
Here's the html code:
<main class="site-main">
<center><img src="img/corelogo.png" alt="Post" height="180" width="180" style="position: absolute; top: -1px; left: 570px; margin: 0 auto;"></center>
<section class="hero_area">
<div class="hero_content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>TeamSpan Global Solutions</h1>
<h2>Your partner in building satellite workforce teams.</h2>
</div>
</div>
</div>
</div>
</section>
First of all center tag has been deprecated. Secondly, you're positioning it 570px left of the right edge of the first positioned (not static) ancestor element. I can't see what styles are applied to your classes so I can't see what that would be. But it would definitely move around based on resolution.
Have you already heard about Responsive Design?
Look, you have to post your css too! Can you write it on jsfiddle?
Some examples:
https:// codepen.io/bootstrapped/pen/dGPZvR (remove space)
https://www.bootply.com/mQh8DyRfWY
https:// codepen.io/davidcochran/pen/Fkwys (remove space)
I'm creating a custom landing page for my employers website.
http://juniorgoldreport.com/welcome/ this is the landing page.
I'm just trying throw some idea's until we find something solid, so at the moment the landing page is extremely simple.
I'm having trouble splitting my body into two different div blocks.
<div class="welcome-landing">
<div class="landing-header">
<div class="logo-img">
<img src="http://juniorgoldreport.com/wp-content/uploads/2016/05/logoo2.png" alt="junior gold report logo" />
</div>
</div>
<div class="landing-bar">
<ul class="landing-nav">
<li> About Us </li>
<li> Accredited Investors </li>
</ul>
</div>
<div class="landing-body">
<div class="body-left">
[layerslider id="11"]
</div>
<div class="body-right">
TEST BLOCK
</div>
</div>
<div class="landing-footer">
FOOTER TEST
</div>
</div>
Where you see the "TEST BLOCK" is the block I'm having trouble with. I have a subscribe button in there right now when you look at it in the website.
Remove any character between two horizontal Divs
<div class="landing-body">
<div class="body-left">
//content here
</div><div class="body-right"> <-- </div><div> No character in between
//content here
</div>
</div>
add following css
.body-left, .body-right {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
You need to use
1) float:left
or
2) display:inline-block
for both blocks
http://c2n.me/3yr3jOw
I'd make this a comment but I don't have enough points.
Try adding float: left; to your CSS for the .body-left div, and float: right; to .body-right.
Also, your <footer> tag should include clear: both;.
There's a lot more to be taken care of here, but this should get you on the right path.
I am learning bootstrap now, and am trying to make a simple website. I created a row with 3 columns (sizes: 3,6,3), each with it's own text elements. I wanted the first and last column to be colored in red and the middle in grey. I used a background-color in css to do this, but I see that the color envelopes just around the text elements. Is there any way to quickly add a bar of different colors but same height? The image here may help better understand the problem. I could create a new bootstrap row with a bar and add it behind them, but wanted to know if there's a simpler solution. The html and css are as follows.
<div class="aboutbar">
<div class="container">
<div class="row">
<div class="leftbar">
<div class="col-xs-3">
<h3> 231 </h3>
<p>Enthusiasts</p>
</div>
</div>
<div class="middlebar">
<div class="col-xs-6">
<h3> Kanye West</h3>
<p> Kanye Omari West is an American hip hop recording artist, record producer, rapper, fashion designer, and entrepreneur.West is one of the best-selling artists of all time, having sold more than 32 million albums and 100 million digital downloads worldwide.
</div>
</div>
<div class="rightbar">
<div class="col-xs-3">
<ul style="list-style:none;">
<li class="emphasis"> Follow </li>
<li> Events </li>
<li> Blog </li>
</ul>
CSS:
.leftbar .col-xs-3 {
background-color:red;
color:white;
}
.middlebar .col-xs-6 {
background-color:grey;
color:white;
}
.rightbar .col-xs-3 {
background-color:red;
color:white;
}
Thanks in advance!
Set the same height to columns is a quite common problem.
I use a jquery plugin that force the same height to all columns of the row.
http://brm.io/jquery-match-height/
I need to fix 3 <div>s in the center of my webpage. I tried to use margin: 0 auto; but it doesn't work, even using Bootstrap's grid. It's complicated because whatever I'll do the 3 <div>s don't fix exactly in the middle. It most to goes 3 buttons, and every button has a paragraph below.
<section class="contenedor">
<nav>
<ul><div class="contenedor">
<li class="col-md-3"><img src="imagenes/icono-1.png" alt="responsive" class="center-block">
<p class="boton-textT">
RESPONSIVE</p>
<p class="boton-textT">WEB DESIGN</p>
<p class="boton-text col-md-12 ">
We create scalable Internet services.
The architecture of the content and
presentation is adapted to the screen
size and device type. We create
Responsive Web Design.
</p></li>
<li class="boton2 col-md-3"><img src="imagenes/icono-2.png" alt="mobile" class="center-block">
<p class="boton-textT">
MOBILE</p>
<p class="boton-textT">APPLICATIONS
</p>
<p class="boton-text col-md-12">
We design the user interfaces
of mobile applications. We know the
iPhone users' needs as well as Metro
system's requirements. Developers
respect quality and organization
of our work, clients love it.
</p></li>
<li class="boton3 col-md-3"><img src="imagenes/icono-3.png" alt="web" class="center-block">
<p class="boton-textT">
WEB</p>
<p class="boton-textT">APPLICATIONS
</p>
<p class="boton-text col-md-12">
We are building UI for web
applications. We understand both:
the strength of trends
and technology constraints. At the
end of the day the user is still the
most important.
</p></li>
</div>
</ul>
</nav>
</section>
1. Your mark up is wrong
You wrapped the lis with div.contenedor this is not a standard practice. Please remove it.
2. Need a better understand bootstrap's grid system.
It's divided into 12 basically. If you want to put 3 items on a row and want them to be well-aligned horizontally, you need to use col-**-4, not -3 there.
Reading this http://getbootstrap.com/css/#grid will help you understand it better.
I editted some of your code here - http://jsfiddle.net/fktkeu9r/
Grids are based on 12:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
As pointed out, the code needs to be cleaned up and validated.
You'll want to edit your CSS to something like:
.contenedor
{
margin-left: auto;
margin-right: auto;
width: 80%;
}