Last week I discovered the Compass grid Singularity, which is impressing.
I'm going to design my next project based on Singularity.
Unfortunately I need to use a fixed grid (width=1024px).
Is it possible to design a fixed grid with Singularity?
Thanks
Singularity works a little bit differently than other grid systems in that it only concerns itself with the grid and not the container. If you'd like a fixed container, simply add width: 1024px; to whatever your container class is, and you'll have a fixed width container.
You’re in luck because yes it is possible!
Just set width: 1024px; on whatever element contains your columns:
HTML:
<div class="container">
<article>stuff</article>
<aside>stuff</aside>
</div>
Sass:
.container {
width: 1024px;
margin: 0 auto;
}
Your markup may be different, but that is one solution.
Related
I have a ModelAdmin which stores images among other things. I can do thumbnails up to a certain size and download them but is there a way to display a larger version of the image while in the CMS admin?
I think if I used the UploadField.ss template and added some custom code in there to display it, it could work however it would then be displayed through the CMS. Does SilverStripe provide an easy way to do this?
You can set the height and width of the upload field preview like that
UploadField::create('Image', 'Bild')
->setPreviewMaxWidth(120)
->setPreviewMaxHeight(120)
->addExtraClass('big-preview');
But the container size seems hardcoded in css so you need to change that too
.big-preview .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview {
height: 120px;
line-height: 120px;
width: 120px;
}
.big-preview .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info {
margin-left: 135px;
}
I don't know if that's the best way to do it, cause it seems a little bit hacky, but it works.
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
in my Joomla template is of course the component included:
<jdoc:include type="component" />
That fills the whole width of the parent container at the moment (with margins). The parent container has a background that stretches from the top of the site to the bottom of the component. What I want to do is add a position after the component to place a module there, but I want it next to the component.
But once I make the component float:left and add a width:80% or something so the module on the new position will float next to the component. But, the background from the parent container changes when I add a width other than 100% to the component and stops before the component begins.
How can I have the component have a smaller width than 100% and float:left with another position next to it without changing the background of the parent container?
Edit: I like to add that I cannot use overflow:hidden on the parent container since another element will be clipped if I do. Adding a background to component and the other position won't work either since the original background is wider.
Edit2: I found a solution to my problem. For future reference if anyone is interested: the float clearing part on this page described my problem and clearing the float by adding a <div style="clear: both;"></div> after the last floating element solved my problem. If anyone has a cleaner, better solution I love to see it!
I'm not sure which version of Joomla you're using, but if it's 3.x, then you can use the clearfix class that comes with Bootstrap. It's a cleaner and more efficient approach to adding a clear div at the end of the parent element. So simply add the following to your parent container:
class="clearfix"
If you're using Joomla 2.5 then you can add the following to your template css file:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
and then add the class as mentioned above.
Hope this helps
I'm trying to edit a wordpress theme and I'm getting some problems with some images that just don't want to appear on IE8. Other versions of IE render the website as it should, but IE8 gives me this headache that I don't know how to cure.
Please take a look.
I really don't have any clues why this is happening.
Help!
The problem is caused by the images having this CSS rule:
max-width: 100%;
To fix it, you can remove that rule altogether if you don't actually need it, remove it just for Internet Explorer 8 (see this question), or add these two CSS rules to the parent a tag:
display: block;
width: 300px;
You have issue with your CSS on IE8. Try adding "width:30%;" on the div that holds the image something like this:
<div class="hentry post publish post-1 odd author-admin category-oferte-pelerinaje" id="post-32">
<div style="float: left; width: 30%;">
<A title="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" href="http://pelerinaje.tapet-online.ro/pelerinaj-la-schitul-sfantului-ierarh-modest-judetul-arges/"><IMG class="archive-thumbnail featured" alt="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" src="http://pelerinaje.tapet-online.ro/wp-content/uploads/2012/12/117491_ierah-modest-220x150.jpg" width=300 height=225></A>
What is currently considered the best way to clear CSS floated elements that will:
Keep the HTML markup as semantic and free of unnecessary elements as possible, and
Be a cross-browser, cross-platform solution that works reliably for the majority of browsers?
This isn't a graphic design question. It's a CSS one, so belongs on StackOverflow.
That said, the answer for keeping the HTML clean is simply to give the parent an overflow. So if your markup is:
<div class="wrapper">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
you can give wrapper an overflow:
.wrapper {overflow: auto}
And now .wrapper will contain both the floats.
That's usually all that is needed.
Sometimes, in older IEs, the container also needs a width.
You can make this more complicated, but a simple way is to add a class to your CSS called .clearfix with this attribute:
.clearfix {clear: both;}
Then just insert a tag underneath what you want to clear.
Google clearfix for more modern ways to define the tag.
The best method I've seen for this is using :before & :after pseudo elements for modern browsers and zoom: 1 for older versions of IE.
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
More info here:
http://nicolasgallagher.com/micro-clearfix-hack/
a little tricky, but it's work for modern browser :)
.wrapper::after {
content:"";
clear:both;
}