I have two other boxes with the same code and the text stays inside but in the last box the text stays outside, if anybody could help.
HTML:
<div class="third">
<div class="brooo">
<img src="brooo.png" height="200" width="200" style="border: 1px solid black; margin-top: 20px; margin-left: 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
</div>
<div class="thirdd">
<p>BUSINESSES</p><br>
<p>Buy mega companies or small business such as gas stations, clothing stores, bars and more... <br><br>
Employment rankings from 1 man jobs(taxi/gas station) to multi-level "businesses" that require CEO, VP(lieutenants), and standard employees. <br><br>
Do you have what it takes to run a company that supplies the city with common commodities?</p>
</div>
CSS:
.third {
margin-top: 30px;
background-color: #2F3030;
border: 1px solid grey;
height: 250px;
}
.thirdd {
color:rgb(255, 255, 255);
}
Your third div have this property: height: 250px.
It's much small to contain all it's children.
remove this property and the parent div will expand to contain it's children.
It seems the text is super long and not being told to be contained within the div.
You can try adding this CSS to the thirdd div
word-wrap: break-word;
or perhaps try this to that same div if the above not working
overflow: auto;
Related
I am trying to make a whole area clickable as a link rather than just its text. Why are my attempts at doing this (position:absolute; width:90%) causing half of the purple area to just disappear?
<h2 id="block-50a924-1451-4d" class="wp-block-gutenbee-heading block-50a924-1451-4d has-text-color has-background-color" style="color:#ffffff;background-color:#cf2f74">
<a href="https://blog.samueljgodwin.co.uk/category/code/" style="content:'';position:absolute;width:90%; outline: 4px solid red; overflow: hidden">
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">
Code
</mark>
</a>
</h2>
<style>.wp-block-gutenbee-heading.block-50a924-1451-4d { padding: 10px 10px 10px 10px; font-size: 20px; }
</style>
I have left a red outline to show the clickable area in question, and the area as it appears using the above code.
What I want it to look like is something more like this...
...and the whole area be clickable.
Here is an example of the desired look, with only the text clickable.
<h2 id="block-409604-bc85-4c" class="wp-block-gutenbee-heading block-409604-bc85-4c has-text-color has-background-color" style="color:#ffffff;background-color:#3b8dd6">
<a href="https://blog.samueljgodwin.co.uk/category/lifestyle/">
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">
Lifestyle
</mark>
</a>
</h2>
<style>.wp-block-gutenbee-heading.block-409604-bc85-4c { padding: 10px 10px 10px 10px; font-size: 20px; }
</style>
My attempt at expanded this area seems to be chopping the containing block away.
Just replace h2 tag with a!
<a href="https://blog.samueljgodwin.co.uk/category/lifestyle/">
<h2 id="block-409604-bc85-4c" class="wp-block-gutenbee-heading block-409604-bc85-4c has-text-color has-background-color" style="color:#ffffff;background-color:#3b8dd6">
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-white-color">
Lifestyle
</mark>
</h2>
</a>
<style>.wp-block-gutenbee-heading.block-409604-bc85-4c { padding: 10px 10px 10px 10px; font-size: 20px; }
</style>
I'm trying to resize the image size to the same size as the content of the text. However, when I try using solutions such as flex, the images are grayed out. Does anyone know any other way of achieving this? Or if I am doing something wrong. The Code is below, both html and Css, the website this is on is: on this page here . Any help would be much appreciated.
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 0px;
overflow: auto;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
background-color: black;
}
.row{
padding: 0.5% 1%;
}
.textcont{
background-color: black;
padding: 1.5%;
width: 100%;
overflow: auto;
height: 300px;
position: relative;
/*overflow: hidden;*/
}
.textcont > h1 {
margin: 0;
color: white;
text-shadow: 0 1px 0 white;
}
.imgcont{
background:
linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
),
url('https://jackdaly.github.io/images/drawing (6).jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.buttonproj {
background-color: transparent;
color: white;
align-content: center;
padding: 1%;
border: 3px solid white;
}
.buttonproj:hover {
background-color: #555555;
color: white;
}
<h2 class="w3-center" style="padding-bottom: 2%">Portfolio</h2>
<div class="row">
<!-- ##### -->
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
), url('./images/fishtankcover.png')"></div>
</div>
<div class="column" style="">
<div class="textcont" style="" align="right">
<h1>Smart Tank </h1>
<p style="color: aliceblue">It can be a daunting experience for people buying, setting up and maintaining (or even thinking about) a fish tank and if they have the time needed for this hobby to keep their new friends alive. The AAS, short for Automatic Aquarium System (known as Smart Tank now), is a work in progress project that aims to be the step ladder for new users to climb with ease over the learning wall. The Smart Tank takes care of everything needed to take care of a fully planted aquarium.</p>
<div align="right" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<!-- ##### -->
<div class="column" style="">
<div class="textcont" style="" align="left">
<h1>CNC Dust Shoe </h1>
<p style="color: aliceblue">CNC Dust shoes are incredibly important when milling any material, especially materials that can be toxic or bad for the user's health. With this project, I aimed to combine functionality with aesthetics to create a highly functional product that looks aesthetically pleasing. The project was designed in Fusion 360 and showcases how highly functional tools can also take on pleasing form. The shoe can be moved up and down, adjusted with ease and the hoover extension can be removed for different additions.</p>
<div align="left" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
), url('https://jackdaly.github.io/images/cncshoe (3).png') "></div>
</div>
<!-- ##### -->
</div>
Is this what you are looking for? It looks like the path to the image was relative. I've put in the absolute path.
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 0px;
overflow: auto;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
background-color: black;
}
.row{
padding: 0.5% 1%;
}
.textcont{
background-color: black;
padding: 1.5%;
width: 100%;
overflow: auto;
height: 300px;
position: relative;
/*overflow: hidden;*/
}
.textcont > h1 {
margin: 0;
color: white;
text-shadow: 0 1px 0 white;
}
.imgcont{
background:
linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
),
url('https://jackdaly.github.io/images/drawing (6).jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.buttonproj {
background-color: transparent;
color: white;
align-content: center;
padding: 1%;
border: 3px solid white;
}
.buttonproj:hover {
background-color: #555555;
color: white;
}
<h2 class="w3-center" style="padding-bottom: 2%">Portfolio</h2>
<div class="row">
<!-- ##### -->
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
), url('https://jackdaly.github.io/images/fishtankcover.png')"></div>
</div>
<div class="column" style="">
<div class="textcont" style="" align="right">
<h1>Smart Tank </h1>
<p style="color: aliceblue">It can be a daunting experience for people buying, setting up and maintaining (or even thinking about) a fish tank and if they have the time needed for this hobby to keep their new friends alive. The AAS, short for Automatic Aquarium System (known as Smart Tank now), is a work in progress project that aims to be the step ladder for new users to climb with ease over the learning wall. The Smart Tank takes care of everything needed to take care of a fully planted aquarium.</p>
<div align="right" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<!-- ##### -->
<div class="column" style="">
<div class="textcont" style="" align="left">
<h1>CNC Dust Shoe </h1>
<p style="color: aliceblue">CNC Dust shoes are incredibly important when milling any material, especially materials that can be toxic or bad for the user's health. With this project, I aimed to combine functionality with aesthetics to create a highly functional product that looks aesthetically pleasing. The project was designed in Fusion 360 and showcases how highly functional tools can also take on pleasing form. The shoe can be moved up and down, adjusted with ease and the hoover extension can be removed for different additions.</p>
<div align="left" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
), url('https://jackdaly.github.io/images/cncshoe (3).png') "> </div>
</div>
<!-- ##### -->
</div>
I'm trying to make a floating menu for one of my projects but I can't get the overflow to work as I want and it drives me nuts as I know that I've managed to do this before.
My aim is to have the #preferencescontent div to only stretch to the lower edge of #preferencesholder and utilize scrolling if the content is larger but it just keeps going.
Here's the code (codepen below):
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>
I found a bunch of similar issues but could not get any of the solutions to work for me.
Codepen example:
https://codepen.io/anon/pen/WMvjRw
You have used max-height:80%. Which is not in respect of anything. So use height in px. Like I used 200px.Then you can utilize scrolling when conten is large from your defined height
div#preferencescontent {
overflow-y: scroll;
max-height: 200px;
margin: 10px;
width: 100%;
}
:root {
--alternatetablecolor: #f9f9f9;
--headerbackgroundcolor: #efefef;
--headerfontcolor: #333;
--bordercolor: #dddddd;
--defaultfontcolor: #222;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
div#preferencesholder {
background: #fff;
display: inline-block;
text-align: left;
max-height: 75%;
max-width: 90%;
overflow: hidden;
padding: 0px;
border: 1px #000 solid;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-top: 100px;
}
div#preferencescontent {
overflow-y: scroll;
max-height: 200px;
margin: 10px;
width: 100%;
}
div.sidemenu {
background-color: var(--headerbackgroundcolor);
width: 100%;
text-align: center;
}
div.sidemenu div.menuitem {
padding: 10px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
max-height: 30px;
vertical-align: middle;
}
div.menuitem:hover {
background-color: #d0d0d0;
cursor: pointer;
}
div#helpcontent {
max-width: 550px;
margin: 0 auto;
}
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>
I am having a little issue here. When I reduced my screen, the color "Grey" runs into my white div below it for some reason. The div above it is my jumbotron, so I'm not sure why this is happening.
My website is below for you to check out and see what happens when you reduce it on a computer.
hustlebussellunlimited.com
Here is some of my CSS code below, please tell me if you need more.
.jumbotron{
background: linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.2)
), url(main-banner.jpg);
background-size: cover;
color: #ffffff;
padding: 0;
}
.jumbotron .intro{
background: rgba(0, 0, 0,0.1);
padding-top: 120px;
padding-bottom: 40px;
min-height: 400px;
}
.jumbotron .intro .row-top div.ccont{
}
.row-bottom{
margin-top: 20px;
margin-bottom: 20px;
}
.jumbotron div.ccont{
background: #fff;
min-height: 150px;
}
.jumbotron .row-top div.ccont{
-webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron .row-bottom div.ccont{
-webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron p{
padding: 20px 0;
}
.jumbotron .media{
margin: 50px 0;
}
.jumbotron .media-body h1{
margin-top: 100px;
}
section.slider{
color: #ffffff;
background: #696969;
margin: 40px 0;
padding: 40px 0;
}
section.slider h2{
margin-bottom: 20px;
}
section.slider .col-md-8{
padding-left: 30px;
}
Here is my HTML code
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
<div class="intro">
<div class="container">
<div class="row">
<h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>
<p class="text-center">A Subsidiary of HustleBussell</p><br/>
</div>
<div class="row triangles">
<div class="up-triangle animated fadeInUp">
<div class="info">
Search Engine Optimization
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Web Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Marketing
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Systems Security<br/>
</div>
</div>
<div class="down-triangle animated fadeInDown visible-sm">
<div class="info">
Mobile App Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Consulting
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Branding<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Growth Hacking
</div>
</div>
</div>
</div>
</div>
</div>
<section id="services">
<div class="container">
<!-- Example row of columns -->
<div class="row features inner-page">
<div class="col-md-12 text-center">
<h2>Amplify your Reach, Achieve Massive Results</h2>
<p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
</div>
</div>
</div>
</section>
<section class="slider" id="features">
<div class="container">
<div class="inner-page">
<h2 class="text-center">About Us</h2>
<p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
</div>
</div>
</div>
</section>
in the fiddle i couldn't simulate the problem but i entered and inspected your website. the problem is that the element that has that grey background , respectively .jumbotron .intro , contains the triangles.
when you resize the window, the triangles go on two rows and so the height of the .info becomes bigger and overlaps the next element ( white one ).
you've hidden the triangles with visibility:hidden here (max-width: 1152px) , visibility:hidden only hides the elements but they still occupy space. you should use display:none so the elements are hidden and they don't occupy space
code :
#media (max-width: 1152px)
.up-triangle, .down-triangle {
/* visibility: hidden; */
display: none!important;
}
added the !important because you also have in your css this : .visible-sm { display: block !important;} and it's overwriting the code. i suggest you don't use !important only if you really have to.
to read more info about the difference between visibility and display see here what-is-the-difference-between-visibilityhidden-and-displaynone
<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);">
<div style="margin: 5px;">
#down2#
</div>
</div>
That's the code i'm currently trying. It's a bit of a mess at the moment. But basically, I'm trying to make it so I have a 25px x 25px div which stores the numbers of the pages in those boxes (part of a paginator), I want it so the number 1 is just as centered as the number 100. At the moment the number1 makes the box shrink in the method i have to center it but when I create a defined box size it just takes the number out alignment. Somebody know a quick fix to centering elements within divs?
<a style="display:block; text-align:center"; href="#link#">#down2#</a>
Also, lowercase your elements, it's not the nineties anymore
With the current text your Div is to small. If just using the number "1" for example you will get what you are looking for.
<DIV style="border: 1px solid RGB(0, 0, 0); height: 30px;width:30px; background: RGB(245, 225, 130);">
<DIV style="margin: 5px;">
1
</DIV>
</DIV>
a {
display:block;
text-align:center;
}
http://jsfiddle.net/MD2V6/
EDIT: Here is a cleaner example.
HTML:
<div>
1
</div>
CSS:
div {
border: 1px solid RGB(0, 0, 0);
height: 30px;
width:30px;
background: RGB(245, 225, 130);
}
a {
padding:5px;
display:block;
text-align:center;
}
http://jsfiddle.net/MD2V6/2/