I have been on this single page for more than 3 days now. Can't seem to move the paragraph div on a new line that is supposed to be under the image.
The div should take full width and start on a new line. But position is changed.
Weirdly enough the footer text is way up in the main body.
I tried a lot of solutions from stackoverflow. But I am starting to freak out.
Did I break something.
Please help.
The text that should be going on a new line, but keeps on staying here.
The text is not even positioned correctly when executed. The bottom text which is marked, is supposed to be in the footer. (see the image linked above also refer my code)
Note: The error is displayed on desktop computer. Mobile view is okay.
h1 {
text-align: center;
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
img {
width: 100%;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
img {
width: 100%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
img {
width: 60%;
}
.mtxt {
width: 40%;
margin-top: 15%;
}
.lefty {
float: left;
}
.righty {
float: right;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Be You :)</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Being Different is NOT a Sin</h1>
<img src="images/undraw_both_sides_hbv3.svg">
<div>
<p>You might think what might people say.</p>
<p>And somehow you became extremely self-conscious.</p>
</div>
<img src="images/undraw_friends_online_klj6.svg" class="righty">
<div class="mtxt lefty">
<p>Was it your Friends, Family or the Society... Whatever it was, it changed you.</p>
</div>
<div>
<!--this should be on a seperate new line also it shoould be centered-->
<div>
<p>Do you have any regrets?</p>
<p>Yes?</p>
<p>And are you feeling helpless?</p>
</div>
<!--this is the end of the new line -->
<div>
<img src="images/undraw_feeling_of_joy_ioj2.svg" class="lefty">
<div class="mtxt righty">
<p>Well, whatever your concern is, remember you can overcome anything.</p>
</div>
</div>
<div>
<img src="images/undraw_things_to_say_ewwb.svg" class="righty">
<div class="mtxt lefty">
<p>And if you say you are not sure.</p>
<p>Just think about the worst possible case that could happen.</p>
<p>Don't just keep that in your mind as a secret.</p>
</div>
</div>
<div>
<img src="images/undraw_phone_call_grmk.svg" class="lefty">
<div class="mtxt righty">
<p>We could help. More than that, you know...</p>
<p>I could help you.</p>
</div>
</div>
<div>
<img src="images/undraw_navigator_a479.svg" class="righty">
<div class="mtxt lefty">
<p>So, communicate your fears. It's how we deal with those fears/concerns.</p>
<p>Again remember there is nothing in this world that doesn't have a solution.</p>
</div>
</div>
<div>
<img src="images/undraw_to_the_moon_v1mv.svg" class="lefty">
<div class="mtxt righty">
<p>To achieve it might take time. But yes. We can overcome it.</p>
<p>Just Believe!</p>
<p>So let me take you on a journey.</p>
<p>A journey that will lift you up, to be your higher self.</p>
</div>
</div>
</div>
<div>
<div>
<center>
<!--this is also on a new line and centered at the bottom -->
<p>And always remember to look on the bright side of everything.
<3</p>
<!--new line ends-->
</center>
<img src="images/undraw_true_love_cy8x.svg">
</div>
</div>
</body>
</html>
the <3 might be getting the browser not knowing how to render the page as < is the start of an html tag.
You can replace it by its html entity <:
<p style="text-align: center">And always remember to look on the bright side of everything.<3</p>
Besides that, the center tag was deprecated long time ago. Use css as above with the text-align: center.
Also, to get the footer be after the floated elements apply clear: both to the div that contains all the footer as the other content is floated and you want this element to be below the other elements that are floating.
<div style="clear: both">
<div>
<p style="text-align: center">And always remember to look on the bright side of everything.<3</p>
<img src="images/undraw_true_love_cy8x.svg">
</div>
</div>
I've used inline styles to make it easier but you can do as with the other css code to leave it more clear. And you could use the footer tag to wrap all the footer.
Related
I have a white box that is floated left. I adjusted it to the center and I want it to overlap the background image of my title. But when I adjust the margin negative, to make it go up and overlap the background image at the top, it just cuts itself off. I can't figure out why
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<title>Try Slim Leaf</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div class="container">
<div class="row1">
<div class="header">
Women Over 35: Struggling With Stress Eating And Worried About How That’s Going Straight To Your Waistline?
</div>
</div>
</div>
</section>
<section><!--Hero Title-->
<div class="container">
<div class="row1">
<div class="hero-img">
<h2>“I Lost <span class="red-text">53 Pounds</span> Eating Cakes, Pizza & Ice Cream… By Flipping The</h2>
<h1>SUGAR SWITCH</h1>
<h2>Inside My Body…”</h2>
<h3>Discover How A <span class="red-text"><strong>“Near-Tragic”</strong></span> Experience Led An<br>
Arkansas Woman To Discover The Secret <span class="red-text"><strong>“Sugar Switch...”</strong></span><br>
And Lose Weight While Eating Delicious Carbs
</h3>
<h4>Now You Can Use This Breakthrough To Shed Unwanted Weight From The Comfort Of Your Home Too!</h4>
</div><!--End Hero Img-->
</div><!--End Row 1-->
</div><!--End Container-->
</section><!--End Hero Title-->
<main><!--Main Content-->
<section><!--Section 1-->
<div class="container">
<div class="row1 bg-gray">
<div class="box-white">
<div class="col">
<div class="col1"><img src="images/img1.png" alt="" width="368" height="796" class="fluid-img"/></div>
<div class="col2">
<p class="std-p">Hey, my name’s Katie Patterson.</p>
<p class="std-p"><strong>Over the next few minutes, I’m about to tell you my shameful story about how I nearly let my 5-year-old son drown…</strong></p>
<p class="std-p">All because I was too out-of-shape to run 30 steps to save him.</p>
<p class="std-p">Truthfully, I let myself go over the years…</p>
<p class="std-p">And it got to the point I could barely stand the way I looked in the mirror.</p>
<p class="std-p">My love life with my husband was practically non-existent.</p>
<p class="std-p">I avoided taking photos with friends…</p>
<p class="std-p">Seeing those pictures on social media made it painfully obvious how <strong>“big”</strong> I was compared to them.</p>
<p class="std-p">And as much as I felt like I was <strong>“cursed”</strong> with bad genes and a body that piled on stubborn fat…</p>
<p class="std-p">The tipping point came when being overweight nearly made my son drown.</p>
<p class="std-p">Today, I’m relieved to say, my son’s okay…</p>
<p class="std-p"><strong>AND there’s a silver lining too.</strong></p>
<p class="std-p">Because this near-tragic experience led me to discover…</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
I am a beginner and I hope somebody can help.
Thank you. I appreciate any advice.
From the comments above:
It is the overflow-x on .bg-gray. If you remove that the image extends beyond the parent element as you desire. I'm looking for other solutions in place of the overflow property.
overflow-y: visible; will allow your image to overflow, auto will contain any elements and create scrolling when necessary. Since this is negative margin it does not create a scroll.
Without the overflow-y your background image does not appear because you have floated all of the children and therefore .bg-gray, aka .row1 has no height.
For column layouts you should look up the more modern approach of using flexbox. Remove your floats and add display: flex; to .col
CSS
.col {
display: flex;
}
You should see your image overflow the parent and your columns sit side-by-side.
IF YOU MUST USE floats I recommend not using overflow property to get the parent to contain the floats and rather use a technique where you add an (pseudo) element to the document AFTER the the floats that clears the floats and effectively gets the parent element to wrap your floated elements.
For your example you would need something like this:
CSS
.row1::after {
content: '';
display: table;
clear: both;
}
Idk if you are using SCSS yet, but in the case you do or for others:
Reference: http://nicolasgallagher.com/micro-clearfix-hack/
SCSS Placeholder class to use with #extend
%clear {
&::after {
content: '';
display: table;
clear: both;
}
}
.row {
#extend clear;
}
SCSS Mixin to use with #include
#mixin clear {
&::after {
content: '';
display: table;
clear: both;
}
}
.row {
#include clear;
}
New here, I am making a web page for a school project and am having trouble getting the layout the way I want. was wondering if someone could point me in the right direction.
I am creating a layout. The top of the page is the navigation, then I have one main large image with some content over lay, and under that I have an image with content overlayed on the left and the right, then at the bottom the footer. * or thats what I would like anyway.
I have tried putting the images each in a but I can only get them to either be in a column or stacked. As I would like the first image under the header with navigation to be a wider picture , then two smaller ones each half the width of the main wider image if that makes sense..
I have searched online and the only things that looks similar to what I'm trying to accomplish are pay for templates.
<section>
<div class="container">
<img src="thebean.jpg" />
</div>
</section>
<section>
<div class="container">
<img src="rooftops.jpg" />
<div id="topleft"></div>
</div>
</section>
<section>
<div class="container">
<img src="thebean.jpg" />
<div id="topright"></div>
</div>
</section>
I'm not really sure if i got your question right without a figure that help me figure out the layout you are looking for.
Give a look at this picture and tell me if i got it right or not!
Layout testing
Here is the simple code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>Testing</title>
</head>
<body>
<div id="largerPanel">
<img src="https://i.pinimg.com/originals/aa/49/54/aa4954451f16847cb657e68e5f46538a.jpg">
</div>
<div id="floatPanel" class="halfPanel">
<img src="https://i.ytimg.com/vi/fB8MYCGFqC0/maxresdefault.jpg">
</div>
<div class="halfPanel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nIMQ30DM-OKazFBcLM4m9kq3_fzph-eBoiax6M88O5nncGyB">
</div>
</body>
</html>
Test.css
body{
width: 100%;
height : 100%;
}
.halfPanel{
width:50%;
height: 20%;
}
.halfPanel img{
width:100%;
height:100%;
}
#floatPanel{
float:right;
}
#largerPanel{
width: 100%;
height: 20%;
}
#largerPanel img{
width: 100%;
height: 100%;
}
If i got it wrong please post a simple paint image with some boxes that show the layout you want, i will be happy to help you through this!
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help