Viewing HTML Widgets and positioning

  1. Portal Home
  2. Forum
  3. EverWeb
  4. Bug Reports

HTML Widgets and positioning



User: pumpkin 12 years ago
Helloes,

I started to use html widgets for header tags (h1 h2 ...) and I'm a bit confused why the positioning is such a mess when I publish them. Here an example:

In EasyWeb




Published




Not that I mind checking my site by publishing it to a folder first, but this is still very odd and makes creating a decent layout a rather hard task.

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>

Easyweb.png

Published.png
User: Paul-RAGESW 12 years ago
You could have style sheets in there that change the positioning in a way that EasyWeb won't parse.

You'd have to show your HTML Code here to know for sure.

-------------------------------
Paul
EverWeb Developer
User: pumpkin 12 years ago
I've put this in the head-code field:

<style type="text/css">
h1 { font-family: Life Savers;
font-size: 28px;
font-style: bold;
color: #e17b34;
}
h2 { font-family: Titillium Web;
font-size: 22px;
font-style: bold;
color: #70b83a;
}
h3 { font-family: Titillium Web;
font-size: 16px;
font-style: bold;
color: #367ce9;
}
</style>

And in the html widget it only says

<h1 align="center">Willkommen auf Singkehlchen.de</h1>

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: pumpkin 12 years ago
Here is another example:

Easyweb




vs published




Link: http://www.singkehlchen.de/musikgarten/index.html

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>

Easyweb.png

Published.png
User: Roddy 12 years ago
You need to reset margin and padding on each one or do it this way...

<style type="text/css">
h1, h2, h3 {margin: 0; padding: 0}
h1 { font-family: Life Savers;
font-size: 28px;
font-style: bold;
color: #e17b34;
}
h2 { font-family: Titillium Web;
font-size: 22px;
font-style: bold;
color: #70b83a;
}
h3 { font-family: Titillium Web;
font-size: 16px;
font-style: bold;
color: #367ce9;
}
</style>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 12 years ago
Thanks Roddy, that did the trick. Would still be nice if the preview in EasyWeb could take the paddings and margins into account when displaying them in EasyWeb ;)

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: Roddy 12 years ago
It's just the way that CSS works. If you don't set margin/padding the browser will use a default.

It's common practice to use a reset like this at the start of the stylesheet...

* {
margin: 0;
padding: 0;
}

At one time "border: 0" or "border: none" was added since older versions of Firefox ( and IE I think) added borders to images if you didn't specify none.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.