I added runat="server" to one of the div in my .ascx file.
<div id="logo" runat="server">
This changes the final HTML to below. Notice how the mainheader1 was inserted
<div id="mainheader1_logo">
I read this question https://stackoverflow.com/a/897790/886569 and made this change to the html
<div id="logo" class="logo" runat="server">
This causes the final HTML to be
<div id="mainheader1_logo" class="logo">
In my CSS the logo class is defined like this:
#logo
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
How can i fix this issue in a safe way? I don't want to add the component name in my CSS file as that seems dirty. Also would not want to change the # to a . because that might break lots of other things.
Update your css as below. CSS Selector [id$="logo"] will select every element whose id ends with "logo".
[id$="logo"]
{
position:absolute;
left:0px;
top:78px;
width:396px;
height:50px;
}
Related
I have a image tag like,
<img src="image/path/goes/here/random_id">
and the random_id is changing randomly. How to catch this tag from an external css file without using id,class or any other attribute.
You can use path contains selector on src attribute
acording to this
https://www.w3schools.com/cssref/sel_attr_contain.asp
img[src*="image/path/goes/here/"]{
border:1px solid red;
min-width:50px;
min-height:50px;
}
<img src="image/path/goes/here/123">
<img src="image/path/goes/here/321">
<img src="this/is/another/path/321">
I don't know what you are aiming to . However this is the solution you asked for (I suggest to give a style using jQuery selector as it seems you are using dynamic IDs .
img[src="hello/world/123"]{
border:10px solid red;
}
<img src="hello/world/123">
You can put it in a div tag and the reference it as a child.
<div>
<img src="your_path/path">
</div>
Then in CSS..
div:first-child {
do css here...
}
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
I need to target multiple elements and classes under a specific ID. NOTE: I must specify the ID. The classes will be used again with other IDs
#block-views-now-playing2-block .poster1 img
{
width:auto;
height:400px;
}
#block-views-now-playing2-block .poster1 div
{
width:263px;
height:400px;
overflow:hidden;
}
In this example the img element accepts the css. The div does not and the CSS is ignored. Why?
HTML:
<div class="block block-views contextual-links-region last even" id="block-views-now-playing2-block">
<div class="field-content poster1">
<img src="http://mysite/myposter.jpg">
</div>
</div>
Adding an ID in front to your CSS selector will not affect, how things are selected, but rather where. When you start with #block-views-now-playing2-block you are limiting the scope of what you're looking for to anything contained inside of #block-views-now-playing2-block
So #block-views-now-playing2-block .poster1 img reads: "Find any img that exists inside of and element with class poster1 which exists inside of an element with the ID block-views-now-playing2-block".
It works the same way for you div example.
For the CSS to find something the html would need to be structured something like this:
<div id="block-views-now-playing2-block">
<div class="poster1">
<img/>
</div>
</div>
If you were to change the CSS to #block-views-now-playing2-block.poster1 img (notice the missing space). The CSS would read: "Any img inside of an element that has an ID of block-views-now-playing2-block.poster1 and a class of poster1" The css now would only find something if the HTML were structured similar to:
<div id="block-views-now-playing2-block" class="poster1">
<div>
<img/>
</div>
</div>
(Notice the class moved up one level with the ID)
But really I can only guess why it isn't working for you without seeing your HTML.
i've searched around and seen some examples of how this is done, but i don't really get it and tried all methods but none worked, so i would like to ask if anyone can show me, for my code below, how can i affect the tournytitle when the img is hovered?
<div id="upevents" class="righty">
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 2 Hat</div>
<div style="color: #888888; font-size: 10px;">17 . 12 . 2011</div>
</div>
<img src="/images/tourny/jomjom2.jpg" />
</div>
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 1 Hat</div>
<div style="color: #888888; font-size: 10px;">12 . 12 . 2011</div>
</div>
<img src="/images/tourny/bane5.jpg" />
</div>
</div>
how should i write my css code for this?
i tried something like
.upevents img:hover + #tournytitle { background-color: yellow; }
but doesn't seem to work.
help much apperciated
As mentioned, your .tournytitle class must be a child of the img your trying to roll over. Your code .upevents img:hover + #tournytitle { background-color: yellow; } is certainly close, you just need to figure out how to comply to the above rule. With this your saying that .tournytitle is an adjacent-child of img, which is not the case in your given code. Also, your class and id symbols are incorrect, watch out for that.
I managed to get your code working by switching .tournytitle and img so that the class is now the adjacent-sibling - http://jsfiddle.net/gmwjw/1/ - I realize this may not be the design your looking for, but its a start.
This may be helpful to you - http://meyerweb.com/eric/articles/webrev/200007a.html
The .tourneytitle must be a child of the img element for you to achieve this. This fiddle shows the way you can reveal your image by hovering over your .tournytitle: http://jsfiddle.net/fWxH3/203/
To get what you want, you would need to change your HTML so that somehow your tournytitle div is a child of your img tag. Maybe you can use span's inside of your image tag instead of using div's for everything.
Let's say i have an iframe with the page 2.htm set as the src.
<iframe src="2.html"></iframe>
So this shows the 2.html. But 2.html has a div with the id 'within'. I want to only display the contents of 'within'.
How would i do this?
This is the CSS and html code to accomplish the task:
<style>
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
</style>
<div id="outerdiv">
<iframe src="2.html" id="inneriframe" scrolling="no"></iframe>
</div>
Try this out: http://jsfiddle.net/57MRn/
How does this work
The iframe is moved up within the outerdiv until only the within div is shown.