| View previous topic :: View next topic |
| Author |
Message |
Dominique_71
Veteran
Joined: 17 Aug 2005
Posts: 1877
Location: Switzerland (Romandie)
|
 Posted: Tue Mar 12, 2013 7:52 pm Post subject: web site, php and css |
 |
|
I want to make a new design for a website. What I want to do is a site in 4 parts:
* A logo picture at the top that will use 100% of the width and that will not scale with Ctrl++ or Ctrl+-
* Under the logo, a menu on the left and the content on the right.
* At the bottom, a footer with additional text.
.
My other requirements are:
- it should use 100% of the display (the window of the navigator)
- When I zoom with Ctrl++ or Ctrl+-, I don't want the logo to zoom.
- I want to be able to easily change the look with CSS, inclusive the logo.
I already have some php files from the old site. From those files, I made a preview here showing what I want to make. All the php files are plain php (they are not generated by a database or another software). It scale nicely, exactly like I want.
Is it possible to modify those php files in order to apply css style on them, or do I have to use some other technique for that?
If it is possible to use php with css, I guess this is similar to html and css, or xhtml and css, but I didn't find any tutor or reference on this.
_________________
"Confirm You are a robot." - the singularity |
|
| Back to top |
|
 |
Ant P.
Watchman
Joined: 18 Apr 2009
Posts: 6920
|
| Posted: Wed Mar 13, 2013 5:16 pm Post subject: |
|
|
| You can't block Ctrl++/Ctrl+− unless the user specifically sets it to only zoom text. |
|
| Back to top |
|
|
Dominique_71
Veteran
Joined: 17 Aug 2005
Posts: 1877
Location: Switzerland (Romandie)
|
| Posted: Wed Mar 13, 2013 8:59 pm Post subject: |
|
|
If you take a look at the preview using php files, it work. When you zoom, the header with the logo will not zoom, but the rest of the page will. At least with firefox and epiphany.
_________________
"Confirm You are a robot." - the singularity |
|
| Back to top |
|
|
Ant P.
Watchman
Joined: 18 Apr 2009
Posts: 6920
|
| Posted: Wed Mar 13, 2013 11:22 pm Post subject: |
|
|
| Oh I see. It works there because it's set to 100% of the page width and the page is 100% of the browser width. Any other method of setting the image size wouldn't work that way though. |
|
| Back to top |
|
|
Dominique_71
Veteran
Joined: 17 Aug 2005
Posts: 1877
Location: Switzerland (Romandie)
|
| Posted: Thu Mar 14, 2013 1:04 am Post subject: |
|
|
The logo is called from a separated php file. I experimented with that file to load one CSS styles file. And it work, I can apply the CSS on the php file. This made me to begin to understand the relation between php and xhtml.
I experimented many other ways to include the picture, and you are right, the zoom will not work the same. Next, I will try to make separated versions of this file with links to the different logos and to the corresponding CSS files. So, instead of loading different styles, I must load different version of that file.
_________________
"Confirm You are a robot." - the singularity |
|
| Back to top |
|
|
dman777
Veteran
Joined: 10 Jan 2007
Posts: 1004
|
| Posted: Thu Mar 14, 2013 1:17 am Post subject: |
|
|
| Ant P. wrote: | | You can't block Ctrl++/Ctrl+− unless the user specifically sets it to only zoom text. |
Are you sure? I think it might be possible to set up an event listener for that keystroke in javascript. Now....will which will over ride which...the browser default or javascript....
| Quote: | | If it is possible to use php with css, I guess this is similar to html and css, or xhtml and css, but I didn't find any tutor or reference on this. |
yes, it is. You can make html echo statements in the php and style it with a CSS sheet. However, it would be best to have a html sheet and have it called by php. Wouldn't be hard at all and is quite normal. Plenty of examples out there for that. Keep in mind PHP is strictly server side langauge....no client what so ever. It may serve some client html code....but still server side. |
|
| Back to top |
|
|
Ant P.
Watchman
Joined: 18 Apr 2009
Posts: 6920
|
| Posted: Thu Mar 14, 2013 3:00 am Post subject: |
|
|
| Dominique_71 wrote: | | I experimented many other ways to include the picture, and you are right, the zoom will not work the same. Next, I will try to make separated versions of this file with links to the different logos and to the corresponding CSS files. So, instead of loading different styles, I must load different version of that file. |
If you want to load a higher resolution image based on the browser size, that can be done with CSS media queries.
You can keep the rest of the code the way it is now, and add something like:
| Code: | @media (min-width: 800px) { body > img:first-child { content: url(artwork/top-large.png) } }
|
|
|
| Back to top |
|
|
Dominique_71
Veteran
Joined: 17 Aug 2005
Posts: 1877
Location: Switzerland (Romandie)
|
| Posted: Thu Mar 14, 2013 11:28 am Post subject: |
|
|
| Ant P. wrote: |
If you want to load a higher resolution image based on the browser size, that can be done with CSS media queries.
You can keep the rest of the code the way it is now, and add something like:
| Code: | @media (min-width: 800px) { body > img:first-child { content: url(artwork/top-large.png) } }
|
|
Thanks for the suggestion. My concern is more about wide screens and logo height. At 100% width, the actual logo can be too height for a 16:9 screen.
_________________
"Confirm You are a robot." - the singularity |
|
| Back to top |
|
|
Dominique_71
Veteran
Joined: 17 Aug 2005
Posts: 1877
Location: Switzerland (Romandie)
|
| Posted: Sat Mar 16, 2013 5:32 pm Post subject: |
|
|
I have done it. Different styles with a style chooser in php: AlsaPlayer.
It look much like the old site for now. The CSS can be expanded a lot if wanted, but first I will focus on code validation... I inherited this site with the project, and this is a lot of validation errors, even if it work fine.
_________________
"Confirm You are a robot." - the singularity |
|
| Back to top |
|
|
|
Portage & Programming
