I am managing my school's website (mpkosis28.com) with NO prior programming experiences. If any, I'm just a 15yo computer technician.
I made a subdomain: http://28cup.mpkosis.com/index.html (yes, I really need to learn php to get rid of html files. And some graphic designing as well.) and I need to put an image behind the content. Something like twitter's background which is shown around the twitter feed.
I can't copy my css code, because I am confused with the formatting here, but here it is.
EDIT: putting a background on the white bars on the side. Like a floating page container with an image behind it.
You probably just need to add the image to the body tag, like this:
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: url(path/to/image/file.jpg);
}
The white bars is just a default page background. Use the above code in your css and make the path correct and it will work
Related
I'm having a weird problem with a section of my site.
on an h2 tag, I want to use the CSS ellipsis property
whenever the text is overflowing the screen size.
Now, this is a repetitive section I am using on this page - and the only difference is the font applied to the h2 tag - so I know the CSS style I am using is good
(overflow: hidden, text-overflow: ellipsis, and etc...)
Can anyone help me find what is the problem?
here is a screenshot of the section that is working the right way:
here is a screenshot of the section that is not working the right way
You can visit the site at -
https://www.hacollective.com/
and test in mobile size in order to see the difference.
The id of the part with the h2 problem is "col-221542828"
Thanks in advance,
Shahar.
The problem with missing ellipse points lies in the font specified for this h2 - font-family: tzur,sans-serif!important.
Here:
.font-tzur {
font-family: tzur,sans-serif!important;
}
Which are loaded from the font-load-tzur.css file.
Check the correctness of loading this font tzur.
For example - If you put a different font, the ellipse points will appear.
Studying webpages to learn html/css/javascript
Got confused when I thought that most images were linked to or loaded locally... It seems like on spotify their search button is using something I don't understand to load the magnifying glass.
.spoticon-search-32:before {
content: "\f141";
font-size: 32px;
}
If I edit content the picture of the search button goes away so I know its the content that is responsible for the picture. But where the hell is it loading it from? it's not a .png or .jpg extension either...
They are using a font that contains those icons. I don't know which one they are using but here is another example:
http://astronautweb.co/snippet/font-awesome/
element:before {
content: "\f000";
font-family: FontAwesome;
This loads the icon. Now you only have to apply the css selector on a span or i or something else.
It is something called an icon and it is basically a font which is why a size can be specified to make it larger or smaller. I suggest looking at Font Awesome to get a better understanding.
I need a little assistance with a couple of things.
1) Please click
here
There you will see a Subscribe Now Box. I want this box to move up on the Navigation Bar just beside that Contact Link. But when I move it up, it goes behind that navigation bar and hides itself behind it. I have tried
margin-top:-60px;
then
position:relative;
top:-60px;
None of the both work. Kindly tell me how can I move it up without getting it behind the navigation bar?
Second thing is that you may note that the font of the website looks all torned. How can I fix it? The font that was used in PSD was "Tw Cen MT" but it looks no where near in the web.
Please guide. Any help would be highly appreciated.
Thanks,
Ahmad
Add this to your CSS, then you can move it up with position:relative; top:-60px;
#search-subscribe-area .content-area {
overflow: inherit;
}
The font is your CSS is 'Source Sans Pro';
Try to use Fonts made for the Web
https://www.google.com/fonts
Here you can go and browse for the fonts you like, and tell the designer he should look for fonts there, you can imprt then to your Website using css and you can download it via .zip so the designer can use the same Font in Photoshop as you see it in the Web
I'm a very newbie to CSS/HTML and I can't seem to fix an issue I have.
This is the website I'm developing http://sahsahashas.tk
Now, when I preview website over Dreamweaver in chrome this is how navigation bar looks (the way its supposed to)
http://i.imgur.com/4dw1j6K.jpg (it is actually a picture, not a background color :)).
I know it looks almost the same but it really annoys me. Also, I know my CSS code is a mess but again, I'm a newbie.
.navbar {
width: 708px;
height: 61px;
margin: auto;
background: url(navbarr.jpg);
font: normal normal 700 1em/4em Arial,sans-serif;
z-index: 2;
}
You have a typo: background: url(navbarr.jpg); should be navbar.jpg or your image navbarr.jpg doesn't exist on the server. There is an image called navbar.jpg. Hope this helps.
Look at css in my firebug: http://i.imgur.com/Vdi0hfZ.png
to specify the image as background you should not use only background,
I will suggest you to specify the background-image attribute and image name with valid path should in single(or double) quoted..
background-image: url('navbarr.jpg');
I would like to prevent the web page rendering like this
Fill the whole background with #51a025
Tile images/bg.png
Tile content_bg.png
Those steps can be quite visibly distracting, and depending on the browser/machine can take a while
So my question is, "How can I prevent that effect?"
The content is generated from php and mysql so I'm guessing the drawing is linked to the database interaction.
Here's the CSS
body {
font-size: 75.5%; /* Resets 1em to 10px */
font-family: Tahoma, Arial, Sans-Serif;
background:#51a025 url('images/bg.png') repeat-x 0 0;
color: #000;
text-align: center;
}
#page {
background: url('images/content_bg.png') repeat-y 0 0;
text-align: left;
}
How big are bg.png and content_bg.png? If the files are large then the delay you're seeing is likely just how long they're taking to download.
You could maybe try OptiPNG or a similar tool to get the file size down.
You cannot force one css rule to evaluate before another. Generally, they are evaluated in the order they are placed in the file/tag. CSS is really, really, really fast, even at it's slowest it loads faster than the human eye can detect. So my answer is you can't prevent this effect, but it doesn't matter because CSS is super fast.
The content is generated from php and
mysql so I'm guessing the drawing is
linked to the database interaction.
Nope, the content is generated server-side and delivered to your browser as HTML. The drawing is done purely by the browser (client-side).