Gentoo Forums
Gentoo Forums
Gentoo Forums
Quick Search: in
web site, php and css
View unanswered posts
View posts from last 24 hours

 
Reply to topic    Gentoo Forums Forum Index Portage & Programming
View previous topic :: View next topic  
Author Message
Dominique_71
Veteran
Veteran


Joined: 17 Aug 2005
Posts: 1484
Location: Switzerland (Romandie)

PostPosted: Tue Mar 12, 2013 7:52 pm    Post subject: web site, php and css Reply with quote

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.
_________________
[[[ To any NSA and FBI agents reading that text: please consider ]]]
[[[ whether defending the US Constitution against all enemies, ]]]
[[[ foreign or domestic, requires you to follow Snowden's example. ]]]
Back to top
View user's profile Send private message
Ant P.
Advocate
Advocate


Joined: 18 Apr 2009
Posts: 2208
Location: UK

PostPosted: Wed Mar 13, 2013 5:16 pm    Post subject: Reply with quote

You can't block Ctrl++/Ctrl+− unless the user specifically sets it to only zoom text.
Back to top
View user's profile Send private message
Dominique_71
Veteran
Veteran


Joined: 17 Aug 2005
Posts: 1484
Location: Switzerland (Romandie)

PostPosted: Wed Mar 13, 2013 8:59 pm    Post subject: Reply with quote

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.
_________________
[[[ To any NSA and FBI agents reading that text: please consider ]]]
[[[ whether defending the US Constitution against all enemies, ]]]
[[[ foreign or domestic, requires you to follow Snowden's example. ]]]
Back to top
View user's profile Send private message
Ant P.
Advocate
Advocate


Joined: 18 Apr 2009
Posts: 2208
Location: UK

PostPosted: Wed Mar 13, 2013 11:22 pm    Post subject: Reply with quote

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
View user's profile Send private message
Dominique_71
Veteran
Veteran


Joined: 17 Aug 2005
Posts: 1484
Location: Switzerland (Romandie)

PostPosted: Thu Mar 14, 2013 1:04 am    Post subject: Reply with quote

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.
_________________
[[[ To any NSA and FBI agents reading that text: please consider ]]]
[[[ whether defending the US Constitution against all enemies, ]]]
[[[ foreign or domestic, requires you to follow Snowden's example. ]]]
Back to top
View user's profile Send private message
dman777
l33t
l33t


Joined: 10 Jan 2007
Posts: 737

PostPosted: Thu Mar 14, 2013 1:17 am    Post subject: Reply with quote

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
View user's profile Send private message
Ant P.
Advocate
Advocate


Joined: 18 Apr 2009
Posts: 2208
Location: UK

PostPosted: Thu Mar 14, 2013 3:00 am    Post subject: Reply with quote

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
View user's profile Send private message
Dominique_71
Veteran
Veteran


Joined: 17 Aug 2005
Posts: 1484
Location: Switzerland (Romandie)

PostPosted: Thu Mar 14, 2013 11:28 am    Post subject: Reply with quote

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.
_________________
[[[ To any NSA and FBI agents reading that text: please consider ]]]
[[[ whether defending the US Constitution against all enemies, ]]]
[[[ foreign or domestic, requires you to follow Snowden's example. ]]]
Back to top
View user's profile Send private message
Dominique_71
Veteran
Veteran


Joined: 17 Aug 2005
Posts: 1484
Location: Switzerland (Romandie)

PostPosted: Sat Mar 16, 2013 5:32 pm    Post subject: Reply with quote

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.
_________________
[[[ To any NSA and FBI agents reading that text: please consider ]]]
[[[ whether defending the US Constitution against all enemies, ]]]
[[[ foreign or domestic, requires you to follow Snowden's example. ]]]
Back to top
View user's profile Send private message
Display posts from previous:   
Reply to topic    Gentoo Forums Forum Index Portage & Programming All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum