Just trying to create simple template, but dont know why text going out of div. here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
#include('qhymchildz.includes.head')
</head>
<body>
<div id="container">
<div id="header" class="panel">
ini headersssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<div id="main" class="row">
<div id="content" class="medium-10 columns panel">
<p>contentssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>
<div id="sidebar" align="left" class="medium-2 columns panel">
<p>salfjasjf;lajfja;jsfl;;asjf;lawoierwruowirowuriowrowrowurioweruiowrowerowurowuriowrowrowuroirour</p>
</div>
</div>
<div id="footer" class="panel">
ini footer
</div>
</div>
</body>
</html>
and here is the result
http://prntscr.com/5nwn5l
How to fix it ?
Thanks in advance.
Sorry as i cannot comment due to low reputation but is it possible to see your CSS code used as that would help alot.
At first sight it could be fixed by using word-wrap: break-word since you are using a solid line of text rather than that of one with spaces. if not that it may be an overflow-x issue. it may also be that if you are using a grid template as would be suggested by columns and rows, it may be an issue with that code that affects how the long string of text responds to lack of room.
Try breaking up that text into real words or some Lorem Ipsum
Really i would need to see your CSS, thanks.
Related
I'm creating a simple 2 column layout. The left column should be narrow and contains a vertical navigation bar, the right column will contain the main content of the site. I'm using bulma-css columns to create this layout.
The problem that I'm encountering is that depending on the horizontal windows size, part of the right side of the second column is falling off the page. So this column is not scaling appropriately.
Below is a minimal example that illustrates the problem. Depending on window size the button will (partially) fall off the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-narrow">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<div class="container">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
</div>
</body>
Good expected behaviour:
Bad:
Actually the problem is your .container class in the second column which has a width...better or remove it and use .is-one-third class in the first column to make it smaller or other [bulma grid column classes]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="columns is-mobile">
<div class="column is-one-third">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
I need a masonry grid like this:
Is this possibile to achieve that using flexbox only? Or any other way?
Don't want to use Masonry library or other library or framework.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<section class="pad-40 " style="background-color: #f1f1f1;height: 546px">
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://dummyimage.com/600x220/aaa/fff" width="100%">
</div>
<div class="col-md-4">
<img src="https://dummyimage.com/400x600/aaa/fff" width="100%">
</div>
<div class="col-md-4" style="top: -222px;">
<img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
</div>
<div class="col-md-4" style="top: -222px;">
<img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
</div>
<div class="col-md-4 ">
</div>
<div style="clear:both;"></div>
</div>
</div>
</section>
</body>
</html>
I believe CSS grid would be your friend here.
CSS Grid layout brings a two-dimensional layout tool to the web, with the ability to lay out items in rows and columns. CSS Grid can be used to achieve many different layouts. It excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn't have content structure, therefore enabling a wide variety of layouts not possible in tables.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Here's a fun and simple game to help you learn and understand CSS grids.
http://cssgridgarden.com/
I'm trying to create a menu bar, but somehow, when zooming out my last button always goes out of the menu. But it doesn't stay there. Does anyone have an idea?
<div id="tip"></div>
<div id="top">
<div id="menu">
<div class="menuButton"></div>
<div class="menuButton"></div>
<div class="menuButton"></div>
<div class="menuButton"></div>
<div class="menuButton"></div>
<div class="menuButton"></div>
<div class="menuButton2"></div>
</div>
</div>
</body>
</html>
The HTML. The CSS is in the fiddle below.
http://jsfiddle.net/Legruan/f7nzu/
I made this fiddle with the code in it so far.
Thanks in advance!
maybe try to use vieuwport ? this is how i fixed a problem like this
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I have a webpage I made here: http://jsfiddle.net/KM9HJ/
<!DOCTYPE html />
<head>
<title>Home</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img style="width:50; height:50; float:left;" src="Content/Portal%20Layered.png"/>
<img style="width:50; height:50; position:relative; left:-50px; z-index:2;" src="Content/Blank.png"/>
<div><h2 id="headerh2">Cody Shearer</h2></div>
</div>
<div id="wrapper">
<div style="background-color:#565656">
<div id="links">HOME</div>
<div id="links">ABOUT ME</div>
<div id="links">GALLERY</div>
</div>
<article id="para">
<p>About This Website</p>
<div id="paraL2"><p>About this page:</p> <div id="paraP">This is</div></div></article>
</div>
</body>
If you look at the div that says "About this page:" you will see that it is positioned to the far right of the div and part of it is cut off (you may have to resize the result area to see this). What I want the words to do is to stay on one line and be aligned to the left. From what I have seen the issue can be fixed by removing the "float:left" from the #links area, or It can be helped a little by removing the "width: 150px;" from #link. The only issue is that I spent a long time trying to get other s
adding clear:left may help you.
#para {
clear:left;
....
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
<style type="text/css">
.mydiv {
width:300px;float:left;background-color:#ff0000;height:250px;margin-right:10px
}
</style>
</head>
<body>
<div style="margin-left:auto;margin-right:auto;width:1000px;clear:both">
<div style="margin-right:auto;margin-left:auto;text-align:center;margin-top:5px;">This is the title</div>
</div>
<div style="margin-right:auto;margin-left:auto;clear:both;width:1000px;margin-top:10px">
<div class="mydiv">Div</div>
<div class="mydiv">Div</div>
<div class="mydiv">Div</div>
</div>
</body>
</html>
The problem is that the second and the third divs do not align properly (horizontally) with the first. For some reasons, a vertical offset makes the second and the third div appear a little lower than the first. Why is this?
Thankyou
PS
I am using Chrome 25, on MacOS X. Hope it helps somehow.
Its because you have clear: both; on the parent container of the three red boxes, if you remove that property all three will be aligned as expected.
You need to include the clear property after the last floated closing </div> or you can use a clearfix which uses the ::after pseudo-element on the container to clear floated elements within it.
You can see the container now respects the floated red boxes ..
jsBIN
Randomly poking around tells me the way to fix the offset is to remove the clear: both; declaration from the parent <div> of the three floated <div>s:
<div style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
</div>
To make the parent <div> "wrap around" the floated <div>s, you need to add a cleared <div> after the floated ones:
<div style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
<div style="clear: both;" />
</div>
You can also use a "clearfix" (for instance the one from HTML 5 Boilerplate on the containing <div> instead:
<div class="clearfix" style="width: 1000px">
<div style="…">Div</div>
<div style="…">Div</div>
<div style="…">Div</div>
</div>