When I try to design my website by adding some awesome info boxes, my boxes stretch out the page and add white space.
Here is a screenshot of the issue (note the space on the right):
And here is the relevant code:
HTML
<div class="Projectbox">
<div class="container">
<div class="Projects">
<p class="TextOne">Projects</p>
<p class ="TextTwo">Click to get redirected<br>to all of our projects
<div class="Backgroundsknap">
<div class="knap">
<p class="Knap2">Projects!</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.projectbox {
height: 250px;
background-color: #0C3C60;
margin-left: 200px;
width: 250px;
margin-top: 500px;
display: inline-block;
vertical-align: middle;
}
I am assuming you have a body tag somewhere. Try adding the following css to format the body.
body {
background-size: cover;
background-position: center;
}
Related
I want to align the image to left, then its title then the text below it.
Here is the screenshot of what I want to make.
I have made DIV for each content. I dont know if its okay to do that.
I made it, because I ll have more control for individual content.
But I havent ben able to do so.
.howtocontainer {
height: 1985px;
width: 1121px;
background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}
.firstsection {
/*background: rgb(255,255,255,0.3);*/
background: grey;
height: 200px;
position: relative;
top: 300px;
margin: 0 40px 0 40px ;
}
.firstpic {
padding-top: 20px;
}
.firstsecbanner {
float: right;
margin-right: 500px;
margin-top: -15px;
}
<div class ="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsecbanner">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
All I did was Included image and text in one DIV
But gave a class to image by <img class="class" src"path" >
Then I did float:left to .img class.
There are 2 key points that you should notice about using float:
Float container should be set a specific width (absolute or relative width)
clear all floating items
You should change your HTML structure a little bit, and add some CSS styles:
.firstpic {
float: left;
width: 300px; /*this width is equal with its image's width */
}
.description {
float: left;
width: calc(100% - 300px);
}
/* Clear floating item */
.firstsection::after {
display: table;
content: "";
clear: both;
}
<div class="firstsection">
<div class="firstpic">
<img src="the-image-on-left-side">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="the-title-image-on-top">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
</div>
Please add absolute URL instead of relative URL to see your pictures.
Hope this helps.
A disadvantage of using floats is that it disturbs the natural document flow. You may want to consider an alternative using flexbox.
.firstsection {
display: flex;
}
.firstpic {
width: 300px;
/*this width is equal with its image's width */
}
.description {
width: calc(100% - 300px);
}
<div class="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
<br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
<br> ティックな気分を高めることができます。
<br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
<br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
<br> 見つけてください。
</div>
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
I'm using Bootstrap and am using the class col-md-6. On the left column I have an image and on the right column I have two paragraphs of text. When I shrink the web browser (or use mobile), I want the div to expand, instead of using a scroll bar. What ends up happening now is the image shows up fine but I have to use the scroll bar to see the paragraphs of text.
Sorry I'm kind of new to web programming and have spent a considerable amount of time trying to figure out what I'm doing wrong. Not sure if it's relevant but I'm also including the next chunk of code after the issue.
I want it to scroll from pg4 to pg5, but i don't want an additional scrollbar to have to see all the content in pg4.
EDIT: Also feel like I should note that I've seen similar questions posted here and have tried numerous of the answers to these issues and nothing has worked yet.
<div id="pg4">
<div class="container">
<h1 class="text-center text-uppercase">About Me</h1><hr/>
<div class="row">
<div class="col-md-6">
<img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
</div>
<div class="col-md-6">
<p>PARAGRAPH 1</p>
<p>PARAGRAPH 2</p>
</div>
</div>
</div>
</div>
<div id="pg5">
</div>
/* PG 4 */
#pg4 {
background-color: #282E34;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 250%;
overflow: auto;
}
#pg4 p {
color: white;
text-align: left;
font-size: 20px;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 10%;
color: #6c6d6e;
}
#p1 {
margin-top: 15%;
}
#picture {
width: 45%;
margin-top: 15%;
}
/* PG 5 */
#pg5 {
background-image: url("IMAGE");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 350%;
overflow: auto;
}
Try to add additional classes to your divs
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<p>PARAGRAPH 1</p>
<p>PARAGRAPH 2</p>
</div>
</div>
Something like this.
If you do not specify col-xs-? by default bootstrap stacked your divs and it behaves like col-xs-12. Same for large displays. So you need to specify a width for extra small and large displays
And from that part:
#picture {
width: 45%;
margin-top: 15%;
}
remove width: 45% you already defined img-responsive
When you set height and overflow: auto for an element, It means you want this element to be scrollable. If you don't want this, instead of height: 100% set height: auto;
I'm trying to align three background images side by side, ideally with fluidity so that they re-position when my browser window resizes.
I've tried searching for an answer to this problem and thought using CSS properties suited to aligning regular 'img src' elements would work, however they haven't.
Essentially, I have a page with a gallery. Each image has a city name in it's center. Through research, I've decided to assign a background-image property to three separate divs and used the line-height property matching the height of each image so that the city name aligns itself in the center. The background-image technique assists in the alignment of the city name.
Where am I going wrong?
#jumbotron2 {
height: 500px;
width: 100%;
}
#city-container {
width: 100%;
height: 100%;
}
.london-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/london-400px.jpg")
}
.newyork-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/newyork-400px.jpg")
}
.sydney-square {
height: 400px;
width: 400px;
background-image: url("tombnb-images/sydney-400px.jpg")
}
.square p {
font-family: 'Slabo 27px', serif;
font-size: 32px;
color: #FFFFFF;
line-height: 400px;
text-align: center;
text-shadow: 0px 0px 10px black;
}
<div id="jumbotron2">
<div id="city-container">
<div class="london-square square">
<p id="text">London</p>
</div>
<div class="newyork-square square">
<p id="text">New York</p>
</div>
<div class="sydney-square square">
<p id="text">Sydney</p>
</div>
</div>
</div>
if you use a percentage width of your divs you have to float them too.
I recommand using this:
#city-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-warp: wrap;
}
You can use bootstrap. you put your images inside divs.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img class="img-thumbnail" src="http://www.nature.org/cs/groups/webcontent/#web/#giftplanning/documents/media/sample-cga-rates-splash-1.jpg">
</div>
<div class="col-sm-4">
<img class="img-thumbnail" src="http://sharedforfree.com/wp-content/uploads/2013/07/cropped-harrimanToday.jpg">
</div>
<div class="col-sm-4">
<img class="img-thumbnail" src="http://pre02.deviantart.net/f34e/th/pre/f/2015/182/4/f/croatia_nature_pack___sample__2___proref_org_by_proref-d8zgrc2.jpg">
</div>
</div>
Check out this fiddle:
jsfiddle example
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
I have a question that I suspect has a simple answer. I'm using Bootstrap to make a personal webpage, and I'm attempting to divide the background into 3 equal columns (which will all have different images).
I know this could be done with class="col-xs-4" but the issue is that I'd like to keep what's over the background as-is (it's a "col-lg-12" that is responsive).
Is there a way to split my background (again, going to upload images into the 3 panels, and the panels will essentially mask the full images), and still have all the "col-lg-12" heading stuff on top?
Thanks for any help you can give, my current html code is such:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/picture.png" alt="">
<div class="intro-text">
<span class="intohead">Filler Text</span>
<span class="subhead">More detailed, longer filler text for below</span>
</div>
</div>
</div>
</div>
</header>
Basically, there are three columns with background images, and then a cover div that is placed on top of the three columns. You can place anything you like in the cover div. Here's an article about CSS positioning.
.wrap {
width: 100%;
height: 300px;
position:relative;
}
.section {
float: left;
height: 300px;
width: 33.33333%;
}
.one {
background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
background-size: 100%;
}
.two {
background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
background-size: 100%;
}
.three {
background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
background-size: 100%;
}
.cover {
width: 100%;
height: 100%;
/*A background isn't needed, it's just to show that the element is there*/
background: salmon;
opacity: .5;
/* this stuff is key */
position: absolute;
top: 0;
left: 0;
/* place cover on top */
z-index: 10;
}
<div class="wrap">
<div class="cover">Put all you content in here</div>
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
</div>
Run the code snippet and tell me what happens. Is this what you're looking for?