By JohnnyHa on

Hi!

I have created a view which lists the latest articles written. The problem is that they are listing below each other.
This has to be fixed with CSS but i am not sure what the ID of my blocks are.

I have tried with following without any results:

#block1 {
width:570px;
float:left;
display:block;
}

Basicly my block's content has an width of 285px, and i want 2 blocks side by side and then the rest should go below.
So thats why i wrote maximum width of 570px.

But i guess it aint reading the css. Probably #block1 aint right since its created with views. Any tips?
Tried Viewname-Block_Delta as well. No luck.

Any tips will be most appreciated!

I know i can use Style: Grid but somehow it aint styled properly. Article number two is a few pixels below the first one for some weird reason.

⋅ Categories: Drupal 6.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

View source on the content or use Firebug to find the block id's, trying guess them aint gonna work so well:)

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
JohnnyHa’s picture

JohnnyHa commented

Tried but couldnt find any ID for the block itself.
Here is the site: http://www.glhf.no/dev

As you can see here i have now set the style at Grid which does the trick, but weird bug! The article number two gets pushed down a bit as you can see.

(PS: This site is under heavy development and does not represent the quality of my work) :)

Karlheinz’s picture

Karlheinz commented

If you view the page in Firebug, you've got a lot of weird markup going on there. I'm guessing you're doing a block override that inserts <span> and <style> tags in there. I'd say get rid of those altogether. Stuff like that makes CSS incredibly hard to debug.

The Drupal styles in each block are views-field-title (the title), views-field-created (created info), views-field-teaser (the node teaser including the image and the text), and views-field-view-node ('Les mer').

Those are currently wrapped in a table; the rows have the classes col-1 and col-2, plus the first and last have row-first and row-last classes. (Check your CSS for row-first and see if that might be causing the misalignment problem.) The table data tags have the classes col-1 and col-2. All this will probably change if you change the style from Grid.

Firebug is your friend.

-Karlheinz

JohnnyHa’s picture

JohnnyHa commented

Not added any markup. I am calling out the block manually yes but thats with PHP and shouldnt add any markup.

<?php $block = module_invoke('views', 'block', 'view', 'viewname-block_delta');
print $block['content'];
?>

Thats wrapped around a div which positions the block and thats it :)
I have removed Drupal generated CSS as well but not the CSS that View puts it ofcourse.
So have no clue why it does this. Tried skipping the view styling (Grid) and styled it myself side by side but cant make it work.

Did a

.view-content {
width: 580px;
display: block;
float: left
}

This should make room for 2 news side by side, and the next one on the line below because of the width and float left. But aint working. I use Firebug myself, but as you say yourself. The markup is weird hehe. Ive tried looking at the first and row last classes without finding anything not normal.

Karlheinz’s picture

Karlheinz commented

Okay then, where did this code come from?

<style type="text/css">

<!--
.text {
 font-family: Arial;
 font-size: 16px;
 font-weight: bold;
 color: #60F;
 width: 175px;
}
-->

</style>

I can guarantee that neither Views nor Drupal core did that.

That code is being included on every table data cell - in your case, four times on the page. That's bad practice - all CSS should go into your theme's stylesheets (e.g. styles.css) and nowhere else.

I have found one screwed-up thing about Views. If you use the Table style, and have a Grouping field, it puts each grouping into its own table. This can certainly cause things to go out of whack, as the table cells won't align across groupings. To get around it, I found the specific table-data class for each view (in my case td.views-field-iid) and set the width in styles.css to a specific amount (25% in my case).

-Karlheinz

nevets’s picture

nevets commented

Width should reflect the width of a single block and should be no more than 1/2 the space for the sidebar. You will need to account for margin and padding appropriately (IE will be different)

JohnnyHa’s picture

JohnnyHa commented

I think i have found the problem.
On the div that has the one article displaying wrong it has a paragraph closing tag but spelled wrong!
It says <p/> This might be causing the problem.
But this is generated by Drupal itself, how on earth in heaven can i override this? I have turned off everything in my inputs filter as well, and drupal system.css . So basicly this is css generated from Views 2 by Drupal.

I better call Tom Cruise in for this one, we got ourself a mission impossible.

Jeff Burnz’s picture

Jeff Burnz commented

Validate your page, there are many errors, you are pushing shit uphill to fix the display problems with so many errors:

http://validator.w3.org/check?verbose=1&uri=http://www.glhf.no/dev/

Drupal does not write invalid code in this way, either you wrote that yourself or you are looking at in Firebug which may highlight broken or empty tags in this way.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
JohnnyHa’s picture

JohnnyHa commented

It was alot easier, it was the teasertext that was too long which broke the layout by a few pixels. Set a max amount of letters on that field now so it wont happen anymore. And yeah this is Drupal generated CSS.
If you validate even Drupal.org you will get 44 Errors. All the errors that comes up are Drupal generated believe it or not.

Jeff Burnz’s picture

Jeff Burnz commented

Well I very much doubt its Drupal spitting out broken markup, nor views, if it were that would be the first time I ever saw it. Don't get caught in the trap of thinking because d.o does not validate therefore you site should not. Drupal chooses to support some really old crappy browsers and is an older design that is currently being totally rebuilt. Validation is very important, if not for accessibility and other reasons simply to help eliminate problems.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
JohnnyHa’s picture

JohnnyHa commented

Yeah i know, i usually help people validate theyre sites and getting them to work in every browser. I have 2-3 lines of CSS code myself, all the errors on the validation site is by Drupal. I have not written all those CSS codes. Its generated by system.css and views.css to name a few. There is alot of weird markups going on i agree.