Webdesign - HTML and CSS

alpenwasser · May 13, 2013

Btw, The picture in the Main Container, is now at the right too, I had it in the center of the Main border..:/ Is there a way to fix it? I've tried float: Center and stuff, no work:(

Usually when you want to center something you use:

display:block;margin-left:auto;margin-right:auto;

Tried, didnt work :(

That's probably because you're lacking a

position: [value];

property. Z-index will only work for elements whose position property has been

explicity set to absolute, fixed or relative.

Z-index has a few pitfalls in its use, although it's not overly complex. Read more

here, here or here.

I'll give the background image a try tomorrow, I'm currently setting up my dad's

new office PC.

arkon · May 14, 2013

Hello, first post here! Here's what I've got for you:

HTML:

<!doctype html><html><head>    <meta charset="UTF-8">    <title>My Site</title>    <link rel="stylesheet" href="style.css"/></head><body>    <div class="content">        <div class="header">My Site</div>        <div class="side_container">            <div class="sidebar">                » <a href="Index.html">Start</a>                <br />                » <a href="Menu2.html">Livet</a>                <br />                » <a href="Menu3.html">Kändislivet</a>                <br />                » <a href="Menu4.html">Döden</a>                <br />            </div>            <div class="sidebar">                <h3>Skapelser</h3>                <ul class="lis">                    <li><a href="Musik.html">Musik</a></li>                    <li><a href="Film.html">Film</a></li>                </ul>            </div>            <div class="sidebar">            	» <a href="kontakt.html">Kontakt</a>            </div>        </div>        <div class="main">            <h2>Intro</h2>            <p>Blablabla</p>            <div class="pray1">	            <img alt="image" src="myimg.jpg" />            </div>        </div>    </div></body></html>

CSS:

body {    font-family: "Times New Roman";    background: #000 url(bg.jpg) no-repeat;    background-size: 100%;}p {    font-size: 17px;    color: #000;}.content {    width: 1000px;    margin: 20px auto 0 auto;    text-align: center;}.header {    width: 990px;    margin: 0 auto;    background: #999;    border: 5px outset #800000;    font-size: 60px;    color: #333;}.main {    display: block;    width: 755px;    margin: 10px auto 0 220px;    background: #999;    border: 5px outset #800000;    font-size: 22px;    color: #333;    padding: 15px 0 15px 15px;}.side_container{    width: 180px;    float: left;    text-align: left;    font-size: 18px;    color: #333;}.sidebar {    width:100%;    padding: 10px;    border: 5px outset #800000;    background: #999;    margin-top: 10px;}.lis {    font-size: 16px;}.bild {    float: left;    width: 80px;    margin: 0 1em 1em 1em;    display: block;    padding: 1px;    background: #999;}.bild img{    float: left;    border: 5px outset #800000;    width: 100px;    height: 140px;}.bild p{    float: center;    margin-left: 40px;}.pray img{    border: 5px outset #800000;    height: 260px;    widght: 320px;}.pray1 img{    border: 5px outset #800000;    height: 360px;    widght: 320px;}

This assumes that you have the background picture in the same folder and called "bg.jpg", and the CSS file is named "style.css".

alpenwasser · May 14, 2013

Arkon's code works for me. :)

Anyway, I've uploaded his (her?) code to here.

Screenshot of said code on my PC:

And a screenshot of index.html.

You'll notice that the background image is scaled slightly differently between the

two, you'll just have to choose which one you like better.

arkon · May 14, 2013

Arkon's code works for me. :)

...

His. ;)

But yeah, I feel like most of the code could probably be rewritten to be better, but if it works, it works.

alpenwasser · May 14, 2013

But yeah, I feel like most of the code could probably be rewritten to be better, but if it works, it works.

True, you can always optimize after having gotten a basic version to work. Besides, when

you're still learning writing perfect code is probably not the top priority. :lol:

One thing I did notice though:

.bild img{

is usually not what you want to do. A browser's engine parses the CSS selectors from

right to left, meaning in this case it first searches all <img> tags in the

HTML, and only then will it select those <img> elements that are actually descendants

(not just children, also grandchildren etc.) of elements with class .bild.

It doesn't make any noticeable difference in such a small page of course. But when you

have a page with several thousand elements this will make a difference, especially on

mobile devices which don't necessarily have the brute strength of their desktop/laptop

counterparts (yes, I know some people classify laptops under mobile devices, I'm talking

about cellphones and tables primarily).

There are tons of articles on the internet about optimizing CSS selector performance.

However, before jumping into that, I'd say it's probably more important to get the page

to work as intended at all. Then you can start to optimize markup structure and CSS

selectors (and minifying your CSS files and other niceties). It is a learning process,

after all. ;)

Hagge · May 15, 2013

Arkon's code works for me. :)

Anyway, I've uploaded his (her?) code to here.

Screenshot of said code on my PC:

And a screenshot of index.html.

You'll notice that the background image is scaled slightly differently between the

two, you'll just have to choose which one you like better.

True, you can always optimize after having gotten a basic version to work. Besides, when

you're still learning writing perfect code is probably not the top priority. :lol:

One thing I did notice though:
.bild img{
is usually not what you want to do. A browser's engine parses the CSS selectors from
right to left, meaning in this case it first searches all <img> tags in the

HTML, and only then will it select those <img> elements that are actually descendants

(not just children, also grandchildren etc.) of elements with class .bild.

It doesn't make any noticeable difference in such a small page of course. But when you

have a page with several thousand elements this will make a difference, especially on

mobile devices which don't necessarily have the brute strength of their desktop/laptop

counterparts (yes, I know some people classify laptops under mobile devices, I'm talking

about cellphones and tables primarily).

There are tons of articles on the internet about optimizing CSS selector performance.

However, before jumping into that, I'd say it's probably more important to get the page

to work as intended at all. Then you can start to optimize markup structure and CSS

selectors (and minifying your CSS files and other niceties). It is a learning process,

after all. ;)

The top one is bettert, I would like to see Pacs face :p

But how are u doing that, the code u gave me is putting my main bar way below that..:(

alpenwasser · May 15, 2013

The top one is bettert, I would like to see Pacs face :P

Keep in mind though that on different screen resolutions his face might be in a

different position.

But how are u doing that, the code u gave me is putting my main bar way below that.. :(

Well, all the code is right there:

Could you maybe post a screenshot of how it looks for you? I have tried this in Chrome,

Firefox, IE8 and IE10 and it works every time for me.

Maybe I'll try to re-write it from scratch, but there's not all that much that can be done

differently tbh (although the devil is in the details, as we all know ;)).

Hagge · May 15, 2013

Keep in mind though that on different screen resolutions his face might be in a

different position.

Well, all the code is right there:

alpenwasser.net/hagge/index.html

alpenwasser.net/hagge/pacstyle.css

alpenwasser.net/hagge/arkon.html

alpenwasser.net/hagge/arkon.css

Could you maybe post a screenshot of how it looks for you? I have tried this in Chrome,
Firefox, IE8 and IE10 and it works every time for me.

Maybe I'll try to re-write it from scratch, but there's not all that much that can be done

differently tbh (although the devil is in the details, as we all know ;)).

The Arkon file is perfect! :) I will try it and get back to you! :) Thx alot so far :)

arkon · May 15, 2013

Maybe I'll try to re-write it from scratch, but there's not all that much that can be done
differently tbh (although the devil is in the details, as we all know ;)).

Very, very true!

Bhups · May 15, 2013

Hello

I've been working in a new website, and it's starting to look like something :)

I however got some problems,

I got a contact form in a border, and I want this form to be at the bottom of the screen, at all times.

I've tried margin px but it just puts a space between the "contact" border and the acctual information border...My website is built with lots of borders.. :)

Anyway, thats the first problem, but other problem is that I cant figure out the "spoiler" code for the css/html..

Can somebody explain this to me, with steps :) Please!

And my last question...I open my website with IE and it works great..Then I use Opera and Chrome, and the borders just jumps all over the place..Like my CSS isnt working? Whats up with that? :(

I would LOVE some help please!

For the contact form?

{

postion:fixed;

bottom:0px;

}

Sign In

Webdesign - HTML and CSS

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

I Can't Recommend the ROG Ally X

Latest From Tech Quickie:

Microsoft Made Its Own CCleaner

Latest From TechLinked:

This Could Make AI Actually Useful

Latest From GameLinked:

Sony Goofed It

Latest From ShortCircuit:

Belle Delphine Keyboard Combo Unboxing

Latest From Mac Address:

Why did you buy an Apple Vision Pro?

Latest From Channel Super Fun:

I Swapped the CEO's Assistant For a Day!