By kevinr1247 on

I'm having some trouble getting my layout to work. They're not falling in place like I expect. I'm trying to keep it very simple so that I can see the correlation between the template, CSS, and final output. It's like Drupal just takes over the layout and modifies the formatting. I know I missing some concept but I'm not sure what it is. The layout looks fine when it's attached to the stylesheet in my editor but as soon as I upload everything and set Drupal to read the template, only half of my CSS seems to work. Thanks for you help. Here's my template so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">

<html> 
<head>

 <title><?php print $head_title; ?></title>
 <?php print $head; ?>
 <?php print $styles; ?>
 <?php print $scripts ?> 

</head>


<body> 


<div id="container">
	
    
    <div id="register">REGISTER</div>
    
  	<div id="menu"><?php if ($primary_links): ?><?php print theme('links', $primary_links); ?><?php endif; ?>
    
    </div>
    
    <div id="logo"><?php print $logo ?></div>
    
    	<br><br>
  	
    <div id="leftMargin"><?php if ($left): ?><?php print $left ?><?php endif; ?></div>
  	
    <div id="content"><?php print $content ?></div>

</div>



<?php print $closure ?>


</body> 
</html>

CSS looks like this:


body {
	margin: 0px;
	background: #979797;
	font-family: "Andale Mono", Verdana;
	font-size: 12px;
	color: #888888; 
}



#container {
	background: #000000 url(images/background_02.jpg)
	repeat-x 0 0;
 	float: left;
 	width: 743px;
	height: 900px;
	
}

#menu {
	margin-left: 90px;
	margin-top: 40px;


}

#register {
	float: right;
	width: 160px;
	margin-top: 40px;
}


#content {
 width: 743px;

}

#leftMargin {
 width: 160px;
 margin-left: 80px;
 float:left;
}


#logo {
	width: 600px;
 	margin-left: 10px;
	margin-top: 8px;
}
⋅ Categories: Drupal 6.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

few things,

1) you have 2 opening <html> tags.
2) not much point in using an if statement INSIDE the html, normally you would do something like this;

<?php if ($left): ?>
  <div id="leftMargin">
    <?php print $left ?>
  </div>
<?php endif; ?>

3) whats the purpose of floating the main container? It will align left anyway.

4) what exactly are you hoping for, an image (photoshop image) would aid in understanding what you are trying to achieve.

Need help with IE?
Learn basic XHTML and CSS first.
Get smart with web specs.

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

kevinr1247 commented

Thanks for your response. I made the code changes that you suggested. Yes, no reason for the float. Not sure about the conditional logic inside the html though. I'm not experienced enough with drupal to know why it would be best to omit this.

I'm really just trying to control layout a bit better and understand how the template that I upload is translated by drupal. Drupal seems to override all of the CSS that I create. All the

tags are for positioning for the most part. I'm trying to control where the header, content, and links are placed but drupal sort of does its own thing. I might be able to control border thickness or drop a background image in for example, but actually positioning something in the layout is a different matter altogether. It's not working for me.

I'm obviously missing something. Here's what I'm going for...

http://www.neomediafest.com/

When I look at this design I see a background image that needs to be dropped in and just a few simple div tags to position the header graphic, a forthcoming menu, and the content for some underlying pages. If I can get to that point then I would like to add some more elaborate functionality with some of the modules that are available....but until I can understand what happens with the layout template I really can't do anything. I'm pouring over the documentation from 5 and 6 and the articles suggest that you should start with your HTML and CSS and then add the variables which is what the code above is trying to do.

Any suggestions on where to look or a new direction?

gforce301’s picture

gforce301 commented

Can you provide a link to the site?

Jeff Burnz’s picture

Jeff Burnz commented

Drupal's core CSS does not modify the layout. If your CSS layout is not working, it's an error in your CSS or the stylesheet is not loading? Are you pointing to it properly in the .info file?

If you're set on coding this from scratch and given that your design is pretty static, I would perhaps start by using absolute positioning CSS techniques (google it) - its more intuitive for new designers. When you have more dynamic content, such as when pages need to support many different types of content or the pages are always different lengths etc, floats really come into their own.

Given the simplicity of your splash page, maybe something like the Hunchbaque or Framework theme might be a goer. I just released a new starter theme for Drupal - http://drupal.org/project/genesis but it wont be available for download for another 6 hours or so - the genesis_LITE subtheme might be interesting for you.

Need help with IE?
Learn basic XHTML and CSS first.
Get smart with web specs.

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

kevinr1247 commented

Thank you kindly. I will follow your suggestions. Absolute will be easier to see. The .info page I believe is set up correctly.

What I'm doing now is just taking baby steps as I upload changes to my CSS. I'm looking at the id attributes in the

tags that are served up by drupal in the view source and I'm using those ids in the new CSS. For example "page" i used in the CSS and I was able to adjust the margins easily. Which raises the question....

Do I have to match the id attributes in the CSS I write to what is being served if I want to control the layouts? Is that the trick? If so what if I want to place my own

tags with corresponding CSS? Seems like I should be able to do that. Thanks again, I'll check out your theme too.