i'm trying to use CSS to make this code work in any horizontal measure. Like Horizontal Scrolling with Inline Block Working in Firefox, i've been unsucessful.
My code is ready and gives me the visuals i want, but when we zoom the page or use it in a smaller horizontal size, instead of adding a horizontal scroll bar, it breaks down.
<html>
<head>
<title>Gantt Display</title>
<style>
body {font-family:Verdana;font-size:10px;}
.gantt {overflow-x:auto;overflow-y:hidden;background-color:#ffffff;font-size:0;}
.gantt .head {display:block;}
.gantt .head .text {height:32px;display:block;text-align:center;font-weight:bold;background-color:#eeeeee;vertical-align:middle;font-size:10px;}
.gantt .head .month {display:inline-block;border-bottom:1px solid #eeeeee;}
.gantt .head .day {display:inline-block;width:32px;height:32px;text-align:center;background-color:#f8f8f8;margin:0;padding:0;vertical-align:middle;font-size:10px;}
.gantt .head .weekend {display:inline-block;width:32px;height:32px;text-align:center;background-color:#eeeeee;margin:0;padding:0;vertical-align:middle;font-size:10px;}
.gantt .chart {display:block;}
.gantt .chart .day {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#f8f8f8;margin:0;padding:0;}
.gantt .chart .weekend {display:inline-block;width:32px;text-align:center;min-height:256px;background-color:#eeeeee;margin:0;padding:0;}
</style>
</head>
<body>
<div class="gantt">
<div class="head">
<div class="month">
<div class="text">Setembro</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="weekend">S</div>
<div class="weekend">D</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
</div>
<div class="month">
<div class="text">Outubro</div>
<div class="weekend">S</div>
<div class="weekend">D</div>
<div class="day">3</div>
</div>
</div>
<div class="chart">
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="day"></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div class="day"></div>
</div>
</div>
EDITED THIS: answered!
And also, i'd like to understand why are spaces between the "vertical day bars" if "margin" and "padding" are both set to zero?
EDITED: Show the print screens of the problem
That code, that's almost as i want, leaves me with this "resize" problem:
Correct Page (when the page width allows the hole page to be displayed)
Deformed Page (when ... not)
The spaces that you asked, will answer your question. That spaces are totally normal, because inline-block means inline and block at the same time. Inline elements will follow the text line, and one space in the code is one space in the rendered document. That spaces occupy the size of the font-size. To solve the whole problem I suggest this:
.gantt { font-size: 0; }
.gantt .day,
.gantt .weekend { font-size: 1rem; }
By this way you remove all spaces between boxes and reset the font-size on days and weekend days. And that's all!
EDIT: Problem resizing
The problem of the resize is that the container is smaller than the content. You have two options:
1) Set a width to the container (32px * total cells + margin)
2) Set a property on the container that avoids to line breaking (white-space: nowrap)
So change your code with:
.gantt {
white-space: nowrap;
}
Related
This question already has answers here:
Very long words not wrapping in HTML/CSS
(3 answers)
Closed 4 years ago.
I have some arbitrarily nested div elements using display: inline-block like this:
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
Somebody has hidden a specific CSS rule somewhere that's something like this:
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
This prevents all my div elements from being sized smaller than 400px. How do I hunt down which rule is forcing the minimum width?
I've tried manually inspecting each div with Chrome's inspector, but my actual code is nested 20+ div elements deep and it's difficult to determine by inspection.
* {
box-sizing: border-box;
}
div {
border: 1px solid red;
padding: 25px;
display: inline-block;
min-width: 100%;
}
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
</body>
</html>
Go to the 'Computed' tab of the CSS styles. There, look for the 'min-width' property. Hover over the '400px' value and you will see an arrow. Click that arrow and it will jump you to the CSS rule that is enforcing it.
It turns out that I was asking the wrong question! My suspicion was wrong – there was no developer hiding CSS rules. Instead, it was some unbreakable text inside of the div elements.
There was a line of text in the div like Loremipsum....loremipsum that was unable to break properly. The div element cound not resize smaller than the width of this long "word".
Changing the word breaking strategy fixed my problem:
div {
word-break: break-word;
}
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I have the following code:
html
<div class="container">
<div class="float-left">
<img width="550" src="image.jpg" alt="" />
</div>
<div class="float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
css
.container{
width:960px;
}
.float-left {
float:left
}
.clear{
clear:both;
}
h1.new{
font-family: RockwellMT-Light;
font-size: 28px;
line-height: 31px;
}
I want the divs to act like 2 columns One will be the image and the second one should be text that can go down as much as it takes.
Since float left does not have a fixed width the problem is that the whole element h1 is jumping on the new line and the text does not goes on the next line.
I don't want to give fixed widths to the floating divs.
How can I prevent this?
You could remove class="float-left" from the second <div> and it would work.
you can try smth like this:
<div class="container">
<div class="something">something</div>
<div class="nextthing float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
.container {
position: relative;
}
.something {
position: absolute;
}
.nextthing {
text-indent: size_of_.something;
}
Or change float:left, to display:inline-block;
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
I am currently making a website for a college task and I am really confused on why the div I am trying to create is not appearing.
It doesn't seem to work since I added the code for the three boxes, they are meant to be the same width as the three boxes.
JsFiddle
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
</div>
You just need to add box-sizing property
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_three {
/*Other Style */
box-sizing:border-box;
}
Reference
Fiddle Demo
You Border-Width in each Box counts to the width.
Look at the Box-Model: http://www.w3schools.com/css/css_boxmodel.asp
Given what you said in the comments, a possible answer:
HTML at the bottom:
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
<div id="bigbox"></div>
CSS:
#bigbox {
width: 98%;
height: 300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
margin-top: 5%;
}
It seems to work for me. I can only get a solid line like you referred to if i leave the height out.
Its because css width only represents the content width. Total width is the combination of padding, margin and border.
Total Width=ContentWidth+Padding+Border+Margin
So giving width to 33% and some margin,padding and border is making it actually greater than 33%. Reduce the width size to achieve the desire results. Around 30 or 31% will be good.