As the title states, I am trying to get help with a CSS grid code on a Tumblr theme. So far everything works great, with just two issues: there is a grey background that shouldn't be there in the first place on the posts, and all grid posts are the same length when they should be different sizes.
https://imgur.com/a/5TvwOBv Here is an image with the code so far and a preview of how it looks. Most of the grid code is in ".content". Any help received for this issue is greatly appreciated.
Edit: Someone mentioned I should paste the code as a block, so here you go!
.content {
position:flex;
{block:IfGridLayout}
top:0px;
display:grid;
grid-template-columns:1fr 2fr;
break-inside: avoid;
max-width:800px;
{block:IndexPage}
left:270px;
width:990px;
{block:IndexPage}
{block:PermalinkPage}
top:0px;
float:right;
width:540px!important;
{/block:PermalinkPage}
{block:IfGridLayout}
}
.posts {
position:flex;
{block:IndexPage}
{block:IfGridLayout};
{/block:IfGridLayout}
{block:IfNotGridLayout}
width:540px!important;
{/block:IfNotGridLayout}
height:auto;
{/block:IndexPage}
{block:PermalinkPage}float:right;width:540px!important;{/block:PermalinkPage}
margin:0px 0px 50px 40px;
padding:30px;
background:{color:Content Border Background};
Related
I've a little problem with arranging nav/div on a website. Google didn't revealed me a solution, but to be honest, I didn't really know how to search for it...
What I'd like to have at the end:
On the left side, a <nav> (data selection) is visible. On the right side, several <div> (graphs) are shown like a table with 2 columns and infinite lines, resp. max. two graphs side by side. The field of the <nav> shall be independently which means no <div> from the right side should be below of the <nav>.
How I have to implement the css file?
If you click this hyperlink, you'll see the current situation of the arrangement:
Screenshot of the nav and the divs
Later on: the goal is to realize a Drag&Drop behavior as described here: HTML5 Drag&Drop. It should be possible, to drag the data from the <nav> and to drop it into any of the graph-<div> for visualization.
Thanks!
In your CSS try:
display: inline-block;
CSS
nav {
width:30%; //<----Occupying 30% of total width, change it as required
float:left;
}
#charts-wrapper {
float:left;
width:68%; //<----Occupying 68% of total width and occurs on right of nav, change it as required
margin-left:1%;
margin-top:10px;
}
.charts {
float: left;
width:32%; //<-----Equal area within charts
margin-left:0.5%;
}
Demo Fiddle
From what i understand from reading your question you would like to have a navigation bar on the left and another container with images/graphs on the right?
Here is a js fiddle I put together quick demonstrating floats: http://jsfiddle.net/HzS3m/1/
HTML:
<body>
<nav id="nav">
HTML
CSS
JavaScript
jQuery
</nav>
<div id="graphs">
<img src="#">
<img src="#">
<img src="#">
</div>
</body>
CSS:
nav{
width:20%;
height:200px;
background-color:#f00;
float:left;
}
#graphs{
width:80%;
overflow:auto;
background-color:#ff0;
float:right;
text-align:center;
}
img{
width:300px;
height:90px;
border:1px solid #000;
}
Floats are a good way to align html/div elements side by side.
Hope this is of some help to you.
i dont know how to say (i think my english is not very good), but i need help for putting 4 same divs in to one css code.
Problem:
float:left; margin:10px 20px 10px 0;
As you can see at this DEMO, tab number 2 and 4 does not fit to the space. There is free space at the right corner, but the max spacing is 20px.. is there even possible to fix this problem without jquery?
Sorry for bad english, and thanks for any answers!
Update your tabs css as mentioned below :
.tabs
{
float:left;
margin:10px 0px 10px 0;
width:50%;
height:100px;
background:grey;
}
Live Demo
you can add last class with marign-right:0 !important;
my example is here and adjust width if it is helpful then ok otherwise let me know i will give you another technique
.tabs {float:left; margin:10px 20px 10px 0; width:48.5%; height:100px; background:grey; }
.last{ margin-right:0 !important;}
I am new to HTML/CSS and have been working on a website by editing an existing template with HTML 5 responsive features. My workflow consisted of checking back and forth between the code and the Chrome browser.
After I finished the website and was happy with the results, I checked to see how everything was displaying in Firefox and Safari.
To my shock, I suddenly saw that in Firefox the images on a couple of pages were sent completely out of alignment to the far right of the browser (so much so, that I would have to use the horizontal scroller to see the images fully). Throughout the whole development process I had no such problems with Chrome.
However, subsequently I have seen that there are also more slight image display errors for the website in Chrome and Safari on the iPad.
So far I have looked through the questions on this site and also run the w3 online html and css validators. None of these things have worked.
Below I have provided the html of one of the affected images and the relevant css below that.
<figure>
<img src="img/image.jpg" alt="Some text">
<figcaption>Some Text
</br>
(Photo credit: Daniel Easterman)
</figcaption>
</figure>
#main_article img
{
display: block;
border: 0;
max-width: 100%;
height: auto;
padding: 20px 0;
border-bottom: 1px solid #D6D0C1;
}
#main_article figcaption
{
line-height: 25px;
font-size:14px;
max-width:900px;
width:auto;
}
I hope someone can help me figure out why there is this discrepancy between chrome and firefox and what I can do to solve the problem so the images display nicely on both browsers. Thanks very much in advance!
I've looked at your code and can't find anything wrong. Even tested it on jsFiddle.
The problem you're having must have something to do with whatever styling you have for [body] or [container], etc.
basically, you might want to provide the bigger picture so we can help. Maybe share with us the entire style sheet, or whatever is relevant, perhaps the #main_article?
Another thing, is maybe firefox is not happy with custom elements and perhaps you should change figure and figcaption into classes instead (just a guess)
The full main article section is below. Also attached is a screenshot showing the problem in firefox.
#main_article
{
position:relative;
width:auto;
max-width:900px;
margin: 0 auto 20px auto;
}
#main_article h3
{
margin:35px 0 0 0;
font-size:25px;
border-bottom: 1px solid #D6D0C1;
padding: 20px 0;
margin-bottom: 20px;
width:auto;
float:left;
max-width:900px;
}
#main_article h4
{
line-height:25px;
width:auto;
float:left;
font-weight:900;
max-width:900px;
}
#main_article p
{
line-height:25px;
width:auto;
float:left;
font-weight:normal;
padding: 5px 0;
}
#main_article p a
{
text-decoration:none;
color:#00bfff;
}
#main_article p a:hover
{ text-decoration:underline;}
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title.
I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.
This is what I have:
http://www.pojotlan.com/example1/
It works fine with Firefox 14.0.1, Chrome 21.0.1180.6 and Safari 5.1.7, this, with (file:estilo.css) #contenido line height is used to make it fit in Safari and Chrome.
this is the short version of the included 3 css files...
html {height:100%;}
body {height:100%;}
div#Tabla {display:table; height:100%;}
div.row.main {display:table-row-group; height:auto; min-height:100%;}
div#main {display: table-cell; position: relative; height:auto; min-height:100%;}
div#contenido {display:inline-block; position: relative;
height:100%; min-height:100%; line-height:100%;}
section {height:auto; min-height:100%;}
if I change its position to absolute, i got the same look on Chrome 21.0.1180.6 and Safari 5.1.7, Opera 12.
as you can see, #contenedor wont fit 100% height on Opera and IE. How can I fix this?
I'm really new to css styling and stuff, so I don't get what is wrong.
Thank you in advance :)
ps. yes, maybe I am messing everything with css display:table and stuff, but thats where google sent me... haha xD so, yes, you can basically tell me to start again without tables. (I am trying that already, with less results.)
I couldn't make it as I were, so this is what I did.
CSS File:
body, html {border: 0px; margin: 0px; padding: 0px;
height:100%; position:relative; width:100%;}
#head
{
position:absolute;
background-color: #98a;
height: 100px;
width:100%;
top:0px;
}
#footer
{
position:absolute;
background-color: #e46;
width:100%;
height:20px;
bottom:0px;
}
#content
{
position:absolute;
background-color: #dee;
height:auto;
top:100px;
bottom:20px;
width:100%;
}
body:
<body>
<div id="head">#head</div>
<div id="footer">#footer</div>
<div id="content">#content</div>
</body>
The important part, was that content is absolute, and top/bottom.
so, this is all.
thank you :D
You may try to use the min-height IE hack :
body, html {
min-height:100%;
height:auto !important;
height:100%;
}
Hope this helps!