Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Drupal: CSS property for a a floating box

Posted on 2010-09-16
5
Medium Priority
?
423 Views
Last Modified: 2012-05-10
On my website, that is made in drupal, I have a special area that contains language options and the login button. (top right area)

http://www.0815-taschen.de/

My question is, how do I make it float relative to the top header? so it dosent fly out of the header, Currently it's relative to the right, but as the window is resized the location changes. I understand this would be easy, but with Drupal as I am modifying the template and creating a new location(Its in a block) I can't just drop them in the template next to the logo.

My css:
#top_content {
	
	color:#03C;
	padding:5px;
	position:absolute;
	right:100px;
   
	top: 0px;
	width:150px;
	line-height: 10px;
	font-size:12px;
	
	text-align:right;
	height:20px;
	}

Open in new window






The page.tpl.php area looks as such:
</head>
<body class="<?php print $body_classes; ?>"><div id="top_content" class="top_content"><?php print $top_content ?></div>


  <div id="page">

Open in new window

0
Comment
Question by:deterius
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 334 total points
ID: 33691474
Put the top_content div inside of the <div id="page">  but after <div id="header"> and <div id="header_inner">.  Then you should be able to float it right.
0
 
LVL 17

Assisted Solution

by:Thomas4019
Thomas4019 earned 666 total points
ID: 33692237
You can make you own custom regions where ever you want in your theme.
0
 

Author Comment

by:deterius
ID: 33698432
thanks for the comments, so update: first of- "top_content div is a new custom region, however putting it in to "<div id="page">  but after <div id="header"> and <div id="header_inner">" didn't change much- moreover, I've added a containting div that contains the top_content div and added color backgrounds to show where they are.. BUT I can only see them when I am logged in!

They don't show up to anonymous users! Why?
0
 
LVL 17

Assisted Solution

by:Thomas4019
Thomas4019 earned 666 total points
ID: 33698478
Might be a caching issue, kind of out of my league here. Try pressing Ctrl + F5

I think this should make your life easier,
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
0
 

Author Closing Comment

by:deterius
ID: 34010770
Vague, not expert answer. Not even good understanding of a good issue - they should have asked questions to provide a good answer.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question