Skip to main content ↑ ↓
Topic: HTML and CSS help needed (Read 3405 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

HTML and CSS help needed

I love to work with design and colors, but I'm not really into coding. :-[  I tried to learn and solve my little problem with tutorials in the net, but it didn't work out. So help is really really appreciated!

I want to create a simple website with a navigation frame on the left, height should be the whole window, content frame on the left and some buttons in the upper right corner. See my drawing please where navigation is blue and buttons are green.

The problem is: I have a white frame on the top of the page (seems to be the "navigation_top"), the navigation frame doesn't reach the top of the window, and the buttons on the right don't have the correct height. Seems they are orientating on something else but not their height.

I attached my files. I'm sure they are way too complicated and full of coding flaws. :-X

I hade to make a txt file out of index.html 'cause html files are not allowed to attach.

Re: HTML and CSS help needed

Reply #1 –

Hello!

I would add one more class into your code:
Code: [Select]
<div class="top_top"><div id="left">
		<div id="txt_left">
		<h2>A</h2>
		</div>
		<ul id="navigation">
			<li><a href="reg.html">1</a></li>
			<li><a href="konto.html">2</a></li>
			<li><a href="profil.html">3</a></li>
			<li><a href="layout.html">4</a></li>
			<li><a href="mit.html">5</a></li>
			<li><a href="benach.html">6</a></li>
			<li><a href="entw.html">7</a></li>
		</ul>
		<div id="txt_left">
		<h2>B</h2>
		</div>
		<ul id="navigation">
			<li><a href="impressum.html">1</a></li>
			<li><a href="impressum.html">2</a></li>
			<li><a href="impressum.html">3</a></li>
			<li><a href="impressum.html">4</a></li>
			<li><a href="impressum.html">5</a></li>
		</ul>
		<div id="txt_left">
		<h2>C</h2>
		</div>
		<ul id="navigation">
			<li><a href="impressum.html">1</a></li>
			<li><a href="impressum.html">2</a></li>
			<li><a href="impressum.html">3</a></li>
			<li><a href="impressum.html">4</a></li>
			<li><a href="impressum.html">5</a></li>
			<li><a href="impressum.html">6</a></li>
		</ul>
	</div></div>

and then add this into your css:
Code: [Select]
.top_top
{
	position: absolute;
	top: 0;
}


Now to make the navigation go to the top right, again one more class:
Code: [Select]
<div class="top_buttons"><div id="header">
		<div id="navigation_top">
			<a href="index.html">Einführung</a>
			<a href="impressum.html">Impressum</a>
			<a href="http://www.google.de">Google</a>
		</div>
	</div></div>

and put this anywhere in your css:
Code: [Select]
.top_buttons
{
	
	position: absolute;
	top: 0;
	right: 0;
}

Re: HTML and CSS help needed

Reply #2 –

Thanks, it worked! :)

Is there an easy way to let the left navigation frame reach the bottom of the window too? O:-)

Re: HTML and CSS help needed

Reply #3 –

I'm not sure what do you mean, on my page it is on the full height even when scrolling.

Re: HTML and CSS help needed

Reply #4 –

Really? Oh... Maybe a problem with the IE9 here at my office. I will check it at home later.

Re: HTML and CSS help needed

Reply #5 –

Most likely it is, but you can solve it by editing the css code I mentioned already, just add the height in %, so it looks like this:

Code: [Select]
.top_top
{
	position: absolute;
	top: 0;
	height: 100%;
}

Re: HTML and CSS help needed

Reply #6 –

Thanks! :)

Re: HTML and CSS help needed

Reply #7 –

Hm, it seems my Chrome has the same problem even with "height: 100%". The left frame doesn't reach the bottom of the browser window. It stops after the last menu entry: http://hilfe.joerghelfmann.de/download.html  :o

Re: HTML and CSS help needed

Reply #8 –

http://jsfiddle.net/emanuele45/RuzS5/

I removed some markup and used display: table-row/cell, see if it's what you were looking for. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: HTML and CSS help needed

Reply #9 –

Looks different now. The navigation frame has a white space around it, the headings lost their spacing and the hover effect there doesn't reach the right line of the frame. Need to be tuned. 

Re: HTML and CSS help needed

Reply #10 –

Puh, I'm done with coding. I use a background image right now, which works perfect.

Code: [Select]
#wrapper {

width: 100%;
background-image: url(images/hintergrund.png);
background-repeat: repeat-y;
position: absolute;
top: 0px;
height: auto !important; /* normale Browser */
height: 100%; /* IE6: setzt dies wie min-height um*/
min-height: 100%; /* normale Browser */
margin: 0px;
 }
Thanks for all the support in this matter.  :)