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;
}
Related
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.
Let's say I have some structured content in HTML – for example text in paragraphs grouped into some sections. And let's say I have another instance of the same structure and I want to display both contents as two columns side by side using HTML and CSS. How to do that? The point is that I want that corresponding elements (paragraphs, sections) inside the columns are aligned so they start at the same height.
Examples of such structures may be a bilingual page, or a source code together with numbers of lines or with some side comments to individual lines.
The only idea I have is to use a table, but I'm not sure it is the best solution. I want to be able to select the content as if the column was an ordinary web page, but selecting in a table works in a way that cells in a row are selected first.
An example follows. Recall that I want the corresponding elements to start at the same height.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.main {
margin: auto;
width: 500px;
}
.column {
float: left;
width: 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
</div>
</body>
</html>
If you want each section/subsection to start at the same height I would suggest to do like this:
<div class="main">
<div class="row">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>This text might also be longer so you need to push the next section's as well to start at the same height</p>
</div>
</div>
</div>
Same (almost) as a table but with div's.
I'm no "flex-box" expert so that might be a way, though with less broad browser support.
If you can't/don't want to use the "row" elements (and no/can't/don't want flex option) you will need a javascript snippet that iterate through your elements and compute margins to be set.
UPDATE
Check these 2 links, they will help you set this up as you like using flex:
- https://chriswrightdesign.com/experiments/using-flexbox-today/#card-layout
- http://codepen.io/imohkay/pen/PwPwWd/
A future proof way without using javascript.
UPDATE 2
And this one has some really cool grid solutions:
- https://philipwalton.github.io/solved-by-flexbox/demos/grids/
Well, I dont know what exactly You want... I thing that You might want two sections side-by-side, where You can place anything... Thats what I found:
make two div's <div id="first"> and <div id="second">
and place what You want in them. Now css:
#first {float:left;width:50%;}
#second {float:right;width:50%;}
Make sure You have body {padding:0; margin:0;}
If I understand your question correctly, you are searching for an HTML-structure which shows two items next to each other. Each of the properties of this item (i.e. the subsections) should have the same height. And, when the user selects the text, then the whole row (i.e. the same property from both items) should be selected.
I have the feeling that in order for the user to be able to select content the way you want, the structure needs to be correct, as I believe that the browser selects content according to the structure (not sure, this is always true though).
The question is, if you are free to use any HTML-structure you like?
When I try below example, it works for me. The solution is to use a list (ul with li) per "property" (row), making the lis display as inline-block. That way, they don't break and, as they are block elements, they always have the same height per "line". With vertical-align: top; all content starts at the beginning of the element.
I adjusted the content so we definitely have different line heights and wrapping, just to be sure it works.
Styling:
<style>
ul {
list-style: none;
}
ul li {
display: inline-block;
vertical-align: top;
width: 20%;
}
</style>
HTML:
<ul>
<li>Section 1</li>
<li>Section 2<br/>(with new line)</li>
</ul>
<ul>
<li>Some text</li>
<li>The text translated to another language, which may be longer.<br /><br />
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer. </li>
</ul>
<ul>
<li>The text translated to another language, which may be longer.
The text translated to another language, which may be longer.</li>
<li>Some text</li>
</ul>
Thank to LGSon, I have learnt about flex. I tried to put together a solution. The following code somehow works, but there are some issues:
One has to add `order` attribute to all elements.
For some reason flex doesn't overlap margins like it is done in standard situation so all the vertical spaces are bigger.
It would be know hard to e.g. add a border around whole column.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.container {
margin: auto;
width: 500px;
display: flex;
flex-wrap: wrap;
}
.container > * {
flex: 0 0 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="container">
<h1 style="order: 1">Section</h1>
<p style="order: 2">Some text</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
<h1 style="order: 1">Section</h1>
<p style="order: 2">The text translated to another language, which may be longer.</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
</div>
</body>
</html>
Use css column-count CSS property: https://css-tricks.com/almanac/properties/c/columns/
Update
After re-reading the question, I think if you want both columns to start at the same height, you can use min-height on both columns, but be aware that the content will later push the height as it grows.
To maintain the height even with content, put a fixed height then have apply overflow-y:auto; or overflow-y:scroll. That way both boxes will have the same height, and can be scrollable in case content grows
So you can see what I currently have here: https://steelcowboy.me
Basically what I want is a white content area, grey on the sides and my blue navbar. I don't want any grey atop or below the white part (i.e. I want grey on the sides only, white in the middle). However, I'm not sure what I need to do -- I tried different display options for the container element, but the one that worked (flex) then messes up all the content inside. I feel like this is a really simply fix, but can't quite seem to get it. Anyone have an answer? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Steelsite</title>
<meta charset="utf-8">
<link href="/css/materialize.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#3f51b5">
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style>
</head>
<body>
[navbar in here]
<main>
<div class="container white">
<h3 class="center-align">Welcome to the site of James Heald</h3>
<div class="row">
<div class="col s12 m6">
<div class="flow-text" style="font-size: 125%;">
<p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p>
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p> </div>
</div>
<div class="col s12 m6">
<div class="center-align">
<img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div>
</div>
</div>
<div class="divider"></div>
<h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts
down the system for days.
</p>
<div class="container center-align">
<img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img">
</div>
</div>
</main>
<script src="scripts/google.js"></script>
</body>
</html>
The problem is this selector:
h3 {
margin: 1.46rem 0 1.168rem 0;
}
It is setting a top margin which is pushing down the rest of the container.
If you set margin-top: 0 to that specific element, it should remedy the issue.
The space is contributed by your heading, remove the top margin on it and you're good. The solutions below illustrates how to fix them using inline styles but you should really consider using css classes :)
Solution 1: remove top margin on the h3, either inline or via a css class.
<h3 class="center-align" style="margin-top: 0px;">Welcome to the site of James Heald</h3>
Solution 2: Add a top padding to the container, either inline or via a css class. This might be a better approach as it does not interfere with your h3 classes, since you might want the top margin elsewhere on your site.
<div class="container white" style="padding-top: 10px;">
To make the container span the whole height, make sure all parent elements has height: 100%. e.g.:
<main style="height: 100%">
<div class="container white" style="padding-top: 10px; height: 100%">
...
Solved by adding overflow:auto to container
I am new to bootstrap and I was trying the following stuff. I made 3 columns, where each column has 2 paragraphs. Using CSS I defined color scheme for medium-sized-screens , large-sized-screens and extra-small-screens.
Initially the color that I see is orange. That is just the color I expected. But when I re-size the screen from large to extra-small I do not see any color change. I cannot get the reason for it ? What is the mistake that I am making ?
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='css/bootstrap.css' />
<style>
.col-md-4 {
background-color: yellow;
}
.col-xs-4 {
background-color: red;
}
.col-lg-4 {
background-color: orange;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-lg-4 col-xs-4 col-md-4'>
<p> You shout it out, But I can't hear a word you say !</p>
<p> Beqarar karke humein yun na jaiye..Aapko hamari kasam laut aaiye</p>
</div>
<div class='col-lg-4 col-xs-4 col-md-4'>
<p> I have started liking David Guetta's work !</p>
<p> I really liked his song 'Titanium' :-)</p>
</div>
<div class='col-lg-4 col-xs-4 col-md-4'>
<p> I am enjoying the saturday afternoon and it is 3:24 by clock.</p>
<p> How about going for a movie ?</p>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/bootstrap.js' />
</body>
Your rules arent using media queries, they are always added, so the last will always take effect.
If you want to modify their existing styles you should look into using mixins with Bootstrap's less files.
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